把 Figma 设计稿交给 AI 编码助手还原，最常见的做法是贴截图——模型看图猜布局，间距靠估、颜色靠猜，一次成功率惨不忍睹。Framelink MCP for Figma（GLips/Figma-Context-MCP）换了个思路：通过 MCP（Model Context Protocol）服务器把 Figma 文件的结构化数据直接喂给 Cursor 等编码 Agent——粘贴一个 Figma 链接，Agent 拉取布局与样式的精确元数据，一次性准确还原设计。约 16k Star、MIT 协议，是设计稿转代码这个场景最流行的 MCP 服务器。本文按"概述 → 工作机制 → 安装配置 → 实战流程 → 对比 → 总结"组织全文。
1、概述
Figma-Context-MCP 定位为一款"给 AI 编码工具提供 Figma 数据"的 MCP 服务器：官方口径是给 Cursor 及其他 AI 编码工具访问 Figma 文件的通道，有了设计数据的 Cursor，一次性还原设计的准确率远高于贴截图等替代方案。
仓库由 GLips（Sid Lipkin，个人开发者）2025 年 2 月创建，约 16k Star、1.26k Fork、MIT 协议，TypeScript 主体，npm 包名 figma-developer-mcp。项目已发展为 Framelink 公司产品（官网 framelink.ai，配文档站与 Discord 社区），但核心服务器保持开源。持续维护中（最近一次推送就在昨天），27 个 open issue 说明迭代健康。
一句话价值主张：截图是"让模型看图猜"，Framelink 是"把 Figma 的结构化布局与样式元数据直接交给模型"——信息从模糊的像素变成精确的数据。
2、工作机制：简化与翻译
这个 MCP 服务器的核心不是"连上 Figma API"，而是连接之后对返回数据做的减法。
原始的 Figma API 响应包含海量与代码还原无关的信息——完整的节点树、协作数据、历史记录、原型交互定义。Framelink 在把数据交给模型之前先做两件事：
- 简化：过滤掉与实现无关的字段，只保留布局与样式相关的核心信息——坐标、尺寸、层级、填充、描边、字体、间距约束
- 翻译：把 Figma 的内部数据结构转译成模型容易消费的精简格式
README 对设计动机的表述很直白："减少提供给模型的上下文，让 AI 更准确、回复更相关"。这与直觉相反——不是给的数据越多越好，而是精准的小数据胜过嘈杂的大数据。LLM 的注意力有限，无关字段是噪声；Framelink 本质上是一个面向模型的 Figma 数据降噪器。
这个设计决策也是它区别于"直接调 Figma API"方案的关键：技术上任何 Agent 都能自己调 API，但原始响应的 token 消耗大、信噪比低，一次设计还原可能烧掉几万 token 还抓不住重点。
3、安装与配置
前置条件只有两样：Node.js 环境（npx 可用）加一个 Figma 个人访问令牌（Figma 设置里生成）。
多数编辑器与 AI 客户端用配置文件管理 MCP 服务器。macOS / Linux 的配置：
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp",
"--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
Windows 的配置（经 cmd 包一层）：
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "cmd",
"args": ["/c", "npx", "-y", "figma-developer-mcp",
"--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
配置要点：
- 密钥可以直接写在 args 里，也可以改用 env 字段设
FIGMA_API_KEY（另可设PORT） --stdio表示以标准输入输出方式与客户端通信，这是最常见的 MCP 服务器运行模式- 各客户端（Cursor / Claude Code / VS Code 等）的 MCP 配置文件位置不同，按 Framelink 文档站的 quickstart 走即可
- npx 方式免去全局安装，升级随 npm 包版本自动跟进
4、实战流程
配置好之后的使用流程，README 用四步概括：
- 打开 IDE 的聊天面板（例如 Cursor 的 agent 模式）
- 粘贴一个 Figma 文件、画板（frame）或编组（group）的链接
- 对 Agent 提要求——比如"实现这个设计"
- Agent 自动调用 MCP 工具拉取 Figma 元数据，然后写代码
注意第 2 步的粒度：链接可以指向整个文件，也可以指向单个画板或编组——贴画板级链接比贴整文件更省 token，Agent 只拉需要的部分。
典型进阶用法：结合设计系统工作——Figma 里的组件命名与代码组件对齐后，Agent 还原时会直接映射到项目既有组件而非重写；配合 Tailwind 类项目效果尤其好，精确的间距与颜色数据直接翻译成 class。
5、横向对比
"设计稿转代码"赛道的主要玩家：
| 方案 | 形态 | 优势 | 局限 |
|---|---|---|---|
| Framelink MCP | MCP 服务器 | 精确元数据 + 降噪、任意框架、开源免费 | 仅 Figma、需手动贴链接 |
| screenshot-to-code | 开源工具 | 截图即可、无 Figma 依赖 | 像素级猜测，精度有限 |
| Figma 官方 Code Connect | Figma 官方 | 设计工具内直接映射代码 | 需逐组件手动配置映射 |
| v0 / Lovable | 托管平台 | 一站式生成 + 部署 | 平台锁定、无法接入自有代码库 |
选型建议：
- 用 Cursor / Claude Code 做日常开发、设计稿在 Figma → Framelink MCP 是标配
- 只有截图、没有源文件 → screenshot-to-code 类工具
- 成熟设计系统、想组件级双向映射 → 看官方 Code Connect
- 组合玩法：Framelink 拉数据做一次性还原，Code Connect 维护长期映射，两者不冲突
6、总结
Framelink MCP for Figma 是设计稿转代码场景最流行的开源 MCP 服务器（约 16k Star、MIT、TypeScript）：把 Figma 文件的结构化布局与样式元数据经简化翻译后交给编码 Agent，用精确数据替代截图猜测，显著提升一次性还原设计的准确率；npx 一条命令配置进任意 MCP 客户端，四步工作流（贴链接 → 提要求 → 拉数据 → 出代码），由个人项目成长为 Framelink 公司产品但核心保持开源。
它适合用 Cursor / Claude Code / VS Code 等 MCP 客户端做前端开发、且设计源文件在 Figma 的团队——贴个链接就能让 Agent 拿到精确的间距、颜色、字体与层级，是设计还原工作流的效率倍增器。边界方面：只支持 Figma（Sketch / XD / 即时设计用户无解）；依赖 Figma API 与个人令牌，团队协作场景的令牌管理需自行规划；降噪规则是通用启发式，极端复杂的设计（大量变体、自动布局嵌套）仍可能需要人工补细节；免费版 Figma 的 API 配额在重度使用时可能触顶。对于"设计到代码"这段最耗时的翻译工作，它给出的答案是：别让模型看图猜，把数据给它。
