Figma实现设计 figma-implement-design
编辑点评
把 Figma 设计稿转成可用的生产代码。设计与开发之间那一大段手工翻译，它能吃掉相当一部分，复杂交互仍需人工接管。
适用场景与注意事项
设计师出稿、开发落地之间的「翻译」环节最耗时，这个技能吃的就是这一段。适合设计稿规范、组件化的项目。设计稿本身混乱时，转出来的代码也不会好。
一、功能概述
【Figma实现设计】Translate Figma designs into production-。该技能让 AI 在「前端开发」领域具备专项能力，适合希望通过自然语言快速完成相关任务的用户。
二、功能介绍
- Figma实现设计（figma-implement-design）的核心能力：【Figma实现设计】Translate Figma designs into production-。
- 由 Figma 提供，来源 VoltAgent，归类于「前端开发」分类。
- 「Figma实现设计」可编写与重构 UI 组件，遵循现代前端最佳实践。
- 「Figma实现设计」可将设计稿（如 Figma）转化为生产就绪代码。
三、使用方式
- 第 1 步：在支持 Skill 的 AI 客户端（如 Claude、CodeBuddy）中安装「Figma实现设计」技能
- 第 2 步：用自然语言描述你的需求，例如：用 React + Tailwind 写一个带搜索和分页的用户列表页（由「Figma实现设计」负责执行）
- 第 3 步：AI 会自动调用该技能完成任务，并在对话中交付结果
- 第 4 步：需要修改时，直接告诉 AI 调整点，无需从头再来
四、来源信息
| 来源仓库 | https://github.com/figma/skills |
| 提供方 | Figma（官方技能） |
| 开源许可 | 详见来源仓库，多为 Apache 2.0 / MIT 等开源许可 |