Figma 设计实现助手
将 Figma 设计转化为可集成、可验证的高保真前端代码。
证据显示工作流限定为获取指定 Figma 节点、下载 MCP 返回的资源并写入用户代码库，也明确禁止新增图标包，具有限制依赖范围的措施；但未说明用户确认、数据流、敏感设计内容处理、外部请求边界、回滚机制或独立来源核验，因此扣 8 分。
步骤顺序、URL 解析、截断处理和常见故障处理较连贯，异常时给出 metadata 或重新检查端点的路径；但没有提交的测试、CI、输入校验细节或可诊断错误信息，静态评估受限，扣 2 分。
受众、输入、输出和与 figma-use 等相邻技能的边界说明清楚，支持 URL 或桌面选择；但项目必须可访问 Figma MCP，未说明中文交互支持，且核心依赖 figma.com/mcp.figma.com，未提供中国大陆网络可达性证据，扣 5 分。
文档包含概览、边界、前置条件、分步流程、规则、示例、最佳实践和故障排查，维护归属可由 OpenAI 仓库背景推知但未在技能内明确；许可证元数据未知，缺少版本、变更记录和明确更新责任，扣 7 分。
工作流覆盖设计上下文、截图、资产、项目规范、视觉校验和可访问性，理论上能完成核心实现；但没有文件内第三方执行证据或代表性产物验证，且“1:1/production-ready”结果依赖外部 MCP、项目现状和人工实现，按静态上限扣 1 分。
技能提供具体工具调用、参数格式、检查清单和故障路径，部分主张可由源文件审计；但没有测试套件、CI 结果、第三方执行记录或交叉证据，静态证据有限，扣 1 分。
- 核心功能依赖外部 Figma MCP 服务；源文件未证明其在中国大陆网络环境中的稳定可达性。
- 未提供明确的用户确认、设计文件数据流披露、敏感信息处理或回滚方案。
- 许可证、版本、变更记录和维护更新路径未在所给证据中明确。
- “1:1 视觉保真”和“production-ready”属于目标性表述，静态材料未验证实际产出。
它能做什么 & 适用场景
该技能用于把 Figma 文件中的组件或页面实现为用户代码仓库中的生产级应用代码。它依赖可访问的 Figma MCP 服务器，并要求用户提供包含文件键和节点 ID 的 Figma URL，或在 Figma Desktop 中选择节点。工作流涵盖设计上下文、截图和资源获取，再结合项目现有的设计系统、路由和状态管理完成实现。它适合需要高视觉还原度的前端开发，但不负责直接编辑 Figma 画布。
从 Figma URL 解析 file key 和 node ID；调用 get_design_context 获取布局、排版、颜色、设计令牌、组件结构和间距信息；调用 get_screenshot 获取视觉参照；使用 Figma MCP 返回的 localhost 图片、图标或 SVG 资源；检查并复用项目现有组件和设计令牌；在项目代码中实现组件或页面；根据截图验证布局、字体、颜色、交互状态、响应式行为、资源加载和可访问性。
- 前端开发者根据 Figma 链接实现一个按钮组件，并将其接入现有设计系统。
- 产品团队需要把 Figma 仪表盘页面转换为项目中的响应式前端页面。
- 设计系统维护者需要依据 Figma 规格扩展已有组件变体。
- 开发团队需要对照 Figma 截图检查实现中的间距、字体、颜色和资源差异。
优缺点一览
- 提供从设计读取到视觉验证的明确七步流程。
- 强调复用项目设计系统、组件和设计令牌。
- 明确处理 Figma 资源、响应式约束和可访问性。
- 覆盖组件实现和完整页面实现的具体示例。
- 必须连接并访问 Figma MCP 服务器。
- 远程 MCP 使用场景要求用户提供包含节点 ID 的 Figma URL。
- 技能本身不负责在 Figma 中创建、编辑或删除节点。
- 来源未提供测试套件、平台测试结果或单个技能的许可证信息。
如何安装
该技能位于 openai/skills 的 skills/.curated/figma-implement-design。README 记录的安装方式是：在 Codex 中运行 $skill-installer figma-implement-design，安装后重启 Codex。README 未说明单个技能的具体许可证；许可证应查看该技能目录中的 LICENSE.txt。
如何使用
提供一个格式为 https://figma.com/design/:fileKey/:fileName?node-id=1-2 的 Figma URL，例如 https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15，并说明要实现的组件或页面。技能会依次获取设计上下文、截图和资源，然后按项目约定实现并验证。使用 Figma Desktop MCP 时，也可以直接在桌面应用中选择节点而不提供 URL。