⚡

FigmaMCP集成Skill figma

Figma MCP 是一个技能，用于通过 Figma MCP 服务器将 Figma 设计自动化转换为生产代码。它允许用户根据 Figma URL 或节点 ID 获取设计上下文、截图和资产，然后按照项目规范（如 React 和 Tailwind）实现代码，确保视觉和行为与设计一致。关键词：Figma, MCP, 设计到代码, 前端开发, React, Tailwind, 自动化集成。

前端开发 0 次安装 0 次浏览 更新于 3/21/2026

name: figma description: 使用 Figma MCP 服务器从 Figma 获取设计上下文、截图、变量和资产，并将 Figma 节点转换为生产代码。当任务涉及 Figma URL、节点 ID、设计到代码实现，或 Figma MCP 设置和故障排除时触发。 author: openai

Figma MCP

使用 Figma MCP 服务器进行 Figma 驱动的实现。有关设置和调试详情（环境变量、配置、验证），请参阅 references/figma-mcp-config.md。

Figma MCP 集成规则

这些规则定义了如何将 Figma 输入转换为项目代码，必须为每个 Figma 驱动的更改遵循。

必需流程（请勿跳过）

  1. 首先运行 get_design_context 以获取确切节点(s)的结构化表示。
  2. 如果响应太大或截断，运行 get_metadata 以获取高层节点映射，然后仅用 get_design_context 重新获取所需的节点(s)。
  3. 运行 get_screenshot 以获取正在实现的节点变体的视觉参考。
  4. 只有在同时拥有 get_design_context 和 get_screenshot 后，下载任何所需的资产并开始实现。
  5. 将输出（通常是 React + Tailwind）转换为本项目的约定、样式和框架。尽可能重用项目的颜色令牌、组件和排版。
  6. 在标记为完成之前，对照 Figma 验证外观和行为的 1:1 匹配。

实现规则

  • 将 Figma MCP 输出（React + Tailwind）视为设计和行为的表示，而非最终代码样式。
  • 在适用时，用项目偏好的实用程序/设计系统令牌替换 Tailwind 实用类。
  • 重用现有组件（例如按钮、输入框、排版、图标包装器），而不是重复功能。
  • 一致地使用项目的颜色系统、排版比例和间距令牌。
  • 尊重仓库中已采用的现有路由、状态管理和数据获取模式。
  • 努力实现与 Figma 设计的 1:1 视觉对等。当冲突出现时，优先使用设计系统令牌，并最小化调整间距或大小以匹配视觉效果。
  • 对照 Figma 截图验证最终 UI 的外观和行为。

资产处理

  • Figma MCP 服务器提供一个资产端点，可以服务图像和 SVG 资产。
  • 重要：如果 Figma MCP 服务器返回一个用于图像或 SVG 的本地主机来源，请直接使用该图像或 SVG 来源。
  • 重要：不要导入/添加新的图标包，所有资产应在 Figma 有效负载中。
  • 重要：如果提供本地主机来源，请勿使用或创建占位符。

基于链接的提示

  • 服务器是基于链接的：复制 Figma 框架/图层链接，并在请求实现帮助时将该 URL 提供给 MCP 客户端。
  • 客户端无法浏览 URL，而是从链接中提取节点 ID；始终确保链接指向您想要的确切节点/变体。

参考资料

  • references/figma-mcp-config.md — 设置、验证、故障排除和基于链接的使用提醒。
  • references/figma-tools-and-prompts.md — 工具目录和选择框架/组件及获取元数据的提示模式。