1. 基本信息
| 项目 | 内容 |
|---|---|
| 名称 | Prototype_To_Figma_Skill |
| 作者/维护者 | Amy Lima（GitHub: alima-max） |
| 来源链接 | https://github.com/alima-max/prototype-to-figma-skill |
| 许可证 | MIT（来源：仓库 LICENSE 文件，GitHub API 交叉确认） |
| GitHub Stars | 133（GitHub API 数据） |
| Forks | 14（GitHub API 数据） |
| 最新版本 | 无正式版本号，通过 Git 提交持续迭代，最近一次提交为 2026-07-21 |
| 安装方式 | Claude Code：git clone 到 .claude/skills/；Claude.ai 团队版：上传 zip；其他支持 Agent Skills 格式的客户端：复制 SKILL.md/figma-patterns.md 到对应目录 |
2. 功能介绍与亮点
Prototype → Figma 把用 Claude Code 搭建的可运行原型，转换成结构化的 Figma 设计文件，让产品经理、设计师、工程师等跨职能同事无需运行代码即可异步评审。
- 像素级还原：直接读取源码中的 CSS、Tailwind、内联样式与组件层级，而非截图导入——技能明确禁止调用浏览器截屏或 HTML 转设计类工具
- 设计系统优先：先做一遍完整的组件发现，凡目标 Figma 文件已链接库中存在匹配组件（哪怕缺少某个变体），一律实例化该组件并做实例级覆盖，只有确无匹配时才退回基础图形绘制，并标注“设计漂移”提示
- 禁止污染设计系统：明确禁止调用
createComponent()/createComponentSet()，避免生成的新组件混入团队真实设计系统 - 原生 Figma 标注：把交互触发点、状态跳转、设计漂移等信息作为 Dev Mode 原生标注挂在对应图层上，而非另建浮动文字框，标注数量控制在每帧 2–4 条，避免评审者被信息淹没
- 一键起步：不提供 Figma 文件链接时会自动创建新文件；3 个以上流程时会先列出流程清单征询评审范围，避免逐帧确认
3. 适用场景
所属分类：前端与设计。
适合工程师或设计师在 Claude Code 中完成一个可交互原型后，需要生成带设计系统组件与交互标注的 Figma 文件，供团队异步评审时使用；也适合作为把“能跑起来的原型”转成产品经理、设计师能看懂的设计规格文档的场景，无需评审者搭建原型运行环境。
4. 跨 Agent 兼容性
- Claude Code：✅ 原生支持——README 直接给出
git clone到.claude/skills/的安装命令，兼容表中列为 Inspect/Write/Code Connect 三项全支持。 - Codex：✅ 官方兼容——同一张兼容表中与 Claude Code 并列，同为 Inspect/Write/Code Connect 全支持。
- OpenClaw：❓ 未验证——README 与 SKILL.md 中的客户端兼容表未提及 OpenClaw。
- Hermes Agent：❓ 未验证——已查阅材料均未提及 Hermes Agent。
5. 推荐理由
把可运行原型自动转成带设计系统组件和交互标注的 Figma 文件，让非技术同事异步评审
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 4 | GitHub 133 颗星、14 次 fork，作者为个人开发者，暂无官方机构背书或知名开发者公开推荐的证据 |
| 可用性 | 8 | 仓库仅 SKILL.md + figma-patterns.md 两个文件，安装等同于 git clone 或上传 zip；但功能依赖宿主环境已连接的 Figma MCP 工具，需要额外配置；文档详尽（含客户端兼容分级表、自定义指南），最近一次提交为 2026-07-21，持续活跃维护 |
| 安全性 | 9 | 见下方检查清单 |
安全检查清单：
| 检查项 | 结果 |
|---|---|
| ① Shell 命令及权限范围 | 无——技能本身不含任何可执行脚本，全部功能通过已连接的 Figma MCP 工具调用完成 |
| ② 运行时联网外发数据 | 仅通过用户已授权的 Figma MCP 连接写入指定 Figma 文件，用途与技能功能完全一致 |
| ③ API key/凭据存储 | 技能本身不索取或存储任何凭据，认证由宿主环境的 Figma MCP 连接单独处理 |
| ④ 可疑指令 | 通读 SKILL.md 全文（约 3300 词）及 figma-patterns.md 参考文档，内容均为设计生成规则与 Figma Plugin API 代码片段，未见隐蔽指令或异常代码 |
| ⑤ 作者/组织信誉 | 个人开发者，提交记录连续，对外部用户反馈响应及时（如许可证缺失问题在数日内补齐 LICENSE 文件），未见刷星或误导性宣传措辞 |
| ⑥ License 是否明确 | MIT，LICENSE 文件明确存在 |
| ⑦ 最近维护时间 | 最近一次提交 2026-07-21，持续活跃 |
综合评分（三项均值）：7.0
7. 跟同类 Skills 相比的优势
Figma 相关的 Claude 技能已有若干条不同分工路线，可与本技能对照理解定位：
| 竞品 | 定位 | 与本技能的差异 |
|---|---|---|
| uxKero/anydesign | 反向工程：分析已有图片、网站或 Figma 文件，生成含 Token 体系、组件清单的 design.md |
方向相反——anydesign 是“从设计产出规格”，本技能是“从代码原型产出设计文件” |
| senlindesign/claude2figma | 编码阶段的约束层，让 AI 在生成代码时始终绑定已有设计系统组件与 Token | 作用于编码过程本身，而非编码完成后的评审交付物 |
| murphytrueman/design-system-ops | 面向设计系统维护本身的一组技能（如组件级无障碍检查） | 服务对象是设计系统维护者，而非某一次原型的评审需求 |
| referodesign/refero_skill | 研究先行的设计生成，依托 15 万+ 真实 App 界面截图库辅助设计决策 | 定位在“设计前调研参考”，不涉及把已有原型转为可评审文件 |
本技能的差异化在于：起点是一个已经能跑的 Claude Code 原型，终点是一份可被非技术同事直接浏览、评论、理解的 Figma 交付物，且强约束“必须复用设计系统组件、不得新建组件”，避免原型评审产物污染团队真实设计系统。
8. 用户评价
该技能目前尚无第三方平台的具名评价文章，但仓库 Issue 区有多位独立开发者的真实使用反馈：GitHub 用户 leslie-tikker（2026-04-29）与 Psychedelica82（2026-05-12）先后指出仓库许可证缺失问题，作者随后正式补齐 LICENSE 文件；GitHub 用户 GiacomoPatella（2026-06-22）反馈实际生成结果“大量使用基础图形而非设计系统组件”，该问题在后续提交中被修复为“优先复用设计系统组件实例”的强制规则；GitHub 用户 Big-Chair 于 2026-07-19 提交了一个修复设计变量绑定命名空间错误的 Pull Request，已被合并。
9. 其他补充
仓库版本迭代密集但均通过 Git 提交记录呈现，未采用正式的版本号或 Release 标签；更新方式为 git pull 或重新下载覆盖，无需重新授权。
10. 安装使用方式
- Claude Code：
git clone https://github.com/alima-max/prototype-to-figma-skill.git ~/.claude/skills/prototype-to-figma（项目级安装则克隆到项目下的.claude/skills/） - Claude.ai 团队/企业版：从仓库 Releases 页下载 zip（或将仓库根目录打包为 zip），在设置中的 Customize → Skills 上传，可通过技能分享功能共享给团队
- Codex 及其他兼容 Agent Skills 格式的客户端：将
SKILL.md与figma-patterns.md复制到客户端的技能/上下文目录 - 前提条件：需要宿主环境已连接 Figma MCP 工具；若未提供目标 Figma 文件链接，技能会自动创建新文件
- 安装后无需重启，直接用自然语言描述需求（如“把这个原型放进 Figma 供团队评审”）即可触发
11. 注意事项
- 依赖宿主环境的 Figma MCP 连接，若客户端仅支持 Inspect 类工具（如 Android Studio、Gemini CLI、Kiro、Amazon Q、Openhands），技能会退化为输出 Markdown 格式的“原型规格文档”而非直接在 Figma 中建文件
- 生成质量依赖目标 Figma 文件已链接的设计系统库是否完整；库中缺失的组件会被标注为“设计漂移”并用基础图形代替，仍需人工复核
- 尚未在 OpenClaw、Hermes Agent 上验证兼容性
- 仓库无正式版本号/Release 机制，更新需自行
git pull或重新下载覆盖安装