Design

The /design slash command is your design partner for frontend interfaces. Sixteen modes cover every visual discipline, from auditing what's broken to shipping production-ready UI.

Usage

/design <mode> [target]

<mode>: the design action you want (see modes below)
[target]: optional file, component, or section to focus on
Freeform prompts work too: /design make this hero stronger
/design help shows the full usage guide

Modes

Mode	Group	What it does
`redesign [target]`	Build	Change the full visual direction of existing UI
`setup`	Build	Create or update `brief.md` with project design context
`tokenize [target]`	Build	Tokenize repeated patterns into reusable components
`review [target]`	Review	Judgment pass with scores and actionable fixes
`checkup [target]`	Review	Fast health scan with clear prescriptions
`smell [target]`	Review	Find generic AI-looking patterns and remove them
`finish [target]`	Refine	Final pre-ship pass with verified claims
`voice [target]`	Refine	Make marketing surfaces memorable and specific
`surface [target]`	Refine	Harden app UI for real operators and real data
`refine [target]`	Refine	Remove noise and strengthen what remains
`typeset [target]`	Style	Type scale, hierarchy, rhythm, measure
`recolor [target]`	Style	Palette, roles, contrast, state color
`relayout [target]`	Style	Structural composition, not minor spacing
`motion [target]`	Style	Page-wide motion system and missing animations
`responsive [target]`	Frontend	Recompose across mobile, tablet, desktop
`interaction [target]`	Frontend	States, affordances, feedback, touch targets

Blank projects

If no HTML/CSS/JS exists, /design auto-creates index.html with Tailwind + design tokens, then applies the requested mode. Design decisions are documented in .commandcode/taste.md.

Core rules

Color: OKLCH-first. Pick a strategy (Restrained, Committed, Full palette, Drenched) before picking a hue. Never default to indigo.
Typography: Keep body text at 65–75ch. Minimum 1.25 scale ratio between hierarchy steps. Three fonts only when each has a clear role: Display, Body, UI.
Layout: 1-4-9 rhythm system (4px, 16px, 36px). Use gap, never sibling margins. Nested cards are always wrong.
Motion: Animate transform and opacity only. Ease out, never bounce. Respect prefers-reduced-motion.
Interaction: Nine states per interactive element, idle, hover, active, focused, loading, empty, error, disabled, overflow. Touch targets ≥ 44×44px.
Responsive: Mobile-first with min-width. Never gate functionality behind hover. Adapt the interface, never amputate the feature.

Register: voice or surface

Identify which register you're designing for before starting:

Voice: marketing, landing, campaign, portfolio. Permission for committed color, typographic risk, ambitious motion. The visitor's gut reaction in the first 1.5 seconds is the deliverable. Use /design voice.
Surface: dashboards, tools, admin panels, app UI. Bias toward consistency and earned familiarity. An experienced operator should navigate by muscle memory. Use /design surface.

Workflow

A realistic flow from start to finish:

# 1. Set up project context
/design setup

# 2. Audit what exists
/design checkup
/design smell

# 3. Refine with focused modes
/design typeset src/components/Hero.tsx
/design recolor
/design relayout
/design motion src/components/Button.tsx

# 4. Tokenize and harden
/design tokenize
/design surface

# 5. Final pass before shipping
/design responsive
/design finish

Examples

Build

/design redesign src/pages/Home.tsx         # Full visual rework, logic untouched
/design setup                               # Create brief.md for this project
/design tokenize src/components/            # Extract tokens from repeated patterns

Review

/design checkup                             # Five-minute health scan across the whole UI
/design smell src/components/Hero.tsx       # Detect and remove AI design clichés
/design review src/pages/landing.tsx        # Scored critique with walkthrough and fixes

Refine

/design finish                              # Pre-ship pass: states, overflow, consistency
/design voice src/pages/landing.tsx         # Sharpen brand identity and art direction
/design surface src/app/dashboard/          # Harden density, states, and operator flow
/design refine src/components/Card.tsx      # Sub-moves: push, settle, strip, proof, delight, overdrive

Style

/design typeset src/components/Hero.tsx     # Fix type scale, hierarchy, measure
/design recolor                             # Rebuild color system with OKLCH
/design relayout src/layouts/Grid.tsx       # Fix spacing rhythm and composition
/design motion src/components/Button.tsx    # Add motion system and missing transitions

Frontend

/design responsive src/pages/Home.tsx       # Recompose across all six viewport sizes
/design interaction src/components/Form.tsx # Build all nine states and hit areas

Freeform: auto-picks the right mode

/design the hero feels generic and weak
/design cards look AI-generated, fix them
/design make this dashboard feel production-ready
/design the type hierarchy is flat and hard to scan