使用 Figma MCP 配合 Claude Code 实现 UI 设计稿 1:1 还原

如需项目级配置，可在项目目录下新建 .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

确认 CSS 信息抓取无误后，即可开始整体转换。

根据 figma 设计稿当前选中的图层，遍历里面所有的组件，对图片逐一下载，对每个子组件逐一读取，将 figma 设计稿转换为 html 代码实现，创建 index.html

这里我生成了一个静态 HTML 页面。如果是 Vue、React 或 Angular 项目，只需明确告知 Claude Code 即可。

需要注意的是，面对复杂的大屏组件，AI 生成的初版往往与 UI 存在偏差。此时需要人工介入，逐个选中子组件，将其 CSS 细节'喂'给模型进行微调。

最终效果通常能达到 1:1 复刻，后续仅需微调间距即可。虽然过程耗时，但相比手动编写仍节省了大量时间。

移动端 UI 的复刻逻辑相同。选中图层后，要求遍历组件并获取样式与 SVG 信息。

帮我创建一个 test.html，实现我选中的图层及内容，要求遍历每一个组件，获取他们的样式和 svg 等

初版生成很快，但同样需要通过补充 CSS 和 SVG 数据来完善细节。

经过多次迭代，最终结果如下：

再试一个简单案例，目标如下：

初版如图：

继续补充 CSS 和 SVG 信息：

最终结果：

通过上述实践可以看出，Claude Code 结合 Figma MCP 后，在处理 UI 还原任务上展现了强大的自动化能力。虽然复杂场景仍需人工辅助调整，但整体开发效率得到了显著提升。