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 limengzhe27-boop/claude-product-doc-skills --skill design-specgit clone --depth 1 https://github.com/limengzhe27-boop/claude-product-doc-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/limengzhe27-boop/claude-product-doc-skills/design-spec)<a href="https://agentmods.dev/skills/limengzhe27-boop/claude-product-doc-skills/design-spec"><img src="https://agentmods.dev/badge/skills/limengzhe27-boop/claude-product-doc-skills/design-spec/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/limengzhe27-boop/claude-product-doc-skills/design-spec"><img src="https://agentmods.dev/badge/skills/limengzhe27-boop/claude-product-doc-skills/design-spec.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.00155 | $0.04291 |
| Opus 5 | $0.00077 | $0.02145 |
| Sonnet 5 | $0.00031 | $0.00858 |
| Haiku 4.5 | $0.00015 | $0.00429 |
Grade A, and why
design-spec 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 12d 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.
How it starts
The opening of the file, as written. The whole thing — 327 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design Spec — 设计规范生成器
只做一件事:产出一份高质量的 DESIGN.md。
代码落地不归本 SKILL 管——交给下游 Claude Code 读 DESIGN.md + PRD.md 自己实现。
与其他 Skill 的衔接关系
/mrd → 从数据分析市场需求 → MRD.md
↓
/brd → 判断商业可行性 → BRD.md
↓
/prd-writing → 定义产品结构 → PRD/ 文件夹（含 PRD/03-design-handoff.md 设计交接清单）
↓
/design-spec → 读 PRD/03-design-handoff.md + PRD/04-pages-components.md → 产出 DESIGN.md（本 Skill）
↓
Claude Code 默认能力 → 基于 PRD/ + DESIGN.md 实现 MVP 代码
设计规范是规格层,代码实现是执行层——两层分离,互不污染。
🔒 PRD 必须先于 DESIGN（教学场景的硬性顺序）
本 skill 必须在 PRD 完成后才运行。如果当前目录没有 PRD/ 文件夹（或没有 PRD/03-design-handoff.md），告诉用户先跑 /prd-writing，不要硬上。
为什么这样划线： 0→1 项目还没有"已存在的设计系统"作为约束，必须先定结构（页面/组件/路由）才能定皮肤（颜色/字体/动效）。如果反过来（先 DESIGN 再 PRD），DESIGN 阶段不知道有哪些组件要被定规范，做出的设计是空中楼阁。这条流程顺序在教学场景里是绝对的。
核心原则
- DESIGN.md 是显式产物,保存到项目根目录,可手动改、可被任何工具消费
- 不写页面代码,代码由 Claude Code 读 DESIGN.md + PRD/ 自己生成
- PRD 是上游,本 skill 是下游——0→1 项目必须先有 PRD/ 文件夹,本 skill 读
PRD/03-design-handoff.md作为输入 - 能继承就继承:有 03-design-handoff.md 就读它,有参考 URL/截图就提取
- 有数据就用数据,没数据用对话——不要一上来就给问卷
- MVP 优先——规范服务于「先把核心功能跑起来」,不要为「将来可能用到」加复杂度
- 默认 Web 端响应式网页,除非用户明确说要做 App
启动检测(按优先级)
按以下顺序判断从哪里起步:
- 项目根目录已有
DESIGN.md?→ 问用户:沿用 / 修改 / 重建 - 项目根目录有
PRD/03-design-handoff.md?（推荐路径，0→1 教学流程的标准入口） → 读它的 7 个小节（产品调性 / 目标用户视觉感受 / 目标市场与语言 / 参考竞品 / 视觉约束 / 组件密度提示 / 输出契约），作为主要输入 → 同时读PRD/04-pages-components.md拿到完整页面/组件清单（决定要为哪些组件定样式） - 项目根目录有旧版
PRD.md（单文件版）?→ 读末尾的「设计交接区」字段（兼容历史版本） - 用户给了参考 URL / 截图 / 关键词?→ 直接进入 Phase 1 提取
- 啥都没有 → 询问"你跑过 /prd-writing 吗？没跑过的话 0→1 项目建议先跑，本 skill 的输入来源就是 PRD/03-design-handoff.md。如果你坚持跳过 PRD，我可以用 Phase 1 对话兜底引导（最多 3 个问题），但效果会差很多。"
PRD 完成度门禁（情况 2 触发）
读到 PRD/03-design-handoff.md 后，先做 3 项门禁检查再开始设计：
- 03-design-handoff.md 的 §3.1（产品调性关键词）有内容
- 03-design-handoff.md 的 §3.6（组件清单视觉密度提示）至少列了 1 个页面/组件
- 04-pages-components.md 存在且能读到组件清单
任何一项不通过，告诉用户：
⚠️ 我读了 PRD/03-design-handoff.md，发现 [具体缺什么]。建议你回 prd-writing 把 03-design-handoff.md 补完再跑本 skill——否则我做出来的设计会和你的页面/组件清单脱节。
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.
- 12d ago First seen · 327 lines · 155 tokens per session scan A 8d33c8b6a564
design-spec is a skill published in the GitHub repository limengzhe27-boop/claude-product-doc-skills (2 stars, last pushed 1mo ago), licensed MIT. It adds 155 tokens to every session and 4,291 once invoked, about $0.0008 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
lean-ux-canvas
Guide teams through Lean UX Canvas v2. Use when framing a business problem, surfacing assumptions, and defining what to learn next.
customer-journey-mapping-workshop
Run a customer journey mapping workshop with adaptive questions and outputs. Use when you need to map stages, actions, emotions, pain points, and opportunities for a persona and scenario.
storyboard
Create a six-frame storyboard that shows a user's journey from problem to solution. Use when you need a fast narrative for alignment, concept reviews, or demos.
brainstorming
A structured brainstorming process for choosing a product or implementation approach before writing requirements, designing mockups or planning development.
ui-mockup-desktop-workbench
A design workflow for turning a product requirements document, design rules, screenshots, and frontend code into a detailed desktop interface plan and mockup. It models the screen structure and possible states before handing the result to developers.
ui-wireframe-to-html
A structure-first process that turns a product requirements document, or PRD, into screen lists, interface states, text layouts and low-detail HTML wireframes.