关于 prototype
prototype 是一个用于快速回答设计问题的 skill,生成用后即弃的原型代码。它根据问题类型分为两个分支:逻辑与状态模型使用单个 HTML 文件,界面方案则生成多个可切换的 UI 变体,适合设计阶段的团队与开发者。
主要功能
- 01区分逻辑验证与界面探索两个分支
- 02逻辑原型为可双击运行的单个 HTML 文件
- 03界面原型提供多个可通过 URL 参数切换的变体
- 04每次操作后展示完整状态
- 05原型明确标记为一次性代码,不做持久化
适用场景
- 01验证复杂的状态机逻辑是否合理
- 02对比同一页面的多种界面方案
- 03在正式实现前快速回答设计问题
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ mattpocock/ skills --skill prototype安装后在 Claude Code 中输入/prototype确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
LOGIC.mdUI.mdagents/openai.yaml详细介绍
原型
原型是用于回答某个问题的一次性代码。问题决定了它的形态。
选择分支
根据用户的提示词、周边代码,或在用户在场时直接询问,确定正在回答的是哪个问题:
- “这个逻辑 / 状态模型是否合理?” → LOGIC.md。构建一个可分享的单个 HTML 文件(包含自由操作按钮和分页式引导演示),让非开发者也能操作,推动状态机经过那些难以在纸上推演的情况。
- “这应该是什么样子?” → UI.md。在单个路由上生成多个截然不同的 UI 变体,可通过 URL 搜索参数和浮动底部栏切换。
两个分支产出的成果截然不同,选错会浪费整个原型。如果问题确实有歧义且无法联系到用户,则默认选择与周边代码更匹配的分支(后端模块对应逻辑分支;页面或组件对应 UI 分支),并在原型顶部说明该假设。
两条分支共同遵循的规则
- 从第一天起即为一次性代码,并明确标注。 将原型代码放在实际使用位置附近(紧挨着它所原型化的模块或页面),以便上下文一目了然,但命名上要让普通读者一眼看出这是原型而非正式代码。对于一次性 UI 路由,遵循项目已有的路由约定;不要自创新的顶层结构。
- 运行极其简单。 UI 原型应可通过项目任务运行器中的一条命令启动:
pnpm <name>、python <path>、bun <path>等。逻辑演示则是一个用户双击即可打开的 HTML 文件。无论哪种方式,启动都无需任何思考。 - 默认不做持久化。 状态保存在内存中。持久化是原型要 检验 的对象,而不是它应当依赖的东西。如果问题明确涉及数据库,则使用测试用的临时数据库或本地文件,并以清晰的“PROTOTYPE,可随时清除”之类的名称命名。
- 省去打磨。 不写测试,除使原型 可运行 所必需的之外不做错误处理,不做抽象。目的是快速学到东西。
- 展示状态。 每次操作之后(逻辑分支)或每次切换变体时(UI 分支),打印或渲染所有相关的完整状态,让用户能看到发生了什么变化。
- 完成后将其存档。 将已验证的决策融入正式代码,然后将原型本身作为主要来源保存:提交到一个一次性分支上,脱离主分支,并在实现 issue 上留下指向该分支的上下文链接。同时将结论(判定结果及其所解决的问题)记录在 issue 或提交中。主分支仅保留已验证的决策。
评论
支持 Markdown