我先把结论放在前面用 Claude Code 接上 Figma MCP 之后设计稿转 HTML 这件事确实从“一整天的手工活”变成了“半小时的对话微调”。如果你是个前端开发、独立开发者或者团队里负责设计师和程序员之间“翻译”的人这套链路值得认真搭一次。它不是什么未来概念现在就能跑起来而且踩坑点基本都可控。这篇文章我把完整的搭建过程、核心原理、以及我实际使用中调整出来的细节全部写清楚照着走一遍就能上手。先说清楚这套东西到底是什么。Claude Code 是 Anthropic 推出的命令行 AI 编程环境你可以在终端里直接让它读写文件、执行命令、完成一整个项目任务。Figma MCP 则是把 Figma 设计稿的图层、样式、坐标、文字属性等信息通过 Model Context ProtocolMCP暴露给 AI 工具的标准接口。两者一结合Claude Code 就能“看懂”设计稿的结构然后直接生成对应的 HTML/CSS 代码。过去我们依赖人工眼睛逐个测量间距、比对颜色、导出切图现在这部分信息可以由 Claude Code 直接从设计稿里读取省掉的不是一点点时间。这篇文章适合谁第一类是前端开发尤其是经常要做营销页、落地页、活动页的这类页面设计稿多、工期紧、还原度要求高AI 生成初稿效率非常明显第二类是独立开发者自己画完设计稿不想再花一晚上写页面第三类是设计团队里的前端同学想把交付链路缩短。哪怕你完全没用过 Claude Code只要会基本的终端操作和 HTML/CSS照着这篇文章配置就能跑通。1. 这套方案到底解决了什么问题1.1 先说说传统切图流程的痛点我做了这么多年前端手动切图的痛苦太熟悉了。以前拿到一个设计稿标准流程是这样的先在 Figma 里看测量信息哪个按钮距离左边多少像素、字号多大、行高多少、颜色色值是多少然后切小图标、切背景图、导出各种资源接着在代码编辑器里一点点把布局搭出来用 CSS 还原设计最后还要对照设计稿逐像素检查改间距、调颜色。这个过程的问题非常明显。第一重复劳动量巨大。一个落地页可能就四五个区块大部分代码都是类似的布局结构但每次都要重新写。第二设计师和前端之间容易产生信息损耗。设计师用自动布局前端可能没注意到某个约束规则还原出来的效果就和设计稿有偏差。第三设计稿改一版前端就要跟着重新切一轮图。我遇到过一天之内设计稿改了四版的情况那种感觉真的想摔键盘。1.2 Claude Code Figma MCP 的工作逻辑要理解这套方案为什么能解决问题得先明白 MCP 到底做了什么。MCP 的全称是 Model Context Protocol简单说就是给 AI 模型提供了一把“钥匙”让它能访问外部工具和数据源。Figma MCP 这把钥匙打开的是 Figma 的设计数据包括文件结构、页面、画板Frame、图层、文本内容、填充颜色、字体信息、约束规则、导出参数等。Claude Code 通过 MCP 协议向 Figma MCP 发出请求比如“读取这个文件的首页所有画板”然后拿到结构化的 JSON 数据。Claude Code 读懂了这些数据之后就能理解设计稿的布局结构、视觉样式、文字层级再结合它本身的编程能力生成对应的 HTML 和 CSS 代码。这个方案的本质是把“人眼识别设计稿”这一步换成了“程序读取结构化数据”把“手动写样式”换成“AI 根据数据生成代码”。这也是它比“截图丢给 AI”更准确的原因截图是像素信息AI 只能靠猜Figma MCP 给的是精确的几何信息和样式属性生成结果的精确度高了好几个量级。1.3 它能帮你省下什么实操下来这套链路省的主要是三块时间。第一块是测量和读取时间。以前要手动在 Figma 里点来点去找数据现在设计稿里所有属性直接变成文本数据喂给 Claude信息获取几乎是瞬时的。第二块是初稿生成时间。一个结构中等复杂度的落地页手工写可能要半天Claude Code 生成初始版本只需要几分钟而且结构完整、语义化程度也不错。第三块是迭代时间。设计稿改了不需要从头再来直接把新版设计稿指给 Claude Code让它对比修改部分、增量更新代码就行。不过要说明白它不能完全替代前端工程师。复杂的交互动效、特殊布局逻辑、跨浏览器兼容性调整这些还是需要人工介入。但“从 0 到 80 分”的部分这套方案能帮你大幅压缩。2. 环境准备把工具链一次配齐2.1 安装 Claude Code 并配置 API第一步是安装 Claude Code。它本质上是一个 npm 包所以前提是你机器上有 Node.js 环境建议 Node 版本在 18 以上。安装命令很简单npm install -g anthropic-ai/claude-code安装完成之后在终端输入claude就能进入交互界面。不过第一次启动会要求你登录或者配置 API Key。我个人的建议是直接用 Anthropic API 的 Key用环境变量的方式配置export ANTHROPIC_API_KEY你的APIKey如果你使用的是国内的云厂商中转服务也可以配置对应的 Base URL这个看你自己使用的情况。总之保证 Claude Code 能正常连通模型服务是第一步。配置完成之后随便输入一句“你好”能收到回复说明环境没问题。2.2 给 Claude Code 接上 Figma MCP接下来是最关键的一步配置 Figma MCP 服务。Claude Code 支持通过 MCP 协议接入外部服务方式有两种一种是在项目根目录放一个.mcp.json配置文件另一种是用命令直接添加。最省事的做法是用官方支持的命令行工具来注册。以常见的 Figma MCP 服务为例在终端执行claude mcp add figma -- npx figma-mcp-server --figma-api-key你的FigmaKey执行完这条命令之后Claude Code 会把 figma 这个 MCP 服务注册到当前的配置里。以后每次启动 Claude Code它都会尝试加载这个 MCP 服务。除了命令注册你也可以手动编辑配置文件。Claude Code 的全局配置通常存放在用户目录下的~/.claude.json项目级配置则可以用.mcp.json放在项目根目录。配置格式大概是这样的{ mcpServers: { figma: { command: npx, args: [ figma-mcp-server, --figma-api-key你的FigmaKey ] } } }两种方式效果一样选一种用就行。建议在项目层面配置.mcp.json这样团队协作时其他人拉取项目后也能保持一致的工具链。2.3 准备 Figma 访问令牌要让 MCP 服务能读取你的设计稿你需要一个 Figma 的个人访问令牌Personal Access Token。获取方法不复杂登录 Figma 官网进入个人设置Account Settings找到 Security 或者 Security token 的入口生成一个新的 token 就行。生成 token 的时候需要注意权限范围。对于读取设计稿一般只需要File content: Read-only这个权限就够了不需要给写入权限。另外这个 token 会关联你的 Figma 账号所有能访问的文件都在你的账号权限范围内所以不要提交到公共代码仓库也不要写进博客。配置好 token 之后还需要拿到设计稿的文件 Key。Figma 文件链接格式一般是https://www.figma.com/file/文件Key/名字把中间那一串 ID 复制出来备用后面让 Claude 读取设计稿时要用到。2.4 验证链路是否打通配置完成之后别急着做项目先做一个连通性验证。启动 Claude Code直接问它读取一下 Figma 文件 文件Key告诉我这个文件里有几个页面、每个页面有多少个画板。如果 MCP 服务正常工作Claude Code 会返回文件的基本结构信息。这个过程数据量不大消耗的 token 也很少适合用来确认链路没有断掉。如果这里报错先看 MCP 服务有没有正常启动。在 Claude Code 里可以用/mcp命令查看当前已经加载的 MCP 服务状态。如果 figma 服务显示 error大概率是 token 无效、npx 启动失败了或者网络无法访问 Figma API。这几个点我在后面的排查章节会详细说。3. 实操全流程从设计稿到可运行页面3.1 第一步让 Claude 读取设计稿链路打通之后就可以开始真正的实操了。我一般建议先让 Claude Code 读取设计稿的整体结构就像程序员接需求之前先看一遍原型图。进入 Claude Code 交互界面后我通常会这样下指令我需要把一个 Figma 设计稿转成 HTML 页面。 先读取这个文件文件Key 请分析页面结构有哪些页面、每个页面包含哪些画板、画板之间是什么关系。Claude Code 会通过 MCP 工具拉取文件数据然后返回结构摘要。这一步的目的有三个一是确认 Claude Code 能正确读取设计稿二是让 Claude Code 对整体布局有一个印象三是我们可以根据返回结果决定拆成几个页面来做。我这里强调一下不要一上来就丢一句“把这个设计稿转成 HTML”。因为一个复杂文件可能有几十个画板里面的组件、实例、隐藏图层一大堆不提前梳理结构生成结果大概率是乱的。3.2 第二步提取设计规范与样式变量结构梳理完之后下一步是提取设计规范。一个好的前端拿到设计稿之后不会急着写代码而是先把颜色、字体、间距、圆角这些变量整理出来。现在这件事可以让 Claude Code 代劳。基于这个设计稿提取整个项目的设计规范 1. 颜色系统列出所有使用到的颜色标注色值和使用场景 2. 字体系统列出所有使用的字体、字号、字重、行高组合 3. 间距系统分析常用的间距值总结出间距规律 4. 圆角与阴影列出常用的圆角大小和阴影样式这个步骤非常值得做。因为让 Claude Code 先生成一份设计变量清单它在大脑中就建立了一个“设计语言”的概念后续生成代码时它会倾向于复用这些变量而不是各自为政。实测下来先提取规范再生成页面代码的整洁程度和一致性会明显好于直接生成。比如设计稿里所有的主按钮都是同一个渐变色如果 Claude Code 提前总结出了--primary-gradient这个变量后续所有按钮都会引用它想改主题色就改一处方便维护。3.3 第三步写一个高质量的还原 Prompt这一步是整个方案的核心中的核心。Prompt 写得好不好直接决定生成代码是“能看”还是“能用”。我这里给出一个在实践中反复调整后效果比较好的模板你可以直接复制修改请把 Figma 文件 文件Key 中的画板「落地页-首页」还原成 HTML 页面。 技术栈要求 - 使用纯 HTML CSS不要引入任何框架 - CSS 使用自定义属性管理设计变量 - 使用 flexbox 和 grid 进行布局 - 不输出 JavaScript交互部分后续单独处理 还原要求 - 严格按照设计稿的图层结构建立 HTML 层级 - 每个样式属性都要有依据不要凭空猜测 - 图片资源先用占位符替代标注好尺寸和用途 - 字号、间距、颜色必须与设计稿完全一致 - 如果有自动布局要分析出对应的 padding 和 margin 关系 输出要求 - 先生成文件目录结构 - 然后逐个文件输出完整代码 - 代码中关键位置要添加中文注释 - 最后总结一下哪些部分因为设计稿限制未能还原这里有几个关键点值得展开说。第一明确技术栈。你告诉它用纯 CSS 还是 Tailwind、用 flex 还是 grid、要不要框架它的代码风格就会向这个方向靠拢。不指定的话Claude 可能按它自己默认的习惯来最后你可能要推翻重写。第二要求“样式有依据”。这句指令非常有用它能约束 Claude 不要瞎编。比如设计稿里没有某个颜色它就不应该自己创造一个新颜色。第三让 AI 自己总结未还原的部分。这样做的好处是让我们省去逐项核对的时间直接看它的总结能定位到需要人工处理的地方。3.4 第四步一次真实的生成过程下面我描述一次真实的生成过程让你对整个流程的节奏有个体感。假设我要还原的是一个典型的落地页包含导航栏、Hero 区域、三个特性卡片、一段产品展示区、客户评价区和页脚。文件结构梳理完之后我给 Claude Code 下了指令让它先实现导航栏加 Hero 区域。大概几十秒之后Claude Code 返回了两个文件index.html和styles.css。我让它先不要写文件而是在对话里输出关键代码片段快速确认它的还原思路是否正确。比如 Hero 区域的布局方式、导航栏的间距处理、背景叠加的实现方式这些大方向如果对了再让它写入文件。确认无误后让它执行写入操作。Claude Code 会自动创建目录结构、写入文件。打开浏览器预览和我预想中的差不多整体布局是对的但有一些细节偏差比如某个图片占位符尺寸不对、某个区块的圆角值有误差。这时候不需要重新生成直接对话式修改Hero 区域的背景图尺寸应该是 1440x600占位符改成这个尺寸 三个特性卡片的间距应该均匀检查一下是不是有冗余 margin 价格区域的圆角应该是 16px现在代码里写的 12px。这种“先生成再微调”的循环模式我实测效率最高。一次性生成就完全不用改的情况很少但生成初稿加针对性修改速度要比从零手写快得多。4. 提升还原度的几个关键细节4.1 设计稿的图层命名与分组习惯用下来感触最深的一点设计稿本身的质量直接决定生成代码的质量。Figma MCP 读取的是结构化数据如果设计师没有良好的图层命名习惯Claude Code 能读懂布局但读不懂意图生成出来的 HTML 语义化程度和代码结构就会打折扣。我举一个真实的例子。某一个新区块的图层叫“Frame 128”里面全是“Rectangle 45”“Group 22”这样的命名Claude Code 只能根据几何位置猜测这个区块是什么生成的 HTML 结构可能是多个无意义的div嵌套。反之如果图层名叫“pricing-card”或者“testimonial-item”Claude Code 就能自然地生成语义化更好的标签比如section、article、figure等等。所以如果你是团队里负责接这套流程的人我建议跟设计师同步一个约定把主要区块的 Frame 用语义化名称命名把重复组件放到 Component 里而不是复制多份隐藏不参与导出的辅助图层不要留大量只有几个像素差别的重叠图层。这一步看起来是在给设计师提要求但实际收益是双方的设计师规范化之后你自己手动切图也更轻松AI 生成的初稿质量也会显著上升。4.2 Prompt 的写法决定了代码质量再深入聊聊 Prompt 的写法。这部分我踩过不少坑总结下来有几个反直觉的发现。第一越具体越自由。不要担心管太细会限制 AI 发挥实际上给足够多的约束AI 生成出来的代码反而越符合预期。特别是结果的输出方式、文件组织方式、代码风格这些必须明确写出来。第二一次性任务不要铺太大。如果指令是“把这个设计稿全部转成 HTML”Claude Code 可能会因为上下文过长而丢失中后段的设计细节。更稳妥的做法是分区块来先做 nav 和 hero再做特性区再做页脚。每完成一个区块你还能及时检查方向是否正确避免整个页面生成完了才发现风格跑偏浪费返工时间。第三让 Claude Code 复述需求。在正式动手前让它先用自己的话描述一下它对设计稿的理解、准备怎么拆分区块、用什么布局策略。这一步相当于让 AI 先给你讲一遍思路很多方向性问题在动手前就能暴露出来比生成完再改效率高得多。第四善用参考实现。如果你希望生成的代码偏向某种风格可以把一个你满意的现有文件的路径告诉它让它参考这个文件的风格来写。比如说“参考项目里components/card.html的写法来生成商品卡片”出来的代码就能和现有项目保持一致。4.3 响应式与多端适配的落地方式响应式是一个绕不开的话题。设计稿通常只提供一个尺寸一般是桌面端宽度最多加一个移动端版本。如果你告诉 Claude Code“生成响应式页面”它确实会这样做——按照它自己的想法添加媒体查询。但问题是它生成的断点可能并不是你想要的。我的做法是给 Claude Code 明确的断点规则。比如这样要求使用 1280px、768px 作为断点。 - 大于 1280px保持设计稿原样 - 768px 到 1280px卡片两列展示导航收缩 - 小于 768px所有内容单列导航变成汉堡菜单把这些规则写清楚之后生成的代码在响应式上的表现会好很多。再进一步你可以要求它把断点变量也提取出来比如--breakpoint-lg、--breakpoint-md这样后期调整只需要改几个变量。还有一个容易被忽略的细节Figma 设计稿里的固定像素值在响应式布局下要适当转换成相对单位。你可以在 Prompt 里要求“字体大小使用 rem间距使用 rem 或 clamp 函数”这样生成代码的可维护性会明显提高。4.4 别把 AI 生成当终点这是我体会最深的一点。Claude Code 生成的 HTML 初稿我建议把它看作“一个非常懂行的外包写的第一版”而不是成品。它擅长处理的是信息提取、结构搭建、样式还原这些确定性强的部分它不擅长的是业务逻辑、状态管理、复杂交互、以及那种需要靠“经验”才能做出的判断。比如一个设计稿里某个区块视觉上居中但设计师的意图可能是在不同屏幕下有不同的对齐策略又比如某些元素在鼠标悬停时有特殊的交互反馈这些它不是做不出来而是设计稿里没有明说全靠 AI 猜猜出来的大概率不准确。所以我的工作流通常是这样Claude Code 生成静态初稿把布局、颜色、字体做到 90 分以上然后前端工程师接过来处理交互逻辑、状态管理、动效、接口对接。分工合作各做各擅长的事。前端的工作量在初稿阶段被大幅压缩但并没有被完全取代这也是我认证的合理预期。5. 常见问题与排查技巧实录5.1 MCP 连接不上怎么办这是配置阶段遇到最多的问题。现象是在 Claude Code 里输入/mcp看到 figma 服务的状态是 error或者在调用时提示找不到工具。排查顺序我一般是这样第一步单独测试 MCP 服务能不能启动。在终端手动执行启动命令比如npx figma-mcp-server --figma-api-key你的Key如果这里直接报错大概率是网络问题、npm 包安装失败或者 node 版本过低。第二步检查 token 是否有效。Figma token 是有权限范围的如果创建 token 时没有勾选 File content 的读取权限MCP 服务即使是正常运行也无法读取文件内容。建议重新创建一个 token权限只勾File content: Read-only再试一次。第三步确认文件权限。token 属于你的账号只能访问你账号有权限的 Figma 文件。如果是团队文件且你不是管理员某些文件可能没有访问权限。这个问题的典型表现是MCP 服务正常但读取特定文件时报 403 或者 not found。还有一个小坑是环境变量的问题。有些人把 token 通过环境变量传入但 Claude Code 启动 MCP 服务时并不会完全继承你 shell 的环境变量。这种情况下建议直接把 token 写进 MCP 配置参数里而不是依赖环境变量。5.2 设计稿读取不完整有时候 Claude Code 能连上 MCP但读出来的信息很有限比如只能看到画板名称看不到内部图层的细节。这个问题的原因是多方面的。Figma MCP 服务的读取范围有可能会受到文件复杂度的影响。一个文件如果图层数量特别大MCP 返回的数据量也会非常大而 Claude Code 的上下文窗口虽然有上限但一次性塞入过多数据会影响处理效果。我的处理方式是分段读取。先让 Claude Code 读取特定页面、特定画板的图层而不是一次性读整个文件。比如只读取「客户评价」这个画板的图层结构列出里面的文本内容和样式信息。这样数据量小了很多处理精度也会提升。另外要注意Figma 里的 Component 实例MCP 返回的数据可能只是实例引用而不会展开内部细节。遇到这种情况可以让 Claude Code 读取对应 Component 的定义或者手动把组件展开后再读取。还有一类情况是设计稿里有大量隐藏图层。默认情况下这些图层也会被读取到干扰 Claude Code 的判断。在 Prompt 里加一句“忽略所有隐藏图层”能有效减少噪声。5.3 生成的代码风格混乱生成的代码风格不稳定这是比较常见的问题。同一个项目里可能上个区块用的类是hero-section下个区块用的又是sc-abc123全看 Claude Code 当时的心情。这个问题如果不处理后期维护会很难受。我的解决方案是提前给出代码风格约束。在 Prompt 里明确要求CSS 命名使用 BEM 风格 类名使用小写字母和连字符 避免使用内联样式 公共样式提取到公共类中。除了风格约束更有效的方式是给 Claude Code 提供现有代码样本。在前面说的“参考实现”基础上更进一步可以把项目里已有的一个完成度高的页面的 HTML 和 CSS 文件路径告诉它说“仿照这个文件的编码规范来写新的页面”。Claude Code 会从样例里学习到很多隐性风格比如缩进习惯、注释风格、类名命名规律比任何文字约定都管用。5.4 token 失效与配额限制最后一个常见问题和使用成本相关。Figma 的 token 一般不会过期但如果你在 Figma 后台重置过 token旧的 MCP 配置里用的 token 就会立刻失效。报错形式通常是从正常到突然开始报 401 未授权。Claude Code 这边的 API Key 则存在配额和计费问题。生成一个复杂页面的 HTML 和 CSS说实话消耗并不少。如果你的账户额度不够可能会遇到提示需要等待或者额度受限的情况。针对这点我建议做好任务拆分避免把整个文件一次性丢给 Claude Code 处理。分区块生成不仅质量更高token 消耗也更可控。另外日常的小修改尽量用简单的指令比如“把这个按钮的颜色换成红色”“把字号改成 16px”消耗极小。只有结构梳理和初稿生成这种大任务才需要消耗大量 token。还有一个省钱的技巧用 Claude Code 的压缩上下文能力每完成一个区块可以让它总结一下当前的关键决策并开启新会话这样后续任务不需要重新读取全部设计稿和代码历史。写在最后的几点体会整套流程用下来我的真实感受是Claude Code Figma MCP 并不是“把前端干掉”的工具而是把前端从重复劳动里解放出来的工具。以前一个上午能完成的页面现在可能四十分钟就完成初稿剩下来的时间我拿去处理动效、性能优化、代码拆分这些更有价值的事情这才是它对我最大的意义。最后分享一个小技巧在第一次完整跑通这套流程后把你写的那份 Prompt 模板保存下来放到项目目录的docs/figma-to-html-prompt.md里。下次拿到新设计稿只要把文件 Key 替换进去微调一下需求说明就能直接用。我在几个项目里反复用这份模板效率和稳定性都在稳步提升。如果你也团队协作可以把这份模板同步给同事整个团队的交付质量都会被拉高一个台阶。