/prototype 技能
用随后即删的代码回答一个设计问题。
安装此技能
npx skills@latest add mattpocock/skills --skill=prototype然后输入 /prototype 来调用它。
本页内容
它的作用
prototype writes 回答一个问题的一次性代码: does this state model feel right, or what should this screen look like. The question comes first and decides what you build. A prototype that answers the wrong question is wasted, however good it looks.
一次性是对代码「如何」的约束 written, not a promise to destroy it. No tests, no error handling beyond what makes it run, no abstractions, no persistence, because none of that helps you learn the one thing you're trying to learn. Two things survive. The answer goes into the real code, and the prototype goes onto a branch out of main as evidence for the answer.
何时使用
输入 /prototype,或这个 agent 任务合适时会自动调用它。
Reach for it the moment you hit a question you can't settle by talking: a state machine whose edge cases you can't hold in your head, a screen you can't picture until you see three versions side by side. 审问 sessions grow long on these questions. The agent rephrases, you guess, and the scope grows. Stop 追问审视,构建一次性版本,看看它,然后用一行回答。如果相反,是已构建的东西行为异常而你想知道原因,用 diagnosing-bugs; prototyping explores what to build, not why the built thing is broken.
你也会在没主动选择的情况下到达这里。 wayfinder files prototype decision tickets on its map, and you work one with this skill.
两个分支
The question picks the branch, and the branches produce different artifacts:
- 「这个逻辑 / 状态模型感觉对吗?」: a 单个可分享的 HTML 文件。一个自包含的页面,无需构建、无需服务器,双击即可打开。它带有一个带标签的状态面板(每次点击后重新渲染)、供你以任意顺序摆弄模型的自由操作按钮,以及带选项卡的 引导式演练 (one scenario per tab, each with the ordered buttons to press underneath it). Everything is labelled in domain language, so you can hand it to a designer, a PM or a domain expert and let them try the model themselves. The logic behind the page is a small pure module (a reducer, a machine, a set of functions) with no DOM code in it, so you can move the validated version straight into the real code.
- 「这应该长什么样?」: several 截然不同 同一条路线上的 UI 变体,可从浮动底栏和
?variant=URL param. Variants must disagree about structure, not colour; three card grids with small tweaks answer nothing. They render inside a real page wherever possible, against real data and real density, because a variant judged on an empty page always looks fine.
Both keep state in memory, start with no setup, and show you the full state after every step. The moment you find yourself hardening one (adding a test, wiring the real database, generalising for a case you might want later), you have stopped prototyping.
原型是第一手来源
一个完成的原型留下两样东西,它们去往不同的地方。
You record the answer (the verdict plus the question it settled) somewhere permanent: a commit message, an ADR, the implementation issue. Main keeps the answer, in the real code.
这个 prototype is the runnable evidence the answer came from, and you do not delete it. It doesn't belong in main either, because nobody maintains it and it goes stale fast. So you commit it to a throwaway prototype/<name> branch out of main, never merge it, and leave a 上下文指针 to that branch on the implementation issue. Main stays clean, and whoever picks the work up next can find and re-run the prototype.
常见问题
Wait, isn't the prototype supposed to be deleted?
Not any more. It used to be: build it, keep the answer, bin the code. The strongest objection to that was not about speed. It was 下一个接手工作的人 会话,而他们有什么可用的基础? A prose summary of a prototype loses the thing that made it convincing. So the skill now treats the prototype as a 第一手资料. It lands on a prototype/<name> branch out of main and the implementation issue points at it. What changed is where the code lives, not the discipline; it still never merges into main.
它以前构建终端应用。那去哪了? The logic branch now emits a single shareable HTML file instead. A terminal app can only be driven by someone with the repo cloned and a runtime installed, which rules out the people whose opinion the prototype needs: the designer, the PM, the domain expert who knows what the state model is supposed to mean. One self-contained file that opens by double-click and still works after being emailed can be driven by anyone. The pure logic module underneath is unchanged, and is still the part you move into the real code.
一个智能体让我 /prototype 在我本该实现的时候。
This is a known naming problem. An agent that does not know the flow reads prototype, a generic and appealing word, as "the obvious next step" once tickets exist. So agents recommend it by name even where the design was settled in conversation. If you already know what to build, the next step is /implement, per ticket. Reach for a prototype only when a specific design question is unresolved and talking won't resolve it.
Should I prototype the whole application before building any of its production features (say, to demo it to prospects)? That is a different artifact that happens to share this skill's name. A prototype here is scoped to one question, and "what is the whole app?" isn't one. A full-app prototype has no natural stopping point, so it drifts into being the production app: the cleanup pass never happens, and code written under prototype rules (no tests, no error handling) ends up in front of users. If you need a sales demo, build it as a demo on purpose and be explicit that none of it is production. If you need to settle a design question, cut it down to that question.
我怎么在它自己的会话中运行它? 原型住在自己的目录里,并产生大量 context you don't want in the thread that asked the question, so run it somewhere else and bring back only the answer. Use handoff to move the work into that session and to bring the answer back.
这不是烧 Token 的最快方式吗? 可能是,如果你原型化了本可靠讨论回答的问题,或让一个原型蔓延到整个功能。重要的比较不是 Token 对零,而是 tokens 防止构建错误的状态模型、直到它有了生产环境的调用者才发现。保持问题狭窄、运行简短,花费就始终成比例。
做到以下就算成功
- You can say in one sentence what question the prototype exists to answer, and it's written at the top of the demo, not just in your head.
- 不读代码的人也能操作逻辑演示。他们打开文件,在演示选项卡里按按钮,用自己的话描述所见。
- 有人说「等等,那不可能」或「咦,我以为 X」。那是 idea, which is what the prototype is for.
- The UI variants disagree about layout and information hierarchy, not just colour and copy, and the feedback you get is "the header from B with the sidebar from C".
- 它一次坐下就能回答。如果一天后你还在构建它,说明问题太大;把它拆开。
- 结束时,main 包含决策而不包含原型,实现 issue 指向仍然持有它的分支。
在流程中的位置
prototype 是一个 随时可调用的独立技能: you use it to settle one design question, then go back to your work. Another skill also runs it.
The skill that runs it most is wayfinder。一张 wayfinder 地图由 决策任务,以及 prototype is one of the four types a ticket can be: the one used when the blocking question is "how should this look" or "how should it behave", which no amount of discussion resolves. When a discussion is vague, wayfinder makes something concrete to react to, and this skill builds that thing. The answer resolves a prototype ticket, and the map links to the prototype as an asset.
其他邻居在它的上游和下游。 grill-me and grill-with-docs 回答可审问的问题;不可审问的来这里,一行答案再回到审问中去。下游,经过验证的状态模型或 UI 方向会成为 to-spec,它可以直接内联原型产出的富含决策的代码片段,而不是用文字描述。其他情况, ask-matt 为你规划整套流程。
技能操作
npx skills@latest add mattpocock/skills安装整套技能,然后在智能体中输入 /prototype 来调用它。