在 AI 辅助写前端代码的场景里，过去的协作模式是 “按图施工”：设计师出效果图，直接丢给 AI，让 AI 照着视觉图生成页面代码，这套方式容易出现细节跑偏、样式漂移、交互不可复现；而 “按契约施工” 的核心思路，是把视觉、交互、边界条件提前转化成结构化契约（规范、Schema、验收断言、组件约束），AI 不再自由发挥，只在契约划定的范围内产出代码，前端工程师的工作从逐行改 AI 产出，变成定义、维护、消费这套规则契约，大幅降低反复调试成本。所谓规则消费，就是工程师不再每次都重新写一大段 Prompt，而是复用沉淀好的契约规则集，交给 AI 执行。
两种施工模式对比对照表
| 项目 | 按图施工（旧模式） | 按契约施工（新模式） |
|---|---|---|
| 输入源 | 设计稿截图、Figma 图片 | 设计稿 + 结构化契约（样式规则、交互规则、校验规则） |
| AI 自由度 | 高，AI 自主解读视觉，主观发挥空间大 | 低，所有产出必须满足契约约束 |
| 验收方式 | 人工肉眼对比截图 | 代码自动校验 + 视觉 Diff 断言 + 单元测试 |
| 工程师角色 | 纠错者、修图工 | 契约定义者、规则维护者、规则消费者 |
| 稳定性 | 差，同一张图多次生成结果不一致 | 可控，同一契约多次生成结果收敛 |
| 适合场景 | 快速 Demo、概念验证 | 生产组件、业务页面、组件库迭代 |
一份前端契约通常包含的规则清单
- 样式契约：色值、圆角、阴影、字号、行高、间距 Token，禁止 AI 写硬编码色值、随意改间距
- 布局契约：弹性 / Grid 规则、响应式断点规则、最大最小宽高约束
- 交互契约：hover、disabled、loading、报错态的表现、防抖节流规则
- 代码规范契约：命名规范、组件拆分粒度、CSS 方案（Tailwind/Styled）、禁止 DOM 操作写法
- 验收契约：自动化断言，比如 “按钮高度必须 40px”、“弹窗遮罩层级高于业务内容”
- 异常契约：空数据、加载中、报错兜底 UI 规则
完整的 “规则消费” 工作流
- 契约沉淀：前端工程师把组件库、设计规范、历史踩坑点整理成可复用的规则集（契约），存入知识库或者 Prompt 模板库
- 任务下发：给到 AI 的指令不再只有一张图，而是
- AI 生成代码：AI 读取契约约束，输出符合规则的前端代码
- 契约校验：脚本自动跑校验规则，检查是否违反 Token、布局、交互约定，不通过直接返回重生成
- 人工抽检：工程师只复核校验通过的产物，少量调整后合并入库
- 反馈回流：本次新发现的漏洞、边界 case，补充回契约，持续迭代规则集，供后续消费复用
【设计稿 + 绑定契约 ID】，要求 AI 遵循该契约输出
优势与落地痛点
✅ 优势
- 消除 AI 理解设计稿的不确定性，解决 “每次生成长得不一样”
- 前端工程师把经验固化成规则，一次编写、反复消费，减少重复沟通
- 产出物统一，团队多个人、不同模型生成的组件风格对齐，利于维护
- 契约前期建设成本高，小项目会觉得繁琐，适合长期迭代的产品和组件库
- 契约不能无限细化，过度写死规则会扼杀合理的局部创新
- 校验脚本本身需要维护，规则变了，校验断言也要同步更新
⚠️ 痛点
常见误区澄清
- 误区：按契约施工就是取消设计稿。纠正：设计稿依然存在，设计稿是参考，契约是硬性约束标准。
- 误区：契约就是一段很长的固定 Prompt。纠正：Prompt 只是载体，契约是结构化、可版本管理、可自动化校验的规则体系。
- 误区：有契约之后前端工程师不用看代码了。纠正：工程师核心工作变成契约治理、规则更新、风险抽检，不是完全免检。
【相关 FAQ】
问题 1：前端与 AI 工程师的规则消费，从 “按图施工” 转向 “按契约施工”，这里的规则消费是什么含义？
回答 1：前端与 AI 工程师的规则消费，指工程师提前把 UI 规范、交互约束、验收标准沉淀成可复用契约，后续做页面开发时直接调用、消费这套规则，约束 AI 代码生成，而不是每次靠图片让 AI 自由解读。
问题 2：前端 AI 开发里 “按图施工” 和 “按契约施工” 最大的差别是什么？
回答 2：按图施工以图片为核心输入，AI 自主解读视觉，结果不稳定；按契约施工以结构化规则契约为硬性约束，AI 在约束内产出，配套自动化校验，保证多轮生成的一致性。
问题 3：前端团队落地按契约施工的 AI 开发模式，适合什么样的项目？
回答 3：按契约施工更适合长期迭代、有组件库、需要多人协作、对 UI 一致性要求高的业务项目；一次性临时 Demo、快速原型验证场景，继续使用轻量化的按图施工方式更高效。
【参考资料】
[2026-10-20]（AI 前端代码生成的契约工程）掘金
[2026-09-14]（Design Token + 代码断言约束 AI 生成）HuggingFace Blog
[2026-08-22]（前端工程师如何治理 AI 生成代码）阿里云百炼开发者社区
[2026-07-01]（Figma 到代码：从 Prompt 驱动到契约驱动）InfoQ
[2026-06-10]（AI 辅助前端的规则沉淀实践）语雀技术专栏
【免责声明】
本文为前端 AI 工程化思路科普，“按契约施工” 是行业实践思路，不是强制开发标准；契约的复杂度、校验方案需要结合团队规模、项目类型取舍。AI 生成代码依然需要人工复核、上线测试，不能仅依靠契约自动化校验直接上线生产。本文不构成团队落地规范。