3 posts tagged with "Figma"

Figma 官方远程 MCP 让 Claude Code 直接读/写设计稿，但 OAuth 流程有两个非显而易见的坑。

1. 接入前提：Figma Professional/Organization/Enterprise 付费计划，免费的不支持官方 MCP。
2. 一行接入：claude mcp add --transport http --scope user figma https://mcp.figma.com/mcp，写入 ~/.claude.json。
3. OAuth 第一坑：/mcp 弹窗 不显示待认证的 HTTP server，诊断靠 claude mcp list。
4. OAuth 第二坑：claude mcp login 需要交互式 TTY，Claude Code 内 Bash 跑会失败。
5. 解决路径：自己用终端跑 claude mcp login figma，浏览器授权完再回 Claude Code。
6. 验证方式：claude mcp get figma 应返回 Status: ✔ Connected。
7. 卸载命令：claude mcp remove figma -s user。

把 Figma 设计稿当 spec 用，AI 写页面才有收敛条件——这套做法可以叫 DDD（Design-Driven Development）。

1. spec 分两层：文字管行为，设计稿管视觉，markdown 写不出间距是 32 还是 40。
2. 给 AI 一个停止条件：截图对比设计稿，视觉差异就是可判定的验收标准。
3. 协作契约：按 frame 分工，人和 agent 的接口都是设计稿，不是口头描述。
4. 省 token：反复 prompt 试布局，比在 Figma 里拖两下贵一个量级。
5. 改得动：需求变更直接改设计稿，不用重写一遍 prompt 再全量重生成。
6. 例外：单人开发、无协作、token 预算充足，直接 coding 也没问题。
7. 短板：Figma 画布里那个 AI 现在还偏弱，内置模型有待优化。