Write the page before you generate it

Accueil du coursCommencer

IntroductionCommencer

Index des règlesRéférence

Référence des composantsRéférence

RecettesRéférence

Journal des modificationsRéférence

Add up the numbers on your own dashboardPart 1 · Why AI output looks right — Plausible is not correctPublié

Ask who the testimonial is fromPart 1 · Why AI output looks right — Plausible is not correctPublié

Learn to see the shape without the substancePart 1 · Why AI output looks right — Plausible is not correctPublié

Stop typing "make it look better"Part 1 · Why AI output looks right — "Better" is not an instructionEn cours d’écriture

Name the user, the task, and the time budgetPart 1 · Why AI output looks right — "Better" is not an instructionPrévu

Make it ask instead of guessPart 1 · Why AI output looks right — "Better" is not an instructionPrévu

Choose the typeface firstPart 1 · Why AI output looks right — A default is a decision you didn't makePrévu

Spend your colour oncePart 1 · Why AI output looks right — A default is a decision you didn't makePrévu

Break the three-column reflexPart 1 · Why AI output looks right — A default is a decision you didn't makePrévu

Delete the navigation you don't needPart 1 · Why AI output looks right — A default is a decision you didn't makePrévu

Check contrast before you argue about tastePart 1 · Why AI output looks right — A default is a decision you didn't makePrévu

Name the five gaps behind every failurePart 1 · Why AI output looks right — What's actually missingPrévu

You can't lay out content that doesn't exist yetPart 2 · Marketing sites — Content before layoutPrévu

The one sentence that must landPart 2 · Marketing sites — Content before layoutPrévu

Write the page before you generate itPart 2 · Marketing sites — Content before layoutPrévu

Real proof, or no proofPart 2 · Marketing sites — Content before layoutPrévu

Section rhythm: not twelve identical bandsPart 2 · Marketing sites — Pacing a pagePrévu

One primary action per pagePart 2 · Marketing sites — Pacing a pagePrévu

Motion that earns its placePart 2 · Marketing sites — Pacing a pagePrévu

Mobile is where it falls apartPart 2 · Marketing sites — Where generated sites breakPrévu

The semantics the model skipsPart 2 · Marketing sites — Where generated sites breakPrévu

Images that aren't stockPart 2 · Marketing sites — Where generated sites breakPrévu

Every figure names its arrayPart 3 · Derivation — Where the numbers come fromPrévu

Fixtures with a story, not lorem dataPart 3 · Derivation — Where the numbers come fromPrévu

Aggregates that reconcilePart 3 · Derivation — Where the numbers come fromPrévu

Actions derive from record statePart 3 · Derivation — Behaviour derives tooPrévu

One data state per screenPart 3 · Derivation — Behaviour derives tooPrévu

Empty, loading, partial, error, deniedPart 4 · States first — The five statesPrévu

Empty states that teachPart 4 · States first — The five statesPrévu

Errors that say what to do nextPart 4 · States first — The five statesPrévu

Refusal is design workPart 4 · States first — Permission and refusalPrévu

Showing what someone can't doPart 4 · States first — Permission and refusalPrévu

Optimistic UI, and when it's wrongPart 4 · States first — OptimismPrévu

Density without noisePart 5 · Record-heavy screens — DensityPrévu

Hierarchy when everything is dataPart 5 · Record-heavy screens — DensityPrévu

The list-detail decisionPart 5 · Record-heavy screens — StructurePrévu

Tables: row versus behind the rowPart 5 · Record-heavy screens — StructurePrévu

Filters people actually usePart 5 · Record-heavy screens — StructurePrévu

Confidence, shown honestlyPart 6 · Designing for agents — TrustPrévu

Citations and provenancePart 6 · Designing for agents — TrustPrévu

Action logs and undoPart 6 · Designing for agents — TrustPrévu

Review-and-approve as a patternPart 6 · Designing for agents — ControlPrévu

Streaming, interrupts, stopPart 6 · Designing for agents — ControlPrévu

Diff viewsPart 6 · Designing for agents — ControlPrévu

The assistant that isn't a chat boxPart 6 · Designing for agents — FormPrévu

Anatomy of a rules filePart 7 · Working with the agent — The rules filePrévu

Mechanical rules vs judgement rulesPart 7 · Working with the agent — The rules filePrévu

Correct/incorrect pairsPart 7 · Working with the agent — The rules filePrévu

Brief a whole screen, not a componentPart 7 · Working with the agent — Briefing and reviewingPrévu

What belongs in a briefPart 7 · Working with the agent — Briefing and reviewingPrévu

Reviewing generated UI: a checklistPart 7 · Working with the agent — Briefing and reviewingPrévu

Bringing rules into a client codebasePart 7 · Working with the agent — Briefing and reviewingPrévu