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/lucasduys/forge/design-systemnpx skills add LucasDuys/forge --skill design-systemgit clone --depth 1 https://github.com/LucasDuys/forgeWrote 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/lucasduys/forge/design-system)<a href="https://agentmods.dev/skills/lucasduys/forge/design-system"><img src="https://agentmods.dev/badge/skills/lucasduys/forge/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 | $0.00021 | $0.01951 |
| Opus 5 | $0.00010 | $0.00975 |
| Sonnet 5 | $0.00004 | $0.00390 |
| Haiku 4.5 | $0.00002 | $0.00195 |
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 4d 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 — 210 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design System Skill
This skill integrates DESIGN.md-based design specifications into the Forge workflow. When a project has a DESIGN.md file, all UI-related tasks automatically inherit design constraints, ensuring brand consistency across parallel agent execution.
What is DESIGN.md?
DESIGN.md is a standardized markdown format for design specifications that AI agents can read and follow. It contains:
- Visual Theme and Atmosphere -- brand philosophy and design mood
- Color Palette -- semantic color definitions (Primary, Error, Surface, etc.) with hex values
- Typography Hierarchy -- font families, weights, sizes for H1-H6, body, caption
- Component Styling -- button specs, card styling, input borders, border radius, shadows
- Layout Principles and Spacing -- spacing scale (base unit), margin/padding rules, grid conventions
- Depth and Elevation Systems -- shadow definitions, z-index hierarchies
- Design Guardrails and Anti-Patterns -- what NOT to do, brand identity boundaries
- Responsive Behavior Parameters -- mobile/tablet/desktop breakpoints, scaling rules
- Agent Prompt Guide -- quick reference for AI agents to maintain consistency
Detection
At the start of brainstorming or planning, check for an existing DESIGN.md:
# Check common locations
ls DESIGN.md design.md docs/DESIGN.md 2>/dev/null
If found, load it and reference it throughout the workflow.
Integration with Forge Phases
Brainstorming Phase
When /forge brainstorm runs for a project with UI components:
- Check for DESIGN.md -- if it exists, reference it during spec generation
- If no DESIGN.md exists, ask the user during the Q&A phase:
Does this project have a design system or brand guidelines? A) Yes, I have a DESIGN.md file (specify path) B) I want to base it on an existing brand (specify which -- e.g., Stripe, Linear, Claude) C) No specific design requirements -- use sensible defaults D) I'll provide design specs later
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.
- 4d ago First seen · 210 lines · 21 tokens per session scan A cf3a557a21d9
design-system is a skill published in the GitHub repository LucasDuys/forge (55 stars, last pushed 1mo ago), licensed MIT. It adds 21 tokens to every session and 1,951 once invoked, about $0.0001 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
uiux
Dashboard design system — colors, typography, spacing, components, and visual patterns for the session dashboard UI.
ui-ux-design
Create production-grade frontend interfaces with strong UX and visual craft. Use when building web components, pages, dashboards, forms, landing pages, modals, or any UI. Use when user says 'build a form', 'create a dashboard', 'design a component', 'make a landing page', or asks for UI/UX work. Use even when the user…
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
design-tokens
Establish color, typography, spacing, radius and motion as named role-based tokens. Use before building any interface.
super-design
Use when the user asks you to build, style, theme, refine, audit, or recreate UI — or uploads a screenshot to rebuild. Reads DESIGN.md as a closed token layer, detects the project's framework (Tailwind v4/v3, ShadCN, MUI, Radix, Geist), and enforces production design rules (tokens only, full state matrix, WCAG 2.2 AA…
ux-modern-app-feel
Use when you want a Shopify embedded app to feel modern, fast, and opinionated like Linear, Notion, Vercel, or Cron — speed-first, keyboard-first, calm UI, opinionated defaults, no-config success path. Covers keyboard shortcuts inside App Bridge, command palette patterns, micro-interactions Polaris allows, density vs…