prototype-to-figma-skill
将可运行的代码原型自动转换为结构化、可评审的Figma设计文件。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：prototype-to-figma-skill。 它的用途是：将可运行的代码原型自动转换为结构化、可评审的Figma设计文件。 完整的 Skill 内容见：https://321skill.com/skills/prototype-to-figma-skill/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我把这个购物车流程的代码原型转换成Figma文件，方便设计团队评审。” AI会读取你的代码，在Figma中重建出包含‘商品列表’、‘编辑数量’、‘结算’等状态的独立画板，使用你指定的设计系统组件，并为每个按钮和状态切换添加详细的交互注解。
介绍
这个Skill解决了开发者和设计师在原型评审时面临的沟通障碍。当开发者用代码（如Claude Code）构建了一个可交互原型后，非技术背景的同事（如产品经理、设计师）难以直接理解其交互逻辑和视觉细节，导致反馈效率低下。
使用时，AI会直接读取你的代码源文件（CSS、Tailwind、React组件等），通过编程方式在Figma中重建出具有完整图层结构的页面。它会将复杂的交互流程拆解成独立的画板（Frame），并自动使用目标Figma文件中的设计系统组件进行构建，确保视觉一致性。
它非常适合需要向跨职能团队（产品、设计、市场）进行原型演示、收集异步反馈的开发者或技术产品经理。当原型需要进入正式设计流程或交付给外部客户评审时，这个Skill能快速生成专业的设计规格说明（Spec）。
与简单的截图或HTML转设计工具不同，此Skill的核心区别在于“理解与重构”。它并非生成一张扁平图片，而是通过解析代码语义，构建出包含完整组件层级、可编辑图层以及原生交互注解的Figma文件，使评审者能直接在Figma Dev Mode中查看每个可交互元素的详细信息。
核心特点
核心区别在于严格禁止使用浏览器截图或HTML转设计等“黑盒”工具，而是通过编程方式解析源代码来精准重建Figma图层和设计系统组件，并强制为每个交互状态和设计系统偏差添加原生节点注解，确保输出的是可协作、可审查的结构化设计文件，而非静态图片。
注意事项
不适合将完全静态的视觉稿或低保真线框图转换为Figma，其价值在于为已具备交互逻辑的代码原型生成可评审的设计文件。
常见问题
它能将任何网页转换成Figma吗？
不能。它专为转换由Claude Code等生成的、具备清晰代码结构的可交互原型而设计，并非通用的网页抓取工具。
输出的Figma文件能直接用于开发吗？
可以。它生成的是包含完整图层、使用设计系统组件的结构化文件，并标注了交互细节，非常适合作为设计和开发交接的参考。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/prototype-to-figma-skill/raw/index.md 读取 prototype-to-figma-skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/prototype-to-figma-skill/raw/index.md（查看排版版本）