De design-loop: Describe, Review, Redirect

Alles wat je met Claude Code doet, volgt hetzelfde patroon: beschrijf wat je wilt, bekijk het resultaat, en stuur bij. Dat is design critique — een vaardigheid die je al hebt. Dit hoofdstuk laat zien hoe je die vaardigheid inzet.

Describe, don't prescribe — state the outcome, not the implementation.
– Neuma

Het kernmodel

Alles wat je met Claude Code doet, volgt hetzelfde patroon:

Describe → Review → Redirect
    ↑                    |
    └────────────────────┘
  1. Describe — Beschrijf wat je wilt (het resultaat, niet de implementatie)
  2. Review — Bekijk wat je terugkrijgt
  3. Redirect — Geef feedback op wat er anders moet

Dat is het. Geen syntax leren. Geen compilerfoutmeldingen debuggen. Gewoon beschrijven, bekijken, bijsturen — precies wat designers al hun hele carrière doen.

Waarom dit werkt voor designers

Dit is geen nieuw concept. Het is design critique:

| Design-proces | Claude Code |
|---|---|
| Je briefed een developer | Je beschrijft wat je wilt |
| Je bekijkt de build | Je bekijkt het resultaat |
| Je geeft feedback | Je stuurt bij |
| Developer past aan | Claude past aan |

Het verschil: je gesprekspartner is oneindig geduldig, implementeert direct, en zegt nooit "dat kan niet binnen de sprint."

Describe: De kunst van het beschrijven

De kwaliteit van je beschrijving bepaalt de kwaliteit van het resultaat. Maar "goede beschrijving" betekent niet "lange beschrijving."

Beschrijf het resultaat, niet de implementatie

Zwak:

Maak een div met flexbox, justify-center, items-center, 
een gradient van blauw naar paars, border-radius 16px, 
padding 32px, en een h1 met font-size 48px in wit.

Sterk:

Maak een hero-sectie die voelt als een premium SaaS landing page. 
Centered headline, subtiele achtergrond-gradient, veel ademruimte. 
Denk aan de sfeer van Linear.app of Vercel's homepage.

De eerste beschrijving vertelt Claude hoe het moet bouwen. De tweede vertelt wat het moet bereiken. Claude kent CSS beter dan jij — laat het de implementatie bepalen. Jij stuurt op het gevoel.

Gebruik referenties

Referenties zijn het krachtigste gereedschap in je beschrijving:

Bouw een pricing-pagina in de stijl van Stripe. Clean, wit, 
met subtiele schaduwen en een duidelijke visuele hiërarchie 
tussen de drie plannen. Het populairste plan moet visueel 
zwaarder zijn — niet met een neon border, maar met 
een lichte achtergrondtint en grotere typografie.

Je beschrijft een gevoel en een referentie. Claude vertaalt dat naar code. Jij beoordeelt of het klopt.

De vier niveaus van beschrijven

| Niveau | Voorbeeld | Resultaat |
|---|---|---|
| Vaag | "Maak een mooie pagina" | Generiek, voorspelbaar |
| Functioneel | "Maak een contact-formulier" | Werkt, maar smakeloos |
| Intentioneel | "Maak een contact-formulier dat uitnodigt, niet intimideert" | Beter, maar nog interpreteerbaar |
| Referentie-gestuurd | "Maak een contact-formulier in de stijl van Notion's onboarding — minimaal, één veld tegelijk, met micro-animaties bij focus" | Precies wat je wilt |

Hoe specifieker je intentie en context, hoe minder correctierondes je nodig hebt.

Review: Leren kijken naar output

Reviewen is waar je designvaardigheden het verschil maken. Je kijkt niet naar code — je kijkt naar het resultaat.

Waar kijk je naar?

Run de output in je browser en beoordeel:

  • Hiërarchie — Is duidelijk wat het belangrijkste element is?
  • Spacing — Voelt de ademruimte goed? Te krap? Te los?
  • Typografie — Is er contrast in grootte, gewicht, kleur?
  • Kleur — Zijn er te veel kleuren? Concurreren accenten?
  • Interactie — Hebben knoppen hover-states? Voelt het responsief?
  • Gevoel — Komt het overeen met je intentie?

Dit is design critique — een vaardigheid die je al hebt.

De "first impression" test

Kijk 3 seconden naar het resultaat. Wat valt op? Wat voelt af? Wat stoort?

Die eerste indruk is vaak de juiste. Vertrouw je oog. Designers zijn getraind in visueel oordelen — gebruik dat.

Redirect: De kwaliteit van je feedback

De redirect is waar het verschil zit tussen een frustrerende sessie en een productieve. De kwaliteit van je feedback bepaalt hoe snel je bij het gewenste resultaat komt.

Feedback-hiërarchie

| Feedback | Resultaat |
|---|---|
| "Dat is niet goed" | Claude gaat gokken |
| "De spacing voelt te krap" | Beter, maar nog vaag |
| "Vergroot de padding van de secties naar py-24. De hero heeft meer ademruimte nodig — minimaal 60vh hoogte" | Precies wat je bedoelt |

Wees specifiek, niet technisch

Je hoeft geen code te schrijven in je feedback. Maar wees concreet:

✗ "Het ziet er niet premium genoeg uit"
✓ "De kaarten hebben te weinig padding — ze voelen krap. 
   Vergroot de interne ruimte. De schaduwen zijn te hard — 
   maak ze groter en zachter. En de titels mogen 
   visueel zwaarder: dikker gewicht, grotere grootte."

Het WHAT-WHY-HOW patroon

