1. 从设计稿到代码链路到底卡在哪前端页面开发里最耗时的环节往往不是写业务逻辑而是把 Figma 设计稿里的间距、圆角、字号、颜色一层层翻译成 CSS。设计师改一版你就要重新量一遍来回几次心态就崩了。claude code 搭配 kimi k2.5 和 figma MCP 这套组合能把这个过程压缩成「复制链接、发一句提示词、等代码生成」三步。它适合已经会用命令行、想把手动还原设计稿这件事自动化的前端开发者也适合想跑通 MCP 链路、看看模型怎么读设计稿的同学。我这次用的模型是 kimi k2.5它在视觉理解和代码生成上的表现比较稳尤其是拿到 Figma 节点数据后能按结构输出接近像素级的页面代码。claude code 负责调度工具和读写文件figma MCP 负责把设计稿的节点树、样式、图片拉下来喂给模型。三者串起来就是一条从设计稿到前端页面的可复制链路。下面我把配置骨架、MCP 接入项和验证动作完整拆开你照着填自己的 Key 就能跑。2. TaoToken 前置把模型入口和 Key 准备好在配置 claude code 之前先确认模型调用入口。我这边统一走 TaoToken 的 API 入口地址是 https://taotoken.net/api 它兼容 Anthropic 的接口格式claude code 可以直接把 base url 指过来。你需要先在控制台创建一个 API Key创建入口在 https://taotoken.net/api-keys 拿到以 sk- 开头的密钥后先存好后面写进环境变量。这里有个容易踩的点claude code 读的是 ANTHROPIC_AUTH_TOKEN不是 OPENAI_API_KEY别混。另外 base url 要填到 /api 这一层不要自己补 /v1 之类的后缀否则会 404。如果你还没决定用哪个模型可以先在模型对话页 https://taotoken.net/models 里试一下 kimi k2.5 的响应风格确认没问题再写进配置。长期做编码和 Agent 任务的话Coding Plan 页面 https://taotoken.net/coding-plan 里有对应的套餐说明按自己的调用量选就行。注意API Key 只存在本地环境变量或配置文件里不要提交到 git也不要在截图里露出完整密钥。3. 可复制配置config.toml 与 settings.json 骨架claude code 的配置分两层一层是模型接入的环境变量一层是 MCP 服务的注册。下面给两份可直接复制的骨架你替换掉 Key 和路径就能用。3.1 config.toml 模型接入骨架如果你用 config.toml 管理模型端点可以按下面这样写。核心是把 base url 指向 TaoToken 的 API 入口模型名填 kimi k2.5 对应的标识。# ~/.claude/config.toml [api] base_url https://taotoken.net/api auth_token sk-你的TaoToken密钥 timeout_ms 3000000 [models] default kimi-k2.5 opus kimi-k2.5-thinking sonnet kimi-k2.5 haiku kimi-k2.5 subagent kimi-k2.5 [features] prompt_caching falsetimeout_ms 给到 3000000 是为了适配长考模式kimi k2.5 在生成整页代码时思考时间会比较长超时设短了会中途断掉。prompt_caching 先关掉避免和兼容层冲突。3.2 settings.json MCP 注册骨架MCP 服务写在 settings.json 里figma 这一项用开源的 figma-developer-mcp通过 stdio 方式和 claude code 通信。{ mcpServers: { figma-developer-mcp: { command: figma-developer-mcp, args: [--stdio], env: { FIGMA_API_KEY: 你的Figma个人访问令牌 } } } }Figma 的 API Key 在 Figma 账号设置里的 Personal Access Tokens 生成权限至少给到 File content 的只读。生成后填进 FIGMA_API_KEY别加引号以外的多余字符。3.3 环境变量快捷启动如果你习惯用 shell 函数启动可以在 ~/.zshrc 里加一段把模型端点和密钥一次性导出然后透传参数给 claude。# ~/.zshrc ccms() { export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKENsk-你的TaoToken密钥 export ANTHROPIC_MODELkimi-k2.5 export ANTHROPIC_DEFAULT_OPUS_MODELkimi-k2.5-thinking export ANTHROPIC_DEFAULT_SONNET_MODELkimi-k2.5 export ANTHROPIC_DEFAULT_HAIKU_MODELkimi-k2.5 export CLAUDE_CODE_SUBAGENT_MODELkimi-k2.5 export API_TIMEOUT_MS3000000 export DISABLE_PROMPT_CACHING1 claude $ }保存后执行source ~/.zshrc之后输入ccms就能带着 kimi k2.5 的配置启动 claude code。这套写法在 Mac 和 Linux 上通用Windows 可以用 PowerShell 的 profile 做等价映射。4. 验证请求从 Figma 链接到页面代码配置写完先别急着写业务按下面几步验证链路是否通。4.1 确认 MCP 已挂载启动 claude code 后在会话里输入claude mcp list如果配置正确列表里会出现 figma-developer-mcp 这一项状态是 connected。如果没出现检查 settings.json 的路径是不是 claude code 实际读取的那个以及 figma-developer-mcp 是否已经全局安装npm install -g figma-developer-mcp4.2 复制 Figma 选区链接打开 Figma 文件选中你要还原的页面或组件右键选择 Copy as再选 Copy link to selection。这个链接里带了 node-idMCP 靠它定位具体节点。链接形如https://www.figma.com/file/xxxxx/Design?node-id12-3454.3 发提示词生成代码在项目目录下启动 ccms把链接和需求一起发给 claude code根据这个 Figma 链接生成一个 React Tailwind 的页面组件 https://www.figma.com/file/xxxxx/Design?node-id12-345 要求还原间距、字号、颜色图片用占位符输出到 src/pages/Home.tsx模型会先通过 MCP 拉取节点数据再按结构生成代码。生成过程中你可以看到它调用了 figma-developer-mcp 的工具。等文件写完后跑一下项目npm run dev打开浏览器对比设计稿重点看三处容器最大宽度、卡片间距、字体层级。如果这三处对上了说明链路基本跑通。4.4 结果核对清单检查项预期结果不对时看哪MCP 状态connectedsettings.json 路径、npm 全局包节点读取返回节点树Figma Key 权限、node-id 是否正确代码输出文件生成成功模型端点、timeout 设置页面还原间距字号接近提示词里是否明确要求像素级5. 本篇常见错排查跑这条链路时报错基本集中在四个地方我按出现频率排一下。第一个是 MCP 连不上。表现是claude mcp list里没有 figma 项或者状态是 failed。先确认 figma-developer-mcp 装没装再确认 settings.json 是不是放在 claude code 读取的目录。claude code 不同版本读的配置文件位置可能不同用claude config path查一下实际路径别凭感觉放。第二个是 Figma 节点拉不到。表现是模型说无法访问该链接。多半是 Figma API Key 权限不够或者链接里的 node-id 格式不对。重新生成一个带 File content 只读权限的令牌链接用 Copy link to selection 拿别手拼。第三个是模型请求超时。表现是生成到一半断了或者直接报 timeout。把 API_TIMEOUT_MS 调到 3000000 以上同时确认 base url 是 https://taotoken.net/api 这一层多写后缀会直接失败。如果还是断检查网络到端点的连通性。第四个是生成的代码样式对不上。这通常不是链路问题而是提示词太模糊。把「还原设计稿」改成「按 Figma 节点的 padding、font-size、color 精确输出间距用 px」模型会读得更准。另外确认你选中的节点范围选整个页面和选单个卡片输出差别很大。提示排障时优先看 claude code 的会话日志MCP 调用失败会在日志里打出具体错误码比猜快得多。6. 把链路固定成日常流程链路跑通之后建议把它固化成日常动作设计稿更新你复制新链接发一句提示词代码进版本库跑起来对比。模型端点和 MCP 配置一次写好就不用再动。如果你要接更多工具比如数据库或接口文档可以在 settings.json 的 mcpServers 里继续加条目格式和 figma 这项一样。接入文档在 https://taotoken.net/doc 里有更细的字段说明API Key 管理在 https://taotoken.net/api-keys 模型对话验证在 https://taotoken.net/models 长期编码任务可以看 https://taotoken.net/coding-plan 。配置骨架照抄Key 换成自己的这条从设计稿到前端页面的链路就能稳定跑起来。