mcpField
P
prototype

prototype

github.com/devcxlDevelopment52079 installsUpdated today
Repository

About prototype

prototype is a skill for writing disposable code to answer design questions, producing either a logic demo or UI variants. It emphasizes easy startup, temporary state, and preserving validated conclusions without carrying unverified work into the main branch.

Key features

  1. 01Choose a logic or UI prototype based on the question
  2. 02Create an interactive HTML logic demo
  3. 03Switch UI variants on a single route
  4. 04Keep state in memory by default
  5. 05Preserve prototypes and validated decisions

Use cases

  1. 01Test whether a state model or business logic makes sense
  2. 02Compare UI directions on one route
  3. 03Let non-developers exercise logic scenarios
  4. 04Carry prototype findings into implementation work

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/devcxl/mattpocock-skills-zh --skill prototype

After installing, type/prototypein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

LOGIC.md
UI.md
agents/
openai.yaml

Details

From the project README

原型(Prototype)

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

选择分支

判断要回答的是哪个问题——从用户的提示、周围的代码判断,或者如果用户在场就直接问:

  • "这套逻辑 / 状态模型感觉对吗?" → 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. 完成后留存。 把任何验证过的决策折进真实代码,然后把原型本身作为一手来源留存:提交到一个一次性分支(放在 main 之外),并在实现 issue 上留下指向该分支的上下文指引。答案也要留存——结论和它所解决的问题——写进 issue 或一次提交里。main 分支只保留验证过的决策。

Comments

Markdown supported