用Claude Code制作UI原型，prototype技能使用指南
機械翻訳 / Machine-translated
機械翻訳 / Machine-translated
原文链接：用Claude Code制作UI原型，prototype技能使用指南（cccskills）
技能页面：prototype
本文结论
prototype是一个让Claude Code等AI代理生成可交互、用后即弃的原型的技能。
适合希望在实现前确认页面方案或处理流程的开发者和设计师。
文章前半部分介绍原型的形态与安装方法，后半部分介绍需求描述示例及使用注意事项。
发送一条需求描述，即可收到可交互的原型。
例如，当你想确认处理流程时，需求描述如下：
我在考虑订单状态按"草稿→待确认→已确定→已取消"流转的处理逻辑。
请用可操作的HTML帮我验证这种状态管理方式是否合理。
AI代理生成的是一个双击即可打开的单页HTML文件。
页面上并排显示可自由点击的操作按钮，以及可通过标签页切换的分步说明。
分步说明的作用是引导用户推进到那些仅看纸质文档容易忽略的边界情况。
每次点击按钮，页面都会展示所有相关状态。
一眼即可看出按下什么、改变了什么，即使是非工程师也能独立操作。
如果需求描述意图不明确，原型开头会注明AI对需求的理解方式。
若需求涉及页面视觉设计，生成的内容形式会有所不同。
同一页面中会生成多个方向差异较大的UI方案，可通过URL参数或页面底部悬浮栏进行切换。
每次切换方案时也会显示状态，便于同时对比视觉与逻辑。
prototype是一个生成用后即弃代码、用于解答设计疑问的技能。
根据验证内容的不同，生成物分为两类。
| 验证内容 | 生成物 | 操作方式 |
|---|---|---|
| 处理逻辑或状态管理方式是否自然 | 可共享的单页HTML文件 | 可自由点击的按钮 + 可通过标签页切换的分步说明 |
| 页面的视觉呈现方式 | 同一页面中多个方向差异较大的UI方案 | 通过URL参数或页面底部悬浮栏切换 |
生成哪类原型由需求描述和周边代码决定。
如果用户在场，AI代理会进行确认。
无法确认时，默认规则为：后端模块生成处理原型，页面或组件生成视觉原型。
原型文件会放置在待验证模块或页面的紧邻位置，并使用一眼能辨认出是原型的命名规则。
视觉原型遵循项目现有的路由规则（URL与页面的对应关系），不引入新的目录结构。
视觉原型通过项目的任务运行器用一条命令启动，形如pnpm <name>或bun <path>。
处理原型是HTML文件，双击即可打开运行。
验证所得的判断反映到生产代码中，原型本身保留在原型专用分支。
原型不合并到主分支，在实现任务（issue）中记录对应分支的引用。
验证了什么、得出怎样的结论也会记录在任务或提交中，方便日后追溯决策依据。
使用以下命令进行安装。
执行时可选择安装到Claude Code或Codex等目标代理。
npx skills add https://github.com/mattpocock/skills --skill prototype
如需委托代理安装，请直接发送以下内容，代理会负责从内容确认到文件部署的全部流程。
次の Agent Skill をインストールしてください。
https://github.com/mattpocock/skills/tree/main/skills/engineering/prototype
まず SKILL.md と付属ファイルの中身を確認し、不審な処理（外部への送信、認証情報の読み取りなど）がないことを確かめてから、Claude Code なら ~/.claude/skills/prototype/、Codex なら ~/.agents/skills/prototype/ に配置してください。
安装位置根据是否所有项目都使用还是仅特定项目使用来选择。
| 代理 | 所有项目均使用 | 仅特定项目使用 |
|---|---|---|
| Claude Code | ~/.claude/skills/prototype/ | 项目内的 .claude/skills/prototype/ |
| Codex | ~/.agents/skills/prototype/ | 项目内的 .agents/skills/prototype/ |
prototype是GitHub仓库mattpocock/skills中的技能之一。
原文为英文，可从发布页面查阅SKILL.md。
会员注册流程中，我想确认在邮件验证前更改套餐时的状态情况。
请用可操作的HTML原型来验证状态管理方式。
返回的是一个带有自由操作按钮和分步说明的HTML文件。
按照分步说明操作，可以将状态推进到难以判断的边界情况。
每次操作后都会显示完整状态，便于快速发现意外变化。
我在考虑设置页面的视觉设计，拿不定主意。
请生成几个方向差异较大的方案，并支持切换对比。
项目中会生成一个包含多个UI方案的原型页面。
可通过页面底部悬浮栏或URL参数切换方案，当场对比差异。
启动只需项目任务运行器的一条命令。
我想让产品策划操作退货受理的状态流转，听取他们的意见。
请制作一个用浏览器直接打开就能试用的HTML。
处理原型是单页HTML文件，将文件交给对方，双击即可打开。
每次操作都会显示状态，不懂代码的人也能追踪变化。
意见汇总并得出结论后，还可以请AI代理将该判断记录到任务或提交中。
原型是用后即弃的，需与生产代码分开处理。
不编写测试，错误处理也仅保留运行所必需的部分。
同样不做抽象化处理，因此不适合将原型代码直接移植到生产环境使用。
数据原则上保存在内存中，因为存储机制本身可能是验证对象。
仅当数据库是讨论焦点时，才会使用一次性数据库，或使用带有"PROTOTYPE, wipe me"等可明确识别为临时文件的本地文件名。
原型保存在主分支以外的原型专用分支。
由于前提是使用Git分支和实现任务（issue）进行记录，请提前确认是否符合团队工作流程。
许可证为MIT。
安装前请阅读SKILL.md及三个附属文件，确认不存在向外部发送数据或读取认证信息等可疑操作。
同一mattpocock/skills仓库中，还有可与prototype配合使用的前后续技能。
domain-modeling是一个通过具体示例与代码的对照来明确业务术语和概念边界的技能。
当状态的名称或含义尚不明确时，可在原型制作前用它统一术语。
重要设计决策的理由也可根据需要留存记录。
codebase-design的作用是辅助模块设计，使调用方需要记住的API保持精简。
适合在通过原型确定状态管理方式后，探讨如何组织生产模块的阶段使用。
ask-matt是一个顾问角色技能，负责根据情境推荐相关技能及使用顺序。
当你不确定如何从原型推进到实现时，可以从这里开始。
prototype生成的是实际可运行的代码。
处理原型可通过按钮操作状态，视觉原型可在现有项目中切换多个方案。
区别在于不仅能确认外观，还能验证操作后的状态。
不能。
原型是作为省略测试和精修的用后即弃代码来生成的。
只将验证所得的判断反映到生产代码中，原型本身保留在原型专用分支。
不一定需要，系统会根据需求描述和周边代码自动判断。
无法判断时，AI代理会进行确认。
无法确认而直接生成时，原型开头会注明对需求的理解方式。
prototype是一个适合希望在实现前确认页面方案或状态变化的人使用的技能。
处理原型会生成可交互的单页HTML，视觉原型会生成支持多方案切换的页面。
原型以用后即弃的方式处理，验证所得的判断与结论以可供日后查阅的形式留存。
安装前请阅读SKILL.md，并从cccskills页面获取。
本文转载自 cccskills 的文章「用Claude Code制作UI原型，prototype技能使用指南」。
技能详情与安装方法请参阅 cccskills的prototype页面。