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 mgiovani/cc-arsenal --skill product-design-tokensgit clone --depth 1 https://github.com/mgiovani/cc-arsenalWrote 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/mgiovani/cc-arsenal/product-design-tokens)<a href="https://agentmods.dev/skills/mgiovani/cc-arsenal/product-design-tokens"><img src="https://agentmods.dev/badge/skills/mgiovani/cc-arsenal/product-design-tokens/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/mgiovani/cc-arsenal/product-design-tokens"><img src="https://agentmods.dev/badge/skills/mgiovani/cc-arsenal/product-design-tokens.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.00162 | $0.02140 |
| Opus 5 | $0.00081 | $0.01070 |
| Sonnet 5 | $0.00032 | $0.00428 |
| Haiku 4.5 | $0.00016 | $0.00214 |
Grade A, and why
product-design-tokens 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 13d 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 — 159 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Product Design Tokens
Produce the token contract a themed UI is built from: a valid, WCAG-checked DTCG 2025.10 JSON
file that stays the single source of truth. This skill writes no application code and never
draws assets; it authors and validates the tokens. Output lands under docs/specs/design/tokens/.
Input
$ARGUMENTS
Read the source first: an existing repo (scan for a design system before anything else), a design
spec / screen inventory from product-design-spec, a brand brief, or a plain idea. --with-design-md
also emits the optional alpha DESIGN.md prose layer.
Prerequisites & fallback
Sibling skills are invoked via the Skill tool where available; with no Skill tool, apply the
named sibling's documented rules inline (each delegation below states the fallback in-sentence).
Design-system detection uses the Task tool with an Explore/haiku subagent; no Task tool?
Run the detection inline, sequentially, with Grep/Glob/Read. The optional @google/design.md CLI is
probed at runtime, never assumed: the DTCG JSON is emitted whether or not it runs.
Lean by default
Default to a single docs/specs/design/tokens/tokens.dtcg.json. Split a layer (semantic,
component) into its own file only when it outgrows the single file. contrast-report.md sits
alongside it; DESIGN.md only when asked.
- Cost stop-condition: if the request implies a large tree (multi-brand × multi-theme × per-component tokens for dozens of components), stop and ask before emitting it: scope it down or confirm the tree first. Never auto-generate a 30-file token set.
Reuse first (top of the ladder)
Inventing a brand from scratch is the last resort, greenfield-only. Before writing any token:
- Detect an existing design system: scan for
tailwind.config.*, shadcn (components.json,@/components/ui), MUI theme, CSS custom properties, or a native platform system. - Adopt / extend it: express the existing values as DTCG tokens (alias into them; add only what the change needs). Do not replace a working system with a new invented palette.
- Only with genuinely no system present do you seed a new core palette.
What ships with it
8 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.
- 13d ago First seen · 159 lines · 162 tokens per session scan A df8187190d08
product-design-tokens is a skill published in the GitHub repository mgiovani/cc-arsenal (8 stars, last pushed 3d ago), licensed MIT. It adds 162 tokens to every session and 2,140 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
cli-anything-photoshop
A command-line tool that controls Adobe Photoshop through Windows automation. It can work with Photoshop documents, layers, selections, text, image adjustments, and exports.
extract-design-system
Extract design primitives from a public website and generate starter token files for your project.
double-diamond
A four-stage design method for understanding a problem, defining it clearly, exploring possible solutions, and choosing one to deliver.
nous-branding
Generate images and content consistent with the Nous Research brand identity. Use when creating visuals in the Nous / Theia / Hermes ecosystem: a "cyber-classical" style blending neo-classical statuary, cyberpunk/industrial grunge, and retro anime illustration. Covers official brand color palette, typography…
figma-use
Control Figma via CLI — create shapes, frames, text, components, set styles, layout, variables, export images. Use when asked to create/modify Figma designs or automate design tasks.
awesome-design-md
Create a DESIGN.md style baseline BEFORE building UI. Use FIRST when no design draft exists — installs a proven visual style, then invoke frontend-design to implement. For borrowing a known product style, getting consistent typography/colors/spacing, or needing a fast visual starting point.