Framelink Figma MCP
让 AI 编程助手直接读取 Figma 设计数据，实现一站式设计到代码转换。
证据显示：README 要求用户提供 Figma API key，并建议使用环境变量；SECURITY.md 建议限制服务器权限。但未发现用户确认机制（如工具调用前确认），数据流透明度有限（未说明数据如何被处理或发送到何处），敏感数据处理仅建议使用环境变量，未提供加密或最小化措施。依赖安全方面，有 CI 和依赖更新建议，但未提供依赖审计或漏洞扫描证据。外部影响方面，服务器会调用 Figma API 和可能发送遥测（posthog-node），但未明确说明。回滚机制未提及。来源归属方面，有明确的作者和仓库，但发布者未验证。扣分原因：缺少用户确认、数据流透明度不足、敏感数据处理不充分、依赖安全证据不足、外部影响不明确、无回滚机制。
证据显示：有测试覆盖配置解析和样式键解析，CI 包含 lint、type-check、test，表明一定的一致性。依赖可用性方面，依赖列表完整，但未提供锁定文件或依赖可用性保证。失败消息方面，未发现明确的错误处理或用户友好的失败消息。扣分原因：依赖可用性未验证，失败消息未体现。
证据显示：README 明确目标用户是 Cursor 用户，场景是让 AI 编码代理访问 Figma 数据。能力边界方面，README 说明服务器会简化 Figma API 响应，但未详细列出支持的工具或限制。触发精度方面，用户需粘贴 Figma 链接，但未说明如何解析或触发。环境适配方面，支持 MacOS/Linux/Windows，并提供了配置示例。扣分原因：能力边界和触发精度描述不足。
证据显示：README 结构清晰，包含快速开始、配置示例、演示视频。安装说明详细，支持 npx 和 env 变量。命名方面，包名和 MCP 名称稳定，但版本号未在 README 中体现。示例和 FAQ 较少，仅有快速开始。已知限制未明确列出。许可证为 MIT，清晰。版本化方面，有 release-please 工作流，但未提供 CHANGELOG。维护责任方面，有 SECURITY.md 和 CI，但未明确维护者。扣分原因：示例和 FAQ 不足，已知限制未列出，版本化信息不完整。
证据显示：输出可用性方面，服务器简化 Figma 数据以提供相关布局和样式信息，有助于提高 AI 准确性。边际价值方面，相比截图，提供设计数据能更准确地实现设计。成本效益方面，需要用户提供 API key，但未提供性能或成本数据。扣分原因：成本效益缺乏数据支持。
证据显示：README 声称能提高准确性，但未提供基准测试或用户研究。跨来源验证方面，有演示视频和文档链接，但未提供独立验证。事实与推断分离方面，README 中的声明多为断言，未区分事实和推断。扣分原因：声明缺乏证据支持，事实与推断未分离。
- 该服务器需要 Figma API key，请确保妥善保管，避免泄露。
- 服务器可能发送遥测数据（posthog-node），请审查其隐私政策。
- 发布者未验证，请谨慎使用。
- 未提供回滚机制，升级前请备份配置。
这个 Agent 能做什么，适合哪些场景？
Framelink Figma MCP 是一个基于 Model Context Protocol (MCP) 的服务器，专门为 Cursor 等 AI 编程工具提供 Figma 文件的结构化布局数据。它通过命令行工具 figma-developer-mcp 运行，需要用户提供 Figma API 密钥并进行配置。该服务器会调用 Figma API 获取文件元数据，进行简化和翻译，仅向模型提供最相关的布局和样式信息，从而提高 AI 生成代码的准确性和相关性。它支持跨平台（macOS、Linux、Windows）运行，并可通过 npx 直接启动。项目采用 MIT 许可证，源代码托管在 GitHub 上。
该服务器首先监听用户的配置指令，当 Cursor 等客户端发送包含 Figma 链接的请求时，它会调用 Figma API 获取文件、帧或组件的元数据。然后，它会对响应进行简化和翻译，过滤掉无关信息，只保留关键的布局和样式数据（如尺寸、位置、颜色、字体等）。这些简化后的数据会以文本形式返回给 AI 模型，作为生成代码的上下文。整个流程通过标准输入输出（stdio）通信，部署时通过 npx 命令启动，需要设置 --figma-api-key 参数或环境变量 FIGMA_API_KEY。
- 前端开发者在 Cursor 中打开 Figma 设计链接，要求 AI 实现该设计，AI 能准确生成对应框架的组件代码。
- 产品设计师在开发会议中，快速将设计稿转换为可运行的 React 或 Vue 原型，无需手动标注。
- 技术团队在迭代 UI 时，希望 AI 生成的代码与设计稿的间距、颜色等细节完全一致，减少手动调整。
- 独立开发者使用 Cursor 进行全栈开发，希望将 Figma 中的设计元素直接嵌入到现有代码库中。
- 设计系统维护者需要将设计规范的变更同步到前端代码，使用 AI 助手辅助更新样式。
这个 Agent 有哪些优点和局限？
- 直接从 Figma 获取布局数据，比截图更准确，AI 生成代码的保真度高。
- 通过 MCP 标准协议，与 Cursor 等工具无缝集成，配置简单。
- 轻量级，通过 npx 即可运行，无需额外服务。
- 开源且采用 MIT 许可证，可自由修改和商用。
- 依赖 Figma API 和个人访问令牌，必须指定 Figma 作为设计源。
- 主要面向 Cursor 等特定 AI 编程工具，对其他平台支持有限。
- 运行时需要网络连接，且要求 Node.js 环境。
- 数据经过简化处理，可能丢失某些高级设计细节，如复杂的动画或交互。
如何安装或部署这个 Agent？
- 确保安装了 Node.js 和 npm（npx 可用）。
- 在 Figma 中创建个人访问令牌：登录 Figma，进入设置 → 安全 → 生成访问令牌，并复制。
- 在代码编辑器的 MCP 配置文件中添加以下配置：
macOS/Linux:
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
Windows:
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "cmd",
"args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
如何使用这个 Agent？
- 将上述配置保存到编辑器的 MCP 配置文件中（例如 Cursor 的 .cursor/mcp.json）。
- 重启编辑器，确保 MCP 服务器成功启动。
- 在编辑器的聊天界面中，粘贴 Figma 文件的分享链接（可以是文件、帧或组件的链接）。
- 输入要求，如“实现这个设计”，AI 将自动获取 Figma 数据并生成代码。
- 也可以设置环境变量 FIGMA_API_KEY 和 PORT 代替命令行参数。
这个 Agent 与同类方案有什么区别？
目前没有在源代码中提及其他替代方案。