前阵子接了个落地页需求设计稿在Figma里躺了三天前端排期只给了半天。放在以前我肯定要开PS量尺寸、导切片、按设计规范手搓HTML光是把间距、字号、颜色一个个对齐就得一两个小时。这周我用Claude Code加Figma MCP试了另一条路让AI直接读取Figma的结构化数据再把设计稿转换成HTML页面从拿到文件链接到产出首版前后不到十分钟。这篇文章就把这条链路完整拆开聊清楚它到底怎么工作、适合什么场景以及我在实际使用中踩过的坑。1. 从“人肉读图”到“AI读图”手动切图流程的痛点到底在哪1.1 老流程不是慢在“切”而是慢在“信息搬运”传统设计稿转网页的流程表面上是“切图”实际上是一连串信息搬运打开设计稿确认画布尺寸测量容器间距记录字号字重挑颜色值看圆角大小检查 hover 状态再把这些信息逐个填进 HTML 和 CSS 里。搬运一次不慢但页面有十几个区块、几十个组件的时候重复劳动就很可观了。我见过不少前端同事的解法是先把设计稿截图放到旁边然后用开发者工具手动调样式。这种做法的误差很大尤其碰上不按栅格做的设计稿一个区块的 padding 和 margin 经常靠肉眼猜。更麻烦的是设计稿改了你又得从头对比一次看看哪些间距变了、哪个字号被调了。整个过程非常消耗耐心而且很难避免低级错误。所以我一直觉得这个场景最适合交给AI做的不是“写代码”而是“读设计稿”。真正耗时的不是敲CSS的过程而是从设计稿里把结构化信息准确提取出来。只要这一步自动化了后面的代码生成反而顺理成章。1.2 为什么“截图丢给AI”不够用有人会问我把设计稿截图发给 Claude让它照着写 HTML 不行吗我试过效果很不稳定。截图本质上是像素AI 能看出“这里有个绿色按钮”但很难精确判断按钮距离左边是 32px 还是 36px文本是 16px 还是 17px也不容易判断嵌套层级和溢出关系。更关键的是截图没法表达设计稿里的组件关系。一个按钮是独立组件还是某个容器的子元素它和旁边卡片之间的间距用的是 auto layout 里的 gap 还是 margin这些信息在像素上是不存在的。AI 只能靠猜猜出来的结果自然和你想要的有差距。这也是我喜欢 Figma MCP 的原因它让 AI 不再靠“看”而是靠“读”。MCP 服务器会直接返回设计稿里的节点树、样式对象、布局约束等结构化数据AI 拿到的信息比人眼看到的还全。只要理解了这个差异你就能明白为什么这条链路比传统的“截图生成”靠谱得多。2. Figma MCP 工作原理AI并不是在看图而是在读取结构数据2.1 MCP 到底是个什么协议MCP 全称 Model Context Protocol可以理解成一个“AI 应用和外部工具之间的 USB 接口”。以前要让 AI 读取某个文件或调用某个服务得专门为它写一堆集成代码现在 MCP 把工具调用标准化了Claude Code 只需要按照协议去调用本地或远程的 MCP 服务器就能拿到数据。在这个场景里Claude Code 是“客户端”Figma MCP 是“服务器”。服务器负责连接 Figma 的开放 API把设计稿里的节点信息抓取下来再转成 AI 容易理解的文本或 JSON 结构。Claude Code 收到这些结构后结合用户输入的指令生成对应的 HTML/CSS 代码。打个比方以前前端开发是从设计稿里“抄”样式现在相当于请了一个能直接读设计稿底层数据的助手它拿到的是设计稿的“源文件信息”而不是“截图”。2.2 一个典型的 FIgma MCP 工具能提供什么市面上常见的 Figma MCP 服务器通常会暴露这几类工具读取文件信息输入 Figma 文件链接或文件 ID返回文件名称、页面列表、画板结构。读取节点详情输入某个 Frame 或 Group 的节点 ID返回该节点的所有子节点和布局属性。获取样式数据返回填充色、字体、字号、行高、圆角、边框、阴影、间距等视觉参数。导出图片把指定节点导出为 PNG 或 SVG用于生成图片资源或让 AI 参考视觉效果。表格式地看AI 从设计稿里能拿到的信息非常具体数据类型典型字段用途布局信息x、y、width、height、padding、gap、direction还原容器结构和间距文本样式fontFamily、fontSize、fontWeight、lineHeight、letterSpacing生成准确的文字样式视觉填充color、opacity、fills、strokes还原背景、边框、文字颜色组件关系children、component、instance识别组件化结构生成可复用类名这些数据落到 Claude Code 手里后AI 不再是“看到设计稿后自由发挥”而是“依据结构化样式生成对应代码”。这也是为什么用它生成的 HTML色彩值、间距、字号通常比截图识别准得多。2.3 为什么说它是“结构优先”而不是“像素级还原”有一点要提前说明Figma MCP 返回的是“设计结构”不是“渲染快照”。所以 AI 生成 HTML 时优先还原的是结构、布局、样式参数而不是像素级 1:1 还原。比如某个容器里有 3 个卡片MCP 会告诉 AI 这是 3 个子节点每个子节点有各自的宽高和位置AI 会据此生成一个 flex 容器加 3 个 flex item而不是傻傻地用绝对定位去还原坐标。这个设计是有意为之的。前端代码本来就不应该用绝对坐标写页面而是要用响应式布局去适配不同屏幕。所以“结构优先”正好符合真实前端开发习惯。你给 AI 的是一套“设计稿的骨相”AI 拿它去生成 Web 端的皮相中间需要你有意识地做一轮取舍与微调。3. 搭建本地开发环境装Claude Code、挂Figma MCP、拿到访问令牌3.1 安装 Claude Code 并完成登录Claude Code 是 Anthropic 推出的命令行编程助手可以理解为跑在终端里的 AI 结对编程工具。你需要先确保本机装有 Node.js 18 以上版本然后打开终端执行npm install -g anthropic-ai/claude-code安装完成后在任意目录敲claude首次启动会引导你登录账号并授权。登录成功后终端里会出现一个交互式会话你可以直接输入自然语言指令比如“读取项目里的 README然后帮我写一个构建脚本”。如果你之前用过 VS Code 或 IntelliJ 里的 AI 编程插件可能会问为什么不直接用插件Claude Code 的优势在于它能直接访问本地文件系统、执行终端命令也能通过 MCP 协议挂载外部数据源。这意味着它可以在同一个会话里既读取 Figma 设计稿又直接在工作目录里写出 HTML 文件然后再帮你运行预览服务器。3.2 配置 Figma MCP 服务器Claude Code 支持通过/mcp命令添加 MCP 服务器。典型做法是在 Claude Code 会话中输入/mcp add figma -- npx figma-developer-mcp --figma-api-key你的Figma访问令牌不同 MCP 实现可能使用不同的包名和参数但整体思路一致让 Claude Code 知道要启动哪个 MCP 服务器并提供 Figma API 访问凭据。如果你是第一次配置建议先用一个最简单的项目目录测试。启动claude后执行/mcp如果配置成功你会看到 figma 这个 MCP 服务器处于 connected 状态。此时可以直接输入使用 figma MCP 读取 https://www.figma.com/file/你的文件ID 的页面结构并告诉我有哪些 Frame 可以直接转成网页。如果 AI 回答里出现了文件中的 Frame 名称和尺寸说明链路已经通了。3.3 获取 Figma API 访问令牌的完整步骤Figma 的访问令牌不是登录密码而是你在 Figma 账号设置里单独生成的个人访问令牌。步骤并不复杂打开 Figma 网页版点击右上角头像进入 Settings。往下找到 Personal access tokens。点击 Generate new token选择需要的权限读取文件内容通常需要files:read导出图片需要images:read。复制生成的一串 token妥善保存——它只在生成时完整显示一次。拿到 token 后还可能需要把它放到环境变量里避免直接写进配置命令。例如在终端里执行export FIGMA_API_KEY你的token然后在 Claude Code 里通过${FIGMA_API_KEY}引用。不过不同 MCP 服务器的配置方式有差异建议以具体项目的 README 为准。3.4 验证连接时最容易忽略的三个细节第一个细节是文件权限。你的 Figma 账号必须对这个设计稿文件有“可以查看”的权限否则就算 token 正确MCP 服务器也会返回 403。第二个细节是文件 ID 的提取Figma 文件链接一般是https://www.figma.com/file/abc123/DesignName?node-id...其中abc123是文件 ID后面那串是节点 ID。想要精准操作某个画板光给文件 ID 还不够最好把节点 ID 也给 AI。第三个细节是网络访问。Figma MCP 服务器启动后会请求 Figma 的公开 API如果本地网络无法访问你会看到超时错误。这时先别怀疑 Claude Code先用浏览器打开 Figma 文件或者用 curl 测试一下 API 是否通。确认网络通畅后再回头看 MCP 配置。4. 实操全流程从一个真实设计稿到一份可运行的HTML页面4.1 准备设计稿先花十分钟做“可读化”整理很多人以为拿到设计稿就能直接生成实际上设计稿的质量直接决定生成效果。如果你的设计稿有大量嵌套组、位置重叠、未命名的 FrameAI 读取出来的节点树会非常混乱生成的结果自然也不理想。我建议在开始前花十分钟做三件事把需要转换的页面内容放到一个独立的 Frame 里并命名给主要区块、组件的图层取好英文名尽量使用 Figma 的 Auto Layout 而不是手动拖拽定位。命名和布局越规范AI 越容易理解“这是 Header”“这是 Button”。这一步的主语是“你”不是 AI。Figma MCP 可以读取结构但它不会帮你整理设计稿。就像你可以让助手去读一份混乱的文档但文档本身逻辑不清谁的阅读效率都不会高。4.2 编写第一轮生成指令不只说“生成页面”要说清楚约束启动 Claude Code 后我输入的提示词大概长这样连接 figma MCP读取文件 ID abc123 中名为 “landing” 的 Frame。 请根据这个 Frame 的设计信息生成一个 HTML 文件 1. 语义化标签包含 header、main、footer。 2. CSS 使用原生样式类名采用 BEM 风格。 3. 桌面端优先同时用 media query 适配小于 768px 的移动端。 4. 图片位置先用占位符不要引用外部资源。 5. 生成完整文件保存到当前目录的 index.html。这段指令里最关键的是四个约束目标 Frame、文件保存方式、样式策略、响应式要求。如果没有这些约束AI 可能会生成一个只包含零散代码片段的回复或者自作主张用 Tailwind也会把图片链接写成设计稿里的资源地址。4.3 AI 生成过程中发生了什么当 Claude Code 收到指令后它会先调用 Figma MCP 的工具读取文件信息。AI 会拿文件 ID 去查文件里的页面和节点再根据你指定的 Frame 名称找到目标节点然后逐一读取该节点下的子节点结构。因为 MCP 返回的数据通常是 JSONAI 会把它转化成对布局和样式的理解。我见过的一次实际输出是这样的AI 先列出 “Hero Section”“Feature Cards”“Pricing Section” 三个主要区块然后根据每个区块的宽度、间距、填充色生成对应的 section 和 flex 布局。整个过程不会一次性把整个设计稿节点全读进来而是按需读取避免超出上下文窗口。这轮生成通常在几十秒内完成。完成之后AI 会在当前目录写出一个完整的 index.html并提示你可以在浏览器里打开预览。你可以直接修改提示词让 AI 继续调整比如“Hero 区域的高度太高header 背景色改成深色”。4.4 一个最小可运行的生成示例为了方便理解我模拟一份非常简单的生成结果。假设设计稿里有一个 Hero 区块深蓝色背景白色标题按钮是圆角主色。AI 生成的结构会类似于section classhero div classhero__content h1 classhero__titleDesign to Code/h1 p classhero__descUse Figma MCP to generate HTML./p a classbtn btn--primary href#Get Started/a /div /section.hero { display: flex; align-items: center; justify-content: center; min-height: 480px; background-color: #0b1f33; } .hero__title { font-size: 48px; font-weight: 700; color: #ffffff; } .btn--primary { background-color: #2563eb; border-radius: 8px; padding: 12px 24px; color: #fff; }注意这里 AI 不会把 Hero 区块的位置写成position: absolute; top: 120px; left: 0而是转换成语义化的布局这正是前面说的“结构优先”。你拿到的是一份可以继续维护的页面而不是一套无法适配的拼贴图。4.5 第一版生成出来后紧接着做三轮自查生成 HTML 只是第一步。我的习惯是第一轮检查结构看 section 是否按设计稿顺序排列有没有漏掉区块第二轮检查间距和颜色比起截图里的视觉核对 padding、gap、背景色是否接近第三轮检查响应式把浏览器窗口缩小到手机宽度看布局是否塌陷。这三轮自查不一定要人工逐项进行也可以把问题直接塞回给 Claude Code。比如“移动端下 hero 的标题太大了把 min-height 降到 320px字号改成 32px”。AI 会修改完代码后告诉你改了什么。但注意AI 不擅长发现“它自己不知道的问题”所以视觉层面的最终判断还是得靠你人工过一眼。5. 生成结果翻车时问题大多出在这几处5.1 图层命名混乱AI 读不懂“Frame 17 Copy 3”是什么意思只要 Figma 文件里出现大量无意义命名生成质量就会明显下降。AI 可能把“Frame 17 Copy 3”理解成一个卡片也可能理解成一个按钮全看上下文猜测。如果设计稿是别人给的你没法控制对方的命名习惯至少可以在读取前用 Figma 的 “Select Layers” 面板快速把关键 Frame 重命名。碰到这种情况我在提示词里会额外加一句“遇到名称无意义的节点时根据它的子节点结构推断它应该是什么组件并在注释里标注你的判断。”这能减少一部分误判但最可靠的办法还是提前整理设计稿。5.2 文件太大导致上下文溢出如果你的设计稿有几十个页面、上千个节点AI 不可能全读一遍。常见表现是你让 Claude Code 读取整个文件它回答到一半就中断了或者开始忽略后面的内容。这不是模型不聪明而是单次交互的 token 限制。解决思路是缩小读取范围。Figma 链接里一般带有node-id参数把它一并给 AI。比如读取文件 abc123 中 node-id123-456 这个 Frame。这样 AI 只读取你指定的画板既快又准。还有一种做法是先让 AI 列出文件里的页面和 Frame 名称你确认后再指定目标 Frame 读取。5.3 MCP 连接提示失败但 Figma 明明能打开如果你遇到“Figma MCP server not connected”之类的报错先按这个链路排查现象可能原因处理方式MCP 服务器启动失败本地未安装 Node 或版本过低检查 node -v升级到 18 以上读取文件时报权限错误访问令牌权限不足重新生成 token勾选 files:read报错 404文件 ID 或节点 ID 错误回到 Figma 浏览器地址栏复制正确 ID网络超时本地网络无法访问 Figma API用 curl 测试 API 连通性排查时不要一上来就重装 Claude Code。先看/mcp面板里的状态再手动执行 MCP 服务器的启动命令通常能最快定位问题。5.4 明明给了设计稿AI 还是生成了一大堆“自由发挥”的样式这种情况通常出现在提示词给得太模糊的时候。你只说了“帮我把这个设计稿转成 HTML”AI 就会按自己的理解去补全颜色、间距、字体甚至额外加一些原设计稿里没有的装饰。更稳的做法是在提示词里明确“以设计稿的数据为准不要新增设计稿中不存在的元素”。你甚至可以要求“每个样式都要标注它来自哪个 Figma 节点如果某个样式无法从设计稿获得用 TODO 注释标出。”有了这个约束之后AI 会更克制地使用自己的想象力。5.5 生成的“响应式”只是把宽度堆叠而不是真正的适配AI 默认理解下的移动端适配很多时候只是把flex-direction改成column再把容器宽度调到 100%。遇到简单的文章页还好碰到复杂导航、表单项、卡片网格时这种适配方式离可用还差一段距离。想要更好的响应式效果在设计稿里最好有移动端 Frame。如果没有你至少要在提示词里描述清楚移动端布局预期比如“移动端下导航栏隐藏链接显示汉堡菜单按钮卡片两列改单列hero 高度自适应内容”。让 AI 基于布局规则去推测比让它自由发挥要靠谱得多。6. 让AI生成的HTML更接近生产质量提示词与迭代技巧6.1 把项目规范写进 CLAUDE.md让 AI 一直记得Claude Code 支持读取项目里的CLAUDE.md文件作为长期上下文。你可以在里面写清楚团队的 CSS 命名规范、断点变量、颜色 token、资源路径规则、是否允许使用 Tailwind、图片如何引入等。举个例子如果团队里统一使用--color-primary: #2563eb;这样的 CSS 变量你就在 CLAUDE.md 里写清楚“所有颜色必须引用变量不得出现硬编码色值”。这样每次打开 Claude Code它都会默认遵守这条规范不用每条指令重复说明。我实际体验下来这比每次写长提示词有效得多。因为人的记忆会疲劳但 Claude Code 每次开会话都会自动加载项目规范。你把规范维护好就相当于给 AI 建立了一个稳定的工作基线。6.2 先出结构骨架再填样式细节我强烈建议你分两轮来做而不是让它一次生成完。第一轮只要求生成 HTML 结构包括 section 划分、注释、大概的 class 名不要写任何 CSS第二轮再要求为每个区块补上样式。好处有两个。第一你可以先确认结构是否符合设计稿的信息架构避免后面推倒重来。第二AI 在第一轮生成纯结构时对布局关系会理解得更准确因为不用担心样式细节干扰它的判断。这就像写代码前先画好接口而不是边写边改。6.3 设计稿里的图片资源怎么处理Figma MCP 虽然能读取设计结构和样式但不会自动帮你下载图片并保存到本地。AI 生成的 HTML 里如果引用了设计稿中的图片通常只是占位符或外部链接。实际项目中图片最好的处理方式是让 Figma MCP 导出指定节点的图片或者你手动从 Figma 中导出图片资源放到项目的assets目录。也可以在提示词里要求“img 标签的 src 使用 assets/xxx.png并在代码里注释你需要替换的图片资源”。这样至少保证 HTML 跑得起来不会出现一堆破图。6.4 用“角色 目标 约束”结构重写提示词我发现自己身边同事写提示词时最容易漏掉的是“约束”。光说“把设计稿转成 HTML”AI 会默认你的偏好是它的偏好。但如果你说“你是一名资深前端工程师目标是生成符合 W3C 语义化规范的页面约束不使用 JavaScript、不使用外部字体、所有类名必须语义化”结果就会完全不同。我整理了一个通用模板角色你是资深前端工程师。 目标将 Figma 文件中的 Frame 还原为可维护的 HTML/CSS。 约束 - 不使用 Tailwind使用原生 CSS。 - 类名使用 BEM 格式。 - 不新增设计稿中不存在的样式。 - 图片用占位符。 - 生成一个完整的 index.html 文件。这套结构虽然简单但每次都能把 AI 的输出质量拉高一大截。原因是它让 AI 在生成过程中不断自查而不是一次生成结束才后悔。6.5 别指望“一键”把它当作“半自动协作”最后说点实在的。很多人看到“一键生成”就觉得可以完全放手但我在实际用下来这套链路更适合理解成“半自动协作”AI 负责把设计稿里的结构化信息变成代码骨架你负责审查语义、处理响应式细节、替换真实图片以及微调与设计稿不一致的地方。如果你有一个图层命名规范、用 Auto Layout 组织结构的干净设计稿这套流程非常香。反之如果设计稿本身很混乱你需要先花时间整理否则 AI 生成结果只会继承这份混乱。我的经验是投入在设计稿整理上的每一分钟都会在生成质量上回报你十分钟。用 Claude Code Figma MCP 生成 HTML不是要彻底替代前端工程师而是把“从头测量、抄写样式”的模式变成“AI 快速搭好骨架、人来雕琢”的模式。至少对我来说最明显的变化是接到设计稿后的前 30 分钟不再焦虑因为那个机械重复的部分已经有人帮我干了。