1. 为什么前端开发者都在折腾 Claude Code Figma MCP如果你做前端大概率经历过这样的循环设计师在 Figma 里交付一版稿子你打开 Dev Mode 一个个量间距、抄色值、对字号然后手写组件。一个中等复杂度的卡片或表单从看稿到跑通样式两三个小时就没了。更麻烦的是设计一改你还得重新对一遍改到后面自己都不知道哪个 padding 是对的。Claude Code 是 Anthropic 推出的命令行编程助手它和普通代码补全不一样的地方在于它能读写你项目里的文件、执行命令、跨文件改代码像一个能动手的协作者。而 Figma MCP 则是把 Figma 里的设计数据——图层结构、组件属性、间距、颜色变量、设计 Token——通过 Model Context Protocol 暴露成结构化信息让 Claude 直接“读懂”设计稿而不是靠截图去猜。这两个东西接上之后你选中 Figma 里的一个 Frame或者在对话里贴一个设计稿链接Claude Code 就能拉取节点数据生成 React、Vue、HTML 等前端代码。这篇教程面向已经会用终端、想把这套链路跑通的前端开发者我会把 MCP 配置骨架、验证动作、以及我实际踩过的坑都写清楚你跟着做就能复现。需要说明的是Claude Code 本身要能稳定调用模型我用的是 TaoToken 做 API 接入下面配置部分会带上。整个链路是TaoToken 提供模型调用 → Claude Code 作为客户端 → Figma MCP 提供设计数据 → 生成代码。2. 前置准备Claude Code、Figma 桌面端与 TaoToken 接入先把环境凑齐缺一个后面都会卡住。Claude Code 安装很简单Node.js 建议 18 以上npm install -g anthropic-ai/claude-code claude --versionFigma 这边有两个硬性条件。第一必须用 Figma 桌面客户端网页版目前不支持 Dev Mode MCP Server这个坑很多人第一次就栽了。第二账号需要有 Dev 或 Full seat 权限免费账号看不到 Dev Mode MCP 的开关。装好桌面端后更新到最新版。然后是模型调用这一环。Claude Code 默认走 Anthropic 官方但国内直连经常不稳定我用 TaoToken 做接入层它兼容 Anthropic 的接口格式配置成本低。先去官网注册拿到 API Key# 官网地址带来源标识 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content拿到 Key 之后在终端里设置环境变量。Claude Code 支持通过ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY指定接入点export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_API_KEY你的_TaoToken_Key想让它永久生效就写进~/.zshrc或~/.bashrc。API 地址这里不加任何多余参数保持干净# API 接入地址 https://taotoken.net/api配完跑一句claude进交互模式随便问一句“你好”能正常回就说明模型链路通了。这一步不通后面 MCP 配得再对也没用所以先验证。3. 配置 Figma MCPsettings.json 骨架与两种接入方式MCP 的配置本质上是告诉 Claude Code去哪里找这个服务器、用什么传输方式。Figma 官方给的是本地 Dev Mode MCP Server数据在本地通信安全性好推荐优先用这个。3.1 启动 Figma 本地 MCP Server打开 Figma 桌面客户端点左上角菜单进入 Preferences偏好设置找到 Enable Dev Mode MCP Server 并打开。启动成功后本地会跑一个服务地址通常是http://127.0.0.1:3845/sse部分版本显示的是http://127.0.0.1:3845/mcp路径差异以你界面上实际显示的为准。可以在浏览器里打开这个地址有响应就说明服务起来了。3.2 用命令把 MCP 加进 Claude Code最直接的方式是一条命令claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse如果你的地址是/mcp结尾就把 URL 换成对应的。加完之后 Claude Code 会把它写进配置文件。3.3 settings.json / .mcp.json 配置骨架如果你想像管理项目依赖一样管理 MCP建议在项目根目录建一个.mcp.json把 Figma MCP 写进去。骨架长这样{ mcpServers: { figma-dev-mode-mcp-server: { transport: sse, url: http://127.0.0.1:3845/sse } } }如果你用的是 stdio 类型的第三方 MCP字段会换成command和args比如{ mcpServers: { figma-mcp: { command: npx, args: [-y, some-figma-mcp-server], env: { FIGMA_API_KEY: 你的_Figma_Token } } } }把全局配置复制成项目本地的.mcp.json好处是不同项目可以用不同的 MCP 组合不会互相污染。Claude Code 启动时会读取当前目录下的.mcp.json。3.4 第三方方案Composio 接入不想折腾本地服务的话可以用 Composio 这类第三方集成。它的优势是走 OAuth 授权不用自己申请和保管 Figma API Key。流程是在 Composio 平台生成 Figma 集成的配置命令在终端执行它会自动把 MCP 配置写进 Claude 的配置文件然后在 Claude Code 里运行/mcp选 Composio 并完成浏览器授权。两种方式对比一下维度官方 Dev Mode MCPComposio 第三方数据路径本地通信经过第三方服务认证方式无需额外 KeyOAuth 授权配置难度中低适合场景数据敏感团队快速上手、跨工具新手可以先从 Composio 入手跑通流程后再换官方方案。4. 验证连接确认 Figma MCP 真的挂上了配置完别急着生成代码先确认连接状态不然报错你都不知道是哪一层的问题。第一条命令claude mcp list输出里应该能看到figma-dev-mode-mcp-server状态是 connected。如果显示 failed 或者压根没列出来说明配置没生效回去检查 URL 和传输方式。第二条进 Claude Code 交互模式后运行/mcp这会列出所有已连接的 MCP 服务器以及它们暴露的工具。Figma 官方 MCP 一般会给出这几个核心工具工具作用get_code获取选中节点或链接对应的前端代码get_image获取指定节点的截图get_variable_defs读取颜色、排版等设计变量get_code_connect_map映射 Figma 组件与代码库组件create_design_system_rules生成供 AI 使用的设计系统规则看到这些工具列表说明 Claude Code 已经能调用 Figma 的设计数据了。这一步是整个链路的关键验证点过了再往下走。5. 实战从设计稿节点到可运行代码连接验证通过后正式进入生成环节。有两种触发方式选区和链接。5.1 基于选区生成单个组件在 Figma 里选中你要转换的 Frame 或组件切到 Claude Code 对话输入请获取我在 Figma 中的当前选区转换为一个 React 组件使用 Tailwind CSS 编写样式要求响应式适配移动端。Claude 会通过 MCP 拉取你选中的设计信息包括图层结构、间距、颜色然后生成对应代码。生成结果会直接写进你指定的文件或者打印在对话里让你确认。5.2 基于链接生成任意设计内容在 Figma 里右键点击目标区域选择 Copy as → Copy link to selection快捷键是⌘L或CtrlL。然后把链接贴进对话将这个 Figma 设计转换为代码[粘贴你的 Figma 链接] 要求 - 使用 Vue 3 Composition API - 样式使用 Tailwind CSS - 移动端响应式适配Claude 会解析链接指向的文件节点拉取设计数据并生成完整代码。链接方式的好处是不依赖当前选区适合把某个具体页面丢给 AI。5.3 一个完整工作流示例把 Figma MCP 和 Playwright MCP 组合起来能形成“设计 → 生成 → 验证”的闭环。流程是在 Claude Code 里同时挂载 Figma MCP 和 Playwright MCP启动你的项目对 Claude 说“分析这个 Figma mockup 并生成对应代码”它通过 Figma MCP 读取设计并写代码接着让它“用 Playwright 打开生成的页面并截图”你就能把截图和原设计对比有差异就继续让它迭代比如“按钮圆角再大一点背景色改成设计稿里的蓝色”。这套流程的价值在于你不只是让 AI 写代码而是在一个可验证的闭环里完成设计还原。从读设计到浏览器截图对比全程在 Claude Code 里完成。6. 常见报错与排查清单实际用下来问题基本集中在这几类我按排查顺序列一下。MCP 连不上claude mcp list里没有 Figma。先确认 Figma 桌面端开着Dev Mode MCP Server 开关是打开的。然后确认 URL 路径/sse和/mcp别搞混。最后确认传输方式写的是sse写错成stdio会直接失败。连接显示 connected但调用工具报错。多半是 Figma 账号权限不够Dev Mode MCP 需要 Dev 或 Full seat。免费账号即使连上了工具调用也会被拒。生成的代码样式对不上设计稿。检查你是不是只给了截图而不是节点数据。MCP 的价值在于拿到结构化数据如果你手动截图再让 AI 看它就退化成看图猜了。确保用选区或链接方式触发。修改现有代码时 AI 不理解项目结构。这是已知的短板。Claude 擅长从零生成新组件但让它改现有代码它可能不理解你的目录约定和组件库。建议设计定稿后再生成或者把相关文件路径明确告诉它。多屏流程要手工组装。引导页、注册流程这种多步骤页面需要把每个 Frame 分别转换再让 Claude 串起来。每次转换都消耗 Token提前规划好顺序。像素级微调还得自己来。生成之后想调某个按钮的 padding、对齐、hover 态还是得手动改代码。AI 目前做不了视觉层面的精细调整这部分留给自己。模型调用不稳定或超时。如果你直连 Anthropic 经常断检查一下是不是接入层的问题。用 TaoToken 的话确认ANTHROPIC_BASE_URL指向https://taotoken.net/apiKey 没有过期。接入文档在这里可以对照https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite7. 把链路跑顺之后还能怎么用基础链路跑通后有几个方向可以继续挖。一是把 Figma MCP 和 Context7 MCP 一起用后者能提供最新的 API 文档生成代码时不会用过时的写法。二是配合 GitHub MCP形成“设计读取 → 代码生成 → 视觉验证 → 版本提交”的流水线。三是用get_code_connect_map和create_design_system_rules让 Claude 理解你团队的组件库和设计规范生成的代码更贴近现有标准而不是每次都是一套新写法。如果你打算长期在项目里用这套组合建议把模型调用也固定下来避免每次环境变动都要重配。Coding Plan 适合长期编码和 Agent 场景配置一次就能稳定用https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite想先单独验证模型对话是否正常可以用模型对话入口试一句https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite整个链路里最容易出问题的其实不是 MCP 配置而是模型调用这一层。我自己的做法是先把 TaoToken 的 Key 配好、确认claude能正常对话再去折腾 Figma MCP。顺序反过来的话MCP 报错你会以为是配置问题实际是模型根本没通。另外.mcp.json记得加进.gitignore别把本地路径和 Key 提交上去。设计稿定稿后再生成代码能省掉大量返工。