Prompt craft voor design — AI-slop vermijden

De kwaliteit van je output staat of valt met hoe je communiceert met Claude. Dit hoofdstuk leert je de patronen die werken — en de valkuilen die je moet vermijden.

The best way to get good output is not to write a better prompt — it's to build better context. But when you do prompt, be specific about what you don't want.
– Anthropic Cookbook, Prompting for Frontend Aesthetics

Waarom AI generieke designs produceert

Voordat je kunt bijsturen, moet je begrijpen waarom Claude (en elk ander LLM) standaard naar generieke output neigt. Het is geen luiheid — het is een gevolg van hoe deze modellen getraind zijn.

De drie oorzaken

1. RLHF-bias (Reinforcement Learning from Human Feedback)

Tijdens training worden LLMs beloond voor output die menselijke reviewers "goed genoeg" vinden. Reviewers zijn geen designers — ze kiezen de veiligste, meest herkenbare optie. Het model leert: gemiddeld is veilig. Veilig is goed.

Het resultaat: Claude kiest Inter omdat iedereen Inter kent. Het kiest blauw-paars omdat dat het meest "professioneel" voelt voor een gemiddelde beoordelaar.

2. Training data distributie

Claude is getraind op miljarden webpagina's. De meest voorkomende patronen in die data worden de standaard-output. En de meest voorkomende webdesigns zijn:

  • Bootstrap/Tailwind templates
  • SaaS dashboards met blauwe accenten
  • 3-koloms feature-grids
  • Symmetrische kaartlayouts

Het model reproduceert het gemiddelde van het internet — en het gemiddelde is middelmatig.

3. Output-veiligheid

LLMs hebben een ingebouwde neiging om "zeker" te zijn over hun output. Experimentele keuzes (onverwachte layouts, gedurfde kleurcombinaties, asymmetrische composities) zijn onzeker. Het model defaultt naar patronen waar het confident over is.

De 23+ "AI tells" die je moet bannen

Een "AI tell" is een patroon dat je output onmiddellijk herkenbaar maakt als AI-gegenereerd. Ervaren designers zien het in een oogopslag. Hier zijn de categorieën:

Typografie tells

| Tell | Waarom het opvalt | Alternatief |
|---|---|---|
| Inter als standaard font | Het is *het* AI-font geworden | Geist, Outfit, Cabinet Grotesk, Satoshi |
| Roboto / Open Sans | Veilige Google Fonts defaults | Sora, Plus Jakarta Sans, DM Sans |
| Geen tracking-variatie | Alles zelfde letterspacing | `tracking-tight` op headlines, `tracking-wide` op labels |
| Geen size-contrast | Headlines vs body te dicht bij elkaar | Minimaal 2:1 ratio, liever 3:1+ |
| Generieke font-pairing | Twee sans-serifs naast elkaar | Sans + serif combinatie, of display + body |

Kleur tells

