Claude Code Figma MCP 入门教程让你的设计稿直接变代码一句话总结MCP 就像 AI 的「USB 接口」让 Claude 能直接「读懂」你的 Figma 设计稿一键生成像素级还原的前端组件。过去需要 2-4 小时的「设计稿翻译」工作现在几分钟就能完成。一、先搞清楚两个概念在动手之前我们先简单了解一下今天的主角。Claude Code是 Anthropic 推出的智能编程助手它不是一个简单的代码补全工具而是一个真正的「AI 编程伙伴」——拥有系统级权限可以跨文件编辑、自动修复 Bug、执行 Git 操作像一个资深工程师一样和你协作。Figma MCP Server则是一座桥梁。它基于 Anthropic 提出的 Model Context ProtocolMCP开放标准把 Figma 中的设计数据——图层结构、组件属性、间距、设计 Token 等——暴露为 AI 能够直接理解和使用的结构化信息。简单说Claude 拿到的不是一张截图而是设计的「语义」它能真正理解设计意图而不是靠猜。这两个东西连在一起后开发者只需要把 Figma 设计稿的链接或选区丢给 Claude它就能自动生成相应的 HTML、React、Vue 等前端代码。二、开始前的准备工作安装 Claude Code在终端运行npm install -g anthropic-ai/claude-codeFigma 桌面客户端目前 MCP 服务器需要桌面端支持网页版暂不支持请确保已安装并更新到最新版本Figma 账号权限需要拥有Dev 或 Full seat专业/企业账号权限才能启用 Dev Mode MCP 服务Node.js 环境建议 ≥ 18 版本 小贴士社区中也有一些第三方的 Figma MCP 服务器如通过 Composio 提供的方案步骤上略有差异我们在后面会介绍两种方案供你选择。三、配置 Figma MCP 服务器两种方式目前主要有两种方式可以让 Claude Code 与 Figma 对话方式一官方 Dev Mode MCP Server推荐这是 Figma 官方的本地服务器方案数据在本地之间通信不经过网络对有数据安全要求的团队来说非常重要。第一步启动 Figma 的 MCP 服务器打开 Figma 桌面客户端点击左上角菜单选择Preferences偏好设置→ Enable Dev Mode MCP Server启用 Dev Mode MCP 服务器。启动成功后你会在 Figma 中看到确认提示。服务器运行在本地http://127.0.0.1:3845/sse在浏览器中打开这个地址看看有没有反应有就说明启动成功了。如果你的版本显示的是http://127.0.0.1:3845/mcp也是正常的不同版本路径可能略有差异以实际界面为准。第二步让 Claude Code 连上来在终端中执行一条命令即可claude mcpadd--transportsse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse注意如果你的环境下 MCP 地址为http://127.0.0.1:3845/mcp注意路径差异请使用对应地址。第三步验证连接claude mcp list看到输出中包含figma-dev-mode-mcp-server就对了。你也可以在 Claude Code 对话中运行/mcp命令查看所有已连接的 MCP 服务器及可用工具列表。Figma 官方的 MCP Server 提供了 5 个核心工具工具功能说明get_code获取 Figma 选中节点/链接对应的前端代码get_image获取设计稿中指定节点的截图get_variable_defs获取设计中使用的颜色、排版等变量定义get_code_connect_map映射 Figma 组件与代码库组件间的关系create_design_system_rules生成供 AI 使用的设计系统规则文件方式二通过 Composio第三方方案更省事如果你不想折腾本地配置或者有一些更高级的需求比如跨工具使用、团队协作可以试试 Composio 提供的 Figma MCP 集成方案。它的好处在于 OAuth 认证更省事不需要自己申请和保管 Figma API Key。简单步骤前往 Composio 平台在 Figma 集成下生成配置命令在终端执行生成的命令它会自动将 MCP 配置写入 Claude 的配置文件在 Claude Code 中运行/mcp选择 Composio 并通过浏览器完成 Figma 账号的 OAuth 授权两种方式各有千秋方式一数据全在本地安全性更高方式二配置更简单认证更省心。新手可以从方式二入手熟练了再用方式一。⚠️ 提示在计划使用 Claude Code 的项目目录下建议将全局 MCP 配置复制为项目本地的.mcp.json文件这样可以按项目管理不同的 MCP 服务器避免全局配置污染。运行以下命令即可cp~/.config/Claude/claude_desktop_config.json .mcp.json四、实战设计稿到代码只需三步配置好之后就到了最激动人心的环节——让 AI 帮你把 Figma 设计稿变成代码。4.1 方式一基于选区适合单个组件在Figma中选中你要转换的 Frame 或组件切换到Claude Code对话输入类似指令请获取我在 Figma 中的当前选区然后将其转换为一个 React 组件使用 Tailwind CSS 编写样式Claude 会自动通过 MCP 获取你的选中的设计信息并据此生成对应代码。4.2 方式二基于链接适合任意设计内容在 Figma 中右键点击要转换的部分选择Copy as → Copy link to selection或用快捷键⌘L/CtrlL将链接粘贴到 Claude Code 对话中配合提示词将这个 Figma 设计转换为代码[粘贴你的 Figma 链接] 要求 - 使用 Vue 3 Composition API - 样式使用 Tailwind CSS - 确保移动端响应式适配Claude 会解析链接中指向的文件节点获取设计数据并生成完整代码。4.3 一个完整的工作流示例让我们看一个稍微完整一点的场景——将 Figma MCP 与 Playwright MCP 组合使用实现「设计 → 生成 → 验证」的闭环。DeepLearning.AI 的官方教程中演示了这个流程在 Claude Code 中同时挂载 Figma MCP 和 Playwright MCP启动项目比如一个 Next.js 应用对 Claude 说「分析这个 Figma mockup 并生成对应的代码」Claude 通过 Figma MCP 读取设计自动编写 HTML/CSS接着告诉 Claude「用 Playwright 打开生成的页面截图让我看看效果」Claude 会通过 Playwright MCP 在浏览器中打开页面并截图你可以把效果和原始设计对比如果有差异你可以要求 Claude 继续迭代「按钮的圆角再大一点背景色改为设计稿中的蓝色」直到满意为止这套工作流的意义在于你不仅是让 AI「写出代码」更是在一个完整的验证闭环中完成高保真的设计还原。从 Figma 读设计到浏览器截图对比整个过程在 Claude Code 中一气呵成。五、常用场景和进阶技巧5.1 五大常用工具体验指南前面提到 Figma 官方的 MCP Server 提供了 5 个工具这里补充一下你实际体验它们时会用到的典型提示词工具典型使用方式get_code「#get_code」Generate my current selection in React Tailwindget_image「#get_image」获取当前选区的截图帮我对比生成结果和设计稿get_variable_defs「#get_variable_defs」读取当前文件的设计变量定义get_code_connect_map「#get_code_connect_map」查看当前设计的代码连接映射create_design_system_rules「#create_design_system_rules」为当前文件生成 AI 设计规则 提示在提示词前加上#get_code等标签可以帮助 Claude 更精准地识别你的意图。5.2 你还可以这样用用 Figma AI 先做初版设计在 Figma 中点击 AI 图标选择「First Draft」用自然语言描述你想要的页面Figma AI 会生成初版设计稿。然后把这个设计稿丢给 Claude Code 转代码实现「AI 设计 → AI 编码」的全自动化流程指定技术栈你可以要求 Claude 使用 React、Vue、Next.js、Svelte 等任意框架配合 Tailwind、styled-components 等方案生成代码搭配其他 MCP 工具可以把 Figma MCP 和 Context7 MCP提供最新 API 文档、GitHub MCP 等一起用形成更完整的开发工作流5.3 进阶多 Step 组合与跨工具链当你熟练掌握基础用法后可以尝试更复杂的技巧多帧多屏流程对于引导流程、注册流程等多步骤页面将每个 Figma Frame 分别转换后再让 Claude 帮你串联成完整的交互组件。设计系统映射通过get_code_connect_map和create_design_system_rules让 Claude 理解你的组件库和设计规范生成更贴近团队标准的代码。跨工具验证配合 Playwright MCP 截图对比、GitHub MCP 提交代码形成「设计读取 → 代码生成 → 视觉验证 → 版本提交」的全自动流水线。六、完整项目示例CRM Dashboard我们来具体看看 Composio 团队的一个真实演示——他们用 Claude Code Figma MCP完整克隆了一个 CRM 仪表板设计。操作流程非常简单打开 Figma找到一个 CRM Dashboard 设计模板复制该文件的 Figma 链接在 Claude Code 中输入「I need you to clone the dashboard from this Figma link: [你的链接]」Claude 会自动调用 Figma MCP Server 获取设计数据然后生成完整的前端代码效果如何结果非常惊艳——从链接到可运行的代码几秒钟内就生成完毕。不仅仅是单个按钮或卡片而是包含多个组件、布局和样式的完整仪表板系统。这个例子充分说明了 Figma MCP Claude Code 组合的威力它不仅能处理简单的 UI 组件还能应对复杂的整页设计还原。七、已知的坑和注意事项在实际使用中有几件事需要提前了解1. 修改现有代码比较麻烦Claude 很擅长「从零开始写新组件」。但如果设计改了你想让它更新现有代码它可能不理解你的代码库结构要么建议重新生成整个组件要么你得手动改。所以最好等设计定稿后再让 AI 生成代码。2. 多屏流程需要手工组装如果是引导流程、注册流程这种多步骤页面需要把每个步骤分别转成代码然后再让 Claude 把它们串起来。每次转换都消耗 Token需要你自己协调好各部分。3. 像素级微调还得人工来代码生成之后想精细调整某个按钮的 padding、对齐、hover 态还是得自己动手改代码。AI 目前帮不了你做视觉层面的微调。4. Claude Code 也有学习成本虽然入门门槛不高但要想用好 Claude Code还是需要花时间熟悉它的命令、配置和各种特性。建议先看看官方文档。八、总结Claude Code Figma MCP 这套组合把「设计稿到代码」这个过去最耗时的手工流程变成了几个命令的事情。过去开发者需要花 2-4 小时把设计还原成代码现在 5 分钟就能拿到初版开发者可以把精力集中在业务逻辑和体验优化上。因为是基于设计系统生成的颜色、间距、设计 Token 都是对的不存在「开发者理解偏差」的问题。目前这个方案还在快速进化中——Figma 已经在推远程 MCP 支持未来不用装桌面客户端也能用。Anthropic 的 Claude Code 也在持续更新MCP 生态正在迅速壮大。不妨现在就打开 Figma 和终端试试用这套工作流来加速你的下一个项目。几分钟后你可能会感慨原来前端开发可以这么轻松。