AI时代有手就能实现前端零代码：Figma Make + Figma MCP 配 TaoToken 实战

1. 从设计稿到可运行页面卡点到底在哪Figma Make 是 Figma 官方推出的 AI 原生设计功能深度集成在编辑器里不用装插件、不用切平台输入一段 Prompt 就能直接产出 UI 界面甚至前端代码。Figma MCP 则是把 Figma 的设计上下文通过 Model Context Protocol 暴露给 Cursor、Claude Code 这类编码工具让 AI 直接读取设计稿的节点结构、样式和布局信息。两者组合起来理论上就是一条「设计稿 → 可运行页面」的零代码前端流水线。但真正动手的人会发现卡点往往不在 Figma 那一侧而在 AI 能力怎么接进来。Figma Make 生成代码需要模型能力Figma MCP 在 Cursor 里跑起来也需要模型能力如果你每个工具都单独配一套 Key、单独管一套额度光是环境搭建就能劝退一半人。这篇就聚焦一件事用 TaoToken 作为统一的 Key/API 通道把 Figma Make 和 Figma MCP 的 AI 能力串起来交付可复制的 config.toml 和 settings.json 配置骨架并给出 MCP 服务连通性验证动作。适合想快速搭起零代码前端生成环境的前端、全栈和产品同学。2. TaoToken 前置统一 Key 与 API 通道TaoToken 在这里扮演的角色是给 Figma Make 和 Figma MCP 背后的模型调用提供一个统一的入口。你不需要在 Figma、Cursor、Claude Code 之间来回切换不同的 Key只需要在 TaoToken 控制台创建一个 API Key然后把这个 Key 填到各个工具的配置里。具体操作路径打开官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 注册登录后进入控制台在 API Keys 页面创建一个新的 Key。这个 Key 就是后面 config.toml 和 settings.json 里要填的凭证。API 的基础地址是 https://taotoken.net/api 注意这个地址不带 UTM 参数配置时直接写这个就行。创建 Key 的入口在 https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 进去之后点「新建 Key」复制出来保存好后面配置要用。注意Key 只在创建时完整显示一次关掉页面就看不到了建议先存到本地密码管理器里。如果你后面要跑长期编码任务或者 Agent 工作流可以了解一下 Coding Plan入口在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite 。模型对话调试的入口在 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。3. 可复制配置config.toml 与 settings.json 骨架这一节是全文的核心直接给可复制的配置骨架。分两块一块是给 Claude Code / 类 Claude Code 工具用的 config.toml一块是给 Cursor 用的 settings.jsonMCP 配置。3.1 config.toml 配置骨架如果你用的是 Claude Code 或者支持 config.toml 的编码工具配置大概长这样# ~/.config/taotoken/config.toml # TaoToken 统一接入配置 [api] base_url https://taotoken.net/api api_key sk-你的TaoTokenKey timeout 120 [model] default claude-sonnet-4-20250514 fallback claude-3-5-sonnet-20241022 [mcp.figma] enabled true server_url https://mcp.figma.com/mcp auth_mode oauth [logging] level info这里几个关键点base_url 固定写 https://taotoken.net/api api_key 换成你在控制台创建的那个。model 段里的 default 是你主要用的模型fallback 是备用。mcp.figma 段是给 Figma MCP 预留的server_url 就是 Figma 官方的 MCP 地址。3.2 settings.json 配置骨架Cursor MCPCursor 的 MCP 配置走的是 settings.json路径一般在~/.cursor/mcp.json或者项目根目录的.cursor/mcp.json。骨架如下{ mcpServers: { Figma: { url: https://mcp.figma.com/mcp, env: { TAOTOKEN_BASE_URL: https://taotoken.net/api, TAOTOKEN_API_KEY: sk-你的TaoTokenKey } } } }如果你用的是 Claude Code 的 MCP 配置格式类似只是文件位置不同{ mcpServers: { figma: { command: npx, args: [-y, figma/mcp-server], env: { FIGMA_ACCESS_TOKEN: 你的FigmaToken, TAOTOKEN_BASE_URL: https://taotoken.net/api, TAOTOKEN_API_KEY: sk-你的TaoTokenKey } } } }提示Figma MCP 的认证方式有两种一种是 OAuth 自动认证在 Figma 右侧面板点 MCP server 开启后会弹认证页一种是手动填 Token。两种都可以OAuth 更省事。3.3 Figma Make 侧的 Prompt 配置Figma Make 本身不需要写配置文件但它的 Prompt 结构直接决定生成质量。按「分辨率 布局描述 功能信息结构 样式规范」四段式来写实测下来稳定性最好。比如生成适配 1440x900 分辨率的企业级 PC 中台 UI统一采用「顶部导航栏 左侧侧边栏 中间内容区」经典布局。 全局规则 1. 左侧新增「人员信息管理」一级菜单选中高亮 2. 列表编辑跳转详情页详情页返回按钮回列表 3. 仅展示迁移岗位人员数据列表顶提示「非迁移岗位人员请用 XMS 操作」灰色 4. 仅店长/经理/厂长/主管/库房经理可见「离职」按钮点击弹确认弹窗。 页面字段米聊号、姓名、手机号前3后4中间****、身份证号仅前4其余****、实名认证/工作状态、工龄。 样式规范表头加粗奇偶行背景浅灰/白hover 行背景加深标题 16px 加粗字段标签 14px提示文字 12px 灰色模块间距 24px。这段 Prompt 丢进 Figma Make生成出来的页面结构基本能直接用。生成完之后点左侧最下面的「Point and edit」按钮可以选中单个元素直接改比如选中表头「身份证号」输入「前4位明文后4位明文中间用*表示」它会局部重绘。4. 验证请求MCP 连通性与页面生成配置写完之后别急着跑大项目先做连通性验证。4.1 验证 TaoToken API 连通性用 curl 直接打一下 API 端点curl -X POST https://taotoken.net/api/v1/messages \ -H Content-Type: application/json \ -H x-api-key: sk-你的TaoTokenKey \ -H anthropic-version: 2023-06-01 \ -d { model: claude-sonnet-4-20250514, max_tokens: 64, messages: [{role: user, content: ping}] }如果返回里有正常的 content 字段说明 Key 和 base_url 都对。如果返回 401检查 Key 有没有复制错返回 404检查 base_url 是不是写成了带路径的完整地址。4.2 验证 Figma MCP 连通性在 Figma 里切换到 Dev Mode底部工具栏切右侧面板开启 MCP server选择 Cursor 作为客户端。这时候会弹一个认证页面确认之后 Figma 右侧会显示一个绿点表示认证成功。然后在 Cursor 里打开一个空文件夹比如figma-demo在 MCP 面板里看 Figma 这个 server 是不是绿的。如果是绿的说明 MCP 通道通了。4.3 跑一个最小生成任务在 Cursor 里输入使用 vue typescript npm 创建一个 vue 项目 并使用 Figma MCP 实现该页面 https://www.figma.com/design/你的文件ID/页面名?node-id0-1mdev 实现完成后运行该项目。等它跑完你会看到 Cursor 自动创建了项目结构、拉了 Figma 节点数据、生成了 Vue 组件最后npm run dev起来。打开浏览器能看到和设计稿基本一致的页面这一步就算通了。5. 本篇常见错排查5.1 MCP server 显示红点或灰点最常见的原因是认证过期。Figma 的 OAuth 认证有有效期过期后右侧面板的绿点会变灰。解决办法是重新点一次 MCP server 的认证按钮走一遍授权流程。另一个原因是 settings.json 里的 url 写错了确认是https://mcp.figma.com/mcp不要多加斜杠或者路径。5.2 Cursor 里调用 MCP 报「no tools available」这种情况一般是 MCP server 连上了但工具列表没拉下来。先检查 Figma 那边是不是在 Dev Mode 下打开的页面非 Dev Mode 的页面 MCP 读不到节点数据。然后检查 Cursor 的 MCP 面板里 Figma 这个 server 有没有展开显示工具列表如果没有点一下刷新按钮。5.3 生成的页面和设计稿差距大Figma MCP 读的是节点数据如果设计稿里用了大量自动布局Auto Layout和组件变体生成质量会高很多。如果设计稿是纯手摆的绝对定位AI 还原出来的布局容易跑偏。建议在 Figma 里尽量用 Auto Layout 组织页面组件用 Variants 管理状态。5.4 TaoToken 返回 429说明触发了速率限制。检查一下是不是在短时间内发了太多并发请求。如果是跑批量生成任务建议在 config.toml 里把 timeout 调大或者在代码里加个简单的 sleep。Coding Plan 对长期编码任务有更宽松的额度策略可以按需切换。5.5 Figma Make 生成的代码跑不起来Figma Make 生成的是可交互的 demo 代码导出后可能需要补依赖。常见的是缺react或vue的 peer dependencies按报错提示npm install对应的包就行。另外生成的代码里可能引用了 Figma 内部的资源 URL这些 URL 有有效期长期项目建议把图片资源下载到本地。6. 把这条流水线跑顺的几个实操建议第一Figma 设计稿的质量直接决定生成质量。花十分钟把页面用 Auto Layout 重新组织一遍比后面调十次 Prompt 都管用。第二TaoToken 的 Key 建议按项目分不要所有工具共用一个 Key方便排查问题和控制额度。第三Figma MCP 的认证会过期如果发现 Cursor 里突然读不到设计稿了先去 Figma 右侧面板看一眼绿点还在不在。第四config.toml 和 settings.json 建议纳入版本管理但 Key 用环境变量注入别硬编码进文件。模型对话调试可以用 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite API Keys 管理在 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 。Claude Code 相关的接入参考在 https://taotoken.net/claude-code?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_codeutm_campaignrewrite 。