关于 prototype
用于快速验证逻辑状态模型或界面方向的原型制作 Skill,面向需要通过可运行示例回答设计问题的开发者。它根据问题选择逻辑演示或多方案 UI,并要求原型易运行、明确标记且不默认持久化。
主要功能
- 01按问题选择逻辑或 UI 分支
- 02生成单文件逻辑演示
- 03生成可切换的 UI 变体
- 04保持原型易运行且不默认持久化
- 05记录验证结论并保留原型出处
适用场景
- 01探索难以纸面推演的状态转换
- 02比较同一路由的多种界面方案
- 03在编码前验证交互或逻辑决策
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ leandrocfe/ 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 — wipe me”名称。
- 跳过打磨。 不写测试,不做超出原型可运行所需的错误处理,也不做抽象。重点是快速学到东西。
- 展示状态。 每次操作后(逻辑原型)或每次切换变体时(UI 原型),打印或渲染完整的相关状态,让用户看见发生了什么变化。
- 完成后留档。 将任何经过验证的决定合并进实际代码,然后将原型本身作为一手资料留存:提交到一次性分支,不要放进 main,并在实现问题中留下指向该分支的上下文链接。同时也要在问题或提交中记录结论——以及它所回答的问题。main 分支只保留经过验证的决定。
评论
支持 Markdown