code/commands/builtins/design.md

metadata

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.