design

1# /design — Design Manifest Generator
2 
3## When to Use
4 
5- At the start of a new project (generate starter manifest from preferences)
6- On an existing project that has no manifest (extract patterns from existing code)
7- When visual inconsistency is noticed ("why do we have 4 different button styles?")
8- When /do routes "design", "style guide", "visual consistency", "design manifest"
9 
10## Protocol
11 
12### Step 1: DETECT MODE
13 
14Check for existing styles: look for `tailwind.config.*`, global CSS files, or component files with style patterns. If any exist, use Extract Mode. If none exist or the user says "new project", use Generate Mode.
15 
16### Step 2: GATHER INPUT
17 
18**Extract Mode**: Read style sources (tailwind config, global CSS, component files). Present findings to user and confirm before writing.
19 
20**Generate Mode**: Ask up to 4 questions about feel, color mode, brand colors, and layout density. Use sensible defaults for anything not specified.
21 
22### Step 3: WRITE MANIFEST
23 
24Write to `.planning/design-manifest.md` using the template defined below. Every section must have real values — no placeholders.
25 
26### Step 4: CONFIRM
27 
28Present a summary of the manifest to the user: "Here's your design manifest. It will be used by the post-edit hook to flag deviations. Anything to change?"
29 
30## Modes
31 
32### Extract Mode (existing project has styles)
33 
341. Read `tailwind.config.*` — extract colors, spacing, fonts, breakpoints
352. Read global CSS files — extract CSS variables, base styles
36…