mcpField
P
prototype

prototype

github.com/leandrocfe设计与 UI41134 次安装11 周前更新
代码仓库

关于 prototype

用于快速验证逻辑状态模型或界面方向的原型制作 Skill,面向需要通过可运行示例回答设计问题的开发者。它根据问题选择逻辑演示或多方案 UI,并要求原型易运行、明确标记且不默认持久化。

主要功能

  1. 01按问题选择逻辑或 UI 分支
  2. 02生成单文件逻辑演示
  3. 03生成可切换的 UI 变体
  4. 04保持原型易运行且不默认持久化
  5. 05记录验证结论并保留原型出处

适用场景

  1. 01探索难以纸面推演的状态转换
  2. 02比较同一路由的多种界面方案
  3. 03在编码前验证交互或逻辑决策

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/leandrocfe/skills --skill prototype

安装后在 Claude Code 中输入/prototype确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

LOGIC.md
UI.md
agents/
openai.yaml

详细介绍

原型

原型是用于回答某个问题的一次性代码。问题决定原型的形态。

选择分支

确定要回答哪个问题——可以从用户的提示、周边代码中判断,也可以在用户在线时询问:

  • “这种逻辑/状态模型感觉对吗?” → LOGIC.md。构建一个可分享的单个 HTML 文件,包含自由操作按钮和带标签页的引导式演示,让状态机经历那些难以纸上推演的情况,并且非开发者也能操作。
  • “它应该是什么样子?” → UI.md。在单一路由上生成多个截然不同的 UI 变体,通过 URL 查询参数和浮动底栏切换。

这两个分支会生成截然不同的成果——选错会让整个原型白费。如果问题确实含糊不清,且无法联系到用户,就默认选择与周边代码更匹配的分支(后端模块 → 逻辑;页面或组件 → UI),并在原型顶部说明这一假设。

两者都适用的规则

  1. 从第一天起就是一次性的,并明确标注这一点。 将原型代码放在靠近实际使用位置的地方(放在它所针对的模块或页面旁边),让上下文一目了然——但命名时要让普通读者看出它是原型,而非生产代码。对于一次性 UI 路由,遵循项目已有的路由惯例;不要另创顶层结构。
  2. 运行起来毫不费力。 UI 原型只需在项目的任务运行器中执行一条命令即可启动——pnpm <name>、python <path>、bun <path> 等。逻辑演示是一个用户双击即可打开的 HTML 文件。无论哪种方式,启动都不需要费心。
  3. 默认不持久化。 状态保存在内存中。持久化正是原型要验证的内容,而非它应该依赖的东西。如果问题明确涉及数据库,就使用临时数据库或本地文件,并采用清晰的“PROTOTYPE — wipe me”名称。
  4. 跳过打磨。 不写测试,不做超出原型可运行所需的错误处理,也不做抽象。重点是快速学到东西。
  5. 展示状态。 每次操作后(逻辑原型)或每次切换变体时(UI 原型),打印或渲染完整的相关状态,让用户看见发生了什么变化。
  6. 完成后留档。 将任何经过验证的决定合并进实际代码,然后将原型本身作为一手资料留存:提交到一次性分支,不要放进 main,并在实现问题中留下指向该分支的上下文链接。同时也要在问题或提交中记录结论——以及它所回答的问题。main 分支只保留经过验证的决定。

评论

支持 Markdown