01 功能说明
一种从 Figma 到代码的实现工作流，结合节点上下文、截图、素材以及代码库原生复用。
Figma Implement Design 从选定的 Figma 节点出发，在用户的代码库中生成代码。它将结构化设计上下文与截图结合起来，再根据项目框架调整布局、令牌和素材。设计工具生成的 React 和实用工具类应被视为设计的一种表示形式，而不是要求替换应用程序架构的指令。
来源强调复用：应尽可能扩展现有的按钮、输入框、排版和布局基础组件。复杂画框的响应被截断时，会将其拆分为更小的节点查询。完成工作不仅仅是产出能够编译的代码，还取决于将实际实现与参考设计进行比较，并检查响应式行为、交互和素材。
预期交付成果
解析包含特定节点的链接或受支持的桌面端选区，然后同时获取结构化上下文和截图。
复用现有组件和令牌，获取提供的素材，并保留路由、状态和数据获取约定。
对照选定的设计检查布局、排版、交互状态、响应式约束和素材渲染。
02 适用场景
已连接的 Figma MCP、对选定设计和目标代码库的访问权限，以及用于视觉验证的可运行预览。
03 关键决策
结构化属性可说明尺寸和约束，而截图则能揭示原始数值可能遗漏的视觉关系。
该工作流会将设计输出转换为项目自身的约定，而不是全盘引入无关的实现风格。
04 示例任务
以下示例任务简报尚未经过测试。使用前请检查该技能的设置。
将精选技能添加到代理环境中，并单独连接 Figma。这些 Beta 版材料受 Figma 开发者条款约束。开始实现前，请确认连接能够返回选定设计的上下文。
https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-implement-design/SKILL.md已连接的 Figma MCP、对选定设计和目标代码库的访问权限，以及用于视觉验证的可运行预览。
运行该技能前，请调整这份任务简报的范围、源材料和约束。
使用 figma-implement-design 在我们现有的 Vue 项目中实现选定的设置面板。获取准确的节点上下文和截图，复用我们的表单组件和令牌变量，并使用提供的设计素材。保留当前的数据处理方式。在桌面端和移动端宽度下比较渲染后的面板，并记录所有因无障碍要求而与 Figma 画框产生的偏差。依据以下可观察的标准检查实际输出。
OpenDesign 为编码代理提供本地设计工作区。此列表并不表示该技能已捆绑提供，也不表示其中包含其外部工具、凭据和软件依赖项。
05 来源与许可证
本页面介绍下方链接所指向的固定来源修订版本。上游行为和要求可能会发生变化。
一种从 Figma 到代码的实现工作流，结合节点上下文、截图、素材以及代码库原生复用。
由 OpenDesign 根据所链接来源撰写的原创摘要。代码库 Star 数只是带日期的受欢迎程度指标，并不代表技能使用情况或质量评分。
06 开始前的问题
https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-implement-design/SKILL.md