name: design-system description: Use when designing, building, or reviewing UI/UX on any project — the anti-AI-slop design team: full mission process (discovery → research → flows → wireframes → tests → UI), visual entities, perceptual hierarchy, color, typography, design tokens, component state machines, accessibility gates, AI-tell avoidance, data display, design-tool integration. Senior product design craft for developers.
Design system
Here's the thing: most AI-built UIs look identical. Purple gradient, glass cards, three feature columns, one typeface at one weight. Users can't name it, but they feel it. Cheap. That's design slop, and this skill exists to kill it.
This skill is your design team. Senior opinions, any project, any stack. And like a real team, nobody reads the whole wiki. You read the brief, then the two files your task needs.
The one rule
When two files disagree, precedence is:
Safety > accessibility gates > industry mandate > dial values > component defaults.
Higher wins. Every time.
Route by task
You're about to open all 32 references. Don't. Find your row, read left to right:
| You're doing | Read first | Then |
|---|---|---|
| New product / mission from scratch | UI/UX workflow — diagnose the level, then its 8 phases | Its phase table routes the rest |
| Starting a new UI feature | UI/UX workflow (phases 1–6, collapsed if small) → Control dials → Industry guidance → Dial conflict matrix | Color craft → Typography craft → Token conventions |
| Building a component | Styling architecture → Naming patterns → State machines | Classification → Interaction states → Accessibility rules |
| Displaying data (tables, grids) | Data display patterns | Primitive components |
| Setting up tokens | Token implementation → Token conventions | Styling architecture (theme section) |
| Reviewing your own work | AI tells → Pre-delivery checklist | Render cost budget |
| Working from a design file | Design-tool integration → Visual reference workflow | Token implementation (pipeline section) |
| Got a mood board / reference | Visual reference workflow | Color craft → Typography craft |
The five you never skip
Skipping these is THE mistake. Every cheap-looking UI skipped at least one.
- UI/UX workflow. Diagnose the level (Strategy/UX/UI), wireframes before any visual design or code. A polished layout that was never right stays wrong.
- Control dials. Set the dials before any visual decision. Every downstream choice keys off them.
- AI tells. The catalog of "why does this feel generated" plus the positive pattern. Read it before designing, not after shipping.
- Accessibility rules. These are gates, not vibes. Fail one, the design fails.
- Pre-delivery checklist. Run it before every design spec. No exceptions, including yours.
The craft travels, the syntax doesn't
Hierarchy, color, type, spacing, states: those rules hold on any framework, any platform, any decade. A few reference files show their examples in one specific toolchain. When yours differs, port the rule, not the syntax. The rule is the point.
Full index
Foundations
- Control dials — the settings everything else reads
- Dial conflict matrix — combinations that never work, animation by density
- Visual hierarchy as a system — perception, not preference
- AI tells — the cheap-UI catalog
Craft
- Color craft — palette construction, dark mode
- Typography craft — optical sizing, measure, type features
- Spacing philosophy: the 8pt grid — and when to break it
- Materiality: surfaces and shadows
- Render cost budget — what's cheap to animate, what isn't
Tokens and implementation
- Design token conventions — semantic names, never scale names
- Token implementation — one source of truth → build → runtime
- Styling architecture — stack-specific examples inside
- Naming patterns — stack-specific examples inside
- Utility classes as build tool — stack-specific examples inside
Components
- Component classification — when to split
- Component state machines — legal states, 2^n prop explosion, split heuristics
- Interaction states (mandatory) — hover is not optional
- Primitive components — specs for 16 primitives
- Data display patterns — tables and grids from primitives
Accessibility
- Accessibility rules — the gates
- Accessibility testing workflow — tools, manual checks, PR checklist
Design process
- UI/UX workflow — Strategy/UX/UI levels, the 8-phase mission, wireframes-first gate, visual entities
- Industry guidance — what your product category demands
- Live inspiration research — steal from the living, not from memory
- Visual reference workflow
- Style thesis — one vivid sentence before any token; slop has no thesis
- Design vocabulary — name the direction before drawing it
- Design-tool integration
Gates and output
- Pre-flight checklist — token-table sanity before any component work
- Pre-delivery checklist — the exit gate
- Output contract: the design spec — what a finished spec contains
- Constraints for PLAN — template handed to the implementation plan