最近几个月，开发者群里经常看到有人分享一个新玩法：把 Figma 设计稿的链接丢给 Claude，几秒钟后就能拿到可以直接用的代码。
听起来很玄乎，但这确实是真实发生的事情。我看到日本 Qiita 上有开发者写了完整的实践案例，国内也有团队开始用这套流程做项目。所以花了点时间研究了一下，想和大家聊聊这个东西到底是怎么回事。
工作原理其实挺简单
Anthropic 搞了个叫 Model Context Protocol（MCP）的东西，简单说就是让 AI 能连接外部工具。Figma 基于这个协议做了个本地服务器，跑在你电脑上（127.0.0.1:3845），把设计数据喂给 Claude。
重点是数据不走网络，全在本地通信。这对有安全要求的公司来说挺重要的。
Claude 拿到的不是截图，而是结构化的设计信息：图层怎么嵌套的、用了什么组件、间距是多少、设计 token 怎么定义的。所以它能理解设计意图，而不是瞎猜。
配置很快，五分钟搞定
第一步：打开 Figma Desktop
左上角菜单找到设置，启用「Dev Mode MCP 服务器」。就这样，本地服务器就起来了。
第二步：让 Claude 连上这个服务器
claude mcp add figma-dev-mode-mcp-server \
--transport sse \
http://127.0.0.1:3845/sse
一行命令，完事。
第三步：开始用
在 Figma 里选中要转换的部分，右键「Copy as > Copy link to selection」（或者 ⌘L），把链接贴给 Claude，告诉它你要什么样的代码。
实际效果怎么样？
日本开发者的案例
Qiita 上有人分享了完整流程：用 Stitch 生成初版设计，导入 Figma，然后让 Claude 转成代码。他说原本不会用 Recharts 做图表，但看着 Claude 生成的代码，顺便就学会了。
这个细节挺有意思的：Claude 生成的不是垃圾代码，而是能让你学到东西的代码。
国内团队的尝试
有团队用这个做组件库。有意思的是，就算 Figma 里没画表单，Claude 也能根据整体设计风格「补」出合理的表单实现。这说明它确实理解了设计系统，而不是简单做翻译。
Composio 的演示
他们直接克隆了个完整的 CRM 仪表板设计。不是简单的按钮或卡片，是整个系统，几秒钟就生成了代码。
![配图建议：实际案例对比 - 左边放 Figma 设计稿截图，右边放生成的代码运行效果，中间用箭头连接，标注"3 分钟"]
能做什么？
单个组件：按钮、卡片、输入框这些基础组件，秒生成。不只是 HTML/CSS，还能直接给你 React、Vue、Svelte 等框架的代码。
完整页面：整个页面或某个区块（头部、底部、文章列表）都能一次性转换。
灵活的输出：想要纯 HTML/CSS？还是 React 组件？用 Tailwind 还是 styled-components？提示词说清楚就行。
但也有坑
改代码比较麻烦
Claude 很擅长从零开始写新组件。但如果设计改了，想更新现有代码，经常会遇到问题。它可能不理解你的代码库结构，要么建议重新生成整个组件，要么你得手动改。
所以最好是设计定稿后再生成代码，不然反复修改挺折腾的。
多屏流程需要手工组装
比如一个引导流程有五个步骤，你得把每个步骤分别转成代码，然后再让 Claude 把它们串起来。每次转换都要消耗 token，也需要时间。
像素级调整还得人工来
代码生成完，想微调一下间距、对齐这些，还是得自己改代码。Claude 不会帮你做视觉调优。
对工作流的影响
时间真的省了不少
以前：设计稿 → 开发者看 2-4 小时把设计还原成代码 → 提交
现在：设计稿 → 5 分钟拿到代码 → 开发者做业务逻辑和优化
不是快了一点点，是质的变化。
代码质量更一致
因为是基于设计系统生成的，不存在「开发者理解偏差」。颜色、间距、设计 token 都是对的，响应式布局也自动处理好了。
迭代可以更快
设计改了，重新生成一遍代码就行。不用等开发者改完。
不同角色怎么用？
设计师：需要把 Figma 的设计系统做得更规范。组件、token、约束都要清楚。好处是设计能被完整还原，不用担心开发者理解错了。
开发者：不用再手工「抄」设计稿了。时间可以花在业务逻辑、架构这些更有价值的事情上。但要学会审查 AI 生成的代码质量。
产品经理：从想法到可以点的原型，可能只要几个小时。能快速验证多个方案，更早拿到用户反馈。
成本和门槛
需要付费的部分：
- • Figma Dev Mode（Standard 套餐及以上才有）
- • Claude Pro 或按量付费
但从节省的人力成本看，这个投入回报率挺高的。
怎么开始？
建议先找个简单的 UI 组件练手，别上来就搞整个应用。
-
- 确保 Figma Desktop 是最新版
-
- 开启 Dev Mode MCP 服务器
-
- 装最新的 Claude Desktop
-
- 加上 MCP 服务器配置
-
- 找个按钮或卡片试试
第一次用可能会觉得有点魔法，但多试几次就明白它的边界在哪了。
写在最后
这不是什么概念炒作，是已经有人在用的东西。从 Qiita 上的案例到国内团队的实践，都证明这套流程确实能提高效率。
核心变化是：设计师不用等开发者「翻译」设计，开发者也不用花时间「抄」设计稿。大家都能做更有价值的事。
当然也别指望它能完全替代人。代码还是要审查的，业务逻辑还是要自己写的，细节调整还是要手动改的。但至少，从设计到第一版代码这个环节，确实快了很多。
值不值得试？我觉得值得。毕竟配置五分钟，试一下又不亏。
相关资源：
- • Figma Dev Mode 文档：www.figma.com/developers/
- • Claude Code 文档：docs.claude.com/en/docs/cla…
- • 开源 MCP 插件：github.com/arinspunk/c…
- • Composio 方案：mcp.composio.dev/
你的团队试过这个工作流吗？欢迎在评论区分享体验。
