设计师与前端协作
设计稿完成后如何变成上线代码？本页上半部分是 swift-web 的标准多轨流程（照着做），下半部分是业界正在实践的前沿串联玩法（开阔思路）。核心事实只有一个：无论稿子来自 Figma、Claude Design 还是 Open Design，终点都是 Claude Code 用框架组件把它落成 Nuxt 代码——因为稿与码共享同一套设计语言，交接损耗趋近于零。
标准流程：多轨汇合
Figma 轨交接（设计师侧 3 步）：
- 设计文件尽量规范：Auto Layout、组件实例、颜色绑定 Variables——这些直接决定 AI 读稿的准确率；
- 把文件或具体 frame 的链接发给前端（对方需要有该文件的查看权限）；
- 前端在 Claude Code 里按稿生成实现，部署预览后回给你走查。改稿意见可以直接在 Figma 里标注（前端会重新读取），也可以让前端把开发中的界面推回 Figma 画布（code-to-canvas，见 Figma 轨说明）供你直接编辑。
Claude Design 轨交接（设计师侧 3 步）：
- 稿件定稿，文件名用英文；
- 组织内共享项目给前端（或导出交接包）；
- 前端经 handoff 把稿子交给 Claude Code 实现。Claude Design 的稿本身就是基于框架组件形态生成的，落地映射几乎是一对一。
Open Design 轨交接（设计师侧 3 步）：
- 稿件定稿（文件名用英文），从项目导出单文件 HTML（或直接给前端项目文件夹路径——它本地存储、就是一个文件夹）；
- 把 HTML 连同必要素材发给前端；
- 前端把 HTML 交给 Claude Code 实现。稿子同样基于框架 token 与组件形态生成，落地映射几乎一对一。Open Design 无云端共享，评审用导出的 HTML / 截图进行。
共同的走查环节：前端部署预览环境后，设计师对照原稿走查。因为双方说的是同一套 token 语言，反馈可以非常精确——「这里应该是 --muted-foreground 而不是正文色」比「这个灰不对」高效得多（当然，说「这个灰不对」也没问题，只是前者一步到位）。
交付物约定
| 交付物 | 什么时候需要 | 说明 |
|---|---|---|
| 设计稿本体 | 每次 | Figma 文件链接 / Claude Design 项目共享 / Open Design 导出 HTML |
| 品牌 token 清单 | 新品牌 / 换色项目 | 定稿 token 值列表（15～25 项），是代码 rebrand 与生成品牌设计系统的唯一输入，详见配色工作流 |
| 真实素材 | 涉及素材的页面 | logo / 封面 / 运营图源文件；占位图出的稿理解为「结构定稿」 |
| 交互说明 | 有非常规交互时 | 一两句话即可（hover 展开、滚动吸顶等），常规交互组件已内置 |
业界前沿：把三件工具串成一条流水线
以下是 2026 年设计-开发社区正在实践的组合玩法，供参考与选用——它们不是「必须这么做」，而是「已经有人这么做并且效果显著」。我们的双轨基建让这些玩法都可以直接尝试。
玩法一：并行迭代环（Figma ⇄ Claude Code） 设计与开发不再串行等待：前端从 Figma 稿生成首版代码的同时，设计师继续深化；开发中的真实界面随时推回 Figma 画布，设计师在图层上直接探索变体，前端再取回。设计和代码在一条环路上同时演进，实践团队报告反馈周期从数天降到数小时、首版还原度显著提升。
玩法二：三段接力（Claude Design → Figma → Claude Code） 用 Claude Design 十分钟出三个方向 → 选定的方向导出、在 Figma 里精修打磨（利用 Figma 的精确控制和团队评审生态）→ 定稿走 Figma MCP 交给 Claude Code。适合「方向未定、又要求精修质量」的项目：探索用 AI 的速度，打磨用 Figma 的精度。
玩法三：代码优先反哺设计（Code-first） 需求简单明确时，前端直接让 Claude Code 按组件库和 token 实现首版 → 推回 Figma 由设计师调优视觉 → 改动读回代码。适合运营页、活动页这类结构套路化的场景——设计师把时间花在「让它好看」而不是「从零画它」。
玩法四：组件级同源（Code Connect，规划中）
把 Figma 组件与代码组件显式挂钩后，AI 生成代码时直接复用真实组件（SwButton、SwCarousel……）而非重新生成相似样式。设计系统的一致性从「约定」升级为「机制」。依赖 Figma 计划支持，我们列入规划。
选型建议：从玩法一开始——它对设计师的改变最小（照常用 Figma），收益立竿见影；团队对 AI 工具熟悉后，其余玩法自然会长出来。
相关链接
- Figma × AI 直通代码 — Figma 轨的完整说明与前端接入
- Claude Design 十分钟上手 — Claude Design 轨的出稿教程
- 认识 Open Design — Open Design 轨的接入与出稿
- swift-web 设计语言 — 交付物「品牌 token 清单」的来源
- 规范与治理 — 协作中的纪律与边界