guide5 min read
A website that doesn't look AI-made
Give this to your agent
Paste into Claude Code, Cursor — any agent. It reads the guide and does the setup for you.
Follow this StackScout guide in my project: "A website that doesn't look AI-made" https://stackscout.app/guides/website-that-doesnt-look-ai-made Read it, then set up what it describes. When you're done, give me a one-line summary.
Four tools, in one specific order. Swap the order and you get the same generic page you'd have gotten without them — which is why this guide is mostly about sequence, not features.
All four are other people's work. We link them; we don't host them. What's ours is the order and the two conflicts nobody else resolves.
| # | Step | Tool | Licence |
|---|---|---|---|
| 1 | Collect references | — | — |
| 2 | Force different directions | impeccable | Apache-2.0 |
| 3 | Pick one | emilkowalski/skills | MIT |
| 4 | Lock it in a file | — | — |
| 5 | Gate it before the commit | impeccable detector | Apache-2.0 |
Style vocabulary comes from taste-skill (MIT), shadcn tokens from tweakcn (Apache-2.0).
Step 1 — Ten references, each described in one line
Three the client already likes, seven you pick to cover opposite ends: dense/airy, editorial/product, quiet/loud.
Then actually read the screenshots. For each, name in one sentence: the grid, the type scale, the colour share, and what carries the emphasis.
A reference you haven't described is a reference you haven't used. It's decoration in a folder.
Step 2 — Force directions, because the model won't
This is the step everyone skips, and it's the only one that breaks the rut.
The model does not roll its own dice. impeccable's own concept-seed.mjs documents the
measurement: 30 out of 35 concepts came back identical across 16 different prompt
framings. You are not getting variety by re-prompting. You are getting the same answer in
new words.
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 — you compose the five roles
(bg, surface, ink, accent, muted) yourself. It deliberately refuses to 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, so you can go back.
Step 3 — Pick one, and resolve the conflict
Here two of the tools disagree. On purpose. Resolve it by context:
| Situation | Use | Why |
|---|---|---|
| Client project | prototype picker, 3–5 side by side |
The client has to co-decide. The 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. |
emilkowalski/skills → prototype builds 3–5 variants of one component behind a picker you
can flip through, with promote and cleanup built in.
Then flip them in a real browser (impeccable live) and fix what's wrong in place — it
writes back to the actual source, not to a scratch file.
Step 4 — Lock it, and decide who owns the file
Write DESIGN.md at the project root: five colour roles with hex + OKLCH, both typefaces with
their scale, radius, spacing unit, motion level, and a do-not list of three things this
direction rules out.
⚠️ The collision nobody warns you about:
impeccableandwebsite-builderboth write a file calledDESIGN.md, with different schemas — and impeccable'sdoctor.mjsonly recognises drift in its own format. Pick one owner before both run in the same project. Default: impeccable's schema, andwebsite-builderreads it rather than writing its own.
Step 5 — The gate, before the commit
npx impeccable install
The design hook runs the detector on direct UI file edits and surfaces findings straight back into the agent flow — not as a report you read later. 59 deterministic detector rules (quoted from the README): same input, same verdict, no opinion.
What it catches is the stuff that never shows up in a screenshot: grey-on-grey contrast, focus states formatted away and never replaced, four different spacings for the same level, everything on a 300 ms ease.
Run emil-design-eng for the interaction work and review-animations for a hard
block/approve verdict against ten standards. Don't ship on a block — that's the point of
a gate.
What this does not do
The detector only checks what's been written as a rule. Whether the direction is any good, it cannot tell you. That's why it sits at step 5 — after the direction, not instead of it. A clean detector run on an arbitrary direction gives you a clean arbitrary page.
Skip the setup
The order, both conflict resolutions and the quality checklist are also packaged as one skill. It is not part of the active library right now — it still installs, it is simply not something we are actively maintaining:
npx stackscout add design-direction
Credits: impeccable — Paul Bakaus, Apache-2.0 · skills — Emil Kowalski, MIT ·
taste-skill — Leonxlnx, MIT · tweakcn — Apache-2.0. Licences checked at source on
31 July 2026.
✦ free guides, every week
New setups like this land with each weekly drop — your agent can pull them live through the MCP.
See the connector