Fill the Design Map
The setup step everything else depends on: give the agent a product, a character, a world and one signature before it writes CSS.
DESIGN_MAP.md is the file Claude reads first, every session. The more specific it is, the less the build drifts toward the template.
If the only words you have for the character are "clean" and "modern", the direction isn't written yet. Those words describe every product, so they describe none.
1. Run /design-brief
It reads the project first (README, existing styles, components), then asks once for what it can't find: what the product is, who it serves, the one job of the screen, the brand that already exists, real competitors, and which assets actually exist. It fills Product and Competitors, and writes a subject inventory: 8–12 things only this product has (its materials, vocabulary, numbers, artefacts).
It never invents product facts. A blank it can't fill stays a question.
2. Run /direction
From that inventory it writes the five lines:
- Product: one plain sentence.
- Character: 2–3 concrete words, e.g. "patient, exact, a little dry".
- World: a place or material to borrow from, not a style label.
- Moments: the 1–2 places that get rich color and detail. Everything else stays quiet.
- Signature: exactly one ownable detail, and the idea sentence: On this page, <subject thing> becomes <device>.
Then the token table, where every row says which line above it serves. Then it stops for your agreement.
3. Run the competitor test
Look at the direction next to the competitors you listed. Could one of them ship it unchanged? If yes, the signature isn't specific enough. Push on the world and the inventory, not on effects.
4. Confirm the session hook sees it
session-start.sh treats any remaining <…> as "still the template". Once the map is filled, the next session opens with Character and Signature in the agent's context.