手动切图这件事我在项目里干了五六年。过去一个设计稿落地成页面流程大概是先在 Figma 里量尺寸、取色、导切图再把图片一张张拖进编辑器然后对着设计稿写 div、写 CSS、调间距一个小页面磨一下午也是常有的事。直到我最近把 Claude Code 和 Figma MCP 接在一起这个流程被彻底压缩成了“一句话”。在终端里输入一条提示词Claude 就能直接读取 Figma 设计稿的图层数据自己分析布局、提取颜色、生成 HTML 结构我只需要在后面做检查和小修。这篇文章就把我这段时间从 0 到 1 的完整配置过程、核心提示词写法和踩过的坑全部整理出来给同样在做前端落地、想解放双手的人一份能直接照做的方案。1. 方案原理解析Claude Code 和 Figma MCP 是怎么串起来的1.1 Claude Code 到底是什么Claude Code 是 Anthropic 推出的命令行 AI 编程工具跑在终端里可以直接读写你本地项目文件、执行命令、调用外部工具。它和网页版 ChatGPT、Claude 聊天窗口最大的区别在于“能动”你可以让它打开某个文件、搜索某个函数、运行测试、修复报错它会在你授权的范围内真正操作这台电脑。这一点很关键。之前大家用 AI 生成 HTML大多是复制设计稿截图丢进网页聊天框AI 只能通过“看图”来猜布局猜出来的结果基本是四不像。Claude Code 不一样它可以通过 MCPModel Context Protocol模型上下文协议直接访问 Figma 的文件结构拿到的是设计稿的矢量信息、坐标、尺寸、颜色值、图层名称这些精确数据而不是一张模糊截图。简单做个类比网页聊天框里的 AI 像一个隔着窗户看房间的人能看见大概摆设但不知道尺寸接了 Figma MCP 的 Claude Code则是拿到了房间的施工图纸每一面墙多高、每一件家具多宽全是实打实的数据。这一层数据差异决定了最终生成代码的质量上限。1.2 Figma MCP让 AI 看到设计稿的桥梁MCP 是 Anthropic 推出的一套开放协议目的是让 AI 模型和各种数据源、工具标准化对接。Figma MCP 就是这个生态里的一个服务端插件它封装了 Figma REST API 的常用能力通过标准化的工具接口暴露给 Claude Code 调用。当你在 Claude Code 里配置好 Figma MCP 后Claude 可以直接调用这样一些能力读取 Figma 文件的关键节点信息包括画板、图层、组、文本、矩形、矢量等所有对象的结构获取每个图层的绝对位置、宽高、背景色、圆角、边框、阴影等样式参数获取文本内容、字体、字号、字重、行高、字间距把指定节点导出为图片方便 AI 在不确定时进行视觉对照查询文件内的样式库、组件库信息。换句话说Figma MCP 就像给 Claude Code 装了一只“眼睛加一把尺子”。它看到的不只是设计稿的像素而是结构化的、可以精确计算的对象树。这也是标题里“一键生成 HTML”能成立的根本原因不是 AI 变聪明了而是它终于有了准确的数据源。1.3 这套组合替代了什么工作流传统的人工切图工作流通常是这样走完的设计师在 Figma 里交付设计稿和标注或者前端自己打开设计稿量尺寸前端手动导出需要的图标、图片资源前端按照设计稿的坐标、间距、颜色逐模块编写 HTML 和 CSS反复调整响应式断点、间距、字体和设计稿做像素级对比多个页面重复以上过程越到后期越机械。用 Claude Code Figma MCP 之后步骤 1 到 3 的大部分工作被压缩成了“写提示词”和“审查结果”。传统上花 2 到 3 小时完成的一个活动页落地现在可能 20 分钟就能出一个结构完整、样式合理的版本剩下的是精细化打磨。不过我必须先说句实话它并不是万能魔法复杂交互、精细动效、业务逻辑还是要靠人来处理。但这套组合解决的是前端工作里占比最高的“静态页面还原”问题这一块的效率提升是肉眼可见的。2. 环境准备从零搭建 Claude Code Figma MCP2.1 安装 Claude Code 并完成基础登录Claude Code 需要 Node.js 环境建议使用 Node.js 20 及以上版本。如果你电脑上还没装 Node可以直接去 Node 官网下载 LTS 版本安装完成后在终端里验证一下node -v npm -v确认 Node 环境没问题后全局安装 Claude Codenpm install -g anthropic-ai/claude-code安装完成后运行下面的命令启动并登录claude首次运行会让你完成账号认证可以选择登录 Claude 账号或使用 Anthropic Console 生成的 API Key。登录成功后会进入一个交互式的终端界面你可以在里面直接输入自然语言指令。注意Claude Code 所在的终端环境最好保持网络通畅因为它和 Anthropic 服务端之间是实时通信的。如果你在公司内网记得先确认网络策略允许访问相关域名。2.2 配置 Figma MCP 服务配置 Figma MCP 需要两个东西一个是 MCP 服务本身另一个是 Figma 的访问令牌。先去 Figma 官网的账户设置里创建一个 Personal Access Token。路径是Figma 首页头像菜单 - Settings - Security - Personal access tokens - Generate new token。生成时建议把权限勾选为只读Read因为我们只需要读取设计稿不需要修改Token 创建后只会显示一次务必立刻复制保存。拿到 Token 后在终端里通过 Claude Code 的 MCP 添加命令来注册 Figma 服务claude mcp add figma -e FIGMA_API_KEY你的token npx figma-developer-mcp --stdio这条命令做了三件事给 MCP 服务起名叫figma把FIGMA_API_KEY作为环境变量注入到服务进程里然后通过 npx 启动figma-developer-mcp这个官方 MCP 服务端。如果你不想把 Token 直接写在命令里也可以先设置环境变量再添加服务。不同系统导出环境变量的方式略有差异但核心思路是一样的保证 MCP 子进程能读到FIGMA_API_KEY即可。配置完成后可以用下面的命令确认 MCP 服务状态claude mcp list看到figma出现在列表里并且状态为 connected就说明服务已经就绪。2.3 验证连接让 Claude 读一次文件试试光配置成功还不够一定要做一次真实读取测试。这种跨工具的链路最常见的坑是配置看着正常、实际一调用就报错。启动 Claude Code 之后我建议先用最简单的指令测试链路是否通畅请调用 Figma MCP 的工具获取文件 https://www.figma.com/design/文件ID/文件名 的页面画板列表简单描述一下有哪些页面。这里的“文件ID”可以从 Figma 设计稿分享链接里找到通常是一串字母数字混排的字符串。如果 Claude 能返回画板名称和结构信息就说明 Token、MCP、网络链路全部正常。如果这一步报错优先检查三处Token 是否复制完整有没有多空格或少字符MCP 添加时使用的 npx 包名是否拼写正确Claude Code 是否在项目目录内启动以及claude mcp list是否显示 connected。3. 完整实操把设计稿变成 HTML 的 6 个关键步骤3.1 前置准备整理 Figma 图层很多人第一步就栽在这里。直接从设计师手里拿到的 Figma 文件图层组织往往非常随性命名可能是“Frame 12345”“Group 2”“Rectangle 7”这种结构直接丢给 AI生成出来的 HTML 也很难读。所以我在实际操作前会花几分钟做一次轻量整理不需要动设计本身只调整图层名称和嵌套关系每个页面或功能模块最外层统一叫Page-首页Page-详情之类的名字导航栏、轮播图、商品卡片、页脚这些大模块直接命名成有含义的业务名让兄弟节点层级清晰不要有太多无意义的嵌套组合。这不只是为了给 AI 提供好数据也是为了让生成的 HTML 类名更贴近业务语义。Claude 读到的图层名是什么它倾向于直接在代码里用对应的单词做 class 名比如图层叫product-card生成的 CSS 很可能就是.product-card这对后续维护非常友好。3.2 写一条高质量的总控提示词图层整理完打开 Claude Code我通常会在项目目录下创建或打开一个工作目录然后输入类似这样的一段总控提示词请使用 Figma MCP 读取设计稿 https://www.figma.com/design/文件ID/文件名 中的「首页」画板。 要求 1. 将画板还原为 HTML/CSS输出结构语义化、CSS 使用 class 命名 2. 布局使用 Flexbox 和 Grid 实现不要用 Table 布局 3. 颜色、字体、间距、圆角尽量使用 Figma 中读取到的原始参数 4. 字体优先使用系统字体栈不引入外部字体文件 5. 图片资源用灰色占位块代替并标注尺寸 6. 忽略装饰性阴影和渐变保留主要的边框和背景色 7. 生成一个 index.html 和 styles.css并分别说明关键模块的实现方式。这段提示词看起来很普通但每一行都是经验的浓缩。第 1 条决定了输出的代码类型第 2 条避免 AI 生成过时的表格布局第 3 条是让 AI 充分使用 MCP 拿到的精确数值第 4、5、6 条都是在控制变量减少不能直接落地的外部依赖第 7 条则是让文件结构适合直接预览。3.3 观察 Claude 的“读图”过程当 Claude Code 开始执行时互动界面里会实时显示它的工具调用记录。你会看到类似这样的动作流调用 Figma MCP 的get_file获取文件结构定位到「首页」画板调用get_node获取画板下所有子节点的坐标、尺寸、样式对关键文本节点调用查询字体信息最后基于这些数据写 HTML 和 CSS。我第一次跑这个过程的时候最直观的感受是它真的知道设计稿里“标题在左边、图片在右边、间距是 24px”而不是靠猜。当然Claude 在读取超复杂文件时也可能漏掉一些子图层这时候我会追加一条指令刚才生成的代码里右侧的产品卡片区域还是有误差请重新读取该区域对应的节点修正布局后再生成一次 styles.css。这种“局部重做”比全量重跑省太多时间。3.4 检查生成的代码并本地预览Claude Code 生成完代码后会在当前工作目录下创建文件。这时候我在终端里启动一个本地静态服务器来预览效果python3 -m http.server 8080然后在浏览器打开http://localhost:8080查看页面。这一步目的是先看整体结构再看细节。如果发现布局错位、字体大小不合理这些问题不要急着全量重写直接把问题描述给 Claude让它基于当前文件做修改。比如“index.html 里的 hero 区域图片高度写成了 100%右边比设计稿高出一截请根据 Figma 的原始尺寸修正。”它通常能准确定位到对应代码块。3.5 微调整合并人工该管哪些事AI 生成完初步代码后我会特别留意几个 AI 容易翻车的地方文本截断和换行Figma 里的文本是自适应的HTML 里可能因为容器宽度变化产生换行差异图标和小切图Figma 里用矢量绘制的图标AI 可能把它导成图片也可能生成一段 SVG 代码需要人工看效果决定保留哪种交互状态比如按钮的 hover、点击态AI 不会主动生成需要自己补语义化标签AI 为了省事可能满屏都是 div我会要求它重点区域替换成 header、nav、main、footer。说白了AI 负责把 80% 的静态工作做完剩下 20% 的“审美判断”和“交互增强”才是人工投入的地方。3.6 把生成结果转成多页面项目单个页面做通以后自然要扩展到整站。我的做法是让 Claude Code 逐个处理每个画板每次生成一个页面文件同时复用公共的 CSS 变量和组件样式。继续处理「商品列表页」画板复刻首页已经使用的颜色变量和按钮样式生成 products.html并保持 styles.css 的原有变量命名方式。这样积少成多几天之内就能把一个 10 来个页面的响应式官网骨架全部搭完。相比以前从 psd 或 figma 手搓十几个页面效率完全是两个量级。4. 提示词工程与样式质量控制从“能出码”到“能用”4.1 关键参数优先别让 AI 自由发挥Claude 拿到的数据很多但它未必知道哪些参数对你更重要。如果你的设计稿里有特殊要求一定要在提示词里明确优先级。举例来说电商活动页里最重要的是商品卡片的间距和促销标签的位置企业官网里最重要的是品牌色和标题字重。我看过不少人给的提示词只有“生成这个页面的 HTML”结果 AI 把次要的花哨效果做得特别足反而把关键参数丢了。建议每次在提示词里加一句“以上参数中[颜色/间距/字号]最重要请优先保证精确还原”。还有一个技巧是给 AI 提供“正负样本”。如果你发现某次生成的按钮圆角太圆直接在提示词里说“按钮圆角不要超过 8px设计稿里的圆角是 6px请检查 MCP 返回的数据。”这样 Claude 会回去重新核对数据源而不是凭感觉改。4.2 用 CSS 变量锁定设计规范一套页面由 AI 分多次生成最容易出现的问题就是规范不统一第一页的标题字号是 24px第二页变成 26px主色在首页是#2563EB在详情页变成#1D4ED8。我的解决方案是先用一个基础画板生成 CSS 变量后续所有页面都基于这套变量来做:root { --color-primary: #2563EB; --color-bg: #F8FAFC; --font-title: 28px; --space-md: 16px; }并在每次处理新页面时提示 Claude “所有颜色和间距必须引用 styles.css 里已有的变量不要新增无意义的硬编码值”。这样即使不同页面由不同批次的对话生成最终视觉效果也是统一的。4.3 响应式设计要怎么交代Figma 设计稿通常只给一个宽度的设计稿比如桌面端 1440px但落地到 HTML 必须考虑平板和手机。这一块 AI 不会自动变聪明你需要给它明确的断点策略。我习惯在提示词里这样写布局采用移动优先策略移动端 375px平板 768px桌面 1280px。在移动端所有多列布局改为单列导航栏变为汉堡菜单结构仅保留基础样式。这样做的好处是 AI 不会自己发明奇怪的断点值而是按你定的规则生成媒体查询。等基础页面出来以后再让 Claude 根据实际情况调整具体断点比一开始就让它“随意响应式”要可控得多。4.4 图片资源怎么处理最省心Figma MCP 有一个导出图片的能力Claude 可以直接调用它把某个节点导出为 PNG 或 SVG。但是我不建议在大批量场景里这么做原因有三个导出的图片不带压缩体积可能很大大批量导出会消耗 API 调用次数速度和成本都不划算你未必需要位图有些图标用 CSS 或 SVG 手写反而更轻。所以我在第一阶段提示词里统一要求“图片资源用灰色占位块代替并标注尺寸”。等 HTML 结构和样式都确定后再单独让 Claude 调用导出工具把真正需要的几个图片节点导出到本地 images 目录。这样既保证了开发效率也避免了无效资源堆积。5. 常见问题与排查实录5.1 Figma MCP 连接失败或读取超时这是最频繁出现的问题。表现是 Claude 说“无法连接到 Figma MCP 服务”或者读取文件时报错超时。排查步骤按顺序来运行claude mcp list确认 figma 服务状态不是 failed检查FIGMA_API_KEY是否还有效。Figma Token 偶尔会被撤销或过期重新生成一个再添加一次即可检查文件链接里的权限。MCP 读取文件需要你的 Figma 账号对该文件有访问权限如果文件是别人分享的且只读也要确认当前 Token 对应的账号能访问到如果单次文件过大、图层数上万读取可能超时。这种时候不要一上来就读取整个文件而是先让 Claude 只读指定画板或指定节点。5.2 生成的 HTML 层级混乱AI 在处理复杂设计稿时有一定概率把嵌套关系搞乱常见表现是 Grid 和 Flex 混用导致元素错位或者 CSS 类名全变成classframe-123这类没有语义的名称。遇到这种情况我一般不会让它“再生成一次”而是让它先输出一份“结构说明”把读到的图层层级用文字列出来我再按业务模块给你拆成清晰的 HTML 结构。比如请先列出「首页」画板的图层树按照视觉模块分组然后基于这个分组结果重新生成 HTML 骨架保持模块化。这样等于把设计稿到代码中间加了一层“业务翻译”效果比盲目重试稳定得多。5.3 生成的样式和设计稿偏差大多数偏差来源于 Claude 没有真正读取到样式参数或者是读到了但没有被充分利用。这里可以强硬一点在提示词里要求它对照数据逐项核对请逐项列出画板里主要模块的宽度、间距、字体、颜色然后对比当前 CSS 逐一说明哪些是一致的、哪些有偏差最后修正。这种“对照表”式的处理方式相当于让 AI 做一次自查通常能修正掉绝大部分肉眼可见的偏差。如果某些设计语言特别微妙比如渐变、投影、磨砂玻璃效果老实说 AI 的还原度有限这部分我会选择手动补充不跟它死磕。5.4 Token 消耗和速度控制技巧Figma 文件越大、图层越多MCP 调用次数和上下文消耗就越多。长时间跑下来不仅速度变慢费用也会上升。我的习惯是先做小范围验证。先用一个只有几个图层的页面测试整条链路确认可行后再处理复杂页面同时分模块处理而不是一次性把十几个画板全部喂给 Claude。生成过程中及时使用会话管理或 /compact 命令压缩上下文避免对话太长影响后续输出的准确性。5.5 交互和逻辑部分 AI 帮不了你必须认清楚边界。Claude Code 善长的是把设计稿还原成静态 HTML/CSS但它不会自动帮你实现表单校验、数据请求、路由跳转、状态管理这些业务逻辑。它可以在你给出规则后帮你补充代码但深层业务设计仍然需要你来主导。我的做法是让 Claude 生成完成后把各个按钮和表单提前留好>