Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add devcxl/mattpocock-skills-zh --skill prototypegit clone --depth 1 https://github.com/devcxl/mattpocock-skills-zhWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/devcxl/mattpocock-skills-zh/prototype)<a href="https://agentmods.dev/skills/devcxl/mattpocock-skills-zh/prototype"><img src="https://agentmods.dev/badge/skills/devcxl/mattpocock-skills-zh/prototype.svg" alt="Measured on agentmods" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00039 | $0.00756 |
| Opus 5 | $0.00019 | $0.00378 |
| Sonnet 5 | $0.00008 | $0.00151 |
| Haiku 4.5 | $0.00004 | $0.00076 |
Grade A, and why
prototype scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
原型（Prototype）
原型是回答某个问题的一次性代码。问题决定了它的形态。
选择分支
判断要回答的是哪个问题——从用户的提示、周围的代码判断，或者如果用户在场就直接问：
- "这套逻辑 / 状态模型感觉对吗？" → LOGIC.md。构建一个可分享的 HTML 文件——自由试玩按钮加上带标签页的引导式演练——把状态机推过那些在纸面上难以推理的用例，而且非开发者也能上手操作。
- "它应该长什么样？" → UI.md。在单一路由上生成几个截然不同的 UI 变体，通过 URL 查询参数和一个底部悬浮栏切换。
两个分支产出截然不同的产物——选错了分支，整个原型就白做了。如果问题确实模棱两可、用户又联系不上，就默认选择更贴合周围代码的分支（后端模块 → 逻辑；页面或组件 → UI），并在原型顶部注明这个假设。
两者都适用的规则
- 从第一天起就是一次性的，并且要明确标注。 把原型代码放在靠近实际使用位置的地方（在它为之原型化的模块或页面旁边），这样上下文一目了然——但命名要让随便一看的人就知道这是原型，不是生产代码。对于一次性 UI 路由，遵循项目已有的路由约定；不要发明新的顶层结构。
- 运行零门槛。 UI 原型用项目任务运行器里的一条命令启动——
pnpm <name>、python <path>、bun <path>等。逻辑演示是一个用户双击即可打开的 HTML 文件。无论哪种，启动它都不需要任何思考。 - 默认不持久化。 状态只存在于内存中。持久化恰恰是原型要检验的东西，而不是它应该依赖的东西。如果问题明确涉及数据库，就用一个命名清晰的"PROTOTYPE — 用完即删"的临时数据库或本地文件。
- 跳过打磨。 不写测试，不做超出"可运行"所需的错误处理，不搞抽象。重点是快速学到东西。
- 把状态摆在明面上。 每次操作之后（逻辑）或每次切换变体时（UI），打印或渲染完整的相关状态，让用户能看到什么变了。
- 完成后留存。 把任何验证过的决策折进真实代码，然后把原型本身作为一手来源留存：提交到一个一次性分支（放在 main 之外），并在实现 issue 上留下指向该分支的上下文指引。答案也要留存——结论和它所解决的问题——写进 issue 或一次提交里。main 分支只保留验证过的决策。
What ships with it
3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 8d ago First seen · 27 lines · 39 tokens per session scan A 710f2bfbb76d
prototype is a skill published in the GitHub repository devcxl/mattpocock-skills-zh (318 stars, last pushed 3d ago), licensed MIT. It adds 39 tokens to every session and 756 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
design-directions
A workflow for producing several deliberately different single-file HTML prototypes of a page or interface. Each prototype uses realistic sample data so a user can compare layouts and interactions before real implementation.
drawio-diagrams-enhanced
This skill should be used when the user asks to "create a diagram", "draw a flowchart", "make a swimlane diagram", "create WBS", "generate RACI matrix", "build network diagram", "create org chart", or mentions draw.io, diagrams.net, BPMN, UML, Gantt, PERT, or project management diagrams. Integrates with…
ui
UI/UX design agent for crafting user experiences, visual designs, and game interfaces. Auto-detects the designer role (UX Designer, UI Designer, Game UI Designer) and spawns a role-scoped sub-agent with only the relevant reference files. Triggers on phrases like "user flow", "wireframe", "design system", "design…
image-to-code
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards…
apple-design
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading)…
emil-design-eng
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.