基于 ClaudeCode 与 Figma-MCP 的前端 UI 设计稿 1:1 还原实践

启动 Claude Code：

claude --dangerously-skip-permissions

查看 MCP 是否安装成功：

/mcp

如果显示未连接，可以回车之后选择 Reconnect 一下，连接成功如图：

如果需要项目特定配置，可以在项目目录下新建 .mcp.json 文件，将 Figma MCP Server 和 context7 MCP Server 的配置写入：

{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    },
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}

三、Claude Code 代码实现 Figma 设计稿

先测试 Claude Code 能否读取到 Figma 的设计稿。

选中 Figma 设计稿中的某一块（或复制 Figma 中的图层链接）。

在 Claude Code 里提问，是否可以抓取到对应模块的 CSS：

告诉我 figma 里选中的模块的 css

可以看到，CSS 信息被顺利抓取。

下面，我们来进行代码的整体编写，将 Figma 设计稿转换成代码实现。

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

我创建了一个静态 html 页面来实现这个效果，如果是 vue/react/angular 的页面，告诉 claude code 即可。

由于元素过多，claude code 的第一版一般都和 ui 大相径庭。后续需要我们逐个组件把 css 喂给 claude code。

最终效果：

各个组件都和原型 1:1 复刻，后面再微调组件间距离即可。因为大屏太过复杂，调了很久，但是也节省了非常大的时间。

下面，我们再去复刻一个简单的移动端的 UI 案例。

还是先选中我们要实现的图层。

告诉 claude code，我们要遍历这个图层中的所有组件，创建一个 html 文件，实现这个组件。

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

初版很快就被实现了出来：

下面，我们需要依次选中 figma 中的每个子组件，再把它们的 css 喂给 claude code。

最终效果：

再实现一个简单的，目标如下：

初版如图：

喂给 claude code 更多 css 和 svg 信息：

最终结果如图：

经过这几个例子，我们可以看到 claude code 结合 figma 的 mcp 之后，功能变得多么的强大，期待使用 claude code 做出更多出色的作品！