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 martian56/claude-engineer --skill design-systemgit clone --depth 1 https://github.com/martian56/claude-engineerWrote 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/martian56/claude-engineer/design-system)<a href="https://agentmods.dev/skills/martian56/claude-engineer/design-system"><img src="https://agentmods.dev/badge/skills/martian56/claude-engineer/design-system.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.1 | $0.00059 | $0.00666 |
| Opus 5 | $0.00030 | $0.00333 |
| Sonnet 5 | $0.00012 | $0.00133 |
| Haiku 4.5 | $0.00006 | $0.00067 |
Grade A, and why
design-system 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 7d 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 — 41 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design System
Announce at start: "I'm using claude-engineer:design-system to make DESIGN.md the source of truth."
Iron Law
DESIGN.md is the single source of truth. No component ships with off-token colors, spacing, type, or radii. Tools generate; DESIGN.md governs.
Procedure
- Author
DESIGN.md(Google design.md spec) at the frontend root - YAML token front-matter (colors, typography, spacing, radii, elevation, components) + markdown sections (Overview, Colors, Typography, Layout, Elevation, Shapes, Components, Do's/Don'ts). Optionally seed from a getdesign.md kit matching the desired vibe, then customize to the brand. - Wire tokens into the stack - export DESIGN.md tokens to Tailwind/CSS variables and consume them
everywhere (Tailwind v4
@theme, OKLCH, class-based dark mode). Seeclaude-engineer:frontend-development. - Generate components with shadcn/ui + Radix and/or 21st.dev Magic, then run the conformance loop: generate → audit against DESIGN.md tokens → refine until on-token. Magic ignores your DESIGN.md, so the audit/refine step is mandatory.
- Icons - default to Lucide (or Phosphor); add bespoke icons via a typed SVG-component pattern; use
Magic
logo_searchfor brand logos. - Validate - run the design.md linter (
@google/design.md→lint) including the contrast rule (WCAG AA 4.5:1); usediffto catch token regressions across iterations. - Register patterns - record established component/token patterns in
docs/conventions.mdso they're reused.
Tooling (BYO keys; install per templates/recommended-mcps.md)
- Google design.md CLI:
npm i -D @google/design.md→lint/diff/export/spec. - designmd (getdesign.md) MCP:
claude mcp add -s user designmd -e DESIGNMD_API_KEY=dk_... -- npx designmd-mcp(browse/search keyless; download needs the key). - 21st.dev Magic MCP:
npx @21st-dev/cli@latest install claude --api-key <key>.
Full detail: read references/design-tooling.md (exact spec sections, MCP tool names, the conformance loop, pricing) on demand.
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.
- 7d ago First seen · 41 lines · 59 tokens per session scan A d5909fa061a5
design-system is a skill published in the GitHub repository martian56/claude-engineer (2 stars, last pushed 2mo ago), licensed MIT. It adds 59 tokens to every session and 666 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-08-31.
Other skills, from other repositories
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…
web-typography
Select, pair, and implement typefaces for web projects. Use when the user mentions "font pairing", "which typeface", "line height", "responsive typography", "web font loading", "type hierarchy", "variable fonts", "FOUT/FOIT", "typographic scale", or "the text is hard to read". Also trigger when choosing between system…
designlang-tokens
Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
refactoring-ui
Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent…
shiny-bslib-theming
Advanced theming for Shiny apps using bslib and Bootstrap 5. Use when customizing app appearance with bstheme(), Bootswatch themes, custom colors, typography, brand.yml integration, Bootstrap Sass variables, custom Sass/CSS rules, dark mode and color modes, dynamic theme switching, real-time theming, theme inspection…
interface-craft
Raises the visual and interaction quality of an interface — layout, hierarchy, type, spacing, density, and the details that separate a considered product from a generic one. Use this when a screen works but looks unfinished or default, when a layout feels crowded or arbitrary, when a page has no clear focal point, or…