)
1. 为什么 Figma 转代码总是变成体力活前端同学大概都有过这种体验产品经理在 Figma 里画好原型图甩过来一个链接说“就按这个做”。你打开一看导航栏、卡片列表、表单、弹窗、hover 动效密密麻麻几百个图层。接下来就是逐像素核对间距、色值、阴影层级一边切窗口一边写 CSS改完还要手动测一遍。这个流程真正消耗时间的地方其实不在“写代码”本身而在“理解设计”和“反复对齐”。Figma 里的图层命名往往很随意Frame 427、Group 18这种名字根本看不出语义一个按钮的渐变色可能要吸色好几次才能对上列表项的 hover 效果在设计稿里只是一个静态标注你得自己脑补交互逻辑。等你好不容易还原得差不多了产品经理说“这个模块挪到右边字体换一套”之前写的布局和样式又得大面积重构。我试过用截图 AI 对话的方式让模型生成代码但问题很明显模型看不到 Figma 的层级结构只能靠图片猜生成的代码结构混乱class 命名全靠编还原度也不稳定。真正靠谱的做法是让 AI 直接读取 Figma 文件的结构化数据——图层树、样式属性、组件关系、约束条件然后基于这些真实数据生成代码。这就是 MCPModel Context Protocol要解决的问题。MCP 本质上是一个让 AI 工具和外部数据源对话的协议。你可以把它理解成给 AI 装了一个“Figma 读取器”AI 不再靠猜而是通过 MCP Server 拿到 Figma 节点的精确信息再结合自己的代码生成能力输出前端代码。本文要讲的就是用 CodeBuddy 配合 Framelink Figma MCP Server把 Figma 原型图自动转成可运行的前端页面。整个链路包括安装 CodeBuddy、配置 MCP Server、获取 Figma Token、修改 MCP 配置文件、用自然语言指令触发代码生成、最后在浏览器里验证效果。目标很明确——让你能独立复现这套自动转码流程把重复的堆样式工作压缩到几分钟。适合谁看如果你是会写 HTML/CSS 但不想再手动还原设计稿的前端或者是想快速把原型变成可交互 Demo 的全栈/独立开发者这套流程都能直接用。下面从环境准备开始一步步来。2. CodeBuddy 与 Framelink Figma MCP 的前置准备在动手配置之前先把两个核心角色说清楚CodeBuddy 和 Framelink Figma MCP Server。CodeBuddy 是腾讯云自研的编程提效工具基于混元 DeepSeek 双模型驱动提供 AI 技术问答、Craft 软件编码智能体、智能代码补全、单元测试、代码修复等能力。它兼容 MCP 开放生态支持多模型接入、自定义智能体和指令管理。简单说它就是你日常写代码的那个 AI 助手只不过这次我们要让它通过 MCP 去读 Figma。Framelink Figma MCP Server 是专门为“Figma 设计稿转前端代码”设计的 MCP 服务。它的工作方式是通过 Figma 官方 API 读取你指定节点的层级结构、样式属性、组件关系把这些结构化数据喂给 AIAI 再据此生成 HTML/CSS/组件代码。相比截图识别这种方式拿到的信息是精确的——间距是 16px 就是 16px色值是#1A73E8就是#1A73E8不会出现“看起来差不多”的偏差。前置准备清单一个 Figma 账号并且你要转的那个设计稿你有访问权限自己的文件或者别人分享给你的都可以。VS Code本文以 VS Code 为例CodeBuddy 也支持其他主流编辑器。能正常访问 Figma 官网和 CodeBuddy MCP 市场的网络环境。一个用于存放生成代码的本地项目目录比如figma-to-code-demo。关于模型接入CodeBuddy 本身支持多模型。如果你在配置过程中需要统一管理 API Key、切换模型或者查看调用情况可以用 TaoToken 做一层统一接入。它的 API 地址是https://taotoken.net/api控制台在https://taotoken.net/consoleAPI Keys 管理在https://taotoken.net/api-keys。模型对话入口在https://taotoken.net/chatCoding Plan 在https://taotoken.net/coding-plan接入文档在https://taotoken.net/doc。这些地址后面配置时会用到先记一下。这里要强调一点MCP 配置的核心是三件套——Base URL、Key、Model ID。不管你用的是 CodeBuddy 内置模型还是通过 TaoToken 接入的模型只要涉及 MCP 调用这三项必须写全否则会出现 401 或者模型找不到的错误。下面进入具体配置环节。3. 可复制的 MCP 配置从安装到 settings 片段这一节是整篇的核心我会把每一步的配置都写成可以直接复制粘贴的形式。你跟着做基本不会卡住。3.1 安装 CodeBuddy 插件打开 VS Code点击左侧的 Extensions 按钮或者按CtrlShiftX在搜索框输入CodeBuddy找到腾讯云出的那个点击 Install。安装完成后左侧活动栏会多出一个 CodeBuddy 图标说明插件装好了。3.2 在 MCP 市场安装 Framelink Figma点击 CodeBuddy 图标进入面板右上角有一个 MCP 市场入口。点进去搜索Figma能看到Framelink Figma MCP Server点击 Install。安装完成后切到 Installed 选项卡点击号就能看到 MCP 的配置文件内容。里面有一个YOUR-KEY占位符这个后面要替换成你自己的 Figma Token。3.3 获取 Figma Token登录 Figma进入 Settings设置依次点击 Security → Generate New Token。在弹窗里输入一个 token name随便起比如codebuddy-mcp设置过期时间权限先都改成只读Read-only然后点击 Generate Token。系统会生成一串 token点击 copy 复制下来。注意这个 token 只显示一次复制后先存到安全的地方。3.4 修改 MCP 配置文件回到 CodeBuddy 的 MCP 配置文件把YOUR-KEY替换成刚才复制的 Figma Token。如果你是通过 TaoToken 统一接入模型配置文件里还需要补上 Base URL 和 Model ID。下面是一个完整的settings.json片段示例路径和字段名保持和 CodeBuddy 实际配置一致{ mcpServers: { framelink-figma: { command: npx, args: [ -y, figma-developer-mcp, --figma-api-keyYOUR-FIGMA-TOKEN, --stdio ] } }, model: { baseUrl: https://taotoken.net/api, apiKey: YOUR-TAOTOKEN-API-KEY, modelId: claude-sonnet-4-20250514 } }把YOUR-FIGMA-TOKEN换成 3.3 步拿到的 tokenYOUR-TAOTOKEN-API-KEY换成你在https://taotoken.net/api-keys生成的 KeymodelId按你实际要用的模型填。如果你直接用 CodeBuddy 内置模型model这一段可以省略但 MCP 的framelink-figma段必须保留。保存配置文件后重启一下 CodeBuddy 面板让配置生效。你可以在 MCP 的 Installed 列表里看到framelink-figma的状态变成已连接。3.5 Figma 节点映射规则MCP 读取 Figma 时最关键的是node-id。Figma 链接里通常长这样https://www.figma.com/design/LK8lb8OasxVIhIeioKD8kL/Figma-basics?node-id4368-321123其中node-id4368-321123就是你要转的那个节点的 ID。注意 Figma 链接里有时是4368-321123有时是4368:321123MCP 一般两种都能识别但建议统一用带-的格式。如果你想转整个页面而不是单个节点可以不带node-id但那样生成的范围会很大代码质量反而下降。建议先选一个具体的 Frame 或 Section 来转比如一个卡片列表或者一个登录表单。映射规则可以记成一句话一个 Frame 对应一个组件或一个页面区块node-id 定位到 Frame 层级MCP 读取该 Frame 下的所有子图层和样式AI 按图层树生成对应的 DOM 结构。图层命名越规范比如card-title、btn-primary生成的 class 名越可读。如果图层名是Frame 427这种AI 会自己推断语义但准确度会打折扣。配置到这里就完成了。下一节我们实际发一次请求看看从 Figma 链接到可运行 HTML 的完整过程。4. 验证请求从 Figma 链接到可运行 HTML配置好之后我们来跑一次完整的验证。这一步的目标是给 CodeBuddy 一个 Figma 链接让它通过 MCP 读取节点数据生成一个包含 CSS 的 HTML 文件然后在浏览器里打开确认效果。4.1 复制 Figma 节点链接在 Figma 里选中你要转的页面或 Frame右键选择Copy link to selection复制所选内容的链接。链接里会带上node-id参数。比如https://www.figma.com/design/LK8lb8OasxVIhIeioKD8kL/Figma-basics?node-id4368-321123tdnKdiYiCZO4KFjJv-44.2 在 CodeBuddy 里发指令回到 VS Code打开 CodeBuddy 面板在对话框里输入类似这样的指令根据提供的 figma 链接生成对应的 html 页面要求 css 也放在 html 当中且文件名为 figmatocode.html https://www.figma.com/design/LK8lb8OasxVIhIeioKD8kL/Figma-basics?node-id4368-321123tdnKdiYiCZO4KFjJv-4指令里要明确三件事生成什么HTML 页面、样式怎么放CSS 内联在 HTML 里、文件名是什么figmatocode.html。这样 AI 不会跑偏去生成 React 组件或者外部 CSS 文件。4.3 观察 MCP 调用过程发送后CodeBuddy 会开始调用framelink-figmaMCP。你可以在面板里看到它先请求 Figma API拉取node-id4368-321123的节点数据包括图层树、样式属性、文本内容、约束条件。然后模型基于这些数据生成 HTML 结构把 Figma 的 Auto Layout 转成 Flexbox把填充色转成background-color把圆角转成border-radius把阴影转成box-shadow。这个过程通常几十秒到两三分钟取决于节点复杂度和模型速度。生成完成后CodeBuddy 会提示生成的文件路径比如./figmatocode.html。4.4 在浏览器里验证根据返回的本地路径用浏览器打开figmatocode.html。你应该能看到页面结构和 Figma 原型图基本一致导航栏、卡片、按钮、文字层级都对得上。可能会有一些细微偏差比如字体渲染差异、间距差 1-2px这些手动微调一下就行。我实测下来一个中等复杂度的页面导航 卡片列表 表单从复制链接到浏览器打开整个过程大概 3 分钟左右。相比手动写 HTML/CSS 动辄一两个小时效率提升非常明显。4.5 生成结果的结构说明生成的 HTML 里class 命名通常会参考 Figma 图层名。如果图层名规范你会看到类似classcard-title、classbtn-primary这样的语义化命名。如果图层名不规范AI 会生成classframe-427这种后续可以手动重命名。CSS 部分会内联在style标签里包含布局、颜色、字体、间距、圆角、阴影等属性。你可以直接把这段代码复制到项目里或者让 CodeBuddy 进一步改写成 React/Vue 组件。验证通过后这套流程就算跑通了。下一节我们看看常见的报错和排查方法。5. 常见报错排查401、local proxy failed、reading choices配置 MCP 的过程中最容易卡在几个典型报错上。这一节我把真实遇到过的错误和排查路径列出来你对照着看。5.1 401 Unauthorized这是最常见的错误通常出现在 MCP 请求 Figma API 或者模型请求 TaoToken 的时候。原因无非两个Key 不对或者 Key 没传对位置。如果是 Figma 侧报 401检查settings.json里--figma-api-key后面的 token 是否完整复制有没有多余空格。Figma Token 是一串很长的字符复制时容易漏掉尾部。另外确认 Token 的权限至少包含file_read如果只勾了file_metadata是读不到节点内容的。如果是模型侧报 401检查apiKey字段是否填的是https://taotoken.net/api-keys生成的 Key以及baseUrl是否写成了https://taotoken.net/api注意不要多加/v1或者尾部斜杠。401 的本质是认证失败先把 Key 和 URL 这两项核对一遍基本能解决。5.2 local proxy failed这个报错通常出现在 MCP Server 启动阶段。figma-developer-mcp是通过npx启动的如果本地 Node.js 环境有问题或者 npx 缓存损坏就会报local proxy failed。排查步骤先在终端手动跑一遍npx -y figma-developer-mcp --figma-api-keyYOUR-TOKEN --stdio看能不能正常启动。如果报模块找不到升级一下 Node.js 到 18 以上。如果报网络超时检查 npm 源是否可用。如果手动能跑通但 CodeBuddy 里报错把 CodeBuddy 重启一次或者删掉 MCP 重新安装。5.3 reading choices 相关错误这个错误一般出现在模型返回结果解析阶段提示reading choices或者cannot read property choices of undefined。原因是模型 API 返回的结构和 CodeBuddy 预期的结构不一致。常见于 Base URL 配错比如把https://taotoken.net/api写成了https://taotoken.net/api/v1/chat/completions导致返回体不是标准的 OpenAI 格式。解决方法是把baseUrl改回https://taotoken.net/api让 CodeBuddy 自己拼接路径。同时确认modelId是有效的模型 ID如果模型 ID 写错有些服务会返回错误结构而不是标准报错也会触发reading choices。5.4 OAuth 相关报错如果你在 Figma 侧看到 OAuth 错误通常是因为用了 OAuth 方式而不是 Personal Access Token。本文用的是 Token 方式不需要走 OAuth 流程。检查settings.json里是否误加了 OAuth 相关字段删掉即可。另外确认 Figma 账号已经完成了邮箱验证未验证的账号生成 Token 后调用 API 也会报权限错误。5.5 MCP 连接成功但生成代码为空这种情况一般是node-id不对。Figma 链接里的node-id如果指向的是一个空 Frame 或者一个 Group 而不是 FrameMCP 可能读不到有效内容。解决办法是在 Figma 里选中一个明确的 Frame图层面板里图标是#的那个重新复制链接。另外确认该节点对你当前账号可见如果是别人分享的文件权限要是can view以上。5.6 三件套检查清单每次遇到 MCP 相关报错先按这个清单过一遍检查项正确值常见错误Base URLhttps://taotoken.net/api多写/v1或尾部斜杠API Keyhttps://taotoken.net/api-keys生成复制不完整或用了过期 KeyModel ID有效模型 ID如claude-sonnet-4-20250514拼写错误或模型不存在Figma Token只读权限含file_read权限不足或 Token 过期node-id指向有效 Frame指向空 Group 或不可见节点把这张表存下来下次报错直接对照能省不少时间。排查完之后如果你需要更详细的接入说明可以看https://taotoken.net/doc需要管理 Key 就去https://taotoken.net/api-keys想先验证模型对话效果可以去https://taotoken.net/chat试一下。6. 把这条链路用起来从 Demo 到日常开发跑通一次 Demo 只是开始真正有价值的是把这条链路嵌进日常开发流程。下面说几个我实际用下来的经验。第一Figma 图层命名直接决定生成代码的可读性。如果设计稿是团队协作的建议推动设计同学用语义化命名比如card-container、card-title、card-desc、btn-primary。这样 MCP 读出来的图层树清晰AI 生成的 class 名也清晰后续维护成本低很多。如果设计稿命名很乱你可以在 Figma 里先手动重命名几个关键 Frame再复制链接给 CodeBuddy。第二一次只转一个区块不要贪多。有人喜欢把整个页面链接丢进去让 AI 生成完整页面。这样做的结果是代码量大、结构复杂AI 容易在中途丢失上下文生成质量下降。更好的做法是按区块转先转导航栏再转卡片列表再转表单最后手动拼装。每个区块单独验证出问题也好定位。第三生成的代码不要直接上生产。MCP 生成的是“高还原度初稿”不是“生产级代码”。你需要做几件事把内联 CSS 抽成外部样式或 CSS Module把重复的卡片结构抽成组件把硬编码的文本换成 props 或数据绑定检查响应式断点是否合理。这些工作比从零写快得多但不能省。第四结合 TaoToken 的 Coding Plan 做长期编码。如果你经常需要做 Figma 转代码可以把这套流程和 Coding Plan 结合在https://taotoken.net/coding-plan里管理你的编码任务和模型调用。这样每次转码的请求、模型选择、Key 使用都有记录团队协作时也方便统一管理。第五Claude Code 用户如果想把这条链路接到 Anthropic 生态可以参考https://taotoken.net/claude-code-anthropic的接入说明。核心还是三件套Base URL、Key、Model ID配好之后 MCP 调用和模型调用走同一套认证。最后说一个实际技巧生成完 HTML 后别急着关掉 CodeBuddy。直接在同一个会话里继续发指令比如“把这个页面的卡片列表改成 React 组件用 props 接收数据”CodeBuddy 会基于刚才的上下文继续改。这样从原型到组件是一条连续的链路不用重新描述需求。整套流程的核心价值是把前端工程师从“逐像素还原”里解放出来让你把时间花在交互逻辑、组件设计、性能优化这些真正需要思考的地方。Figma 转代码这件事AI 已经能做到 80 分剩下的 20 分靠你的工程判断去补。工具在https://taotoken.net这边都能找到入口配置片段上面也给了剩下的就是动手跑一遍。 通过CodeBuddy，将Figma原型图自动转化为前端代码(MCP)
1. 为什么 Figma 转代码总是变成体力活前端同学大概都有过这种体验产品经理在 Figma 里画好原型图甩过来一个链接说“就按这个做”。你打开一看导航栏、卡片列表、表单、弹窗、hover 动效密密麻麻几百个图层。接下来就是逐像素核对间距、色值、阴影层级一边切窗口一边写 CSS改完还要手动测一遍。这个流程真正消耗时间的地方其实不在“写代码”本身而在“理解设计”和“反复对齐”。Figma 里的图层命名往往很随意Frame 427、Group 18这种名字根本看不出语义一个按钮的渐变色可能要吸色好几次才能对上列表项的 hover 效果在设计稿里只是一个静态标注你得自己脑补交互逻辑。等你好不容易还原得差不多了产品经理说“这个模块挪到右边字体换一套”之前写的布局和样式又得大面积重构。我试过用截图 AI 对话的方式让模型生成代码但问题很明显模型看不到 Figma 的层级结构只能靠图片猜生成的代码结构混乱class 命名全靠编还原度也不稳定。真正靠谱的做法是让 AI 直接读取 Figma 文件的结构化数据——图层树、样式属性、组件关系、约束条件然后基于这些真实数据生成代码。这就是 MCPModel Context Protocol要解决的问题。MCP 本质上是一个让 AI 工具和外部数据源对话的协议。你可以把它理解成给 AI 装了一个“Figma 读取器”AI 不再靠猜而是通过 MCP Server 拿到 Figma 节点的精确信息再结合自己的代码生成能力输出前端代码。本文要讲的就是用 CodeBuddy 配合 Framelink Figma MCP Server把 Figma 原型图自动转成可运行的前端页面。整个链路包括安装 CodeBuddy、配置 MCP Server、获取 Figma Token、修改 MCP 配置文件、用自然语言指令触发代码生成、最后在浏览器里验证效果。目标很明确——让你能独立复现这套自动转码流程把重复的堆样式工作压缩到几分钟。适合谁看如果你是会写 HTML/CSS 但不想再手动还原设计稿的前端或者是想快速把原型变成可交互 Demo 的全栈/独立开发者这套流程都能直接用。下面从环境准备开始一步步来。2. CodeBuddy 与 Framelink Figma MCP 的前置准备在动手配置之前先把两个核心角色说清楚CodeBuddy 和 Framelink Figma MCP Server。CodeBuddy 是腾讯云自研的编程提效工具基于混元 DeepSeek 双模型驱动提供 AI 技术问答、Craft 软件编码智能体、智能代码补全、单元测试、代码修复等能力。它兼容 MCP 开放生态支持多模型接入、自定义智能体和指令管理。简单说它就是你日常写代码的那个 AI 助手只不过这次我们要让它通过 MCP 去读 Figma。Framelink Figma MCP Server 是专门为“Figma 设计稿转前端代码”设计的 MCP 服务。它的工作方式是通过 Figma 官方 API 读取你指定节点的层级结构、样式属性、组件关系把这些结构化数据喂给 AIAI 再据此生成 HTML/CSS/组件代码。相比截图识别这种方式拿到的信息是精确的——间距是 16px 就是 16px色值是#1A73E8就是#1A73E8不会出现“看起来差不多”的偏差。前置准备清单一个 Figma 账号并且你要转的那个设计稿你有访问权限自己的文件或者别人分享给你的都可以。VS Code本文以 VS Code 为例CodeBuddy 也支持其他主流编辑器。能正常访问 Figma 官网和 CodeBuddy MCP 市场的网络环境。一个用于存放生成代码的本地项目目录比如figma-to-code-demo。关于模型接入CodeBuddy 本身支持多模型。如果你在配置过程中需要统一管理 API Key、切换模型或者查看调用情况可以用 TaoToken 做一层统一接入。它的 API 地址是https://taotoken.net/api控制台在https://taotoken.net/consoleAPI Keys 管理在https://taotoken.net/api-keys。模型对话入口在https://taotoken.net/chatCoding Plan 在https://taotoken.net/coding-plan接入文档在https://taotoken.net/doc。这些地址后面配置时会用到先记一下。这里要强调一点MCP 配置的核心是三件套——Base URL、Key、Model ID。不管你用的是 CodeBuddy 内置模型还是通过 TaoToken 接入的模型只要涉及 MCP 调用这三项必须写全否则会出现 401 或者模型找不到的错误。下面进入具体配置环节。3. 可复制的 MCP 配置从安装到 settings 片段这一节是整篇的核心我会把每一步的配置都写成可以直接复制粘贴的形式。你跟着做基本不会卡住。3.1 安装 CodeBuddy 插件打开 VS Code点击左侧的 Extensions 按钮或者按CtrlShiftX在搜索框输入CodeBuddy找到腾讯云出的那个点击 Install。安装完成后左侧活动栏会多出一个 CodeBuddy 图标说明插件装好了。3.2 在 MCP 市场安装 Framelink Figma点击 CodeBuddy 图标进入面板右上角有一个 MCP 市场入口。点进去搜索Figma能看到Framelink Figma MCP Server点击 Install。安装完成后切到 Installed 选项卡点击号就能看到 MCP 的配置文件内容。里面有一个YOUR-KEY占位符这个后面要替换成你自己的 Figma Token。3.3 获取 Figma Token登录 Figma进入 Settings设置依次点击 Security → Generate New Token。在弹窗里输入一个 token name随便起比如codebuddy-mcp设置过期时间权限先都改成只读Read-only然后点击 Generate Token。系统会生成一串 token点击 copy 复制下来。注意这个 token 只显示一次复制后先存到安全的地方。3.4 修改 MCP 配置文件回到 CodeBuddy 的 MCP 配置文件把YOUR-KEY替换成刚才复制的 Figma Token。如果你是通过 TaoToken 统一接入模型配置文件里还需要补上 Base URL 和 Model ID。下面是一个完整的settings.json片段示例路径和字段名保持和 CodeBuddy 实际配置一致{ mcpServers: { framelink-figma: { command: npx, args: [ -y, figma-developer-mcp, --figma-api-keyYOUR-FIGMA-TOKEN, --stdio ] } }, model: { baseUrl: https://taotoken.net/api, apiKey: YOUR-TAOTOKEN-API-KEY, modelId: claude-sonnet-4-20250514 } }把YOUR-FIGMA-TOKEN换成 3.3 步拿到的 tokenYOUR-TAOTOKEN-API-KEY换成你在https://taotoken.net/api-keys生成的 KeymodelId按你实际要用的模型填。如果你直接用 CodeBuddy 内置模型model这一段可以省略但 MCP 的framelink-figma段必须保留。保存配置文件后重启一下 CodeBuddy 面板让配置生效。你可以在 MCP 的 Installed 列表里看到framelink-figma的状态变成已连接。3.5 Figma 节点映射规则MCP 读取 Figma 时最关键的是node-id。Figma 链接里通常长这样https://www.figma.com/design/LK8lb8OasxVIhIeioKD8kL/Figma-basics?node-id4368-321123其中node-id4368-321123就是你要转的那个节点的 ID。注意 Figma 链接里有时是4368-321123有时是4368:321123MCP 一般两种都能识别但建议统一用带-的格式。如果你想转整个页面而不是单个节点可以不带node-id但那样生成的范围会很大代码质量反而下降。建议先选一个具体的 Frame 或 Section 来转比如一个卡片列表或者一个登录表单。映射规则可以记成一句话一个 Frame 对应一个组件或一个页面区块node-id 定位到 Frame 层级MCP 读取该 Frame 下的所有子图层和样式AI 按图层树生成对应的 DOM 结构。图层命名越规范比如card-title、btn-primary生成的 class 名越可读。如果图层名是Frame 427这种AI 会自己推断语义但准确度会打折扣。配置到这里就完成了。下一节我们实际发一次请求看看从 Figma 链接到可运行 HTML 的完整过程。4. 验证请求从 Figma 链接到可运行 HTML配置好之后我们来跑一次完整的验证。这一步的目标是给 CodeBuddy 一个 Figma 链接让它通过 MCP 读取节点数据生成一个包含 CSS 的 HTML 文件然后在浏览器里打开确认效果。4.1 复制 Figma 节点链接在 Figma 里选中你要转的页面或 Frame右键选择Copy link to selection复制所选内容的链接。链接里会带上node-id参数。比如https://www.figma.com/design/LK8lb8OasxVIhIeioKD8kL/Figma-basics?node-id4368-321123tdnKdiYiCZO4KFjJv-44.2 在 CodeBuddy 里发指令回到 VS Code打开 CodeBuddy 面板在对话框里输入类似这样的指令根据提供的 figma 链接生成对应的 html 页面要求 css 也放在 html 当中且文件名为 figmatocode.html https://www.figma.com/design/LK8lb8OasxVIhIeioKD8kL/Figma-basics?node-id4368-321123tdnKdiYiCZO4KFjJv-4指令里要明确三件事生成什么HTML 页面、样式怎么放CSS 内联在 HTML 里、文件名是什么figmatocode.html。这样 AI 不会跑偏去生成 React 组件或者外部 CSS 文件。4.3 观察 MCP 调用过程发送后CodeBuddy 会开始调用framelink-figmaMCP。你可以在面板里看到它先请求 Figma API拉取node-id4368-321123的节点数据包括图层树、样式属性、文本内容、约束条件。然后模型基于这些数据生成 HTML 结构把 Figma 的 Auto Layout 转成 Flexbox把填充色转成background-color把圆角转成border-radius把阴影转成box-shadow。这个过程通常几十秒到两三分钟取决于节点复杂度和模型速度。生成完成后CodeBuddy 会提示生成的文件路径比如./figmatocode.html。4.4 在浏览器里验证根据返回的本地路径用浏览器打开figmatocode.html。你应该能看到页面结构和 Figma 原型图基本一致导航栏、卡片、按钮、文字层级都对得上。可能会有一些细微偏差比如字体渲染差异、间距差 1-2px这些手动微调一下就行。我实测下来一个中等复杂度的页面导航 卡片列表 表单从复制链接到浏览器打开整个过程大概 3 分钟左右。相比手动写 HTML/CSS 动辄一两个小时效率提升非常明显。4.5 生成结果的结构说明生成的 HTML 里class 命名通常会参考 Figma 图层名。如果图层名规范你会看到类似classcard-title、classbtn-primary这样的语义化命名。如果图层名不规范AI 会生成classframe-427这种后续可以手动重命名。CSS 部分会内联在style标签里包含布局、颜色、字体、间距、圆角、阴影等属性。你可以直接把这段代码复制到项目里或者让 CodeBuddy 进一步改写成 React/Vue 组件。验证通过后这套流程就算跑通了。下一节我们看看常见的报错和排查方法。5. 常见报错排查401、local proxy failed、reading choices配置 MCP 的过程中最容易卡在几个典型报错上。这一节我把真实遇到过的错误和排查路径列出来你对照着看。5.1 401 Unauthorized这是最常见的错误通常出现在 MCP 请求 Figma API 或者模型请求 TaoToken 的时候。原因无非两个Key 不对或者 Key 没传对位置。如果是 Figma 侧报 401检查settings.json里--figma-api-key后面的 token 是否完整复制有没有多余空格。Figma Token 是一串很长的字符复制时容易漏掉尾部。另外确认 Token 的权限至少包含file_read如果只勾了file_metadata是读不到节点内容的。如果是模型侧报 401检查apiKey字段是否填的是https://taotoken.net/api-keys生成的 Key以及baseUrl是否写成了https://taotoken.net/api注意不要多加/v1或者尾部斜杠。401 的本质是认证失败先把 Key 和 URL 这两项核对一遍基本能解决。5.2 local proxy failed这个报错通常出现在 MCP Server 启动阶段。figma-developer-mcp是通过npx启动的如果本地 Node.js 环境有问题或者 npx 缓存损坏就会报local proxy failed。排查步骤先在终端手动跑一遍npx -y figma-developer-mcp --figma-api-keyYOUR-TOKEN --stdio看能不能正常启动。如果报模块找不到升级一下 Node.js 到 18 以上。如果报网络超时检查 npm 源是否可用。如果手动能跑通但 CodeBuddy 里报错把 CodeBuddy 重启一次或者删掉 MCP 重新安装。5.3 reading choices 相关错误这个错误一般出现在模型返回结果解析阶段提示reading choices或者cannot read property choices of undefined。原因是模型 API 返回的结构和 CodeBuddy 预期的结构不一致。常见于 Base URL 配错比如把https://taotoken.net/api写成了https://taotoken.net/api/v1/chat/completions导致返回体不是标准的 OpenAI 格式。解决方法是把baseUrl改回https://taotoken.net/api让 CodeBuddy 自己拼接路径。同时确认modelId是有效的模型 ID如果模型 ID 写错有些服务会返回错误结构而不是标准报错也会触发reading choices。5.4 OAuth 相关报错如果你在 Figma 侧看到 OAuth 错误通常是因为用了 OAuth 方式而不是 Personal Access Token。本文用的是 Token 方式不需要走 OAuth 流程。检查settings.json里是否误加了 OAuth 相关字段删掉即可。另外确认 Figma 账号已经完成了邮箱验证未验证的账号生成 Token 后调用 API 也会报权限错误。5.5 MCP 连接成功但生成代码为空这种情况一般是node-id不对。Figma 链接里的node-id如果指向的是一个空 Frame 或者一个 Group 而不是 FrameMCP 可能读不到有效内容。解决办法是在 Figma 里选中一个明确的 Frame图层面板里图标是#的那个重新复制链接。另外确认该节点对你当前账号可见如果是别人分享的文件权限要是can view以上。5.6 三件套检查清单每次遇到 MCP 相关报错先按这个清单过一遍检查项正确值常见错误Base URLhttps://taotoken.net/api多写/v1或尾部斜杠API Keyhttps://taotoken.net/api-keys生成复制不完整或用了过期 KeyModel ID有效模型 ID如claude-sonnet-4-20250514拼写错误或模型不存在Figma Token只读权限含file_read权限不足或 Token 过期node-id指向有效 Frame指向空 Group 或不可见节点把这张表存下来下次报错直接对照能省不少时间。排查完之后如果你需要更详细的接入说明可以看https://taotoken.net/doc需要管理 Key 就去https://taotoken.net/api-keys想先验证模型对话效果可以去https://taotoken.net/chat试一下。6. 把这条链路用起来从 Demo 到日常开发跑通一次 Demo 只是开始真正有价值的是把这条链路嵌进日常开发流程。下面说几个我实际用下来的经验。第一Figma 图层命名直接决定生成代码的可读性。如果设计稿是团队协作的建议推动设计同学用语义化命名比如card-container、card-title、card-desc、btn-primary。这样 MCP 读出来的图层树清晰AI 生成的 class 名也清晰后续维护成本低很多。如果设计稿命名很乱你可以在 Figma 里先手动重命名几个关键 Frame再复制链接给 CodeBuddy。第二一次只转一个区块不要贪多。有人喜欢把整个页面链接丢进去让 AI 生成完整页面。这样做的结果是代码量大、结构复杂AI 容易在中途丢失上下文生成质量下降。更好的做法是按区块转先转导航栏再转卡片列表再转表单最后手动拼装。每个区块单独验证出问题也好定位。第三生成的代码不要直接上生产。MCP 生成的是“高还原度初稿”不是“生产级代码”。你需要做几件事把内联 CSS 抽成外部样式或 CSS Module把重复的卡片结构抽成组件把硬编码的文本换成 props 或数据绑定检查响应式断点是否合理。这些工作比从零写快得多但不能省。第四结合 TaoToken 的 Coding Plan 做长期编码。如果你经常需要做 Figma 转代码可以把这套流程和 Coding Plan 结合在https://taotoken.net/coding-plan里管理你的编码任务和模型调用。这样每次转码的请求、模型选择、Key 使用都有记录团队协作时也方便统一管理。第五Claude Code 用户如果想把这条链路接到 Anthropic 生态可以参考https://taotoken.net/claude-code-anthropic的接入说明。核心还是三件套Base URL、Key、Model ID配好之后 MCP 调用和模型调用走同一套认证。最后说一个实际技巧生成完 HTML 后别急着关掉 CodeBuddy。直接在同一个会话里继续发指令比如“把这个页面的卡片列表改成 React 组件用 props 接收数据”CodeBuddy 会基于刚才的上下文继续改。这样从原型到组件是一条连续的链路不用重新描述需求。整套流程的核心价值是把前端工程师从“逐像素还原”里解放出来让你把时间花在交互逻辑、组件设计、性能优化这些真正需要思考的地方。Figma 转代码这件事AI 已经能做到 80 分剩下的 20 分靠你的工程判断去补。工具在https://taotoken.net这边都能找到入口配置片段上面也给了剩下的就是动手跑一遍。