How a brief becomes something that doesn’t look machine-made — and how the same process runs inside every deck Wooo builds.
Subject, audience, job. Named concretely before any aesthetic move.
A token system committed in writing. No slides yet.
Plan checked against a named list of defaults. Revised.
Plan enters as hard constraint, not suggestion.
Render, look, cut one thing.
└── 05 and 03 both loop back to 02. Stages 02 and 03 are where quality is won or lost; everything else is execution.
Most AI-built work isn’t ugly. It’s generic — it looks made for nobody in particular, because the model went straight from prompt to output and filled every unspecified gap with a statistical average of everything it has seen.
The entire method is one move: put a planning artifact between the brief and the build. Once a palette is pinned to six hex values and a type scale is fixed, there is nothing left to average toward.
Everything below is scaffolding around that move.
Before a single aesthetic decision, three things have to be concrete: the subject in specific terms, the audience and what they already know, and the primary job — the one thing this must accomplish.
If the brief doesn’t supply them, they get proposed and confirmed rather than assumed. Distinctive choices come out of the subject’s own world — its industry, materials, vocabulary. A psychometric assessment for HR directors and a music app for teenagers should share almost no visual DNA.
A design that would work equally well for a fintech, a yoga studio, or a B2B dashboard. That isn’t versatility. It’s the absence of a point of view.
A compact token system, committed before any output exists.
| Token | What gets committed |
|---|---|
| Colour | Four to six hex values, named for intent — not primary-500. Naming forces you to say what each one is for. |
| Type | One family, or two clearly distinct ones. Roles assigned. A real scale with deliberate weights and widths. |
| Layout | A one-sentence concept, then ASCII wireframes to compare options. Alignment decided explicitly — left, centred, justified. |
| Principles | Two or three lines on what makes this specific artifact not-generic. |
They’re cheap enough to make three and discard two — which is the only way you genuinely compare layouts instead of committing to whichever one appeared first.
A — RAIL B — STACKED C — SPLIT
┌──┬──────────┐ ┌───────────────┐ ┌──────┬────────┐
│01│ ▓▓▓▓▓▓▓▓ │ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓ │ │ ▓▓▓▓ │ │
│ │ ──────── │ │ ───────────── │ │ ▓▓▓▓ │ ████ │
│02│ ▓▓▓▓▓▓ │ │ ▓▓▓▓▓▓▓ │ │ ──── │ ████ │
│ │ ──────── │ │ ───────────── │ │ ▓▓▓▓ │ │
└──┴──────────┘ └───────────────┘ └──────┴────────┘
marks carry everything one demo does the
the sequence measure, quiet talking, type
stays supportThis sheet uses A. The rail marks are legitimate here because the pipeline genuinely is a sequence — see the note on numbered markers in stage 04.
The first thing a viewer sees should be the most characteristic thing in the subject’s world — a headline, an image, a figure, a live demo. Big-number-plus-small-label plus gradient accent is the default treatment. It’s occasionally right. It’s never a choice if you never considered alternatives.
The stage nearly everyone skips, and the highest-leverage one in the pipeline.
The test: re-derive the plan from a generic version of the brief. Anything that appears in both is a default wearing a costume. Revise it, and say what changed and why.
Generated design currently clusters around five recognisable looks. Rendered honestly, at real values:
WORD — fragment labels. Tinted near-black for black. Mono for small data labels. An arrow glued to every button.Every one of these is legitimate for some brief. The problem is that they appear regardless of subject — they’re defaults, not choices. So: where the brief pins an axis down, follow the brief exactly, including when it asks for one of these looks. Where the brief leaves an axis free, don’t spend that freedom on a default.
Line length under about 80 characters. Serif can run slightly longer, and serif body copy wants a little more line-height than sans. When type acts as a headline, make the treatment part of the design rather than a neutral pipe for the words.
Three treatments to avoid — the commonest generated tells:
The colour pop implies emphasis the sentence doesn’t need. It’s decoration pretending to be hierarchy.
Weight and tracking do the work. One voice, no interruption mid-sentence.
The label restates the heading. It adds a line and no information.
The heading was already doing that job. If a label genuinely carries information the heading can’t, keep it — but check first.
Outlines, borders, numbering, eyebrows, dividers — these should encode something about the content, not decorate it. The 01 / 02 / 03 marker is only correct when the content genuinely is a sequence.
These don’t happen in order. The numbers assert a sequence that doesn’t exist.
Step two cannot precede step one. The marker is carrying information.
Non-user-triggered motion, sparingly and deliberately. One orchestrated moment — a single page-load sequence, one reveal — lands harder than scattered effects. Fade-and-slide-up on every section plus a hover transition on every card is the generic default and reads as machine-made.
Motion that answers a user action is always welcome, because it shows what changed. This sheet spends its entire motion budget on one thing: the five pipeline nodes staging in on load. Nothing else moves unless you touch it.
Words are design content, not decoration — and generated copy makes work feel templated just as fast as generated layout does.
Spend your boldness in one place. One element is the memorable thing; everything around it stays quiet and disciplined. On this sheet it’s the five specimen cards in stage 03 — which is why the rest is near-monochrome and the accents are functional rather than decorative.
Then Chanel’s rule, applied literally: before it leaves the house, look in the mirror and remove one accessory.
A quality floor gets built in without being announced — responsive to mobile, visible keyboard focus, prefers-reduced-motion respected, accessible contrast, a palette that actually harmonises.
If your environment can screenshot, screenshot and look. Models are markedly better at critiquing a rendered image than at imagining one from their own source.
There’s no clever algorithm here — a set of constraints and a sequence. But how you stage the calls changes results substantially.
| Stage | Call shape | Why |
|---|---|---|
| 01 Ground | Cheap model, or inline | Extraction, not judgement. |
| 02 Plan | Strong model, own call | Highest-value reasoning in the pipeline. Bundled with generation, the model rushes the plan to reach the output. |
| 03 Audit | Strong model, separate call, fresh framing | Self-critique inside the generating context is weak. Reframed as “audit against these five named defaults,” it measurably outperforms “is this good?” |
| 04 Build | Strong model, plan in system prompt | Plan tokens are constraints, not suggestions. |
| 05 Critique | Strong model + screenshot | Vision on rendered output catches what source review misses. |
Biggest single structural gain: split 02 and 04 into different calls. One prompt saying “plan then build” yields a perfunctory plan and generic output, because the model optimises for the visible deliverable.
Second biggest: stage 03 needs a concrete list. Vague self-review does nothing. Five named clusters produce real revisions.
Lift these directly.
You're the design lead at a studio known for giving every client a
visual identity nobody mistakes for anyone else's. This client has
already rejected proposals that felt templated. They're paying for
a point of view.
BRIEF: {brief}
SUBJECT: {subject}
AUDIENCE: {audience}
JOB: {primary_job}
Output a design plan only. No code.
COLOR 4-6 hex values, each named for its intent
TYPE typefaces and roles; the scale, with weights and widths
LAYOUT one-sentence concept, then 2-3 ASCII wireframes to
compare. State the alignment decision explicitly.
HERO what the viewer sees first, and why it is the most
characteristic thing in this subject's world
PRINCIPLES 2-3 lines: what makes this page unlike a generic one
Derive choices from the subject's own industry, materials and
vernacular. Take aesthetic risk where it is justified.PLAN: {plan}
BRIEF: {brief}
1. Re-derive a plan from a GENERIC version of this brief.
2. Diff it against the plan above.
3. Anything appearing in both is a default, not a choice. Revise it.
Then check explicitly against these five clusters:
a. cream #F4F1EA + high-contrast serif + terracotta #D97757
b. near-black + a single acid-green or vermilion accent
c. broadsheet: hairline rules, 0 radius, dense columns
d. SaaS-card kit: identical rounded cards, one radius on
everything, rgba(0,0,0,.1) shadow on each, gradient washes
e. template chrome: ALL-CAPS eyebrows, "A · B · C" meta strings,
"WORD — fragment", #0B0B0B for black, mono data labels,
"→" appended to buttons
Where the brief PINS an axis, follow the brief exactly — including
when it asks for one of these looks. Only revise where the brief
left the axis free.
Output: revised plan + what changed and why.The plan goes in the system prompt as binding constraint. Then:
Build to the plan exactly. Constraints:
TYPE line length < 80ch; serif gets more line-height than sans.
No accenting a single word in a headline. No all-caps
labels. No typographic label above content that doesn't
need one.
STRUCTURE borders, numbering, dividers must encode something about
the content. Only use 01/02/03 if the content really is
a sequence — check first.
MOTION at most ONE orchestrated non-user-triggered moment.
No fade-and-slide-up per section. No hover transition on
every card. Motion answering a user action is always fine.
COPY user's vocabulary, not the system's; active voice; CTA
states what happens; an action keeps its name through the
flow (Publish → Published); errors say what broke and how
to fix it; empty states invite action.
FLOOR responsive to mobile, visible keyboard focus,
prefers-reduced-motion, accessible contrast. Unannounced.
CSS watch specificity — .section vs .cta on section spacing.
RESTRAINT one element is the bold one. Everything else stays quiet.{screenshot}
Would this be mistaken for a generic AI-generated page? Name the
three specific elements that would give it away first.
Then: remove one accessory. Which single element should be cut?DESIGN.md) so the product doesn’t homogenise across iterations.If you take one thing from this: the gap between distinctive and generic is a planning artifact plus a named list of defaults to check against. Not model choice, not temperature, not prompt length.
The model is entirely capable of distinctive work. It reaches for averages when nothing forces it not to. Stage 02 forces it. Stage 03 catches what stage 02 missed.
Everything else is craft detail sitting on top of that.