| Tell | Waarom het opvalt | Alternatief |
|---|---|---|
| AI purple (#7C3AFF / paars-blauw gradients) | Het AI-kleur geworden | Warme accenten: amber, terracotta, sage |
| Neon glows / glow-schaduwen | Schreeuwt "gegenereerd" | Subtiele box-shadows met lage opacity |
| Pure black (#000000) achtergrond of tekst | Te hard, onnatuurlijk | Off-black: #111111, #1A1A1A, #0F172A |
| Te veel kleuren (5+) | Geen visuele discipline | Max 1 accent + neutralen |
| Oversaturated kleuren (meer dan 80% saturation) | Voelt goedkoop | Desatureer met 10-20%, meng met grijs |

Layout tells

| Tell | Waarom het opvalt | Alternatief |
|---|---|---|
| Symmetrische 3-koloms grid | Het meest generieke patroon | Asymmetrisch: 2+1, bento grid, masonry |
| Identieke kaart-hoogtes | Saai, voorspelbaar | Variabele hoogtes, span-2 voor featured |
| Alles gecentreerd | Geen visuele spanning | Links-uitgelijnde content, mixed alignment |
| Generieke hero met centered tekst + CTA | Elk AI-template ziet er zo uit | Asymmetrische hero, split-screen, editorial |
| Perfecte gelijke spacing overal | Mechanisch, niet ontworpen | Groepeer gerelateerde elementen dichter |

Interactie tells

| Tell | Waarom het opvalt | Alternatief |
|---|---|---|
| Geen hover-states | Voelt statisch, onaf | Subtiele hover op alle interactieve elementen |
| Lucide/Feather icon defaults | Direct herkenbaar als template | Phosphor Icons, Radix Icons, of custom |
| Knop met "Get Started" | AI-default copywriting | Specifieke actie: "Start je project", "Bekijk cases" |
| Lorem ipsum of placeholder tekst | Onafgemaakt | Realistische content, ook als het nep is |

De vier design-dimensies sturen

In plaats van hele designs te beschrijven, stuur je op vier dimensies die samen het visuele karakter bepalen.

1. Typografie

Typografie is de snelste manier om AI-output te transformeren. Een font-swap kan het verschil maken tussen "template" en "ontworpen."

In je prompt:

Gebruik Geist Sans voor body text en Fraunces als display font 
voor headlines. Headlines krijgen tracking-tight (-0.02em) 
en font-weight 700. Body text in regular weight, 
line-height 1.6. Labels in uppercase, tracking-widest, 
font-size 11px, medium weight.

Effectieve font-combinaties:

  • Display + body: Fraunces + Geist Sans
  • Editorial: Newsreader + Inter (hier mag Inter als body)
  • Technisch: JetBrains Mono + Plus Jakarta Sans
  • Warm: Outfit + DM Serif Display

2. Kleur

In je prompt:

Kleurpalet: warm-neutral basis. 
Achtergrond: #FAF9F7 (warm bone), niet puur wit. 
Tekst: #111111 (off-black), nooit #000000.
Secundaire tekst: #6B7280 (true gray-500).
Eén accent: #D97706 (warm amber) — alleen voor primaire CTA 
en actieve states. Maximaal 10% van het visuele oppervlak.
Schaduwen: rgba(0,0,0,0.06) — nooit harder dan 0.12.

Vuistregels:

  • Maximum 1 accentkleur + neutralen
  • Saturatie onder 80% (behalve voor kleine accenten)
  • Schaduwen in dezelfde kleurtemperatuur als je palet
  • Geen pure zwart-wit — altijd een tint warmte

3. Motion (animatie)

In je prompt:

Animaties: subtiel en doordacht.
- Hover-transitions: 200ms ease-out, alleen transform en opacity
- Scroll-entry: fade-in met translateY(12px), 600ms, stagger 100ms
- Kaart-hover: translateY(-2px) + shadow vergroot subtiel
- Geen bounce, geen overshoot, geen spring-physics tenzij specifiek gevraagd
- Alles via CSS transitions, geen JavaScript animatie-libraries nodig

Motion-niveaus (uit taste-skill):

| Niveau | Stijl | Technieken |
|---|---|---|
| 1-3 | Subtiel | Alleen CSS transitions, opacity + transform |
| 4-7 | Vloeiend | CSS + scroll-triggered animations, staggers |
| 8-10 | Cinematisch | Spring physics, parallax, choreografie met Framer Motion |

4. Achtergronden en oppervlakken

In je prompt:

Oppervlakken: geen platte witte vlakken.
- Pagina-achtergrond: #FAFAF8 of subtle noise texture
- Kaarten: wit (#FFFFFF) met shadow 0 4px 24px rgba(0,0,0,0.06), 
  border-radius 16px, padding 32px
- Geen borders op kaarten — alleen shadow creëert diepte
- Sectiescheiding via spacing (py-24+), niet via lijnen
- Hover op kaarten: shadow vergroot naar 0 8px 32px rgba(0,0,0,0.08)

Referentie-gebaseerd prompten

De krachtigste prompt-techniek voor design: beschrijf een stijl door te verwijzen naar bestaand werk.

Waarom het werkt

Claude kent duizenden websites en design-stijlen uit zijn trainingsdata. Een referentie activeert een heel cluster aan visuele beslissingen:

"In de stijl van Linear.app"

Dit activeert: donker thema, strakke typografie, veel witruimte, subtiele gradients, focus op content, geen visuele clutter. In een zin heb je tientallen design-beslissingen gecommuniceerd.

Effectieve referenties

| Referentie | Wat het activeert |
|---|---|
| "Stijl van Stripe" | Clean wit, perfecte typografie, subtiele schaduwen, blauwe accenten |
| "Stijl van Linear.app" | Donker, strak, minimaal, typografie-gedreven |
| "Stijl van Notion" | Warm wit, zwarte typografie, editorial, simpel |
| "Stijl van Apple.com" | Ruimtelijk, grote beelden, dramatische typografie, animatie |
| "Stijl van Dieter Rams" | Functioneel minimalistisch, grid-based, geen decoratie |
| "Stijl van Monocle magazine" | Editorial, serif fonts, klassiek, veel witruimte |

Referenties combineren

Bouw een dashboard in de stijl van Linear (strak, donker, 
typografie-gedreven) maar met de warmte van Notion 
(niet klinisch, zachte randen). 
De data-visualisatie mag meer kleur hebben — 
denk aan Vercel's analytics.

Je mixt stijlen uit verschillende bronnen. Dit levert uniekere resultaten op dan een referentie.

Anti-referenties

Net zo krachtig — vertel wat je niet wilt:

Niet in de stijl van een typisch SaaS template — 
geen blauwe hero met gradient, geen 3-koloms feature grid, 
geen "Trusted by 10,000+ companies" social proof balk.

XML-structured prompts

Voor complexe design-verzoeken kun je je prompt structureren met XML-tags. Dit helpt Claude om verschillende aspecten van je verzoek apart te verwerken.

Bouw een portfolio-pagina met deze specificaties:

<stijl>
Editorial minimalistisch. Serif headlines, sans-serif body. 
Veel witruimte. Asymmetrische layout.
</stijl>

<typografie>
Display: Fraunces, 700 weight, tracking-tight
Body: Geist Sans, 400 weight, line-height 1.6  
Labels: Geist Sans, 500 weight, uppercase, tracking-widest, 11px
</typografie>

<kleurpalet>
Achtergrond: #FAF9F7
Tekst: #111111
Secundair: #6B7280
Accent: #B45309 (warm amber)
</kleurpalet>

<layout>
Hero: full-width beeld links (60%), tekst rechts (40%)
Cases: masonry grid, variabele hoogtes
Over: centered kolom, max-width 640px
</layout>

<animatie>
Scroll-entry: fade-in + translateY(12px), 600ms ease-out
Hover op cases: scale 1.02 + shadow vergroot
Page transitions: crossfade 300ms
</animatie>

<verboden>
Inter, Roboto, neon glows, 3-koloms grid, 
pure black, Lucide icons, symmetrische layouts
</verboden>

Verificatie-loops

Voeg een verificatie-stap toe aan je prompt:

Voordat je code genereert, check:
- Gebruik ik een van de verboden fonts?
- Is er meer dan 1 accentkleur?
- Zijn er symmetrische 3-koloms layouts?
- Zijn alle interactieve elementen voorzien van hover-states?
- Is er een duidelijke visuele hiërarchie?

Als een van deze checks faalt, pas aan voordat je output geeft.

Dit dwingt Claude om zijn eigen output te valideren — een vorm van self-review die de kwaliteit meetbaar verbetert.

Design Variance Dials

De taste-skill introduceert drie "knoppen" die je output sturen. Je kunt ze meegeven in je prompt of instellen in je CLAUDE.md:

DESIGN_VARIANCE (standaard: 8)

Hoe ver Claude van conventionele layouts afwijkt.

| Waarde | Effect | Wanneer |
|---|---|---|
| 1-3 | Conventioneel, voorspelbaar, veilig | Corporate sites, formulieren |
| 4-6 | Subtiel creatief, lichte asymmetrie | Marketing pages, portfolios |
| 7-8 | Duidelijk creatief, onverwachte layouts | Creative agencies, editorial |
| 9-10 | Experimenteel, artistiek, gedurfd | Kunstprojecten, showcases |

MOTION_INTENSITY (standaard: 6)

Hoeveel en hoe complex animaties zijn.

| Waarde | Effect | Technieken |
|---|---|---|
| 1-3 | Subtiel, alleen essentiële feedback | CSS transitions, opacity + transform |
| 4-6 | Vloeiend, scroll-triggered entrances | CSS animations, IntersectionObserver, staggers |
| 7-8 | Rijk, parallax en choreografie | Framer Motion, scroll-linked, spring physics |
| 9-10 | Cinematisch, full-page takeovers | GSAP, Locomotive Scroll, 3D transforms |

VISUAL_DENSITY (standaard: 4)

Hoeveel informatie per scherm wordt getoond.

| Waarde | Effect | Wanneer |
|---|---|---|
| 1-3 | Airy, galerie-achtig, veel witruimte | Portfolio, editorial, landing pages |
| 4-6 | Gebalanceerd, duidelijke secties | Marketing sites, product pages |
| 7-8 | Compact, data-rich, veel content | Dashboards, tools, admin panels |
| 9-10 | Cockpit, maximale informatie-dichtheid | Trading platforms, monitoring tools |

In de praktijk

Bouw een agency portfolio. Settings:
- DESIGN_VARIANCE: 8 (creatief, onverwacht)
- MOTION_INTENSITY: 7 (rijke animaties, spring physics)
- VISUAL_DENSITY: 3 (airy, veel ademruimte)

Of subtieler, in je CLAUDE.md:

## Design Dials
Standaard-instellingen voor dit project:
- Variance: 7 (creatief maar niet chaotisch)
- Motion: 5 (vloeiend, geen overkill)
- Density: 4 (gebalanceerd)

Prompt-patronen die werken

Het Constraint-First patroon

Begin met wat niet mag. Dit is effectiever dan beginnen met wat je wilt:

Regels:
- Geen Inter, Roboto of Open Sans
- Geen puur wit of puur zwart
- Geen symmetrische grids
- Geen neon glows of gradient borders
- Geen Lucide icons
- Maximum 1 accentkleur

Nu: bouw een pricing-pagina voor een design-tool. 
Warm, editorial, met karakter.

Het Before/After patroon

Beschrijf wat er nu is en wat je wilt:

Nu: de hero-sectie is een standaard centered block 
met een h1, een paragraaf en een knop op een witte achtergrond. 
Het voelt als een template.

Gewenst: de hero moet voelen als een magazine-spread. 
Asymmetrisch, met een groot beeld dat in de tekst snijdt. 
De headline mag dramatisch groot — 80px+. 
Achtergrond in warm bone, niet wit.

Het Sfeer-patroon

Beschrijf een gevoel, niet een design:

Deze pagina moet voelen als een rustige zondag ochtend 
in een Japanse koffiebar. Warm licht, natuurlijke materialen, 
weinig maar precies de juiste dingen op tafel. 
Niets schreeuwt, alles klopt.

Claude vertaalt dit naar: warme kleuren, veel witruimte, subtiele texturen, serif typografie, gedempte accenten.

Checklist: Prompt-kwaliteit

Voordat je een design-prompt verstuurt:

  • Heb ik specifieke fonts benoemd (niet "een mooi font")?
  • Heb ik kleuren in hex gegeven (niet "een warme kleur")?
  • Heb ik verboden patronen benoemd?
  • Heb ik een referentie of sfeer-beschrijving gegeven?
  • Heb ik hover-states en animaties gespecificeerd?
  • Heb ik een verificatie-check toegevoegd?

Niet elke prompt heeft dit allemaal nodig. Maar hoe meer van deze punten je afdekt, hoe minder correctierondes je nodig hebt.