Figma Specs 配合 Codex 生成 UI：把设计意图交付成可验收页面的 6 步教程

admin 设计创意 18小时前

48 0

刚发布的 Figma Specs 给了设计稿与 Codex 之间一个更具体的交接物：不只给画面链接，还把问题、决策、状态与验收写成可读的规格。下面以“本地活动报名页”为虚构示例，提供一套可以照着做的 6 步方法。我们没有声称亲测到每个账号的新功能；若你的 Figma 尚未开放 Specs，先在项目仓库用 Markdown 运行同一套内容模板。

Figma Specs 将规格文档与画布并列显示的官方界面 — 官方画面说明 Specs 是放在画布旁的协作资料，而不是一张不可编辑的交接截图。

适用场景与准备

适合设计已明确、但前端实现常丢失状态与文案的团队；尤其是报名、预约、内容编辑等有条件分支的页面。准备一份可编辑的 Figma 文件、现有前端仓库、设计 token 或组件库、匿名化样例内容，以及能运行的浏览器测试环境。Specs 在付费计划逐步开放；通过 Figma MCP 交给 Codex 前，还需确认连接已获授权。没有连接时，把同样的 Markdown 复制进仓库，不要假装代理已经读取画布。

第 1 步：先写“问题与完成标准”，再画首页

示例任务：用户在手机上查看周末设计工作坊并提交报名。Spec 首段只回答谁要完成什么，以及怎样算完成；避免“高级感”“更有冲击力”这类无法测试的词。下面的模板可以直接放进 Specs 或保存为项目内的 EVENT_SIGNUP_SPEC.md。

# 活动报名页｜设计意图
用户目标：在 60 秒内看清时间、地点、票价与余位，并完成报名。
业务目标：减少无效提交；费用与取消规则必须在提交前可见。
范围：活动详情、报名表、成功/失败反馈；不含支付与会员系统。
验收：390/768/1440px 无横向溢出；键盘可操作；提交失败不丢输入。
待确认：余位接口、邮箱验证规则、隐私文案负责人。

Figma Specs 通过 Hex 连接器分析表格并留下评论的官方示例 — 官方示例说明外部资料可进入 Spec 的讨论语境；我们仍要标记哪些数据已核验。

第 2 步：把画框、状态与文案绑定在 Spec 上

在 Figma Design 或 FigJam 点击 Specs 图标，或按 D 新建；也可把现有 Markdown 拖到画布。正文嵌入活动页画框，并为默认、名额已满、提交中、成功和错误五种状态分别写可见文案。每一项列出触发条件、用户看到什么、下一步可做什么。不要只写“参见设计稿”，因为静态稿不会告诉实现者网络失败时该保留哪些字段。

状态：名额已满｜条件：remainingSeats = 0
标题：本场报名已满
主操作：查看其他场次
禁止：显示仍可点击的“立即报名”按钮
状态：提交失败｜条件：POST 返回错误或超时
提示：报名未完成，请稍后重试；已填写内容会保留
主操作：重试提交｜辅助操作：返回活动详情

Figma Specs 中组件规范与画布元素并列的官方示例 — 组件规范应写明何时使用、何时不要使用，不只是贴一个按钮样式。

第 3 步：给 Codex 一个有限、可核验的实现任务

Figma 官方说明，接入 MCP 的编码代理可以读取 Spec 与关联画面；也可以复制 Spec 链接放入提示词。OpenAI 的前端指南强调提供现有设计系统、真实内容、参考画面与明确约束。先请 Codex 只读审计，再允许写入，能把“它理解了什么”留在实施之前。

第一轮（只读）：读取项目 AGENTS.md、现有报名页组件、设计 token 和测试；
若已接入 Figma MCP，读取此 Spec 与关联画框：[粘贴你的 Spec 链接]。
列出需要实现的五个状态、当前仓库已有的组件和缺失的接口。
只报告最小改动方案，不修改文件，不编造已存在的服务端能力。

第二轮（实现）：仅修改报名页组件、其样式和直接相关测试。
复用现有 token、表单组件和文案；先用显式标注的 mock 余位数据完成闭环。
不要接入真实支付，不新增 UI 库，不改全站路由。
实现“默认/已满/提交中/成功/失败”，错误时保留已填内容。
交付修改文件清单、可运行命令、未解决事项和截图证据。

Figma Specs 在同一画布上并列架构说明与流程图的官方界面 — 技术 Spec 要和流程、异常分支一起审阅，避免只有视觉描述。

第 4 步：用代码图层比较交互，而不是只挑一张首屏

如果账号已获得 code layers beta，可把设计转成可交互代码层，或导入支持的轻量原型，在同一画布并排比较“单页表单”和“分步报名”两种方案。记录选择理由：哪个更容易说明票价与取消条件？哪个在手机上更不易误触？最终前端仍以仓库测试结果为准；代码图层是协作评审材料，不自动等于生产实现。

Figma 官方代码图层展示可运行 UI 与对应代码 — 同一界面里看操作结果与代码上下文，比只对静态截图更容易发现缺失状态。

第 5 步：让 Codex 给出验收证据

先固定样例：有余位、无余位、接口超时、重复点击四组。要求在 390、768、1440px 检查内容不遮挡，并用键盘完整走一遍表单。再检查金额、时间和取消说明是否在提交前出现。不要把“运行成功”当作“用户能完成任务”。

验收轮提示词：
1. 运行现有测试与构建，报告真实结果，不要把跳过写成通过。
2. 在 390/768/1440px 截图并列出溢出、遮挡、焦点问题。
3. 模拟余位为 0、提交超时、重复点击；逐项记录页面文案与输入保留情况。
4. 对照 Spec 列出差异表：要求、实现位置、证据、未通过项。
5. 除明确授权的缺陷修复外，不自行扩大范围。