1. 先跑通模型通道Claude Code 跑 Figma-MCP 前把 Base URL 指到 TaoToken1.1 在 TaoToken 控制台创建 API Key原文直接进入 Figma 侧的导出和标注没有交代模型服务怎么配。实际跑起来这一步会让很多人卡住Figma-MCP 把设计稿数据取回来了Claude Code 却因为 Key 或 Base URL 不对连最基础的文本生成都做不了。准备材料只有三样TaoToken 账号、一个 API Key、一个模型 ID。打开 TaoToken 注册登录后进入控制台的 API Keys 页面创建 Key。Key 是一串较长的随机字符创建完先复制保存后面所有配置文件里的YOUR_API_KEY都替换成它。模型 ID 不要去网上搜一个就填以 TaoToken 模型广场当时列表为准。同一个模型在列表里可能有不同上下文版本选你需要的那个ID 复制完整。这一步和原文的关系是原文只负责 Figma 侧的规范整理模型服务怎么连、用什么 Key、填哪个 Base URL都从这里开始接。1.2 settings.json 与环境变量两种写法Claude Code 默认请求 Anthropic 官方接口。切到 TaoToken 统一 API 通道最稳定的方式是改~/.claude/settings.json的env字段{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: YOUR_API_KEY, ANTHROPIC_MODEL: YOUR_MODEL_ID } }不想动全局配置也可以在启动 Claude Code 前用环境变量export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKENYOUR_API_KEY export ANTHROPIC_MODELYOUR_MODEL_ID两种方式等价。settings.json 会作用到 Claude Code 派生出的子进程适合固定工作站环境变量适合临时切换。Base URL 用 https://taotoken.net/api末尾不要加 /v1。提示官网落地页那种带参数的链接只用来登录、看模型、看用量不要填进任何工具。工具里只认 https://taotoken.net/api。1.3 用一条组件生成指令验证 Key 是否生效配置完先别急着连 Figma。在 Claude Code 里直接发一条与设计系统强相关的小任务验证模型通道是否是通的I have a Button component with variant: primary | secondary. Generate a React implementation using design tokens named --color-primary and --space-md.正常返回是一段 TSX 代码类名里包含--color-primary、--space-md这两个 token 名。如果返回 401/403说明 Key 复制不完整如果 404检查 Base URL 是不是多写了 /v1。请求成功后回 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_content 的用量页面看这次调用是否记录在YOUR_API_KEY名下。看到记录说明 Key 真的生效接下来接 Figma-MCP 才有意义。1.4 模型通道不稳的三种典型表现这里只列和本流程直接相关的三种。第一种是 401/403。请求能被 Claude Code 发出但 TaoToken 不认识这把 Key。检查ANTHROPIC_AUTH_TOKEN是否复制完整Key 在控制台创建时完整显示一次抄漏一位就会出这个问题。第二种是 404。多半是 Base URL 多写了 /v1。Claude Code 会在 Base URL 后自动补版本路径正确写法就是 https://taotoken.net/api。第三种是请求发出但生成到一半中断。这种情况去模型广场看当前模型 ID 是否还能用换一个等价模型 ID 重试。原文说的「组件级代码生成到一半断掉」绝大多数落在这一种。2. 把 Figma 设计规范变成 JSONDesign System 同步是还原的地基2.1 先整理 Design System再导成机器可读格式模型通道通了才开始进入原文的主流程。第一步是把 Figma 里的设计规范同步出来。这里建议直接在 Figma 里维护一套完整 Design System颜色全部用 Color Style文本样式用 Text Style间距、圆角、阴影的数值集中放在一个规范 Frame 里命名要稳定。然后通过 Figma 的 JSON 导出功能或 Figma to Code 插件把规范转成机器可读格式。导出的 JSON 至少要有三层颜色 token例如--primary-500: #3b82f6文本样式包含 font-family、font-weight、line-height间距 token例如space-md: 16px。结构越干净后续 Claude Code 越不容易自由发挥。如果 Figma 文件里混着临时色值和未命名的文本样式模型读到后会把它们当成设计系统的一部分生成的代码就会偏离 1:1 还原。原文只说了导出这一步没有强调数据质量对还原度的影响这里值得多花十分钟清理。2.2 给 Claude Code 的上下文顺序决定还原度上限Figma-MCP 启动后Claude Code 能读取图层、Frame 和标注信息。但读到的原始数据是树状的直接把整棵图层树丢给模型它会把注意力分散到按钮图标这类无关节点上。建议的对话顺序是先贴 Design Token JSON让模型先建立设计系统的整体认知再指定要还原的 Frame ID 或选中的节点最后才下生成指令并且明确约束只使用 JSON 里出现的 token不要发明新名字。这段提示词可以先写一个版本保存成 SkillHere is the design system JSON. Use these tokens to generate the React component for Frame Button/Primary. Do not invent new color names.下次换组件时只需要替换 Frame ID 和组件类型token 解释和命名约束不用重复说。整个还原流程里这个上下文组织方式比换哪个模型更能影响还原度。3. 组件级代码生成与样式映射从 Figma 属性到 CSS 变量3.1 原子组件打上 MCP 标注类名才能对齐设计系统Design System JSON 是全局规范具体到按钮、输入框这些原子组件还需要在 Figma 里做代码属性标注。MCP 读图层时会把组件名和描述一并带回来所以组件命名本身就是标注按钮叫 Button/Primary输入框叫 Input/Large层级关系会映射到组件代码里的 variant。更进一步可以在组件描述里写variant: primary; state: hover这类代码属性。Claude Code 读到描述后会生成对应的条件类名而不是拍脑袋命名。示例输出type ButtonVariant primary | secondary; interface ButtonProps { variant?: ButtonVariant; children: React.ReactNode; } export function Button({ variant primary, children }: ButtonProps) { const classes [btn, btn--${variant}].join( ); return button className{classes}{children}/button; }3.2 auto-layout 的距离映射成 spacing 变量而不是裸像素Figma 的 auto-layout 里padding、gap、margin 都是数值。直接让 Claude Code 按 px 输出是最省事的但后面改设计稿时要动一大片。更有维护性的做法是先定义间距 token再把数值映射到 token16px 对应--space-md8px 对应--space-sm4px 对应--space-xs。:root { --space-xs: 4px; --space-sm: 8px; --space-md: 16px; }映射关系放在 Design Token JSON 里Claude Code 生成组件时会把 auto-layout 的 padding 翻译成var(--space-md)。和原文直接给出 CSS 变量不同实际操作时变量名和数值必须来自设计系统 JSON而不是让模型自己定义一套间距体系。3.3 非布局属性阴影、圆角、字重怎么落进样式表布局属性处理完剩下的是阴影、圆角、字重这类视觉属性。建议在生成指令里附带一张映射表避免每次让模型推导Figma 属性CSS 输出字体样式font-family font-weight line-height阴影效果box-shadow 的 X/Y/Blur/Spread 与颜色自动布局Flexbox 或 CSS Grid圆角border-radius对应 radius token有了这张表Claude Code 拿到 Figma 的 Shadow Effect、Auto Layout 约束时能直接翻译成 CSS 而不是生成近似值。映射表本身也可以写进 Skill 模板和 Design Token JSON 一起喂给模型。这样生成的组件类名、变量、结构都稳定不会每次重新生成都换一套命名。4. 设计变更同步版本差分检测与动态样式更新4.1 版本差分检测只让 Claude Code 重生成受影响组件设计稿一定会改。Figma-MCP 不会主动推送 diff需要主动要求 Claude Code 对比前后版本。做法是在对话里指定时间范围或版本标记Compare the selected frame with the version from 2 hours ago. Only regenerate components that actually changed.模型通过 MCP 拿到两个版本的图层数据后会判断哪些组件变了。按钮只改了颜色输出就只更新 Button.tsx 和对应的 CSS 变量不碰 Input 相关文件。这一步不仅能保持还原度也能显著减少 Token 消耗。全量重生成会把没改过的组件也重写一遍版本 diff 只处理受影响区域长项目跑下来差别很大。4.2 动态样式更新全局样式变更只改 CSS 变量Design System 的主色从#3b82f6改成#2563eb理论上不需要重新生成任何组件代码。正确做法是Figma 改色值重新导出 Design Token JSON把新 JSON 贴给 Claude Code让它只更新:root里的变量定义。:root { --primary-color: #2563eb; --text-base: 16px; }组件代码里的类名保持不变样式通过var(--primary-color)自动读到新值。原文把这一步叫双向绑定落地时更接近单向重放Figma 是数据源JSON 是中间层Claude Code 根据 JSON 更新变量表。只要 JSON 没更新模型不会去猜设计意图。这个机制保证全局颜色、字体变更时组件代码不受影响。5. 高级还原技巧SVG 路径优化与交互动效转换5.1 SVG 路径优化把 Figma 矢量图转成可维护的 React 组件Figma 导出的 SVG 通常带着冗余路径和绝对定位。Claude Code 处理 SVG 时先做路径简化合并重复的path去掉无用的transform保留viewBox。然后把颜色用currentColor替代写死的色值这样父组件能通过 CSS 控制图标颜色。export const LogoIcon ({ size 24 }: { size?: number }) ( svg width{size} height{size} viewBox0 0 24 24 aria-hiddentrue path fillcurrentColor dM12 2l10 5v10l-10 5L2 17V7l10-5z / /svg );给 Claude Code 的约束是不要改变视觉形状只精简路径数据和属性。如果路径简化后渲染差异明显优先保留原始路径。SVG 还原是 1:1 还原里最容易被忽略的部分图层对得上不代表路径简化后视觉效果还对得上。5.2 交互动效转换Smart Animate 参数翻译成 CSS transitionFigma 的 Smart Animate 记录了动画时长、缓动曲线和触发条件。Claude Code 拿到这些参数后优先输出 CSS transition 而不是 JavaScript 动画除非场景需要 stagger 或滚动联动。.dropdown { transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }时长和缓动直接来自 Figma 原型参数。做法是把 Figma 的动效配置集中放在一个 Prototype 页面里模型解析更准分散在多个页面容易漏掉触发条件。原文的 Smart Animate 转换到这里已经不只是翻译属性还需要判断哪些动画值得保留、哪些动效在浏览器里会显得多余。6. 质量保障与回归Storybook 快照、Figma 节点 ID、TaoToken 对账6.1 Storybook/Chromatic 快照与像素级回归组件生成完并不等于还原完成。建议在工程里建 Storybook为每个生成的组件写 stories配合 Chromatic 做视觉回归。设计稿每次更新流程是Claude Code 生成组件代码和对应 stories你在本地跑快照拿渲染结果和 Figma 设计稿对比像素差异。给 Claude Code 的指令可以用固定模板Generate a Storybook story for every component in src/components. Use the same variant names as the Figma frames.模板固定后diff 出来的差异才是真实设计变化而不是故事命名不一致造成的噪音。快照比对需要读者在本地执行Claude Code 只负责生成 stories 和组件代码。6.2 在生成的代码里保留 Figma 节点 ID方便定位链路长了之后还原度问题定位成本会很高。建议在生成指令里加上注释要求让每个文件顶部带上对应的 Figma 节点路径和 ID。输出会变成类似这样// 设计稿定位Frame CardFigma ID 2:34 // 使用 token--neutral-200 export const Card () { ... };这样从组件代码跳回设计稿不需要在 Figma 里整棵图层树翻找。对 1:1 还原的项目这种可追溯性比什么都重要。注释还能帮助后续跑回归测试时快速确认改动范围。6.3 跑完一轮后回 TaoToken 控制台对一下账组件生成、版本差分、SVG 优化都跑过一轮后回 控制台 API Keys 页面看用量这段任务的请求数、Token 消耗、命中的模型 ID 都列在对应 Key 下面。对照模型广场的模型列表确认你用的模型还在有效期内。如果想先用对话界面验证同一把 Key打开 TaoToken 模型对话 发一条消息顺手确认模型 ID 和 Base URL 没填错。长期跑组件生成的话打开 Coding Plan 看套餐额度是否够用。Claude Code 环境变量如果还需要再核一遍直接对照 接入文档 里的逐项说明。