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 mileson/openprd --skill openprd-frontend-designgit clone --depth 1 https://github.com/mileson/openprdWrote 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/mileson/openprd/openprd-frontend-design)<a href="https://agentmods.dev/skills/mileson/openprd/openprd-frontend-design"><img src="https://agentmods.dev/badge/skills/mileson/openprd/openprd-frontend-design/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/mileson/openprd/openprd-frontend-design"><img src="https://agentmods.dev/badge/skills/mileson/openprd/openprd-frontend-design.svg" alt="Reviewed on agentmods" width="80" 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.00050 | $0.06176 |
| Opus 5.5 | $0.00020 | $0.02470 |
| Sonnet 5.5 | $0.00010 | $0.01235 |
| Haiku 4.5 | $0.00005 | $0.00618 |
Grade A, and why
openprd-frontend-design 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 1mo 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 — 207 lines — stays where its author put it; the contents beside it link to each section on GitHub.
OpenPrd Frontend Design
当任务涉及界面、页面、视觉、样式、组件层级、信息架构、内容型页面或前端体验时，使用这份 skill。
核心目标
- 让 Agent 在动手实现前，先有一套稳定的前端设计资产和判断顺序。
- 避免界面任务默认收敛成同一种安全解。
- 避免“没素材硬做”“事实没核实就写页面”“看起来好看但空心”的情况。
- 让每个界面先有明确审美主张和记忆点，而不是只套默认模板、堆卡片或复用通用 AI 风格。
先读这些文件
.openprd/design/README.md.openprd/design/templates/README.mdskills/openprd-frontend-design/references/design-asset-contract.mdskills/openprd-frontend-design/references/direction-engine.md
如果当前工作区本来就有现成前端结构，或你明确需要偏离模板默认组合，再读：
.openprd/design/lenses/frontend-lenses.md.openprd/design/themes/theme-catalog.json.openprd/design/layouts/layout-catalog.json.openprd/design/components/component-catalog.md.openprd/design/checklists/ui-quality-gate.md.openprd/design/anti-slop.md
如果本轮已经进入实现准备，再读：
.openprd/design/active/facts-sheet.md.openprd/design/active/task-scope.md.openprd/design/active/asset-spec.md.openprd/design/active/image-preflight.md.openprd/design/active/direction-plan.md.openprd/design/active/selected-direction.md
使用顺序
- 先判断这是不是前端体验任务。
- 选一个
lens，明确这次界面的视觉判断角度。 - 写清本次审美立意：页面解决什么问题、服务谁、气质要偏哪一端、受什么技术/可访问性约束、用户第一眼应该记住什么。
- 选一个
theme、一个layout skeleton和一个recipe，并说明它们如何服务上面的审美立意。 - 如果页面会写具体产品事实，先补
facts-sheet.md。 - 如果页面依赖品牌素材、产品图、界面图、图库或插图，先补
asset-spec.md，并记录字体、色彩、动效、背景/表面这些审美资产。- 头像和单物件 UI 位图必须先锁定
rendering-mode：transparent-cutout或opaque-full-bleed-tile。前者要求透明背景与透明四角；后者要求背景覆盖四边四角且四角不透明，禁止图片内圆角卡片、白边和透明角。两种模式的验证不得混用。
- 头像和单物件 UI 位图必须先锁定
- 如果这类页面没有真实图片就会空心，先补
image-preflight.md。 - 如果用户还没有给参考方向，先补
direction-plan.md，明确 3 个异源方向；每个方向都要有不同审美主张和记忆点。 - 用户选定方向后，再补
selected-direction.md，把选中的 lens、theme、layout、组件、审美主张、记忆点和风险锁定。 - 如果用户已经给了效果图、设计稿、参考截图或其他明确参考图，先把它视为主参考源：优先锁定它的版式、层级、主视觉和关键路径；
starter / lens / theme / layout只作为实现加速器，不作为高于参考图的裁决源。 - 如果当前是空白工作区的前端/页面冷启动，而且用户原话已经给了明确的页面主题、模块范围或“直接实现”的意图，直接用 3 到 5 行 mini-plan 收口并进入
design-starter -> Patch Mode。 - 跑完
design-starter后，立即进入Patch Mode：把生成的入口文件当成稳定基座，在同一路径里细化结构、内容、样式和交互。 - 最后再进入验证，并用
.openprd/design/checklists/ui-quality-gate.md和.openprd/design/anti-slop.md做自检。
What ships with it
2 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.
- 1mo ago First seen · 207 lines · 50 tokens per session scan A 4c6ee0f3ab09
openprd-frontend-design is a skill published in the GitHub repository mileson/openprd (50 stars, last pushed 1mo ago), licensed MIT. It adds 50 tokens to every session and 6,176 once invoked, about $0.0002 per session on Opus 5.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-09-03.
Other skills, from other repositories
openspec-bulk-archive-change
Archive multiple completed OpenSpec changes at once. Use when archiving several parallel changes. Also use for a plural archive request - "openspec bulk-archive", "opsx bulk-archive", "openspec archive all", or "openspec archive these changes".
openspec-explore
Enter OpenSpec explore mode - a thinking partner for exploring ideas, investigating problems, and clarifying requirements in a project that uses OpenSpec. Use when the user wants to think through something before or during an OpenSpec change. Also use when the user says "openspec explore" or "opsx explore".
openspec-onboard
Guided onboarding for OpenSpec - walk through a complete workflow cycle with narration and real codebase work. Also use when the user says "openspec onboard" or "opsx onboard".
openspec-verify-change
Verify implementation matches OpenSpec change artifacts. Use when the user wants to validate that implementation is complete, correct, and coherent before archiving. Also use when the user says "openspec verify" or "opsx verify".
openspec-archive-change
Archive a completed OpenSpec change in the experimental workflow. Use when the user wants to finalize and archive a change after implementation is complete. Also use when the user says "openspec archive" or "opsx archive".
openspec-sync-specs
Sync delta specs from an OpenSpec change to main specs. Use when the user wants to update main specs with changes from a delta spec, without archiving the change. Also use when the user says "openspec sync" or "opsx sync".