Design Direction
Explore and define your project's visual identity through structured dialogue. Generates a custom preset file that integrates with the design quality engine.
Setup
- Check if the project already has a custom preset:
- Look for
.claude/presets/*.md in the project root
- Check the project's
CLAUDE.md for **Aesthetic:** configuration
- If an existing preset is found, ask before proceeding (see Arguments)
Arguments
| Argument |
Behavior |
| (none) |
Auto-detect: if preset exists, ask what to do. If no preset, start fresh. |
amend |
Modify the existing preset — edit specific sections without starting over |
variant |
Create a new preset based on the existing one — fork and diverge |
fresh |
Start from scratch — ignore any existing preset |
Partial invocation: /design:direction colors modifies only the color section of an existing preset.
Execution
Step 1: Conversation (5 questions max)
Use AskUserQuestion for structured exploration. Ask one question at a time.
Q1. What kind of interface?
| Option |
Description |
| Data-dense tool |
Dashboards, analytics, dev tools — high info density, functional |
| Content app |
Notes, docs, reading — text-forward, calm |
| Marketing / landing |
Showcase, conversion — bold, persuasive |
| Transactional |
E-commerce, forms, workflows — clear, trustworthy |
Q2. How should it feel?
| Mood |
Characteristics |
| Quiet |
Near-monochrome, system fonts, generous whitespace, no stagger animations. The interface disappears. |
| Confident |
Distinctive display font, dark backgrounds, generous sizing. The interface commands attention. |
| Warm |
Rounded corners, warm neutrals, friendly typography. The interface feels approachable. |
| Sharp |
Monospace accents, tight spacing, high contrast. The interface feels technical and precise. |
| Bold |
Saturated colors, large type, strong gradients. The interface makes a statement. |
Q3. Name 1-3 apps you admire visually
Open-ended with suggestions. This is the primary anti-slop mechanism — it grounds the aesthetic in real taste rather than generic defaults.
If references match a starter preset: Offer it directly.
- Linear, Mercury, Raycast → "These align closely with the
clean-functional preset. Want to use it as-is, or customize from there?"
- Stripe, Vercel, Resend → "These match
premium-depth. Use it or customize?"
- Apple, Notion, Things → "These match
refined-simple. Use it or customize?"
Q4. Light or dark?
| Option |
Maps to |
| Light-first |
White/near-white backgrounds, dark text. Dark mode as secondary. |
| Dark-first |
Dark backgrounds, light text. The primary experience. |
| Both equally |
True dual-mode with CSS variables. Neither is secondary. |
Q5. Accent color? (optional)
| Option |
Behavior |
| Yes — provide hex or description |
Use as primary accent throughout |
| No — auto-pick based on mood |
Select from mood-appropriate palette |
Step 2: Generate Preset
Write a preset file matching the 9-section schema used by built-in presets:
- Philosophy — 2-3 sentences capturing the aesthetic intent. Must contain one unique "signature move" phrase. Bad: "Clean, modern, and professional." Good: "Quiet authority. The interface earns trust through what it omits."
- Reference Apps — The apps from Q3, with specific study notes
- Typography — Font choices, heading hierarchy, body settings, anti-patterns
- Color — Palette philosophy, neutrals, accent, status colors, anti-patterns
- Spacing — Grid, component padding, section spacing, anti-patterns
- Elevation — Shadow/border philosophy, levels, anti-patterns
- Motion — Animation philosophy, timing, key moments, anti-patterns
- Component Patterns — Cards, buttons, navigation, forms
- Do / Don't Examples — Code examples (3-4 categories)
Anti-Slop Rules
Never converge — Maintain variety across generations:
- Rotate neutral families (stone/gray/slate/zinc)
- Vary accent colors per mood
- Don't always default to Inter
Commit to an extreme — Each mood has a strong personality:
- Quiet should be aggressively minimal
- Bold should lean hard into saturation
- The enemy is timid middle-ground
Context-specific — The Philosophy section must read as written for THIS project, not as a generic template.
Font Mapping (per mood)
| Mood |
Headings |
Body |
| Quiet |
Inter, SF Pro, system-ui |
Same (consistency is the point) |
| Confident |
Satoshi, GT Walsheim, Geist |
Geist, Inter |
| Warm |
Instrument Sans, Plus Jakarta Sans |
Same or slightly different weight |
| Sharp |
JetBrains Mono (display), Space Grotesk |
Geist, Inter |
| Bold |
Clash Display, Syne, Cabinet Grotesk |
Geist, DM Sans |
Step 3: Write Files
Write preset: <project-root>/.claude/presets/<name>.md
- Name derived from the mood + interface type (e.g.,
quiet-dashboard.md, bold-landing.md)
- Follow the exact 9-section schema from built-in presets
Update CLAUDE.md: Add or update the ## Design Quality section:
## Design Quality
**Layers:** craft, a11y
**Aesthetic:** <preset-name>
**Strictness:** standard
**Teaching:** normal
Step 4: Confirm
Show a summary of what was generated:
Direction set!
Preset: .claude/presets/<name>.md
Mood: [mood]
Fonts: [heading] / [body]
Accent: [color]
Dark mode: [yes/no/both]
CLAUDE.md updated with `Aesthetic: <name>`.
Next: Run `/design:brief` to generate constraints from this preset.
Edge Cases
- Contradictory answers (e.g., "Quiet" mood + Bold reference apps): Surface the tension and offer two interpretations as variants
- Existing preset + amend: Show current preset summary, ask which sections to change, preserve unchanged sections
- No opinion on Q5: Auto-select based on mood (Quiet → desaturated blue, Confident → electric blue, Warm → coral, Sharp → emerald, Bold → vivid purple)
Preset Resolution Order
When loading a preset, the orchestrator checks:
<project-root>/.claude/presets/<name>.md (project-local, highest priority)- Plugin built-in: presets/ (fallback)
This means custom presets from /design:direction automatically take priority over built-in ones.
1---2name: design-direction3description: Creative exploration for defining a project's visual direction. Guides through structured dialogue covering typography, color, spacing, then generates a custom preset file and updates CLAUDE.md.4---56# Design Direction78Explore and define your project's visual identity through structured dialogue. Generates a custom preset file that integrates with the design quality engine.910## Setup11121. Check if the project already has a custom preset:13 - Look for `.claude/presets/*.md` in the project root14 - Check the project's `CLAUDE.md` for `**Aesthetic:**` configuration152. If an existing preset is found, ask before proceeding (see Arguments)1617## Arguments1819| Argument | Behavior |20|----------|----------|21| (none) | Auto-detect: if preset exists, ask what to do. If no preset, start fresh. |22| `amend` | Modify the existing preset — edit specific sections without starting over |23| `variant` | Create a new preset based on the existing one — fork and diverge |24| `fresh` | Start from scratch — ignore any existing preset |2526**Partial invocation:** `/design:direction colors` modifies only the color section of an existing preset.2728## Execution2930### Step 1: Conversation (5 questions max)3132Use **AskUserQuestion** for structured exploration. Ask one question at a time.3334#### Q1. What kind of interface?3536| Option | Description |37|--------|-------------|38| Data-dense tool | Dashboards, analytics, dev tools — high info density, functional |39| Content app | Notes, docs, reading — text-forward, calm |40| Marketing / landing | Showcase, conversion — bold, persuasive |41| Transactional | E-commerce, forms, workflows — clear, trustworthy |4243#### Q2. How should it feel?4445| Mood | Characteristics |46|------|----------------|47| **Quiet** | Near-monochrome, system fonts, generous whitespace, no stagger animations. The interface disappears. |48| **Confident** | Distinctive display font, dark backgrounds, generous sizing. The interface commands attention. |49| **Warm** | Rounded corners, warm neutrals, friendly typography. The interface feels approachable. |50| **Sharp** | Monospace accents, tight spacing, high contrast. The interface feels technical and precise. |51| **Bold** | Saturated colors, large type, strong gradients. The interface makes a statement. |5253#### Q3. Name 1-3 apps you admire visually5455Open-ended with suggestions. This is the primary anti-slop mechanism — it grounds the aesthetic in real taste rather than generic defaults.5657**If references match a starter preset:** Offer it directly.58- Linear, Mercury, Raycast → "These align closely with the `clean-functional` preset. Want to use it as-is, or customize from there?"59- Stripe, Vercel, Resend → "These match `premium-depth`. Use it or customize?"60- Apple, Notion, Things → "These match `refined-simple`. Use it or customize?"6162#### Q4. Light or dark?6364| Option | Maps to |65|--------|---------|66| Light-first | White/near-white backgrounds, dark text. Dark mode as secondary. |67| Dark-first | Dark backgrounds, light text. The primary experience. |68| Both equally | True dual-mode with CSS variables. Neither is secondary. |6970#### Q5. Accent color? (optional)7172| Option | Behavior |73|--------|----------|74| Yes — provide hex or description | Use as primary accent throughout |75| No — auto-pick based on mood | Select from mood-appropriate palette |7677### Step 2: Generate Preset7879Write a preset file matching the 9-section schema used by built-in presets:80811. **Philosophy** — 2-3 sentences capturing the aesthetic intent. Must contain one unique "signature move" phrase. Bad: "Clean, modern, and professional." Good: "Quiet authority. The interface earns trust through what it omits."822. **Reference Apps** — The apps from Q3, with specific study notes833. **Typography** — Font choices, heading hierarchy, body settings, anti-patterns844. **Color** — Palette philosophy, neutrals, accent, status colors, anti-patterns855. **Spacing** — Grid, component padding, section spacing, anti-patterns866. **Elevation** — Shadow/border philosophy, levels, anti-patterns877. **Motion** — Animation philosophy, timing, key moments, anti-patterns888. **Component Patterns** — Cards, buttons, navigation, forms899. **Do / Don't Examples** — Code examples (3-4 categories)9091### Anti-Slop Rules92931. **Never converge** — Maintain variety across generations:94 - Rotate neutral families (stone/gray/slate/zinc)95 - Vary accent colors per mood96 - Don't always default to Inter97982. **Commit to an extreme** — Each mood has a strong personality:99 - Quiet should be aggressively minimal100 - Bold should lean hard into saturation101 - The enemy is timid middle-ground1021033. **Context-specific** — The Philosophy section must read as written for THIS project, not as a generic template.104105### Font Mapping (per mood)106107| Mood | Headings | Body |108|------|----------|------|109| Quiet | Inter, SF Pro, system-ui | Same (consistency is the point) |110| Confident | Satoshi, GT Walsheim, Geist | Geist, Inter |111| Warm | Instrument Sans, Plus Jakarta Sans | Same or slightly different weight |112| Sharp | JetBrains Mono (display), Space Grotesk | Geist, Inter |113| Bold | Clash Display, Syne, Cabinet Grotesk | Geist, DM Sans |114115### Step 3: Write Files1161171. **Write preset:** `<project-root>/.claude/presets/<name>.md`118 - Name derived from the mood + interface type (e.g., `quiet-dashboard.md`, `bold-landing.md`)119 - Follow the exact 9-section schema from built-in presets1201212. **Update CLAUDE.md:** Add or update the `## Design Quality` section:122 ```markdown123 ## Design Quality124125 **Layers:** craft, a11y126 **Aesthetic:** <preset-name>127 **Strictness:** standard128 **Teaching:** normal129 ```130131### Step 4: Confirm132133Show a summary of what was generated:134135```136Direction set!137138Preset: .claude/presets/<name>.md139Mood: [mood]140Fonts: [heading] / [body]141Accent: [color]142Dark mode: [yes/no/both]143144CLAUDE.md updated with `Aesthetic: <name>`.145146Next: Run `/design:brief` to generate constraints from this preset.147```148149## Edge Cases150151- **Contradictory answers** (e.g., "Quiet" mood + Bold reference apps): Surface the tension and offer two interpretations as variants152- **Existing preset + amend:** Show current preset summary, ask which sections to change, preserve unchanged sections153- **No opinion on Q5:** Auto-select based on mood (Quiet → desaturated blue, Confident → electric blue, Warm → coral, Sharp → emerald, Bold → vivid purple)154155## Preset Resolution Order156157When loading a preset, the orchestrator checks:1581. `<project-root>/.claude/presets/<name>.md` (project-local, highest priority)1592. Plugin built-in: [presets/](../design-quality/presets/) (fallback)160161This means custom presets from `/design:direction` automatically take priority over built-in ones.
seansmithworks