Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
<div align="center">
Super Design
A production-grade design system skill for AI coding agents.
Reads DESIGN.md as a closed token layer · Generates framework-native theme code · Enforces UI/UX quality gates on every edit via hooks · Ships with real automation, not just documentation.
[▶ Live example: Linear dashboard recreation](https://eldergenix.github.io/SUPER-DESIGN/) — built end-to-end with the skill from the super-design-md/linear.app/DESIGN.md brand extraction. Source.
</div>
<div align="center">
Super Design · Linear dashboard demo
Recorded from the live deployment at [eldergenix.github.io/SUPER-DESIGN](https://eldergenix.github.io/SUPER-DESIGN/) · 8 hover states, 1200×750, 60 KB
</div>
What is Super Design?
Super Design is an installable AI skill that teaches any modern AI coding agent (Claude Code, Cursor, Codex, Copilot, Gemini, Windsurf, Cline, Continue, Antigravity, Aider, Zed) how to build and maintain production-grade UI. It is the closed token layer + quality gate layer that sits between your brand and the code an AI writes.
It is NOT a component library. You bring your own React/Vue/Svelte stack. Super Design ensures that whatever the AI writes references your DESIGN.md tokens, covers every interactive state, meets WCAG 2.2 AA, works at every viewport, and ships under 300 LOC per component.
Your brand → DESIGN.md → Super Design skill → AI writes correct UI code
↓
PostToolUse hooks validate on every edit
(block hardcoded colors, off-scale px,
missing focus-visible, a11y violations, etc.)Install (one line)
Claude Code (plugin marketplace):
/plugin marketplace add Eldergenix/SUPER-DESIGN
/plugin install super-design@super-designAny AI agent (git clone + bash):
git clone https://github.com/Eldergenix/SUPER-DESIGN.git /tmp/super-design
cd /path/to/your/project
bash /tmp/super-design/skill/install.sh --project --dry-run # preview
bash /tmp/super-design/skill/install.sh --project # installnpm / npx (cross-platform, Windows-friendly):
npx super-design --projectUninstall cleanly: bash .claude/skills/super-design/scripts/install.sh --uninstall
See skill/README.md for the full installer documentation, flags, and troubleshooting.
What you get
| Capability | How |
|---|---|
| Closed token layer enforced on every edit | DESIGN.md + PostToolUse hooks |
| Framework theme codegen — Tailwind v4, ShadCN, MUI | scripts/generate-theme.mjs |
| WCAG 2.2 AA contrast verification for every semantic color pair | scripts/contrast-check.mjs (OKLCH + sRGB) |
| DESIGN.md schema validation | scripts/lint-design-md.sh |
| Block hardcoded colors / off-scale px / missing alt / `:focus` without `:focus-visible` | scripts/validate-tokens.sh |
| Block components > 500 LOC, JSX depth > 6, missing state coverage | scripts/validate-component.sh |
| 0–100 composite quality score with letter grade | scripts/quality-score.sh |
| Batch audit that sorts worst-first | scripts/audit.sh |
| Screenshot → code with 7-pass extraction workflow | references/screenshot-to-code-workflow.md + scripts/crop-region.sh + scripts/screenshot-component.mjs |
| Visual regression with pixel-diff self-scoring | scripts/visual-diff.mjs (odiff + pixelmatch) |
| Cross-agent shim files — one install, every agent picks up the same guidance | Auto-written on --project install |
| Self-test suite — 13 tests on good/bad fixtures | scripts/test.sh |
Repository layout
SUPER-DESIGN/
├── README.md # This file
├── LICENSE # MIT
├── CONTRIBUTING.md # Contribution guidelines for the design-md collection
├── skill/ # ← The installable Super Design skill
│ ├── README.md # Full skill documentation
│ ├── CHANGELOG.md # Version history
│ ├── CONTRIBUTING.md # How to extend the skill
│ ├── install.sh # Bash installer (macOS / Linux / Git Bash)
│ ├── bin/install.js # Cross-platform Node installer
│ ├── package.json # npm package
│ ├── .claude-plugin/ # Claude Code plugin manifests
│ ├── hooks/ # Hook templates (Claude settings.json, Cursor, lefthook)
│ └── skills/super-design/ # SKILL.md + DESIGN.md + references + scripts
│ ├── SKILL.md # Agent-facing skill instructions
│ ├── DESIGN.md # Enhanced DESIGN.md template (OKLCH, forced-colors, i18n)
│ ├── references/ # Progressive-disclosure reference docs
│ │ ├── framework-adapters/ # tailwind-v4, tailwind-v3, shadcn, mui, radix, geist
│ │ ├── state-matrix.md # Required states per component
│ │ ├── STATE_MATRIX.yaml # Machine-readable state matrix
│ │ ├── tokens.schema.json # DTCG JSON Schema
│ │ ├── animation-tokens.md
│ │ ├── responsive-patterns.md
│ │ ├── component-quality-gates.md
│ │ └── screenshot-to-code-workflow.md
│ ├── scripts/ # All 14 automation scripts
│ └── templates/ # AGENTS.md, CLAUDE.md, shims, ESLint/Stylelint/Prettier configs
└── super-design-md/ # ← Curated DESIGN.md collection (54 real brands)
├── linear.app/ # Each folder: DESIGN.md + README + preview.html + preview-dark.html
├── stripe/
├── vercel/
├── apple/
└── ... (54 total)The DESIGN.md collection
Alongside the skill, this repo ships 54 production-extracted `DESIGN.md` files from real developer-facing websites. Use any of them as a reference implementation of the format, or copy one directly into your project as a starting point:
AI & Machine Learning
Claude · Cohere · ElevenLabs · Minimax · Mistral AI · Ollama · OpenCode AI · Replicate · RunwayML · Together AI · VoltAgent · xAI
Developer Tools & Platforms
Cursor · Expo · Linear · Lovable · Mintlify · PostHog · Raycast · Resend · Sentry · Supabase · Superhuman · Vercel · Warp · Zapier
Infrastructure & Cloud
ClickHouse · Composio · HashiCorp · MongoDB · Sanity · Stripe
Design & Productivity
Airtable · Cal.com · Clay · Figma · Framer · Intercom · Miro · Notion · Pinterest · Webflow
Fintech & Crypto
Coinbase · Kraken · Revolut · Wise
Enterprise & Consumer
Airbnb · Apple · BMW · IBM · NVIDIA · SpaceX · Spotify · Uber
Why "Super Design"?
Existing AI coding agents reliably produce plausible UI that looks OK in isolation and falls apart the moment you audit it: hardcoded colors scattered across files, missing focus rings, skipped disabled states, 800-line components, style={{ color: '#fff' }} inline everywhere, no forced-colors fallback, animation on width/height.
Super Design fixes this by treating the design system as a contract the AI cannot silently break. Every edit runs through a PostToolUse hook. Every color references a semantic token. Every interactive element has focus-visible, active, disabled, loading states. Every file stays under 300 LOC. Every layout passes at 320/375/768/1024/1440/1920. Every color pair meets WCAG 2.2 AA. If the AI tries to skip any of it, the hook blocks the edit with a clear violation message.
It is the layer that makes AI-generated UI actually ship-ready.
Compatibility
Super Design installs as a Claude Code skill AND drops a matching shim file for every other agent, so one install covers:
| Agent | Picks up via |
|---|---|
| Claude Code | .claude/skills/super-design/SKILL.md + .claude/settings.json hooks |
| Cursor | .cursor/rules/super-design.mdc |
| GitHub Copilot | .github/copilot-instructions.md |
| OpenAI Codex CLI / ChatGPT Codex | AGENTS.md |
| Gemini CLI / Google Antigravity | GEMINI.md (+ AGENTS.md) |
| Windsurf | .windsurf/rules/design-system.md |
| Zed | AGENTS.md (native) |
| Cline | .clinerules/design-system.md |
| Continue.dev | .continue/rules/design-system.md |
| Aider | CONVENTIONS.md via .aider.conf.yml |
All shims reference the same single source of truth (AGENTS.md + DESIGN.md), so your design system never drifts across agents.
Requesting a DESIGN.md
Want a DESIGN.md extracted from a specific website? Open a GitHub issue.
Contributing
See CONTRIBUTING.md for the DESIGN.md collection, and skill/CONTRIBUTING.md for extending the Super Design skill itself.
License
MIT — see LICENSE. All DESIGN.md files in super-design-md/ represent publicly visible CSS values extracted from live websites; we do not claim ownership of any site's visual identity.