World Class Design

World-Class Design

Adapted from How to turn your AI into a world-class designer — Anshu Chimala (ex-Apple AI R&D), Lenny's Newsletter, 1 Sep 2026.

The premise

An LLM picks the most probable next token. Great design is the least probable choice that still works. Left alone, a model returns the centre of its training distribution: purple gradient, text left, graphic right. Every technique here exists to push the model off that centre and then pull it back to something shippable.

Three stages, eight techniques:

| Stage | Goal | Techniques | |---|---|---| | Discover | Escape the default. Go broad. | 1. Seed strings · 2. Ambitious briefs | | Define | Give it an identity. Go deep. | 3. Critic loop · 4. Image gen · 5. Video gen | | Deliver | Make it shippable. Cut back. | 6. Subtract · 7. Kill AI tells · 8. Rewrite copy |

The user's taste is the input that makes this work. Techniques 2, 6 and 8 are checkpoints where you stop and ask them — do not auto-pilot through them. Pasting AI-generated ideas back into AI produces something anyone could have produced.

Full prompts: [references/prompt-library.md](references/prompt-library.md). Tells checklist: [references/ai-tells.md](references/ai-tells.md). fal.ai video: [references/fal-video.md](references/fal-video.md).

Step 0 — Preflight (run this first, every time)

sh scripts/preflight.sh

Read-only, ~instant, safe to re-run. It probes the environment and exits:

| Exit | Meaning | What you do | |---|---|---| | 0 READY | All eight techniques available | Say one line — "preflight clean, all eight techniques available" — and go straight to Stage 1. Do not walk a configured user through setup. | | 10 DEGRADED | Core works, enrichment missing | Name exactly what's unavailable, offer to fix it, and let them decline. Proceed either way. | | 20 BLOCKED | Core dependency missing, or a key is leaking into an app env file | Stop. Fix, re-run preflight, then continue. |

Add --verify to confirm the fal key actually authenticates (one free API call, costs nothing). Worth doing on a genuine first run.

Also check one thing the script cannot see: can you screenshot the running design? Any browser automation (built-in browser tool, Playwright MCP, chrome-devtools MCP) or a simulator tool for native apps. Without it, Technique 3 — the highest-leverage step — cannot run. Say so plainly rather than substituting your own judgment for the critic's.

Closing the gaps

Do these yourself, no need to ask — they're local, reversible, and non-destructive:

• mkdir -p ~/.config/fal and chmod 600 on any key file
• adding .env.agents to .gitignore
• writing the dev-only-keys note into CLAUDE.md / AGENTS.md

Ask first, then do it: installing ffmpeg or jq via a package manager — it's a system change.

You cannot do these; give exact steps and hand over. They need a human at a dashboard with a payment method:

