name: figma description: 使用 Figma MCP 服务器从 Figma 获取设计上下文、截图、变量和资产，并将 Figma 节点翻译成生产代码。当任务涉及 Figma URL、节点 ID、设计到代码实现或 Figma MCP 设置和故障排除时触发。 metadata: author: github.com/openai/skills version: ‘1.0.0’
Figma MCP
使用 Figma MCP 服务器进行 Figma 驱动的实现。有关设置和调试详情（环境变量、配置、验证），请参阅 references/figma-mcp-config.md。
Figma MCP 集成规则
这些规则定义了如何将 Figma 输入翻译成此项目的代码，并且必须为每个 Figma 驱动的更改遵循。
必需流程（不要跳过）
- 首先运行 get_design_context 以获取确切节点的结构化表示。
- 如果响应太大或被截断，运行 get_metadata 以获取高层节点映射，然后仅用 get_design_context 重新获取所需的节点。
- 运行 get_screenshot 以获取正在实现的节点变体的视觉参考。
- 只有在同时拥有 get_design_context 和 get_screenshot 后，下载任何所需的资产并开始实现。
- 将输出（通常是 React + Tailwind）翻译成此项目的约定、样式和框架。尽可能重用项目的颜色令牌、组件和排版。
- 在标记完成之前，针对 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— 工具目录和用于选择框架/组件以及获取元数据的提示模式。