mcpField
P
prototype

prototype

github.com/devcxl开发52079 次安装今天更新
代码仓库

关于 prototype

prototype 是用于快速回答设计问题的一次性代码技能,可根据问题生成逻辑演示或 UI 变体。它强调低门槛运行、临时状态和保留验证结论,并避免将未验证内容带入主分支。

主要功能

  1. 01按问题选择逻辑或 UI 原型
  2. 02生成可操作的逻辑演示 HTML
  3. 03在单一路由切换 UI 变体
  4. 04默认以内存保存状态
  5. 05记录验证决策并保留原型

适用场景

  1. 01验证状态模型或业务逻辑是否合理
  2. 02比较同一路由的多个界面方向
  3. 03让非开发者操作逻辑用例
  4. 04将原型得出的结论交接给实现工作

安装

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

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

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

包含的文件

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

LOGIC.md
UI.md
agents/
openai.yaml

详细介绍

来自项目 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 分支只保留验证过的决策。

评论

支持 Markdown