玩转ClaudeCode：使用Figma-MCP编写前端代码1:1还原UI设计图

目录本轮目标具体实践一、开启 Figma 的 MCP 服务器二、Claude Code 连接 Figma MCP三、Claude Code 代码实现 Figma 设计稿本轮目标本轮目标是制作数字化大屏的一个前端组件要求和UI设计图还原度达到1:1。本轮目标需要我们提前准备好figma客户端且登录帐号具有开发模式的权限没有可以去某夕。Claude Code 就不必多说没有安装的同学参考我的上一篇文章《玩转ClaudeCodeClaudeCode安装教程WindowsLinuxMacOS》完成安装通过专属链接注册可以额外领取100美金的免费使用额度。安装教程参考玩转ClaudeCodeClaudeCode安装教程WindowsLinuxMacOS_claude code安装-CSDN博客文章浏览阅读2.5w次点赞67次收藏86次。全网最火爆的Claude Code系列教程来了跟着小智学AI做新时代的Vibe Coder几篇博客带你玩转Claude Code本文介绍了Claude Code在Windows环境、Linux环境、MacOS环境下的安装和使用还没有体验过Calude Code的你快来扫盲吧有任何问题都可以在评论区留言期待你的互动_claude code安装https://blog.csdn.net/weixin_41793160/article/details/149313024具体实践一、开启 Figma 的 MCP 服务器打开 Figma 桌面客户端只支持在桌面端中设置 Figma MCP Server如图所示选中 Preferences - Enable Dev Mode MCP Server 启动 MCP Server。如果访问 localhost:3845/sse 有如下页面说明 Figma 的 MCP 服务开启成功。Figma MCP 支持 5 个 ToolToolFunctionget_code获取设计稿中的代码get_image获取设计稿中的图片get_variable_defs获取某个变量get_code_connect_map获取代码连接映射create_design_system_rules创建设计系统规则二、Claude Code 连接 Figma MCP首先保证电脑上已经安装 claude code没有安装的参考玩转ClaudeCodeClaudeCode安装教程WindowsLinuxMacOS_claude code安装-CSDN博客文章浏览阅读2.5w次点赞67次收藏86次。全网最火爆的Claude Code系列教程来了跟着小智学AI做新时代的Vibe Coder几篇博客带你玩转Claude Code本文介绍了Claude Code在Windows环境、Linux环境、MacOS环境下的安装和使用还没有体验过Calude Code的你快来扫盲吧有任何问题都可以在评论区留言期待你的互动_claude code安装https://blog.csdn.net/weixin_41793160/article/details/149313024已经安装成功的进行下面的步骤项目文件夹目录下 CMD 运行claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse启动 Claude Codeclaude --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-mcplatest] } } }三、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 做出更多出色的作品加入社区Claude Code 开发者交流社区福利多多立即加入 Claude Code 中国开发者交流社区期待与你的思维碰撞共同奔赴AI开发的浪潮