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 Onevium/awesome-claude-skills --skill make-a-prototypegit clone --depth 1 https://github.com/Onevium/awesome-claude-skillsWrote 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/onevium/awesome-claude-skills/make-a-prototype)<a href="https://agentmods.dev/skills/onevium/awesome-claude-skills/make-a-prototype"><img src="https://agentmods.dev/badge/skills/onevium/awesome-claude-skills/make-a-prototype/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/onevium/awesome-claude-skills/make-a-prototype"><img src="https://agentmods.dev/badge/skills/onevium/awesome-claude-skills/make-a-prototype.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00084 | $0.00729 |
| Opus 5 | $0.00042 | $0.00365 |
| Sonnet 5 | $0.00017 | $0.00146 |
| Haiku 4.5 | $0.00008 | $0.00073 |
Grade A, and why
make-a-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 9d 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
制作可交互原型
原型用于验证流程和反馈，因此关键路径必须真的可操作。默认使用本地、可逆的模拟状态，不把“原型”理解为授权调用真实业务系统。
1. 确认范围
确认入口、屏幕、目标状态、保真度、设备框架、是否需要多个方案、品牌或设计系统，以及示例数据。没有品牌且需要高保真时先确定视觉方向；示例内容应真实可信，不使用无意义 Lorem ipsum。
2. 映射页面与状态
制作前写出屏幕流转和关键状态，并放进文件注释或项目说明。例如当前屏幕、表单值、错误、选择项、加载和成功状态。明确哪些行为是模拟、哪些连接真实能力。
3. 构建界面
在同一个应用或文件中实现各屏幕，复用真实组件与设计 token。每屏只有一个明确主行动，次要操作降低权重。设备或浏览器外壳保持稳定，内容在其中切换。
4. 接通完整交互
- 前进、返回和取消都能工作，状态按产品预期保留或清除。
- 空值、格式错误和业务错误给出具体、字段关联且可恢复的反馈。
- 模拟异步操作时显示 loading、阻止重复提交并覆盖成功与失败路径。
- 选择、筛选、展开、对话框和菜单立即更新 UI；对话框正确管理焦点并支持 Escape。
- 只有刷新后保持状态有助于评审时才使用
localStorage，并提供重置入口。
5. 验证
逐步走完正常、错误、返回和重复操作路径；检查键盘、焦点、触屏目标、响应式和减少动效设置。不能验证的链接或真实集成必须明确列为模拟或未测试。
多个变体应放在一个文件中，以切换器、参数面板或并排画布呈现，不创建散乱版本文件。
示例
输入：“做一个四步注册流程原型，要能测试错误和成功状态。”
**输出：**单文件原型包含欢迎、邮箱、资料和成功页面；错误邮箱显示字段级提示，提交时显示 loading 并阻止重复点击，返回后保留合理草稿，最终说明网络请求使用本地模拟。
来源与许可
本 Skill 基于 Trystan Sarrade 的 claude-design-system-prompt 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布，详见 LICENSE.txt。
What ships with it
1 file 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.
- 9d ago First seen · 49 lines · 84 tokens per session scan A 762fdf72bf9a
make-a-prototype is a skill published in the GitHub repository Onevium/awesome-claude-skills (1 stars, last pushed 12d ago), licensed MIT. It adds 84 tokens to every session and 729 once invoked, about $0.0004 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-31.
Other skills, from other repositories
accesslint-audit
Find and fix WCAG 2.2 accessibility issues. Two modes — report (sweep a codebase or page, produce a prioritized written report, no edits) and fix (audit→edit→verify loop on a target). Prefers direct-CDP live-DOM auditing; falls back to a browser-MCP composition or HTML-string audits.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
accesslint-scan
Audit a live page for accessibility issues, locate each WCAG violation precisely, and return a selector-grounded fix worklist without editing.
frontend-design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
software-in-worten
Übersetzt zwischen Benutzeroberfläche und Text — in beide Richtungen. Aus einer beschriebenen Oberfläche wird ein Skill; aus einem Skill wird eine Oberfläche. Nutzen, wenn eine Anwendung entworfen wird und der Ablauf noch unklar ist, wenn ein bestehendes Werkzeug als Skill verfügbar gemacht werden soll, wenn…
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…