guide5 min read

Design directions — how to stop your agent building the same page every time

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: "Design directions — how to stop your agent building the same page every time"
https://stackscout.app/guides/design-directions

Read it, then set up what it describes. When you're done, give me a one-line summary.

Ask any coding agent for "a clean landing page" and you already know what you'll get. Warm cream background. A serif display face over a neutral sans. One terracotta or acid-green accent. Rounded cards with a thin left rail. Everything centred. It looks fine. It looks like everything else.

That is not a model failure. It is a briefing failure: "clean and modern" has no opposite, so the model falls back to the average of everything it has seen. This guide is the fix — and it costs you about two minutes before the first line of code.


The trap, stated honestly

We walked into it ourselves. On 31.07.2026 we ran impeccable's detector over our own site, and it flagged the page background: cream, listed as "the default tasteful AI surface, reached for by reflex." We had picked it the same way everyone does — it looked good, and nobody asked "compared to what?"

That question is the whole method.


1 · Never ask for a page. Ask for directions.

The single most valuable prompt you can type is the one that produces no code at all:

Before you write anything: give me four design directions for this page.
Each one gets a name, a one-sentence idea, and its concrete tokens —
type pairing, palette as hex, spacing rhythm, and the one thing it
commits to that the others don't.
No code yet. Make them genuinely different, not four shades of the same idea.

Two things in there do the work:

  • "the one thing it commits to that the others don't" forces divergence. Without it you get four variations of the same safe layout, which is worse than one, because now you feel like you chose.
  • "No code yet" stops the agent from anchoring itself. Once it has written a hero section, every later suggestion bends towards that hero.

If you have the taste skill installed, this is exactly what it is for: it gives the agent vocabulary for style — editorial, brutalist, Swiss, utilitarian — instead of leaving it to interpret "make it prettier."


2 · Judge them in ten seconds, not ten minutes

You do not need to be a designer to pick. Three questions, in this order:

Which one could only be this project? If a direction would work unchanged for a dentist, a fintech and a metal band, it is not a direction. It is a template.

What does it look like when it is wrong? A real direction has a failure mode you can name — "too loud for a legal page", "too quiet for a launch". If nothing about it could go wrong, nothing about it is a decision.

Would you defend the accent colour to someone who hated it? If your answer is "it looked nice", the agent picked, not you.

Pick one. Steal the best single idea from a runner-up — one, not three. Directions stop working the moment you merge them.


3 · Write the choice down, or it will not survive

This is the step everyone skips, and it is the one that actually holds the design together. The direction has to live in a file, not in the chat scrollback:

Write DESIGN.md: the direction we picked, the exact tokens (type, palette
as hex, spacing scale, radius, motion), and the rules that follow from it.
Then read DESIGN.md before every component from now on.

Why a file: chat context gets summarised, trimmed and lost. A file does not. From here on, "does this match DESIGN.md?" is a question with a checkable answer, which is the difference between a design system and a mood.

This is also the handover point in the A site that doesn't look AI-made stack: one step writes DESIGN.md, every later step reads it. Swap that order and you get the generic page back, no matter which skills you installed.


4 · Then use /impeccable live — while you build, not after

Most people install impeccable and run it once, at the end, on a finished page. That is the expensive way round: by then every fix is a rewrite.

/impeccable live is the command almost nobody knows about, and it is the one that belongs in the middle of the work. From the official description:

"Interactive live variant mode. Select elements in the browser, pick a design action, and get AI-generated HTML+CSS variants hot-swapped via HMR. Requires a running dev server."

You keep your dev server running, click the actual element on localhost, choose what should change, and variants swap in through hot reload. No describing a spacing problem in prose — you point at it.

Reach for it exactly when you can see that something is off but cannot name it. That is the case prose is worst at and pointing is best at.

Two conditions, both easy to miss:

  • A dev server has to be running. Live mode has nothing to hot-swap otherwise.
  • Run /impeccable init once in the project first. It pre-configures live mode, and without it you will get a confusing failure rather than a clear one.

The full command map — shape, critique, audit, polish and the rest — is in All 23 impeccable commands.


The routine, end to end

1  ask for four directions, no code
2  pick one, steal one idea from a runner-up
3  DESIGN.md — tokens and rules, written down
4  /impeccable init                    (once per project)
5  build, with the dev server running
6  /impeccable live                    (whenever something looks off)
7  /impeccable critique → audit → polish   (before shipping, in that order)

Steps 1–3 take two minutes and decide how the page looks. Steps 4–7 are the ones that keep it that way.


What this does not do

It does not give you taste. It gives you options, and a defensible reason for the one you kept. Those are different things, and anyone who promises you the first is selling something.

It does not survive a vague brief. "Four directions for a page" produces four generic directions. The subject has to be concrete — who it is for, what it must do, what it must never look like.

The detector checks rules, not direction. impeccable can tell you contrast is failing, spacing is inconsistent, or that the background is a known AI reflex. It cannot tell you whether the direction is the right one for this project. That decision stays yours — which is also the only part of this worth your time.

✦ 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