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.

Prompt: this guide
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/skillsprototype 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: impeccable and website-builder both write a file called DESIGN.md, with different schemas — and impeccable's 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 — 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

← all guides