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/arbazkhan971/godmode/designsystemnpx skills add arbazkhan971/godmode --skill designsystemgit clone --depth 1 https://github.com/arbazkhan971/godmodeWrote 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/arbazkhan971/godmode/designsystem)<a href="https://agentmods.dev/skills/arbazkhan971/godmode/designsystem"><img src="https://agentmods.dev/badge/skills/arbazkhan971/godmode/designsystem.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.00031 | $0.02087 |
| Opus 5 | $0.00015 | $0.01043 |
| Sonnet 5 | $0.00006 | $0.00417 |
| Haiku 4.5 | $0.00003 | $0.00209 |
Grade A, and why
designsystem 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 6d 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 — 201 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design System — Design System Architecture
Activate When
- User invokes
/godmode:designsystem - User says "design system," "design tokens," "theme architecture," "Figma to code"
- Creating a shared component library or establishing token architecture
- Building theme support (light/dark, multi-brand) or Figma-to-code pipeline
- Versioning/distributing a design system package or auditing for consistency
Workflow
Step 1: Assess Current State
DESIGN SYSTEM ASSESSMENT:
Project: <name> Framework: <React/Vue/Angular/Svelte/Web Components>
Existing system: <none/partial/mature>
Token coverage: Colors/Spacing/Typography/Shadows/Borders/Motion — <defined/partial/none> each
Theme support: <none/light-dark/multi-brand>
Component count: <N> Storybook: <yes/no> Figma integration: <yes/no>
Maturity: NONE | STARTER | GROWING | MATURE
Step 2: Token Architecture
Three-tier architecture is mandatory:
TIER 1: PRIMITIVES (raw values) --primitive-blue-500: #3b82f6;
TIER 2: SEMANTIC (meaning) --color-primary: var(--primitive-blue-500);
TIER 3: COMPONENT (specific) --button-bg: var(--color-primary);
Colors: Neutral scale (50-950), brand scale, feedback (red/green/amber). Semantic: bg, surface, text-primary/secondary/tertiary, primary/hover/active, error/success/warning, border/border-strong/border-focus.
Spacing: 4px base unit scale: 0, px, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24 (in rem).
Typography: Font families (sans, mono), sizes (xs-5xl modular 1.25 scale), weights (400-700), line heights (tight/normal/relaxed).
Shadows: xs through 2xl + inner + focus ring.
Step 3: Component API Standards
STANDARDS:
- variant: "primary"|"secondary"|"ghost"|"danger" size: "sm"|"md"|"lg"
- Extend native HTML element props. Export all prop types.
- forwardRef on every component wrapping native elements. Set displayName.
- Compound components: <Card><Card.Header/><Card.Body/></Card>
- Defaults: variant="primary", size="md"
- on<Event> convention. Support controlled and uncontrolled modes.
- className always accepted as escape hatch.
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.
- 6d ago First seen · 201 lines · 31 tokens per session scan A 0a3af6e81cd6
designsystem is a skill published in the GitHub repository arbazkhan971/godmode (26 stars, last pushed 8d ago), licensed MIT. It adds 31 tokens to every session and 2,087 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-08-30.
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…
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…
html-artifact
Generate rich self-contained HTML artifacts instead of markdown. Auto-detects artifact shape (spec, code-review, prototype, report, editor, data-viz, diagram, deck) and loads shape-specific patterns. Bundles Birchline design system with 4 theme presets. Use for "make HTML", "as HTML", "HTML artifact", or auto-injected…
distinctive-frontend-design
Context-driven aesthetic exploration with anti-cliche validation.
design-engineering
UI craftsmanship: animation rules, easing, micro-interactions, state polish. Triggers: animation, transition, ease-out, motion, micro-interaction, hover, loading state, UI polish.