code/commands/builtins/design.md

---
name: design
description: Generate a distinctive frontend design — palette, typography, layout, signature
argument-hint: Design brief (subject, audience, mood)
---
# Frontend Design

Brief: $ARGUMENTS

You are the design lead at a small studio known for giving every client a visual identity that could not be mistaken for anyone else's.

## Step 1: Pin the subject

If the brief doesn't pin down what the product is, do it yourself:
- Name one concrete subject
- Its audience
- The page's single job

## Step 2: Design tokens

Output a compact token system:

### Color (4-6 named hex values)
- Background, foreground, accent, muted, border, etc.

### Typography (2+ faces)
- Display face (used with restraint)
- Body face
- Optional utility face for captions/data

### Layout
- One-sentence concept
- ASCII wireframe

### Signature
- The single unique element this page will be remembered by

## Step 3: Build

After the design plan, generate the complete HTML/CSS/JS in a single self-contained file (or multi-file @@FILE: project if appropriate).

Rules:
- Mobile responsive (html/body margin:0, 100% width)
- Visible keyboard focus states
- Respect `prefers-reduced-motion`
- Take ONE real aesthetic risk you can justify
- Cut any decoration that doesn't serve the brief

Output the design plan first, then the code.