From Figma to Claude Code and Back

How I AI (Claire Vo) · 2026-03-12 · Original

来源: How I AI (Claire Vo) | 嘉宾: Gui Seiz (Designer) & Alex Kern (Engineer), Figma 日期: 2026-03-11 原文: From Figma to Claude Code and back YouTube: I5X4_mYoiM8 | 时长: 40:21 精读日期: 2026-03-12

一句话总结

Figma 内部设计师和工程师展示了用 MCP 实现的双向工作流：代码 → Figma → 代码，设计和工程不再是线性瀑布交接，而是通过 Figma MCP 形成实时双向循环。

核心内容

旧工作流已死：线性瀑布的终结

传统流程是线性递增保真度：草图 → 线框 → 高保真设计 → 交付工程 → 开发。这套流程的前提是”代码很贵”——所以尽量在设计阶段把所有细节敲定，减少工程返工。

AI 打破了这个假设：代码不再贵了。在代码里 riff 和在设计里 riff 一样便宜。所以 Figma 团队发现自己”几乎每天都在重新发明工作流”。

Demo 1：代码 → Figma（Codex + Figma MCP）

场景：本地跑着一个 web app，但 Figma 文件早就跟代码脱节了（设计 drift 是所有团队的通病）。

操作：在 Codex 中连接 Figma MCP → 一句话”send the budget allocation page to Figma” → MCP 自动把页面渲染成 Figma 可编辑组件。

关键优势： - 不是截图 / PNG → 是可编辑的 Figma 组件，可以拖拽、改颜色、调布局 - 多人协作：整个设计团队可以同时编辑（Figma 的多人协作能力远超 IDE 终端） - 精确操作：拖个元素改个颜色，比用文字 prompt 描述高效得多（“没人想用 prompt 去描述一个 hex 色值”）

Demo 2：Figma → 代码（Claude Code + Figma MCP）

场景：设计师在 Figma 中修改了布局和配色，需要同步回代码。

操作：复制 Figma 组件 URL → Claude Code 中说”bring the changes from this component into my codebase” → MCP 读取 Figma 结构化数据 → 自动生成 patch 应用到代码。

关键细节： - 不是截图识别（vision model），而是结构化数据到结构化数据的翻译，精度更高 - 工程师甚至不需要开浏览器看效果——patch 完直接准确

Demo 3：代码多状态 → Figma 批量导出

场景：注册流程有 5 个状态（输入邮箱、输入密码、错误提示、成功等），代码里全有，但 Figma 里一个都没有。

操作：“send all five states of the signup flow to Figma” → Agent 读代码理解 5 个状态 → 一个一个导入 Figma → 设计师得到 5 个并排的可编辑组件。

Demo 4：`/ship` Skill — 工程师的自动化预检

Alex 自己写了一个 /ship skill，解决”推代码前的机械重复工作”：

预检: 检查 commit 内容是否合理（不要提交无关文件、credentials 等）
Lint: 自动运行 lint 和 Bazel 构建
推送 + CI 监控: push 后自动监控 BuildKite CI
自动修复: lint 失败就自动再提一个 commit 修复（最多 5 次，1 小时超时）
安全规则: 永远不 force push、不提交 credentials

用法：代码改好 → /ship → 走人。

Claire 的洞察：每个团队都有一个 wiki 页面写着”PR 前的 checklist”——现在应该把所有 SOP 都变成 skill。

设计师角色的转变：上游和下游的”奢侈”

Gui 的核心观察——AI 让设计师的工作向两端转移：

上游（规划阶段）：以前赶工压缩了思考时间，现在可以”indulge in possibilities”，更多时间探索方向
下游（craft 阶段）：以前只能”hope engineer gets my intention”，现在可以亲自打磨每个细节
中间的机械执行被 AI 消灭了

Gui 称之为”decadent moment”——前所未有的奢侈，既可以广度探索（同时试多个方案），又可以深度打磨（不用因为工程成本而妥协）。

同步 vs 异步的重新平衡

Alex 默认异步工作，同时开 2-5 个 Claude Code 实例处理不同任务
但 Gui 认为同步协作被 AI 工具重新激活了——大家在 Figma 里同时 riff、看到彼此的光标飞来飞去，“momentum begets momentum”
类比：从”USB 交接文件”回到了”一群人围着白板画”，但工具更强了

金句摘录

“AI basically collapsed that and it’s just as cheap to riff in code as it is to riff in design.” — Gui
“I spend quite a lot of my time just sitting here inside of my terminal now. I often have two, three, up to five maybe Claude Code instances running all at the same time.” — Alex
“We’re in this almost decadent moment in time… we can spend a lot more time in the planning stage because we know the building will happen a lot quicker.” — Gui
“Momentum begets momentum. Having the team together riffing and yes-anding is really great.” — Gui
“Every engineering team should go through their onboarding wiki and pull every page out into a skill.” — Claire
“It turns a lot of these processes that would otherwise be based on best intentions into something that can be fully automated.” — Alex

Justin 视角

1. 设计 × 代码双向流 = Agent 协作的微缩版

Figma MCP 的 code → design → code 循环，本质上是两个 Agent（设计工具 + 代码工具）通过结构化协议互操作。这跟 OPC 在做的”Agent 互调协议”是同一个思路——不是截图传来传去，而是结构化数据的双向翻译。Richard 的 OneBot/Slock 协议设计经验在这个方向上非常对口。

2. “SOP → Skill” 的范式转移

Claire 提到的”把所有 wiki SOP 变成 skill”——这不只是工程团队的事。投资团队也有大量 SOP（DD checklist、投委会材料模板、竞品分析框架）。把这些变成 Claude Code skill，能力提升会非常显著。值得在红杉内部 AI 培训中重点讲。

3. Alex 的 5 个 Claude Code 实例并行

Figma 工程师已经常态化跑 5 个 Claude Code 实例做不同任务。这种”Agent 并行处理”的模式会越来越主流——跟 OpenClaw 的 multi-agent 架构方向一致。

4. “Decadent moment” 对投资判断的含义

设计成本和工程成本同时暴跌 → 更多 features 能上线、更高的产品 craft → 小团队能做出大公司级别的产品体验。这进一步验证了 OPC “超级个体 / 一人公司”的核心投资论点。

5. Portfolio 关联

Figma MCP 让设计师和工程师的协作方式发生质变 → 对 Lovart（AI 设计）可能有参考价值
Skill 生态 → 钟经纬的水产市场 / 能力商店方向进一步验证