Figma 设计转代码助手
从 Figma 获取设计上下文并将节点实现为生产代码。
技能明确要求先获取设计上下文和截图，并限制复用现有组件、禁止额外图标包，体现了一定范围控制；但依赖带 bearer token 的远程 Figma MCP，未充分说明数据流、权限范围、敏感设计数据处理、撤销/回滚机制，并建议用 echo 打印 token，存在凭据暴露风险，因此扣分。
主流程 get_design_context→必要时 get_metadata→get_screenshot→下载资源→实现→校验，步骤相对一致，且包含截断、超时和 OAuth 故障提示；但未提供测试套件、CI、可复现输出或针对无效链接、权限失败、资源失效的完整诊断路径，静态评估按上限保守给分。
触发条件、目标用户场景和主要工具较清楚，覆盖设计转代码、变量、截图及配置排障；但未明确不适用边界、输入输出契约和中文使用说明，核心能力依赖海外 Figma MCP，可能受中国大陆网络、账户和区域配置影响，故扣分。
目录结构、主文档、配置参考和工具提示参考较清晰，包含安装配置、超时和故障排查说明；但所给材料未提供该技能的 LICENSE、版本策略、变更日志、维护责任人或更新路径，示例也较少，故扣分。
若 MCP 可用且提供正确 Figma 节点链接，规定的上下文、截图、资产和设计系统复用流程有望支持设计到生产代码，并减少手工还原工作；但材料没有代表性产出、实际验证或与替代方案的比较，最终仍需项目级实现和视觉校验，按静态上限给分。
主技能文件、配置文件和工具参考对关键流程有可审计文字证据，能够核对工具名称和配置要求；但没有提交测试、CI 结果、第三方执行证据或独立复现记录，因此只能给有限静态可验证性。
- 不要按文档建议用 echo 打印 FIGMA_OAUTH_TOKEN；应避免将凭据写入终端日志，并明确最小权限、撤销和轮换流程。
- 核心功能依赖远程 Figma MCP、OAuth 和区域网络配置；在中国大陆网络或无 Figma 访问权限的环境中可能无法使用。
- 实施前应确认 Figma 文件和设计数据的组织权限、数据处理边界，以及失败时的人工回退和代码回滚方案。
它能做什么 & 适用场景
该技能用于配合 Figma MCP 服务器完成 Figma 驱动的实现工作。它可以获取指定节点的结构化设计上下文、截图、变量和资源，并将节点转换为生产代码。推荐流程要求先获取设计上下文，再获取截图，之后下载资源并开始实现，最后与 Figma 对照验证。它适合需要从 Figma 设计稿进行前端实现的团队，但依赖已配置的 Figma MCP 服务器。
接收 Figma URL 或节点 ID；调用 Figma MCP 获取精确节点的结构化上下文；在响应过大时先获取元数据并重新请求所需节点；获取节点截图；下载所需图像或 SVG 资源；将通常为 React 与 Tailwind 的输出转换为项目现有框架、组件、样式和数据模式；根据 Figma 截图验证最终界面。
- 前端开发者拿到 Figma 页面或组件链接，需要实现对应的生产界面。
- 设计系统团队需要将 Figma 节点映射到现有颜色、排版、间距和组件令牌。
- 工程师需要根据指定 Figma 变体获取视觉参考和资源后进行 UI 开发。
- 团队需要排查 Figma MCP 的环境变量、配置或验证问题。
优缺点一览
- 规定了从设计上下文、截图到资源下载和验证的完整实现流程。
- 强调复用项目现有组件、颜色、排版和间距令牌。
- 明确支持 Figma URL、节点 ID、截图、变量和设计资源。
- 依赖 Figma MCP 服务器，材料未提供完整配置、环境变量或故障排查步骤。
- 材料没有说明支持的具体前端框架、测试套件或验证自动化方式。
- 所属 openai/skills 仓库已被 README 标记为弃用。
如何安装
该技能位于 openai/skills 的 skills/.curated/figma/。在 Codex 中使用：$skill-installer figma。安装后重启 Codex 以加载新技能。README 同时说明该仓库已弃用，当前 Codex 技能和插件示例应参考 OpenAI Plugins 仓库；本技能的具体配置步骤未在给定材料中展开。
如何使用
提供指向确切 Figma 节点或变体的链接，或提供节点 ID，并提出实现请求，例如：“使用 Figma MCP 实现这个 Figma 节点，并遵循项目现有组件和设计令牌。”执行时先获取 get_design_context，再获取 get_screenshot；只有两者都完成后才下载资源并开始实现，最后进行 Figma 对照验证。
对比同类
README 将 OpenAI Plugins 仓库列为当前 Codex 技能和插件示例的参考来源，但给定材料没有提供两者在 Figma 实现能力上的直接比较。