1. 弹窗还原为什么总在“最后一公里”翻车弹窗类 UI 组件是前端还原里最容易翻车的一类。按钮、卡片这类静态组件量一量间距、吸一吸颜色基本就八九不离十但弹窗不一样它同时叠了四层复杂度遮罩层的定位与层级、容器的居中与最大宽高、内部标题/正文/操作区的弹性布局、以及打开关闭时的动画与焦点管理。任何一层没对齐视觉上就是“差一点”交互上就是“点不透”。我试过纯手工对着 Figma 标注写弹窗一个中等复杂度的确认弹窗从量尺寸到调响应式四十分钟起步还经常在遮罩点击关闭、ESC 关闭、移动端宽度这些细节上返工。问题不在于写不出来而在于设计稿里的结构化信息没有被程序读取全靠人眼翻译翻译过程必然丢信息。Figma-MCP 解决的正是这个翻译环节。它把 Figma 的节点树通过 MCP 协议暴露给 ClaudeCode让模型能直接读到图层名称、尺寸、颜色、间距、圆角、阴影这些原始数据再结合你的组件规范生成代码。你要做的不是“描述弹窗长什么样”而是“告诉它弹窗该按什么规则落地”。这篇就聚焦弹窗这一类组件把 MCP 配置骨架、TaoToken 统一通道接入、以及从 Figma 节点到可运行代码的验证动作讲清楚适合已经在用 ClaudeCode、想把设计稿还原流程自动化的前端同学。2. TaoToken 前置给 ClaudeCode 一条统一的模型通道ClaudeCode 本身是命令行里的编码代理它要调用模型能力就需要一个稳定的 API 入口。TaoToken 在这里的角色是统一 Key 和 API 通道你不用在多个模型供应商之间来回切换配置一个 Key 走同一个 base URLClaudeCode、脚本、其他工具都能复用。官网入口在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 基址是 https://taotoken.net/api 。注意 API 地址不带 UTM 参数配置里填干净的这个就行。接入前先做两件事。第一在控制台创建 API Key地址是 https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 创建后立刻复制保存页面刷新后不再完整显示。第二确认你要用的模型名ClaudeCode 场景一般走 Anthropic 兼容通道文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 可以查到当前支持的模型标识。注意Key 只放在环境变量或本地配置文件里不要写进会提交到仓库的代码。团队协作时用.env.local并加进.gitignore。如果你只是先验证通道是否通可以打开模型对话页面 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 发一条消息确认返回正常再去配 ClaudeCode。这一步能帮你把“Key 问题”和“MCP 问题”分开后面排障会省很多时间。3. 可复制配置MCP 服务骨架与 ClaudeCode 接入3.1 环境变量先落地在项目根目录建.env.local写入通道信息# .env.local TAOTOKEN_API_KEYsk-你的Key TAOTOKEN_BASE_URLhttps://taotoken.net/api ANTHROPIC_BASE_URLhttps://taotoken.net/api ANTHROPIC_API_KEYsk-你的KeyClaudeCode 读取 Anthropic 兼容变量把 base URL 指向 TaoToken 的 API 地址模型请求就会走统一通道。这里ANTHROPIC_BASE_URL和TAOTOKEN_BASE_URL值相同前者给 ClaudeCode 用后者给 MCP 服务或脚本用分开命名是为了后续换工具时不互相干扰。3.2 MCP 服务配置骨架Figma-MCP 本质是一个本地或远程的 MCP ServerClaudeCode 通过 MCP 协议连它。配置文件用config.toml管理下面是一个可用的骨架重点看[mcp_servers.figma]这一段# config.toml [model] provider anthropic base_url https://taotoken.net/api api_key_env TAOTOKEN_API_KEY model_name claude-sonnet-4-20250514 [mcp_servers.figma] command npx args [-y, figma-mcp-serverlatest] env { FIGMA_ACCESS_TOKEN ${FIGMA_ACCESS_TOKEN}, FIGMA_FILE_KEY ${FIGMA_FILE_KEY} } [mcp_servers.figma.limits] timeout_ms 60000 max_nodes_per_request 200 [component_rules.dialog] node_prefix dialog/ position fixed overlay true animation fade close_on_overlay_click true close_on_esc true几个参数值得展开。node_prefix dialog/是约定Figma 里所有弹窗相关图层都以dialog/开头命名MCP 抓取时按前缀过滤避免把整页节点都拉进来。max_nodes_per_request 200是保护值弹窗节点树一般几十个超过这个数说明前缀没写对抓到了整页。close_on_overlay_click和close_on_esc是弹窗的交互契约写进配置后生成的代码会带上对应事件不用你事后补。Figma 侧的FIGMA_ACCESS_TOKEN在 Figma 账号设置里生成FIGMA_FILE_KEY是设计稿 URL 里file/后面那串。这两个值同样放环境变量不要硬编码进config.toml。3.3 设计稿命名规范MCP 能不能生成干净代码七成取决于 Figma 图层命名。弹窗建议按这个结构组织图层名含义生成结果dialog/overlay遮罩层遮罩 div 点击关闭dialog/container主体容器居中容器 最大宽高dialog/title标题h3 或组件标题槽dialog/content正文区内容插槽dialog/actions操作区按钮容器dialog/actions/cancel取消按钮次要按钮dialog/actions/confirm确认按钮主要按钮命名用语义前缀而不是Frame 12、Group 8模型才能把节点映射到组件结构。这一步花十分钟整理后面省一小时返工。4. 从 Figma 节点到组件代码验证请求与还原度检查4.1 发起一次抓取请求配置就绪后在 ClaudeCode 里发起请求让它读取指定节点并生成组件。命令形态大致如下claude 读取 figma 文件中 node-id 为 12:345 的 dialog 节点按 config.toml 的 component_rules.dialog 规则生成一个 React 弹窗组件样式用 CSS Modules输出到 src/components/ConfirmDialognode-id在 Figma 里选中节点后右键复制链接能看到格式是12:345这种。ClaudeCode 会通过 MCP 拿到节点树再按规则生成代码。生成结果通常包含三部分组件文件、样式文件、以及一个可选的交互 hook。4.2 生成代码的结构预期一个符合预期的弹窗组件结构上应该长这样// src/components/ConfirmDialog/index.tsx import styles from ./index.module.css; import { useEffect } from react; interface ConfirmDialogProps { open: boolean; title: string; children: React.ReactNode; onCancel: () void; onConfirm: () void; } export function ConfirmDialog({ open, title, children, onCancel, onConfirm }: ConfirmDialogProps) { useEffect(() { if (!open) return; const onKey (e: KeyboardEvent) { if (e.key Escape) onCancel(); }; window.addEventListener(keydown, onKey); return () window.removeEventListener(keydown, onKey); }, [open, onCancel]); if (!open) return null; return ( div className{styles.overlay} onClick{(e) { if (e.target e.currentTarget) onCancel(); }} div className{styles.container} roledialog aria-modaltrue h3 className{styles.title}{title}/h3 div className{styles.content}{children}/div div className{styles.actions} button className{styles.cancel} onClick{onCancel}取消/button button className{styles.confirm} onClick{onConfirm}确认/button /div /div /div ); }样式文件里遮罩用position: fixed铺满容器用 flex 居中移动端用媒体查询收窄宽度/* src/components/ConfirmDialog/index.module.css */ .overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; } .container { width: 480px; max-width: calc(100vw - 32px); background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); } media (max-width: 768px) { .container { width: 90%; padding: 16px; } }4.3 还原度检查清单生成完不要直接提交按这份清单逐项核对检查项核对方式常见偏差遮罩颜色与透明度对比 Figma 填充值生成值偏深或偏浅容器圆角与阴影对比节点圆角、阴影参数阴影扩散值丢失标题字号字重对比文本样式字重默认成 400按钮间距对比 actions 区 gap间距写成固定 margin移动端宽度浏览器缩到 375px容器溢出屏幕遮罩点击关闭点遮罩空白处事件绑到了容器上ESC 关闭按 Esc 键未绑定键盘事件焦点管理Tab 键循环焦点跑到弹窗外这份清单里前五项是视觉还原后三项是交互还原。视觉偏差靠改样式变量解决交互偏差要回到config.toml检查close_on_overlay_click、close_on_esc是否生效。如果生成代码里没有对应事件说明 MCP 没读到规则检查[component_rules.dialog]段是否被正确加载。4.4 用模型对话做二次校验生成代码后如果对某个还原细节不确定可以把 Figma 节点的样式描述和生成代码一起丢给模型对话页面 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 让它逐项对比。比如“Figma 里容器 padding 是 24px生成代码里是 24px 吗”这种问答式校验比人眼逐行看快得多。通道和 ClaudeCode 用的是同一个 Key不用额外配置。5. 本篇常见错排查5.1 MCP 连不上或超时现象是 ClaudeCode 报 MCP server 连接失败。先确认npx -y figma-mcp-serverlatest能单独跑起来如果卡在下载是网络或 npm 源问题。能跑起来但 ClaudeCode 连不上检查config.toml里command和args的路径以及env里的FIGMA_ACCESS_TOKEN是否真的注入进去了。timeout_ms 60000对大多数弹窗够用节点特别多时调到 120000。5.2 抓到的节点是整页而不是弹窗九成是node_prefix没对上。Figma 里图层名是Dialog/Overlay还是dialog/overlay大小写敏感。另外确认请求里传的node-id是弹窗根节点不是页面根节点。如果max_nodes_per_request被触发说明抓取范围过大回到命名规范那一步重新整理。5.3 生成的样式全是内联 style这是 MCP 没读到样式规则退化成按节点坐标硬编码。检查config.toml里[component_rules.dialog]段是否在[mcp_servers.figma]之后、有没有拼写错误。另外确认 Figma 节点用的是 Auto Layout 而不是绝对定位Auto Layout 的间距和填充信息才能被正确解析成 flex 布局。5.4 遮罩点击关闭失效生成代码里事件绑在了容器上点遮罩没反应。这是close_on_overlay_click规则没生效或者生成时把 onClick 挂错了层级。手动修的话确保onClick在 overlay 上且判断e.target e.currentTarget否则点容器内部也会触发关闭。5.5 移动端容器溢出max-width: calc(100vw - 32px)这行如果被生成成了固定width: 480px小屏就会溢出。检查媒体查询是否生成以及width和max-width的优先级。稳妥写法是容器只设max-width宽度交给 flex 撑开。5.6 Key 报 401 或 403先确认.env.local里的 Key 没有多余空格再确认ANTHROPIC_BASE_URL指向的是https://taotoken.net/api而不是带路径的地址。如果 ClaudeCode 和 MCP 用了不同的 Key 变量名检查两边是否都读到了值。控制台里可以重新生成一个 Key 替换测试排除 Key 本身失效的可能。6. 把弹窗还原固化成可复用流程弹窗这类组件的特点是结构固定、变体多。与其每次从设计稿重新生成不如把这次跑通的配置沉淀下来config.toml里的[component_rules.dialog]段保留Figma 命名规范写成团队约定还原度检查清单放进 PR 模板。下次设计稿更新只需要改node-id重新跑一次生成结果直接进代码评审。如果你还在手工还原弹窗建议先从最简单的确认弹窗试一次把 MCP 配置和 TaoToken 通道跑通再逐步加复杂变体。通道配置参考接入文档 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite Key 在控制台 https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 管理。长期做编码和 Agent 类任务的话Coding Plan https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 的额度模型更适合高频调用不用每次单独算量。