从设计稿到代码：Figma MCP 与 Claude Code 实战
将 UI 设计图转化为高质量的前端代码一直是开发中的痛点。借助 Figma 的 Dev Mode MCP 服务配合 Claude Code，我们可以大幅缩短静态页面的搭建时间，甚至实现接近 1:1 的视觉还原。
准备工作
确保你已安装好 Claude Code。如果尚未配置，建议先完成基础环境搭建。此外，需要拥有 Figma 桌面客户端，且账号具备开发模式（Dev Mode）权限。
开启 Figma MCP 服务
MCP 连接依赖于本地服务。打开 Figma 桌面客户端，进入 Preferences，勾选 Enable Dev Mode MCP Server 以启动服务。
验证服务是否正常运行，访问 localhost:3845/sse。若看到相关页面，说明服务已就绪。
Figma MCP 主要提供以下工具支持：
| Tool | Function |
|---|---|
| get_code | 获取设计稿中的代码 |
| get_image | 获取设计稿中的图片 |
| get_variable_defs | 获取某个变量 |
| get_code_connect_map | 获取代码连接映射 |
| create_design_system_rules | 创建设计系统规则 |
连接 Claude Code
在项目根目录的终端中运行以下命令，将 Figma MCP 服务器注册到 Claude Code：
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
启动 Claude Code 实例：
claude --dangerously-skip-permissions
输入 /mcp 查看连接状态。如果显示未连接，尝试回车后选择 Reconnect。成功连接后，Claude 即可调用 Figma 的工具能力。
若需项目级持久化配置，可在项目目录下创建 .mcp.json 文件：
{
"mcpServers": {
"Figma": {
"url": "http://127.0.0.1:3845/sse"
},
"context7": {
"command": "npx",
"args": ["-y", "@upstash/context7-mcp@latest"]
}
}
}
代码生成与迭代
初步尝试
选中 Figma 设计稿中的图层或复制图层链接，向 Claude Code 提问获取 CSS 信息：
告诉我 figma 里选中的模块的 css
AI 能够顺利抓取样式数据。接下来，尝试生成完整的 HTML 结构：
根据 figma 设计稿当前选中的图层，遍历里面所有的组件，对图片逐一下载，对每个子组件逐一读取，将 figma 设计稿转换为 html 代码实现，创建 index.html
初次生成的代码往往在布局细节上与原型存在偏差，这是正常现象。对于复杂的大屏组件，直接生成完整代码可能不够精准，我们需要采用'分而治之'的策略。
精细化调整
针对初版效果不理想的部分，可以逐个选中子组件，将其 CSS 信息单独喂给 AI 进行修正。例如：
帮我创建一个 test.html，实现我选中的图层及内容，要求遍历每一个组件，获取他们的样式和 svg
通过多次迭代，逐步完善各个组件的样式和 SVG 资源。虽然过程需要人工介入确认，但相比从零手写，效率已有显著提升。
最终效果通常能达到较高的还原度，后续仅需微调组件间距等细节即可。无论是大屏展示还是移动端界面，这套工作流都能有效降低重复劳动的时间成本。
经过实际测试，Claude Code 结合 Figma MCP 后的能力相当强大，适合用于快速构建高保真前端原型。