Voor complexere feedback, structureer als:

WAT: De navigatie voelt niet goed
WAAROM: Op mobiel verdwijnen de links achter een 
  hamburger, maar er is geen visuele hint dat er 
  meer opties zijn. Gebruikers weten niet dat ze 
  moeten klikken.
HOE: Voeg een subtiele indicator toe — een badge 
  met het aantal items, of een pulserende dot. 
  Maak het hamburgermenu iets prominenter.

Context > Prompts

Dit is misschien het belangrijkste inzicht uit de hele guide:

Een middelmatige prompt met rijke context levert beter resultaat dan een perfecte prompt zonder context.

Wat dit betekent in de praktijk

Zonder context:

Maak een dashboard

Met context (via CLAUDE.md + beschrijving):

[Claude weet al: het is een health-tracking app, 
minimalistisch design, warm kleurpalet, Geist font, 
focus op rust en overzicht]

Maak het dashboard voor de dagoverzicht-pagina. 
De gebruiker opent dit 's ochtends — het moet 
kalmerend werken, niet overweldigend. 
Toon slaapscore, agenda en top-3 taken.

Hetzelfde woord ("dashboard"), totaal ander resultaat. Het verschil is context, niet prompt-engineering.

Conversation patterns

De Brain Dump

Soms weet je niet precies wat je wilt. Dat is oké. Dump je gedachten en laat Claude structureren:

Ik ga braindumpen — reageer pas als ik zeg "verwerk dit".

Ik werk aan een portfolio-site. Het moet niet te corporate voelen. 
Meer als een magazine, editoriaal. Ik wil dat case studies 
de hoofdrol spelen, niet een over-mij pagina. Misschien 
een onconventionele navigatie? Niet per se een hamburgermenu...

Verwerk dit — geef me drie verschillende conceptrichtingen 
met elk een visuele beschrijving.

Iteratief verfijnen

Bouw op in lagen. Begin breed, zoom in:

Stap 1: "Maak de homepage-structuur"
    → Review → "De hero is goed, maar de feature-sectie is te standaard"

Stap 2: "Maak de feature-sectie asymmetrisch — grotere eerste kaart, 
         twee kleinere ernaast. Voeg subtiele hover-animaties toe."
    → Review → "Beter. De animatie is te snel."

Stap 3: "Maak de hover-transition 400ms met een ease-out curve. 
         En voeg een stagger toe van 100ms tussen de kaarten bij scroll-entry."
    → Review → "Perfect. Sla op."

De Context-Load

Start sessies door Claude te vertellen wat het moet weten:

Lees CLAUDE.md en src/styles/tokens.ts. 
We werken vandaag aan de checkout-flow. 
De huidige versie heeft te veel stappen — 
ik wil het terugbrengen naar één pagina 
met progressive disclosure.

De Multi-Step

Voor complexe taken, geef een expliciet plan:

Ik wil de volledige onboarding-flow bouwen. Plan:
1. Lees de bestaande componenten in src/components/onboarding/
2. Analyseer de flow — welke stappen zijn er?
3. Ontwerp een nieuwe flow: 3 stappen max, met animaties tussen stappen
4. Bouw het, beginnend bij stap 1

Start met stap 1 en 2.

De correctie-loop herkennen en doorbreken

Het gevaarlijkste patroon bij het werken met AI is de correctie-loop: je blijft bijsturen op hetzelfde probleem, ronde na ronde, en het wordt niet beter — soms zelfs slechter.

Herkennen

Je zit in een correctie-loop als:

  • Je dezelfde feedback al 2x hebt gegeven
  • Claude steeds het ene fixt maar het andere breekt
  • Je frustratie groeit
  • Het resultaat oscilleert (beter → slechter → beter → slechter)

Doorbreken

De oplossing is bijna altijd dezelfde:

  1. Stop — Niet nóg een correctieronde
  2. `/clear` — Reset je context volledig
  3. Schrijf een betere prompt — Verwerk alles wat je hebt geleerd in één nieuwe, specifiekere beschrijving
  4. Begin opnieuw — Vers, met rijkere context

Dit voelt als opgeven, maar het is het tegenovergestelde. Je destilleert je lessen in een betere startpositie.

[Na 5 frustrerende rondes over een kaart-component]

/clear

Maak een kaart-component met deze specifieke eisen:
- Padding: 32px
- Border-radius: 16px
- Subtiele schaduw: 0 4px 24px rgba(0,0,0,0.06)
- Hover: vertaal -2px omhoog, schaduw wordt iets groter
- Transitie: 300ms ease-out
- Geen border, geen achtergrondkleur — alleen de schaduw creëert diepte
- Titel in semi-bold, 18px. Beschrijving in regular, 14px, gray-500

Drie rondes van correctie → één goede prompt. De prompt is beter omdat je die drie rondes hebt gedaan. Je hebt geleerd wat je eigenlijk wilde.

Het compound effect

Elke sessie maakt je beter in drie dingen:

  1. Beschrijven — Je leert preciezer communiceren wat je wilt
  2. Beoordelen — Je oog voor AI-output wordt scherper
  3. Bijsturen — Je feedback wordt specifieker en effectiever

Dit is geen lineaire verbetering. Het is een compound effect: sessie 50 is exponentieel productiever dan sessie 5, niet alleen omdat je beter prompt, maar omdat:

  • Je CLAUDE.md rijker is geworden
  • Je patronen hebt herkend in je eigen werkstijl
  • Je weet welke beschrijvingen welke resultaten opleveren
  • Je correctie-loops sneller doorbreekt