在实际前端开发流程中设计稿与代码实现之间的鸿沟一直是影响开发效率的关键瓶颈。设计师在 Figma 中完成精美的界面而开发者则需要手动测量间距、提取颜色、复制文案这个过程不仅繁琐还容易出错。随着 AI 辅助开发工具的兴起通过程序化方式读取设计稿数据并将其转化为结构化的开发资源已成为提升前端工程效能的重要方向。本文将以 Figma 为设计源深入实战如何利用 Figma API 和 MCPModel Context Protocol的思想通过编写脚本文中以“Codex”代指此类脚本化工具批量获取设计节点并输出一份完整、可用的 JSON 数据结构。无论你是希望自动化提取设计 Token还是想搭建一个连接设计与代码的中间层这篇文章都将提供一个从零开始、可复现的完整路径。我们将从理解 Figma 的文件结构与 API 模型开始逐步完成环境准备、认证配置、API 调用、数据解析与结构化输出。最终你将获得一个能够将 Figma 画板Frames、组件Components、文本Text、颜色填充Fills等节点信息按层级关系组织成 JSON 的实战方案。这不仅是一个简单的 API 调用示例更是一套处理嵌套节点、过滤无效数据、适配不同设计规范的生产级脚本思路。1. 理解 Figma 数据模型与 MCP 实践思路在动手写代码之前必须厘清 Figma 是如何组织设计数据的以及我们所说的“MCP实战”具体指什么。这决定了后续脚本的数据抓取策略和输出结构。1.1 Figma 文件的核心结构节点树Figma 文件本质上是一棵由节点Node构成的树。每个节点都有一个唯一的id、一个type属性如DOCUMENT,CANVAS,FRAME,GROUP,TEXT,RECTANGLE等以及描述其外观和布局的属性。顶层节点是DOCUMENT其下包含一个或多个CANVAS画布每个CANVAS下则是具体的设计元素它们以父子关系嵌套。当我们通过 API 获取文件时得到的就是这棵节点树的 JSON 表示。理解这一点至关重要我们的脚本不是去“截图”或“导出图片”而是直接获取这份结构化的原始数据。1.2 什么是 MCP 以及它在此场景下的映射MCPModel Context Protocol是一种新兴的协议旨在为 AI 模型提供标准化、结构化的工具调用和环境上下文。虽然本文不涉及完整的 MCP 服务器搭建但其核心思想——为模型提供可编程的、能够读取和操作特定领域数据如设计稿的工具——与我们构建 Figma 数据提取脚本的目标高度契合。在此实战中我们可以将整个脚本视为一个简化的“MCP Server”工具Tool脚本提供的核心功能是“获取 Figma 文件节点数据”。上下文Context脚本通过 Figma API 获取的完整设计节点树构成了丰富的上下文信息。结构化输出脚本最终输出的 JSON正是为下游“AI模型”或“代码生成器”准备的标准化上下文数据。因此本文的“MCP实战”更侧重于实现 MCP 理念中的数据准备层如何可靠、全面、结构化地获取设计上下文。1.3 预期输出我们需要什么样的 JSON一个粗糙的 API 响应 JSON 可能包含大量开发无关的元数据。我们的目标是加工出一份对前端开发友好的结构。它可能包含以下部分文档与页面信息文件名称、页面Canvas列表。设计令牌Design Tokens提取出的所有颜色、字体样式、阴影、圆角等并进行去重和分类。组件库映射识别出 Figma 组件Components和组件实例Instances并建立映射关系。布局与节点树保留关键节点的层级、位置x, y、尺寸width, height和类型用于布局分析和代码生成。文本内容提取所有文案并关联其样式。明确了目标我们就可以开始搭建环境了。2. 环境准备与 Figma API 配置要读取 Figma 数据你必须拥有对应文件的访问权限并配置好认证凭证。本节将完成所有前置准备工作。2.1 获取 Figma Personal Access TokenFigma API 使用 Personal Access Token 进行认证。登录你的 Figma 账号。点击右上角个人头像进入 “Settings”。在左侧菜单栏找到并点击 “Account”。向下滚动找到 “Personal access tokens” 部分。点击 “Create new token”。输入一个易于识别的 Token 名称例如“Figma Data Extractor”。点击 “Create” 生成 Token。重要立即复制生成的 Token 字符串并妥善保存。它只显示一次丢失后需要重新生成。这个 Token 将作为我们脚本访问 Figma API 的密码。2.2 获取目标文件的 Key文件ID你需要知道要读取的 Figma 文件的 ID。在浏览器中打开你的 Figma 文件。观察浏览器地址栏URL 格式通常为https://www.figma.com/file/FILE_KEY/FILE_NAME。FILE_KEY就是你需要的那一串由数字和字母组成的 ID。例如在https://www.figma.com/file/abc123DEF456/My-Design中abc123DEF456就是文件 Key。2.3 项目初始化与依赖安装我们将使用 Node.js 环境来编写脚本因为它能很好地处理 HTTP 请求和 JSON 数据。确保你的系统已安装 Node.js建议版本 16 或以上。创建一个新的项目目录并初始化mkdir figma-data-extractor cd figma-data-extractor npm init -y安装必要的依赖。我们将使用axios来发起 HTTP 请求并使用dotenv来管理环境变量避免将 Token 硬编码在代码中。npm install axios dotenv创建项目基础文件结构figma-data-extractor/ ├── .env # 存储敏感信息如 Token ├── .gitignore # 忽略 node_modules 和 .env ├── package.json ├── config.js # 配置文件 ├── figma-api-client.js # 封装的 API 客户端 ├── node-processor.js # 节点数据处理逻辑 └── index.js # 主入口文件2.4 配置环境变量与基础配置创建.env文件并填入你的 Figma Token# .env FIGMA_PERSONAL_ACCESS_TOKENyour_personal_access_token_here创建config.js文件集中管理配置// config.js require(dotenv).config(); // 加载 .env 文件中的变量 const config { figma: { // 从环境变量读取 Token如果不存在则报错 accessToken: process.env.FIGMA_PERSONAL_ACCESS_TOKEN, // 你的 Figma 文件 ID可以通过命令行参数传入或在此修改 fileKey: process.env.FIGMA_FILE_KEY || YOUR_DEFAULT_FILE_KEY_HERE, // Figma API 的基础地址 apiBase: https://api.figma.com/v1, }, }; // 安全检查如果 Token 未设置启动时抛出错误 if (!config.figma.accessToken) { throw new Error(FIGMA_PERSONAL_ACCESS_TOKEN is not defined in .env file); } module.exports config;记得将.env添加到.gitignore中防止将密钥提交到版本库。# .gitignore node_modules/ .env .DS_Store3. 构建 Figma API 客户端与获取原始数据有了配置我们需要一个可靠的客户端来与 Figma API 交互。Figma API 提供了多个端点我们最关心的是获取文件GET /v1/files/:key。3.1 封装 API 客户端创建figma-api-client.js// figma-api-client.js const axios require(axios); const config require(./config); class FigmaAPIClient { constructor() { this.accessToken config.figma.accessToken; this.apiBase config.figma.apiBase; // 创建 axios 实例统一设置请求头 this.client axios.create({ baseURL: this.apiBase, headers: { X-Figma-Token: this.accessToken, }, timeout: 30000, // 设置超时时间为30秒 }); } /** * 获取 Figma 文件完整数据 * param {string} fileKey - Figma 文件 ID * returns {PromiseObject} - Figma 文件的原始 JSON 数据 */ async getFile(fileKey) { try { const response await this.client.get(/files/${fileKey}); return response.data; } catch (error) { console.error(Failed to fetch Figma file ${fileKey}:, error.message); if (error.response) { // 服务器返回了错误状态码 (4xx, 5xx) console.error(Response status:, error.response.status); console.error(Response data:, error.response.data); } else if (error.request) { // 请求已发出但没有收到响应 console.error(No response received:, error.request); } throw error; // 将错误向上抛由调用者处理 } } /** * 获取文件中的图片资源可选用于下载图标等 * param {string} fileKey - Figma 文件 ID * param {Arraystring} ids - 节点 ID 数组 * param {string} format - 图片格式如 png, jpg, svg * param {number} scale - 缩放比例如 1, 2, 4 * returns {PromiseObject} - 包含图片 URL 的映射对象 */ async getImages(fileKey, ids, format png, scale 1) { const params new URLSearchParams({ ids: ids.join(,), format, scale, }); try { const response await this.client.get(/images/${fileKey}?${params.toString()}); return response.data; } catch (error) { console.error(Failed to fetch images:, error.message); throw error; } } } module.exports FigmaAPIClient;这个客户端类做了几件重要的事集中管理认证头 (X-Figma-Token)。提供了获取文件主数据的方法getFile。对网络请求错误进行了初步分类处理便于排查。预留了获取图片的方法getImages用于扩展如下载图标。3.2 编写节点处理器遍历与提取Figma API 返回的节点树非常庞大。我们需要编写一个处理器来遍历这棵树并提取出我们关心的信息。创建node-processor.js// node-processor.js class NodeProcessor { constructor() { // 用于存储提取出的设计令牌 this.designTokens { colors: new Map(), // 使用 Map 去重key 为 RGB 或 HEX 值 textStyles: new Map(), // key 为样式签名如 fontFamily-size-weight }; // 用于存储组件信息 this.components new Map(); // key 为 componentId // 最终的扁平化节点列表和结构树 this.flatNodes []; this.structuredTree null; } /** * 处理整个 Figma 文档节点树 * param {Object} figmaFileData - Figma API 返回的完整文件数据 * returns {Object} - 处理后的结构化数据 */ processDocument(figmaFileData) { const { document, name, version, lastModified } figmaFileData; this.structuredTree { fileInfo: { name, version, lastModified }, pages: [], }; // 递归遍历文档的起点 this._traverseNode(document, null, 0, page); return { fileInfo: this.structuredTree.fileInfo, pages: this.structuredTree.pages, designTokens: { colors: Array.from(this.designTokens.colors.values()), textStyles: Array.from(this.designTokens.textStyles.values()), }, components: Array.from(this.components.values()), flatNodes: this.flatNodes, // 可选用于快速查找 }; } /** * 递归遍历节点的核心方法 * param {Object} node - 当前节点 * param {Object} parent - 父节点处理后的结构 * param {number} depth - 当前深度 * param {string} nodeType - 节点在结构中的类型如 page, frame, component */ _traverseNode(node, parent, depth, nodeType) { if (!node || typeof node ! object) return; // 1. 构建当前节点的简化信息对象 const processedNode { id: node.id, name: node.name || Unnamed, type: node.type, depth, nodeType, // 我们自定义的结构类型 boundingBox: { x: node.absoluteBoundingBox?.x || 0, y: node.absoluteBoundingBox?.y || 0, width: node.absoluteBoundingBox?.width || 0, height: node.absoluteBoundingBox?.height || 0, }, // 根据节点类型提取特定数据 styles: this._extractNodeStyles(node), // 原始数据中的其他可能有用字段可选 visible: node.visible ! false, // 默认可见 locked: node.locked true, }; // 2. 将节点添加到扁平化列表 this.flatNodes.push(processedNode); // 3. 根据节点类型进行特殊处理 switch (node.type) { case CANVAS: // Canvas 对应 Figma 中的一个页面Page const page { ...processedNode, children: [] }; this.structuredTree.pages.push(page); parent page; // 后续子节点挂载到此 page 下 nodeType canvas; break; case FRAME: case GROUP: case INSTANCE: case COMPONENT: // 这些是可嵌套的容器节点 const containerNode { ...processedNode, children: [] }; if (parent parent.children) { parent.children.push(containerNode); } parent containerNode; nodeType node.type.toLowerCase(); // 如果是组件或实例记录到组件库 if (node.type COMPONENT || node.type INSTANCE) { this._processComponent(node, processedNode); } break; case TEXT: // 文本节点提取内容 processedNode.characters node.characters || ; processedNode.style node.style || {}; this._extractTextStyle(node); // 提取文本样式令牌 if (parent parent.children) { parent.children.push(processedNode); } break; case RECTANGLE: case ELLIPSE: case LINE: case VECTOR: // 图形节点提取填充、描边等 this._extractColorStyles(node); // 提取颜色令牌 if (parent parent.children) { parent.children.push(processedNode); } break; default: // 其他类型节点直接作为子节点加入如果有父容器 if (parent parent.children) { parent.children.push(processedNode); } } // 4. 递归处理子节点 if (node.children Array.isArray(node.children)) { const nextParent parent || this.structuredTree; // 如果没有明确父级则挂到根 node.children.forEach(childNode { this._traverseNode(childNode, nextParent, depth 1, nodeType); }); } } /** * 提取节点的样式信息通用 */ _extractNodeStyles(node) { const styles {}; // 提取填充色 if (node.fills Array.isArray(node.fills)) { const solidFills node.fills.filter(fill fill.type SOLID fill.visible ! false); if (solidFills.length 0) { styles.fills solidFills.map(fill this._formatColor(fill.color, fill.opacity)); } } // 提取描边 if (node.strokes Array.isArray(node.strokes)) { // 类似 fills 的处理 } // 提取效果阴影、模糊等 if (node.effects Array.isArray(node.effects)) { // 处理效果 } // 提取圆角 if (node.cornerRadius ! undefined) { styles.cornerRadius node.cornerRadius; } return styles; } /** * 提取颜色并存入设计令牌 */ _extractColorStyles(node) { // 检查 fills, strokes, effects 等属性中的颜色 const extractFrom (attrs) { if (!attrs || !Array.isArray(attrs)) return; attrs.forEach(attr { if (attr.type SOLID attr.color) { const colorKey this._formatColor(attr.color, attr.opacity); if (!this.designTokens.colors.has(colorKey)) { this.designTokens.colors.set(colorKey, { value: colorKey, rgba: rgba(${Math.round(attr.color.r * 255)}, ${Math.round(attr.color.g * 255)}, ${Math.round(attr.color.b * 255)}, ${attr.opacity || 1}), figmaStyleId: attr.blendMode, // 可选关联 Figma 样式 ID }); } } }); }; extractFrom(node.fills); extractFrom(node.strokes); } /** * 提取文本样式并存入设计令牌 */ _extractTextStyle(node) { if (node.type ! TEXT || !node.style) return; const { fontFamily, fontSize, fontWeight, lineHeightPx, letterSpacing } node.style; const styleSignature ${fontFamily}-${fontSize}-${fontWeight || regular}; if (!this.designTokens.textStyles.has(styleSignature)) { this.designTokens.textStyles.set(styleSignature, { name: styleSignature, fontFamily, fontSize, fontWeight, lineHeightPx, letterSpacing, figmaStyleId: node.style?.styleId, // 关联 Figma 文本样式 ID }); } } /** * 处理组件和实例 */ _processComponent(rawNode, processedNode) { const componentInfo { id: rawNode.id, name: rawNode.name, type: rawNode.type, key: rawNode.componentId || rawNode.componentKey, // 关键组件唯一标识 }; if (rawNode.type COMPONENT) { // 主组件定义 this.components.set(componentInfo.key, componentInfo); } else if (rawNode.type INSTANCE rawNode.componentId) { // 组件实例关联到主组件 processedNode.componentKey rawNode.componentId; } } /** * 将 Figma 的颜色对象格式化为 HEX 或 RGBA 字符串 */ _formatColor(color, opacity 1) { const toHex (c) Math.round(c * 255).toString(16).padStart(2, 0); const r toHex(color.r); const g toHex(color.g); const b toHex(color.b); const alpha opacity 1 ? Math.round(opacity * 255).toString(16).padStart(2, 0) : ; return #${r}${g}${b}${alpha}.toUpperCase(); } } module.exports NodeProcessor;这个处理器是脚本的核心它执行了深度优先遍历DFS并在此过程中完成了三件关键任务构建结构树保留设计稿的层级关系便于理解布局。提取设计令牌在遍历过程中识别并收集颜色、文本样式等原子设计元素。扁平化记录生成一个所有节点的列表便于通过 ID 快速查找。4. 主程序集成与 JSON 输出现在我们将客户端和处理器连接起来并运行脚本获取最终结果。创建index.js// index.js const FigmaAPIClient require(./figma-api-client); const NodeProcessor require(./node-processor); const config require(./config); const fs require(fs).promises; const path require(path); async function main() { const fileKey process.argv[2] || config.figma.fileKey; // 支持从命令行参数传入文件 Key if (!fileKey || fileKey YOUR_DEFAULT_FILE_KEY_HERE) { console.error(Error: Figma file key is not provided.); console.log(Usage: node index.js FIGMA_FILE_KEY); console.log(Or set FIGMA_FILE_KEY in your .env file.); process.exit(1); } console.log(Fetching data for Figma file: ${fileKey}); // 1. 初始化客户端和处理器 const client new FigmaAPIClient(); const processor new NodeProcessor(); try { // 2. 调用 API 获取原始文件数据 console.log(Calling Figma API...); const rawData await client.getFile(fileKey); console.log(API call successful. Document name: ${rawData.name}); // 3. 处理原始节点数据 console.log(Processing nodes and extracting design tokens...); const startTime Date.now(); const structuredData processor.processDocument(rawData); const endTime Date.now(); console.log(Processing completed in ${endTime - startTime}ms.); console.log(- Pages found: ${structuredData.pages.length}); console.log(- Unique colors extracted: ${structuredData.designTokens.colors.length}); console.log(- Unique text styles extracted: ${structuredData.designTokens.textStyles.length}); console.log(- Components defined: ${structuredData.components.length}); console.log(- Total nodes processed: ${structuredData.flatNodes.length}); // 4. 将处理后的数据写入 JSON 文件 const outputDir path.join(__dirname, output); try { await fs.access(outputDir); } catch { await fs.mkdir(outputDir, { recursive: true }); } const timestamp new Date().toISOString().replace(/[:.]/g, -); const outputFilename figma-data-${timestamp}.json; const outputPath path.join(outputDir, outputFilename); await fs.writeFile( outputPath, JSON.stringify(structuredData, null, 2), // 美化输出缩进2空格 utf-8 ); console.log(\nStructured JSON data has been saved to: ${outputPath}); // 5. 可选同时保存一份原始数据以供参考 const rawOutputPath path.join(outputDir, figma-raw-${timestamp}.json); await fs.writeFile(rawOutputPath, JSON.stringify(rawData, null, 2), utf-8); console.log(Raw API response saved to: ${rawOutputPath}); } catch (error) { console.error(An error occurred during the process:, error); process.exit(1); } } // 运行主函数 if (require.main module) { main(); }4.1 运行脚本并验证结果在终端中运行脚本并传入你的 Figma 文件 Keynode index.js abc123DEF456或者你也可以直接在config.js中设置默认的fileKey然后直接运行node index.js如果一切顺利你将在控制台看到处理过程的日志并在项目根目录下生成一个output文件夹里面包含两个 JSON 文件figma-data-timestamp.json这是我们需要的、经过处理的结构化数据。figma-raw-timestamp.jsonFigma API 返回的原始完整数据用于调试和对比。打开figma-data-timestamp.json你应该能看到类似以下结构的 JSON{ fileInfo: { name: My Design System, version: 1234567890, lastModified: 2023-10-27T08:30:00Z }, pages: [ { id: 1:23, name: Page 1, type: CANVAS, depth: 0, nodeType: page, boundingBox: { x: 0, y: 0, width: 1920, height: 1080 }, styles: {}, visible: true, locked: false, children: [ { id: 2:34, name: Login Button, type: FRAME, depth: 1, nodeType: frame, boundingBox: { x: 100, y: 200, width: 200, height: 50 }, styles: { fills: [#4F46E5], cornerRadius: 8 }, visible: true, locked: false, children: [ { id: 3:45, name: Sign In, type: TEXT, depth: 2, nodeType: text, boundingBox: { x: 130, y: 215, width: 140, height: 20 }, styles: {}, visible: true, locked: false, characters: Sign In, style: { fontFamily: Inter, fontSize: 16, fontWeight: 600 } } ] } ] } ], designTokens: { colors: [ { value: #4F46E5, rgba: rgba(79, 70, 229, 1), figmaStyleId: null } ], textStyles: [ { name: Inter-16-600, fontFamily: Inter, fontSize: 16, fontWeight: 600, lineHeightPx: 24, letterSpacing: 0, figmaStyleId: S:123abc... } ] }, components: [ { id: 4:56, name: Button/Primary, type: COMPONENT, key: 1234567890abcdef } ], flatNodes: [...] }这份 JSON 就是连接设计与代码的“桥梁”。前端项目可以读取它自动生成 CSS 变量、样式常量甚至用于低代码平台的组件渲染。5. 常见问题排查与优化实践在实际运行中你可能会遇到各种问题。下面是一些常见情况的排查路径和优化建议。5.1 API 调用失败与认证错误问题现象可能原因检查与解决方式请求返回403或401Personal Access Token 无效、过期或权限不足。1. 检查.env文件中的FIGMA_PERSONAL_ACCESS_TOKEN值是否正确前后有无空格。2. 登录 Figma 账号在设置中确认 Token 是否已启用。3. 确保该 Token 对目标文件有查看权限。请求返回404文件 Key 错误或文件已被删除。1. 再次从浏览器地址栏核对文件 Key。2. 确认文件是否存在于你的 Figma 团队或个人项目中。请求超时或网络错误网络不稳定或 Figma API 服务暂时不可用。1. 检查本地网络连接。2. 在figma-api-client.js中适当增加timeout值。3. 稍后重试。控制台报错FIGMA_PERSONAL_ACCESS_TOKEN is not defined.env文件未正确加载或变量名错误。1. 确认项目根目录下存在.env文件。2. 确认.env文件中变量名为FIGMA_PERSONAL_ACCESS_TOKEN。3. 确认config.js中正确调用了require(dotenv).config()。5.2 数据处理中的常见坑节点visible属性为falseFigma 中隐藏的图层其visible属性为false。我们的脚本默认会处理所有节点。如果你只想处理可见图层可以在_traverseNode方法开始时添加判断if (node.visible false) return;。颜色格式与透明度Figma 中颜色使用 0-1 的 RGB 值表示而前端常用 HEX 或 RGBA。脚本中的_formatColor方法提供了转换但要注意透明度opacity的处理。有时节点的透明度可能由父级或填充本身控制需要更复杂的逻辑来合并计算。文本样式去重不准确当前的styleSignature仅基于字族、大小和粗细。在实际设计中行高lineHeightPx或lineHeightPercent、字间距letterSpacing甚至文本装饰textDecoration都可能构成独立样式。你需要根据设计系统的规范调整去重逻辑。处理大量节点导致内存或性能问题如果设计文件极其复杂数万个节点递归遍历可能消耗较多内存和时间。可以考虑使用迭代代替递归。分页或按需请求节点Figma API 支持ids参数获取特定节点。在处理器中增加进度提示。5.3 生产环境优化建议增加缓存机制频繁请求同一文件会浪费 API 配额Figma 有速率限制。可以将处理后的 JSON 缓存到本地文件或数据库并基于文件的lastModified时间戳判断是否需要更新。错误处理与重试网络请求可能失败。在生产脚本中应为axios请求实现指数退避的重试逻辑。增量更新如果只关心变更的部分可以结合 Figma 的 Webhooks 功能。当文件更新时Figma 会通知你的服务然后你可以只拉取并处理变化的节点。输出格式标准化将 JSON 结构适配为你团队内部的设计 Token 规范如符合 Style Dictionary 格式或直接生成.css、.scss、.js常量文件。安全存储 Token在 CI/CD 或服务器环境中不要将 Token 写在代码里。使用环境变量或安全的密钥管理服务如 AWS Secrets Manager, HashiCorp Vault。6. 扩展方向从数据提取到工程化集成获取 JSON 只是第一步。要让其真正产生效能需要将其集成到开发流程中。6.1 生成 CSS/SCSS 变量文件你可以编写一个后处理脚本读取designTokens部分生成前端项目可直接引用的样式文件。// generate-css.js const designTokens require(./output/figma-data-xxx.json).designTokens; let cssContent :root {\n; designTokens.colors.forEach(token { // 将颜色 token 转换为 CSS 自定义属性例如 --color-primary: #4F46E5; const sanitizedName token.value.replace(#, ).toLowerCase(); cssContent --color-${sanitizedName}: ${token.value};\n; }); designTokens.textStyles.forEach(style { // 生成文本样式类或混合宏Mixin }); cssContent }\n; // 将 cssContent 写入文件6.2 与组件库联动识别出的components可以映射到你代码仓库中的组件。例如当 Figma 中一个名为Button/Primary的组件被更新时可以触发 CI 流程更新对应的 React/Vue 组件库的文档或甚至生成部分样板代码。6.3 搭建简单的“设计稿 diff”工具通过定期运行脚本并保存历史 JSON你可以比较两个版本 JSON 的差异自动生成一份设计变更日志帮助开发和设计同步信息。6.4 向真正的 MCP Server 演进本文的脚本是一个独立运行的数据提取器。你可以将其封装成一个 HTTP 服务并按照 MCP 协议定义标准的tools和resources。这样Claude、Cursor 等支持 MCP 的 AI 助手就能直接通过这个服务“读懂”你的设计稿并根据你的指令生成更准确的 UI 代码。这个实战项目展示了如何通过代码将设计资产转化为结构化数据。关键在于理解数据源Figma API的模型并设计一个清晰、可扩展的数据处理管道。从简单的令牌提取开始逐步加入组件识别、布局分析、差异对比等能力你就能搭建起一套贴合团队需求的“设计-开发”桥梁切实提升前端开发的效率和一致性。