Getting it into your agent
This one installs as part of its plugin. Adding the marketplace and installing the plugin brings it with everything else the plugin ships.
/plugin marketplace add smk-labs/claude-plugins/plugin install open-design-guideWrote 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/smk-labs/claude-plugins/open-design-guide)<a href="https://agentmods.dev/skills/smk-labs/claude-plugins/open-design-guide"><img src="https://agentmods.dev/badge/skills/smk-labs/claude-plugins/open-design-guide/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/smk-labs/claude-plugins/open-design-guide"><img src="https://agentmods.dev/badge/skills/smk-labs/claude-plugins/open-design-guide.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.00000 | $0.00849 |
| Opus 5 | $0.00000 | $0.00425 |
| Sonnet 5 | $0.00000 | $0.00170 |
| Haiku 4.5 | $0.00000 | $0.00085 |
Grade A, and why
open-design-guide 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 9d 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 — 58 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Open Design guide
This skill does not contain the library. It knows how to find it and how to use it well.
The library is a local, offline clone of the content half of Open Design. Plain files. No od binary, no daemon on port 7456, no desktop app.
Step 1: locate the library
Read ~/.claude/open-design-guide.local.md. Its library: field is the absolute path to the clone.
If that file does not exist, the library is not installed. Stop and tell the user to run:
"${CLAUDE_PLUGIN_ROOT}/scripts/install.sh"
Do not guess a path and do not fall back to the network. One clone, one recorded location.
Step 2: find the right entry
Read CATALOGUE.md at the library root. That is the index: every design system grouped by category with its real tagline, every skill, every template.
Never guess a folder name. Names are not obvious (linear-app, not linear).
Step 3: read the entry, then work
Design systems live at design-systems/<name>/.
Read DESIGN.md first. It is the brand contract and it governs every other file in the folder: the atmosphere, the typographic logic, the reason a color exists. Skipping it and grabbing tokens.css alone produces output that has the right hex codes and the wrong soul.
Then take real values from tokens.css or design-tokens.json, and copy component markup from components.html. Once a system is in play, invent nothing: no new colors, no new spacing steps, no new type scale.
USAGE.md covers how the authors intend the tokens to be applied. DESIGN-<lang>.md files are translations of the same contract, useful when writing UI copy in that language.
Skills live at skills/<name>/SKILL.md. Self-contained instructions for one job: taste and anti-slop passes, GSAP animation, image-to-code, redesigns, brand extraction, design briefs. Read the whole file before acting on any part of it. Some are long on purpose.
Design templates live at design-templates/<name>/SKILL.md. Rendering shapes: decks, editorial documents, video frames, device mockups, social cards.
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.
- 9d ago First seen · 58 lines · 0 tokens per session scan A 4b71f08ddc59
open-design-guide is a skill published in the GitHub repository smk-labs/claude-plugins (11 stars, last pushed 4d ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 849 tokens. 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-30.
Other skills, from other repositories
design-system
Use when starting a frontend or working on its look and feel, to establish and enforce a DESIGN.md-driven custom design system as the single source of truth for tokens, components, and icons. Make any generated UI (including 21st.dev Magic output) conform to DESIGN.md.
svg-mastery
Expert knowledge for working with SVG (Scalable Vector Graphics) — optimization, embedding, animation, accessibility, responsive scaling, React integration, filters, and programmatic creation. Use when the user asks to "optimize SVG", "clean up SVG", "reduce SVG file size", "embed SVG in HTML", "inline SVG vs img…
frontend-aesthetics
Design guidance and aesthetic patterns for building beautiful, distinctive frontends — websites, web apps, landing pages. Provides typography strategies, color application, motion choreography, layout composition, and component design recipes. Use when the user asks to "make this look better", "improve the design"…
animation-system
CSS and GSAP animation patterns for websites — ScrollTrigger, timelines, stagger effects, page transitions, micro-interactions, and performance optimization. Use when implementing animations for web design projects, when the user wants scroll-triggered animations, page load reveals, GSAP integration with React/Vite…
variation
Generate alternative design variations from an existing web design — systematically vary colors, typography, animation intensity, and spacing density while preserving page structure and content. Use when the user wants multiple visual options from a base design, says "generate variations" or "try different styles"…
top-design
Create award-winning, immersive web experiences at the level of Awwwards-featured agencies. Use when the user mentions "Awwwards quality", "make my site stunning", "scroll animations", "parallax storytelling", "cinematic web design", "portfolio site", or "brand experience". Also trigger when elevating a standard…