Asking a coding agent for a beautiful page returns the average of every page it has read. The work below is the opposite of that: nine stages that move each decision out of the prompt and into a file, so the page that ships was designed rather than sampled.
Nine client sites were designed and rebuilt this way in the last year, with no design tool in the loop. This page walks one artifact through the whole cycle, and every command on it is real and installable today.
Stage zero
It starts with a feeling somebody names out loud, and then a real object that already carries it. Photograph the object. Steal its parts. Everything after that is execution.
Skip this and there is nothing for the work to be about, so the model fills the gap with the average of everything it has seen. That average is the page every competitor already has, in the same blue, with the same three cards.
Four parts of one 1974 cassette deck, marked on the photograph. Hover a marker to see what it turned into. The controls underneath are the result, running live.
Built from those four parts
Press play. The keys have travel because the real keys had travel, the meter overshoots because the needle overshot, and the amber only appears when something is actually running.
One word, agreed out loud before anything gets collected. Retro. Clinical. Handmade. Industrial. The word is a filter, and without it every reference looks equally good.
A retro business does not need a retro font. It needs the tape deck: brushed aluminum, chunky transport keys with a physical click, a VU needle that overshoots and settles, orange readouts on near black.
The deck is not going on the page. Its parts are. The keys become the buttons, the needle becomes the progress state, the panel becomes the surface, the readout orange becomes the one accent that means live.
Once a handful of real elements exist, the remaining assets get generated to match: textures, icons, empty state art, social cards. The seed keeps the generated work from drifting back to the default.
Two real searches, captured this morning. Note what is in them: sponsored furniture, dropship boomboxes, and a few frames that are AI images of decks that never existed. The board is not the deliverable. The four parts pulled out of it are.
Ad free grid, saves into clusters. The closest thing to what Pinterest used to be.
Discovery is strong. It is built to keep the scroll going, so pull what is needed and leave.
Blocks and channels, and every block shows the other channels it lives in. Research, not a feed.
Around seventy dollars a year, and heavy users say the same few hundred images circulate.
Visual bookmarking cut to the bone. A grid, a browser extension, and what other designers saved.
No structure to speak of. That is the point, and it is also the limit.
Still the deepest well for physical objects, interiors, packaging, and old print.
The feed is heavy with ads and AI images of things that do not exist. Verify an object is real before designing from it.
The physical world
A photograph of the actual object. A machine, a sign, a menu, a dashboard, a piece of packaging.
The strongest source and the least used. Nobody else has this reference, so nothing built from it looks like everything else.
Then, and only then, generate the rest.
Generation comes last, after the world is decided. A model asked for a retro dashboard with no seed returns the average retro dashboard. A model asked to extend an existing panel, in a stated palette, at a stated angle, returns something that belongs to the page it is going into.
The images beside this were produced that way: Nano Banana Pro, 2k, the two photographs passed in as references, six credits for the set. Cost gets checked before any paid run, and the model gets verified against the live catalogue rather than recalled.
Generated from those photographs
Three images, six credits, one model run with the two photographs above passed in as references. The lamp, the amber meters, and the lace cuff all came from the seed rather than from the prompt. The first one is the hero of the page in the comparison below.
Reference photography, all public domain or CC0, found through Openverse: Nakamichi 550 cassette deck (Wikimedia Commons), hands in a record shop and a record shop interior, and a 1972 H.H. Scott magazine spread. Board captures are screenshots of a live Pinterest search, shown as evidence of the search itself.
A repair shop for vintage audio, written up once and handed over twice. The slop frame is what a good model returns from that brief on its own: gradient headline, three cards, a button in the blue every framework ships with.
The decided frame had the tape deck in the room. Nothing was added to the brief.
The composition
Cut out of its photograph and floated over the type, so the object is the layout.
The only colour on the page
One amber, taken from the meter glass, and the single needle line across the frame.
Every number
Monospaced and amber, set against a display face that runs off the edge.
A searchable reference library that loads into the coding agent before the first line of markup. Without it, a model asked for a design returns the average of everything it has seen. With it, the model has named styles, real palettes, and font pairings to argue from.
Installed here and used as a reference layer. It has not shipped a client site, so treat it as vocabulary, not as the workflow.
UI UX Pro Max by nextlevelbuildernpm install -g ui-ux-pro-max-cliuipro init --ai claudeuipro init --ai claude --globalA model handed a vague prompt returns the middle of its training data. Centered hero, three feature cards, a soft gradient, a button nobody decided the color of.
The failure is not the model. The failure is that no decision was recorded anywhere, so the model made all of them at once, invisibly, and moved on.
Everything below exists to move each of those decisions out of the prompt and into a file that survives the session.
The first command captures product truth only. Who the user is, what the product does, what may never be invented.
No colors. No fonts. No page concepts.
PRODUCT.md holds users, purpose, positioning, constraints, brand commitments, and the evidence on hand. It holds no colors, no fonts, no page concepts.
The section that earns its place fastest is the evidence list, because it states what is real and what future work must not fabricate. Installed is not the same as used. Built is not the same as launched.
$ /impeccable initInterview, then write PRODUCT.mdFour modes, chosen from the surface rather than the product. A tool's landing page is still Persuade. A fashion house's documentation is still Read.
Persuade: the visitor decides and acts. Operate: the visitor completes a task. Read: the visitor understands something. Experience: the visitor is inside the work itself.
The mode decides what the design is allowed to optimize for, which is why it comes before structure. Scanability outranks expression on a dashboard. On a portfolio, the artifact leads and the interface recedes.
$ /impeccable shapePlan the surface before codeFive to seven materially different structures come out of the content and the task, ordered by how well each one resonates.
Then a seed script assigns which one gets built. The top-ranked structure is what every run would ship, so the pick comes from outside the model on purpose.
This page was assigned the fifth structure on its own list: one artifact walked through the whole lifecycle, with each stage showing what changed. The obvious structure, four phases stacked in order, ranked second and did not get built.
$ /impeccable concept-seedAssign the structure from outside the rankingA new surface inside a site that already has an identity inherits that identity. It does not start a fresh identity exercise.
Bricolage
IBM Plex Sans carries the reading.
This page inherited warm cream, peach, electric blue, near black ink, and the two faces already loaded on the site. None of that was reopened.
A replacement world is a different job. It runs seven candidate worlds drawn from the audience's own visual culture, deals challengers from a catalog, and commits to one, with the durable decisions written into DESIGN.md so the next surface does not drift.
$ /impeccable documentRecord the identity already present in code$ /impeccable extractPull reusable tokens and components outThe craft floor is a set of checks on the built result. Contrast ratios, spacing rhythm, a 65 to 75 character measure, real states for hover, disabled, loading, error, and empty.
Real content
It also names the defaults to refuse. Same-size cards of icon, heading, and text as the page structure. Gradient text. A label floating above every heading. Emoji standing in for an icon system.
The most-skipped check is the browser surface nobody drew: text selection, the caret, the scrollbar, the focus ring, the underline offset. Those ship with defaults that belong to no design system.
$ /impeccable hardenErrors, empty states, edge cases, i18n$ /impeccable adaptMake it hold at every screen sizeEach enhance command owns one axis, which is what keeps a pass from turning into a rewrite.
Scale
steps
and one authored moment of motion.
Typography, color, spacing, and motion each get their own command, and the motion rule is one authored moment rather than an entrance animation bolted onto every section.
The direction commands are the honest ones. A design that came out timid gets bolder. A design that came out loud gets quieter. A design carrying three ideas gets distilled down to the one that was working.
$ /impeccable typesetHierarchy, scale, and the faces themselves$ /impeccable colorizeStrategic color into a flat interface$ /impeccable layoutSpacing, rhythm, visual hierarchy$ /impeccable animatePurposeful motion, one authored moment$ /impeccable bolderAmplify a safe or bland result$ /impeccable quieterCalm an overstimulating one$ /impeccable distillStrip back to the essenceVerification runs as bounded passes. Build fully, inspect once across desktop and mobile together, fix everything that round shows, confirm with at most one more round.
Open-ended self-review is the expensive failure here. It burns hours doing worse what one batched round plus a mechanical detector does in minutes.
The detector is the part that does not negotiate. It scans the changed files for the banned patterns and reports them as findings, so the fix list is mechanical rather than a matter of taste.
$ /impeccable critiqueDesign review with heuristic scoring$ /impeccable auditAccessibility, performance, responsive checks$ /impeccable clarifyFix the copy, labels, and error messagesDecisions that stay in a chat window are gone by the next session. Decisions written into the design system are what the next surface inherits.
A hook can run the detector automatically after any UI edit, so drift gets caught at the moment it is introduced rather than at review.
The doctor command reports what has gone stale between the product record, the design system, and the surface briefs. It reports rather than repairs, because repairing drift as a side effect of a design task is how a system quietly changes under someone.
$ /impeccable doctorReport drift across the design artifacts$ /impeccable hooksRun the detector automatically on UI edits$ /impeccable polishThe last pass before shippingTwenty three commands, version 4.0.4. Each one owns a single axis, which is what stops a pass from quietly turning into a redesign.
/init/shape/document/extract/critique/audit/polish/bolder/quieter/distill/harden/onboard/animate/colorize/typeset/layout/delight/overdrive/clarify/adapt/optimize/live/doctorImpeccable is free and open source, written by Paul Bakaus. Run the installer from a project root, then run the first command inside the coding agent.
npx impeccable install/plugin marketplace add pbakaus/impeccablenpx impeccable updateWe run this on client sites, from the product record through to the batched inspection. Bring a page that is not converting, or a brand with no system behind it.
Book a call