mcpField
P
prototype

prototype

github.com/c0nant设计与 UI355 次安装今天更新
代码仓库

关于 prototype

prototype 是用于构建临时演示的编码技能,帮助回答具体的产品或工程问题。它分别提供单文件 HTML 逻辑演示,以及在同一路由切换 UI 方案的路径。

主要功能

  1. 01选择逻辑或 UI 原型路径
  2. 02将逻辑演示构建为单个 HTML 文件
  3. 03生成可切换的 UI 方案
  4. 04默认将原型状态保留在内存中
  5. 05将验证过的决策纳入实现工作

适用场景

  1. 01通过交互式演练测试状态模型
  2. 02比较页面的视觉方向
  3. 03在实现前回答设计问题

安装

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

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

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

包含的文件

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

LOGIC.md
LOGIC.pt-BR.md
RESUMO.md
TRADUCAO.pt-BR.md
UI.md
UI.pt-BR.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,可随时清除”之类的名称命名。
  4. 省去打磨。 不写测试,除使原型 可运行 所必需的之外不做错误处理,不做抽象。目的是快速学到东西。
  5. 展示状态。 每次操作之后(逻辑分支)或每次切换变体时(UI 分支),打印或渲染所有相关的完整状态,让用户能看到发生了什么变化。
  6. 完成后将其存档。 将已验证的决策融入正式代码,然后将原型本身作为主要来源保存:提交到一个一次性分支上,脱离主分支,并在实现 issue 上留下指向该分支的上下文链接。同时将结论(判定结果及其所解决的问题)记录在 issue 或提交中。主分支仅保留已验证的决策。

评论

支持 Markdown