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 agentmods add skills/mileson/openprd/openprd-frontend-designnpx 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.svg" alt="Measured on agentmods" 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 | $0.00050 | $0.06176 |
| Opus 5 | $0.00025 | $0.03088 |
| Sonnet 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 yesterday.
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.
- yesterday First seen · 207 lines · 50 tokens per session scan A 4c6ee0f3ab09
openprd-frontend-design is a skill published in the GitHub repository mileson/openprd (49 stars, last pushed 6d ago), licensed MIT. It adds 50 tokens to every session and 6,176 once invoked, about $0.0003 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-09-03.
Other skills, from other repositories
openspec-bulk-archive-change
Archive multiple completed changes at once. Use when archiving several parallel changes.
openspec-explore
Enter explore mode - a thinking partner for exploring ideas, investigating problems, and clarifying requirements. Use when the user wants to think through something before or during a change.
openspec-onboard
Guided onboarding for OpenSpec - walk through a complete workflow cycle with narration and real codebase work.
release-openspec
Use this skill when releasing OpenSpec: audit merged work and changeset coverage, decide whether a catch-up changeset PR is needed, prepare or resume the Changesets Version Packages PR, cut a beta or stable release, verify publishing, and polish GitHub release notes. Also use when asked whether an open release PR is…
openspec-archive-change
Archive a completed change in the experimental workflow. Use when the user wants to finalize and archive a change after implementation is complete.
openspec-sync-specs
Sync delta specs from a change to main specs. Use when the user wants to update main specs with changes from a delta spec, without archiving the change.