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 OutlineDriven/outline-driven-development --skill design-variantsgit clone --depth 1 https://github.com/OutlineDriven/outline-driven-developmentWrote 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/outlinedriven/outline-driven-development/design-variants)<a href="https://agentmods.dev/skills/outlinedriven/outline-driven-development/design-variants"><img src="https://agentmods.dev/badge/skills/outlinedriven/outline-driven-development/design-variants/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/outlinedriven/outline-driven-development/design-variants"><img src="https://agentmods.dev/badge/skills/outlinedriven/outline-driven-development/design-variants.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.00041 | $0.01226 |
| Opus 5 | $0.00020 | $0.00613 |
| Sonnet 5 | $0.00008 | $0.00245 |
| Haiku 4.5 | $0.00004 | $0.00123 |
Grade A, and why
design-variants 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 2d 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.
Copies of this mod
1 near-identical copy found in the catalogue:
- design-variants — 97% identical, 0 lines differ
How it starts
The opening of the file, as written. The whole thing — 55 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design variants
Contract
| Field | Bound contract |
|---|---|
| Trigger | the user runs /design-variants |
| Authority | Reversible local: writes only design variant pages and files under a per-project design directory; rollback is deleting that directory. No remote mutation. |
| Side effect | local-write to a design directory; no project source, VCS, credential, or remote mutation |
| Done | A variant gallery is ready, an approved record is saved to the design directory, and the taste record is updated |
Inputs
Required: a screen or surface to explore, named by the user or inferred from the request.
When optional context is absent, gather it across five dimensions: who the design is for, the job to be done on that screen, what already exists in the codebase, the user flow in and out, and edge cases (long names, zero results, error states, mobile, first-time vs power user). A project design-system document, if present, is the default visual constraint unless the user says otherwise. Prior approved designs for the project, if present, bias generation toward demonstrated taste.
Procedure
-
Bound the output directory before any generation: a per-project design folder that persists across branches and conversations. Never write variants to project source, a context cache, a docs tree, or a system temp directory. Done when: the output directory is named and bounded.
-
Gather context across the five dimensions. Auto-read any project design-system document and list existing components and pages first; pre-fill what was inferred, then ask only for the gaps in one combined question. Stop gathering after two rounds and proceed with stated assumptions. Done when: the five dimensions are filled or two gather rounds have elapsed with stated assumptions.
-
Read prior approved-design records for the project. If they exist, extract the strongest taste signals (fonts, colors, layouts, aesthetics the user approved and rejected) and bias generation toward them. If a current request contradicts a strong prior signal, flag the conflict and ask whether to update the taste record or treat this as a one-off before proceeding. Done when: taste signals are extracted and any conflict is flagged and resolved.
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.
- 2d ago Changed · -14 tokens per session b4deacad6f35
- 5d ago First seen · 55 lines · 55 tokens per session scan A 9566b64ed0cd
design-variants is a skill published in the GitHub repository OutlineDriven/outline-driven-development (52 stars, last pushed 3d ago), licensed Apache-2.0. It adds 41 tokens to every session and 1,226 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-09-03.
Other skills, from other repositories
typography-audit
Use when asked to audit typography across a codebase. Produces a file:line report with concrete fixes ordered by impact and flags unverifiable rules. Not for building a type system or token scale.
polished-web-prototype
Use when /polished-web-prototype runs or a user builds an artifact from a mockup, design plan, or brief. Not for variant galleries: use design-variants. Not for live audits: use web-design-review.
ui-design
Use when directing, building, or auditing React/Next.js Tailwind UI: visual direction, responsive/dark-mode retrofits, UX audits. Not for typography or motion: use typography-audit or ui-animation.
web-design-review
Use when the user runs /web-design-review with a URL to visually audit and fix a live UI. Not for design direction: use design. Not for variant galleries: use design-variants.
frontend-ui-engineering
Use when asked to build or modify production-quality components, layouts, state, and pages with WCAG 2.1 AA and real content. Not for token-system design: use frontend-design-deslop.
frontend-design-deslop
Use when a user builds or styles a web frontend or asks to make it not look AI-generated. Not for component-level UI work without the token system: use frontend-ui-engineering.