Design Direction

The model does not roll its own dice. Left alone it returns the same layout, the same type pairing and the same accent every time — measured, not assumed: impeccable's own concept-seed.mjs documents "30/35 identical concepts across 16 prompt framings." This skill breaks that, then narrows back down to one direction and writes it down.

Run it before any component is built. Retrofitting a direction never works.

Requirements

npx impeccable install                      # Paul Bakaus · Apache-2.0
npx skills@latest add emilkowalski/skills   # Emil Kowalski · MIT

Optional but useful: Leonxlnx/taste-skill (MIT) for style vocabulary, tweakcn.com/editor/theme for shadcn tokens.

Step 1 — Look at real references

Collect 10 screenshots: three the user already likes, seven you choose to cover opposite ends (dense/airy, editorial/product, quiet/loud).

Save each one into refs/ at desktop width. Use whatever screenshot tool you have — your browser tool, or this zero-install one-liner:

npx -y capture-website-cli <url> --output refs/<name>.png --width 1440 --full-page

Then actually read the PNGs. For each, name in one line: grid, type scale, colour share, and what carries the emphasis. A reference you have not described is a reference you have not used.

Step 2 — Force different directions

In this order. Do not skip step 2b — it is the only part that breaks the rut.

node <impeccable>/scripts/palette.mjs --from <project-key>
node <impeccable>/scripts/concept-seed.mjs --scope direction --mode <persuade|operate|read|experience>

• palette.mjs returns one OKLCH seed from 129 curated colours. Compose the five roles (bg, surface, ink, accent, muted) yourself from brief + seed. It deliberately does not hand you a finished palette.
• concept-seed.mjs assigns an index away from the model's own shortlist and adds six challengers. --reroll <n> is reproducible.
• Cross-check the result against design-vault/guides/style-presets.md: is it near an existing preset, or genuinely new? Near a preset is allowed — unknowingly near is not.
• Build 3–5 variants of one component with emilkowalski/skills → prototype. It puts them behind a picker you can flip through, with promote/cleanup.

Step 3 — Pick one

Two of the tools disagree here, on purpose. Resolve it by context:

Situation	Use	Why
Client project	prototype picker, 3–5 side by side	The client has to co-decide; a lineup is the decision
Your own surface	concept-seed assigned roll + --reroll	A lineup hands selection back to a taste function, and taste functions pick the safest card

Then flip the variants in a real browser (impeccable live) and change what is wrong in place — it writes back to the actual source, not to a scratch file.

Step 4 — Lock it in one file

Write DESIGN.md at the project root: the five colour roles with hex + OKLCH, both type faces with their scale, radius, spacing unit, motion level, and a Do-not list of three things this direction rules out.

⚠️ impeccable and website-builder both write a file called DESIGN.md with different schemas, and impeccable/scripts/doctor.mjs only recognises drift in its own format. Pick one owner before both run in the same project. Default: impeccable's schema, and website-builder reads it rather than writing its own.

Step 5 — Motion pass, then ship gate

# after components exist
npx shadcn@latest apply --preset <id> --only theme,font   # or export from tweakcn

Run emil-design-eng for the interaction work, then review-animations — it returns a hard block or approve verdict against ten non-negotiable standards. Finish with impeccable's detector (59 deterministic rules). Do not ship on a block.

Output

A DESIGN.md at the project root, a refs/ folder with the ten described screenshots, and 3–5 promoted variants in the repo with one marked as chosen.

Quality checklist

• Ten references collected and each described in one line
• concept-seed.mjs was actually run — not "I considered several directions"
• The chosen direction was checked against style-presets.md and the relation named
• DESIGN.md exists, has all five colour roles, and a Do-not list of three
• One owner for DESIGN.md decided and written down
• review-animations returned approve, and the detector is clean

Credits

impeccable — Paul Bakaus, Apache-2.0 · skills — Emil Kowalski, MIT · taste-skill — Leonxlnx, MIT · tweakcn — Apache-2.0. We link them, we do not host them. This skill is the order they run in.