• creating a fal.ai account, issuing a key, loading credit → [references/fal-video.md § 1](references/fal-video.md#1-setup--adding-your-fal-api-key)
• creating an OpenAI/Gemini key, or holding a ChatGPT subscription for Codex CLI image generation

> Never ask the user to paste an API key into the chat. It lands in the transcript and any session log. Give them a command to run in their own terminal: > ``bash > mkdir -p ~/.config/fal && printf 'FAL_KEY=%s\n' 'PASTE_KEY_HERE' > ~/.config/fal/env && chmod 600 ~/.config/fal/env > ` > Then re-run sh scripts/preflight.sh --verify to confirm. If a user pastes a key anyway, write it to the file, chmod 600`, and tell them to rotate it.

If preflight reports leak-risk — a FAL_KEY or OPENAI_API_KEY sitting in .env, .env.local, or .env.production — move it out, and tell the user to rotate the key, not just relocate it. Those files get committed, synced to hosting dashboards by vercel env pull/push, and inherited by the running app. Treat it as already exposed.

Degrading honestly

When a capability is missing, say so and carry on with the rest. Never paper over a gap: no CSS gradients standing in for generated images, no self-assessment standing in for the critic, no invented API keys. A gradient substituted for real artwork reintroduces the exact tell this skill exists to remove.

---

Copy: two modes, by stage

Locking copy locks structure. A headline, subhead, eyebrow and section order together are the information architecture. Freeze the strings and a variant can only reskin the page you already have — this is the single biggest brake on Stage 1 variety, and it is easy to impose by accident while trying to protect the user's voice.

Resolve it by stage. The source article's own framing: model copy is Lorem ipsum — scaffolding that lets you see the structure, rewritten by a human before it ships.

Exploration mode — Stages 1 and 2

Copy is malleable. Rewrite headlines, merge, split or reorder sections, cut chrome, change length and register. Restructuring the message is part of the design proposal.

The invariant is the message architecture, not the strings. Brief each variant with what every section has to accomplish — "establish what this is, for whom, and the core promise" — not with the sentences that currently accomplish it. Give agents a message spec, not a copy deck.

For parallel variants, put the copy in one shared component every variant imports. Instruction alone relies on ~n agents each choosing to comply; a shared import makes drift structurally impossible. Verified across ~18 agents and six rounds: exactly one visible string changed, and that was a correction to a code-owned label.

All exploration copy is provisional and must be marked as such. It is a proposal for the user to accept, edit or reject at the checkpoint.

Fidelity mode — Stage 3

Copy locks to the approved source. Every deviation the exploration introduced is either reverted or explicitly approved by the user. Technique 8 is where a human writes the final words; nothing ships on an implementer's phrasing.

Never invented, in either mode: facts

Voice is malleable. Truth is not. No agent may invent or alter:

• prices, plans, billing terms, guarantees or refund policy
• capabilities, integrations, model names, compliance or security claims
• metrics, benchmarks, customer counts, funding
• customer names, logos, quotes or testimonials

Take these from the codebase or the approved source, verbatim, and cite where each came from. An agent that writes "USD 29/mo" or "SOC 2 compliant" from imagination has created a legal problem, not a design. When a fact appears in two places that disagree, stop and report the conflict rather than picking one.

"Sourced from code" is not the same as "cleared to publish." This is the layer under the fact rule, and it is easy to miss. A value can be live, correctly imported, drift-proof — and still not approved for a public page. Observed in one run: annual pricing and top-up amounts resolved live from the billing module while the project's own decision brief marked both open and said in terms "these are not approved amounts yet"; a signup grant was live in SQL while a settled decision said not to issue it in the current mode; and a section displayed an internal enum key (Grounded) where a code-owned display map, protected by a coupling test, said users should see a different word.

So instruct agents to check provenance, not just existence:

• Prefer the decision record over the implementation when they disagree — a plan, ADR, or decision brief usually outranks a constant that has not caught up.
• Treat a value behind a feature flag, kill switch, or mode switch as unpublishable until someone confirms its state in production.
• Distinguish stored keys from display labels. If the codebase maps one to the other, the map wins.
• Where a fact is live but unapproved, omit it and flag it rather than printing or silently resolving it.

Three independent variants in one run each reached "omit and flag" on the same three facts without seeing each other's work. That convergence is the rule functioning; a variant that had shipped those numbers would have published unapproved prices.

Two rules that hold in both modes

The seed must not reach the page. "Don't reveal the string" is too narrow — the leak is the seed's derived vocabulary surfacing as rendered text. A run seeded toward weaving shipped a visible label reading Warp & Weft · London. Class names, CSS comments and filenames may use the seed freely; anything a visitor can read may not.

Report every copy decision. End each build with a PROPOSED COPY list: what was rewritten, cut, merged, or newly written, and where each fact came from. In exploration this is the proposal; in fidelity mode it is the approval queue.

When Technique 7 and the user's copy disagree

Technique 7 says cut the eyebrow; the approved copy deck contains one. In exploration the variant cuts it freely — that is a structural proposal. In fidelity mode it is not the implementer's call: flag it as a recommendation and let the user decide. Observed in a real run — a variant correctly kept an eyebrow reading AGENTIC MARKET RESEARCH & PRODUCT VALIDATION because copy was locked, faithfully reproducing row one of [ai-tells.md](references/ai-tells.md).

---

⏸ Checkpoint 0 — Agree the scope before building anything

Ask this before writing a single brief. One line, but it must be the user's answer, not yours.

> How far does this change go? Surface treatment only — colour, type, texture, motion on the existing layout? Layout too? Information architecture? Copy? And which existing assets are fair game?

Skipping it is the most expensive failure available in this process, because nothing downstream repairs it. Checkpoint 1 lands after the variants are built, so if you silently chose "surface treatment" the user sees four beautiful variants of the page they already had — and Stage 3 subtracts, it does not restructure. Observed in a real run: four rounds of variants locked to the existing layout, and the owner asking "the page layout has barely changed — will that be considered later, or did the skill fail?" The honest answer was neither.

Write the answer down and pass it into every brief. It is also what tells you whether the comparative critic is the right tool later (see Technique 3).

---

Stage 1 — Discover

Technique 1: Seed strings (always do this)

> Techniques 1 and 2 compose. They are not alternatives. A user arriving with a strong concept makes it tempting to skip seeding entirely — the concept feels like it supplies the direction. It does not supply composition. The concept fixes the material and the constraints; the seed still drives structure and arrangement inside them. Drop the seed and you have removed the only mechanism here for escaping the centre of the distribution, exactly when a confident brief makes you least likely to notice. Observed: five rounds run on a strong user concept with no seed, all of them structurally conventional.

Never build the first version from a bare brief. Generate real entropy outside the model and use it as creative input:

Generate a long random alphanumeric string with a shell script.
Define the creative direction (colour, layout, typography, motion) from that
string — look past the surface for subpatterns, repeated runs, special numbers,
anything that suggests a direction. Use your judgment to make it look great.
Do not reveal the string in the design; it is inspiration only.

Asking a model to "be random" does not work — it predicts tokens that sound random. The randomness has to come from head -c 64 /dev/urandom | base64 or similar.

Vary the derivation mode, not just the seed. This is Technique 1's biggest failure mode, and it is not where it looks.

Fourteen runs across five seed sources — base64, hex, decimals, dictionary words, Wikipedia titles, emoji — all produced the same register: a physical artifact or measuring instrument, rendered with hairline rules, uppercase mono micro-labels and one signal colour. Different nouns, one move. Four of those runs were the source procedure verbatim on a greenfield generic app, so this is not an artifact of redesigning live products.

The one run that broke the pattern changed the instruction, not the seed: asked to derive atmosphere — light, air, distance, time of day — instead of an object, it produced a page with no frames, rules or apparatus at all.

The seed supplies entropy; the derivation instruction supplies genre. So give each variant a different lens — atmosphere, motion and behaviour, social register, material process, or the article's own structural reading. Full prompts: [the derivation trap](references/prompt-library.md#-the-derivation-trap--read-this-before-running-variants).

What the technique does deliver: every greenfield run escaped the AI default hard — no purple gradient, no glassmorphic hero, no text-left/graphic-right. That part of the source article's claim holds up cleanly.

Run 3–4 variants in parallel as independent subagents — and mean it, see below. Present all of them to the user.

Isolating parallel variants

Subagents in one session are not isolated by default. Two leaks observed in a single run:

• Shared browser. An agent navigating by tab id landed in another agent's tab, saw its design, and rewrote its own direction to avoid duplicating it — silently converting an independent sample into a dependent one. It happened to report this; had it not, the batch would have looked more varied than it was, and the conclusion drawn from it would have been wrong.
• Shared dev server. One agent's syntax error 500'd every route, and other agents logged that failure as their own.

Give each variant its own route or output directory, tell it explicitly not to open the others, and have it verify in its own browser instance rather than a shared pane. If a variant reports seeing another's work, discard it as evidence — it is no longer an independent sample, and counting it will overstate the variety you achieved.

Technique 2: Ambitious briefs

Vague briefs get median output. Name a concrete world:

• "bold pixel art, each section a still from a video game, still functions as a landing page"
• "isometric living 3D city, features are neighbourhoods"
• "radically asymmetric, dissonant colour and type, uncomfortable negative space — break the rules and still make it good"

To find one, run the three-step ideation ladder in the prompt library: broad shallow list → the user reacts to favourites in their own words → model sharpens → model writes the build prompt.

> Attribution: the alphanumeric seed procedure is the source article's. The alternative seed sources and the structural axis below are this repo's findings from running it against live products — see [what is his and what is ours](references/prompt-library.md#what-is-the-source-articles-and-what-is-this-repos).

Seeds vary aesthetics. They do not vary structure.

A seed reliably changes palette, typography, texture and motion. It does not touch the layout archetype — "landing page = vertical scroll, hero with headline left and visual right, sections stacked below" survives almost any aesthetic. In a four-variant run, three produced that same hero regardless of how far apart their palettes were. Of the two variants with a free hand on copy, one broke the archetype and one reproduced it anyway.

Never hand agents the existing information architecture as a numbered list. This is the strongest rule in Stage 1 and the easiest to break by accident. An ordered list of sections looks like a neutral requirement and functions as the answer — it impor

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: AlexOmey
• Source: AlexOmey/world-class-design
• License: MIT

Install and usage instructions live in the source repository linked above.