Context als superkracht — Je persoonlijke design-systeem bouwen

Het verschil tussen een frustrerende AI-sessie en een productieve zit zelden in de prompt. Het zit in context — alles wat Claude over jou, je project en je voorkeuren weet voordat je je eerste vraag stelt.

A mediocre prompt with rich context outperforms a perfect prompt with no context.
– Neuma, Module 1

Waarom context alles verandert

Het verschil tussen een frustrerende AI-sessie en een productieve zit zelden in de prompt. Het zit in context — alles wat Claude over jou, je project en je voorkeuren weet voordat je je eerste vraag stelt.

Zonder context:

"Maak een dashboard"
→ Generiek SaaS template, blauw-wit, Inter font, 3-koloms grid

Met context (CLAUDE.md + design tokens + skills):

"Maak een dashboard"
→ Warm minimalistisch, Geist Sans, asymmetrische layout, 
  amber accenten, subtiele hover-states, bone-achtergrond

Dezelfde prompt. Totaal ander resultaat. De context is het ontwerp-systeem.

Het Neuma 5-lagen model

Neuma's cursus introduceert een model met vijf lagen die samen een "persoonlijk operating system" vormen. Toegepast op design:

Laag 5: Output & Briefing
    ↑
Laag 4: Integraties (Figma, Todoist, GitHub)
    ↑
Laag 3: Skills (taste-skill, interface-craft, etc.)
    ↑
Laag 2: Memory (auto-memory, curated knowledge)
    ↑
Laag 1: Identity (wie je bent als designer)

Elke laag bouwt voort op de vorige. Een skill werkt beter als er memory is. Memory is nuttiger als er identiteit onder zit.

Laag 1: Identity — Je design-brief aan Claude

De identity-laag vertelt Claude wie je bent als designer: je achtergrond, je voorkeuren, hoe je communiceert, en wat je verwacht.

Waar het staat

In je globale CLAUDE.md (~/.claude/CLAUDE.md) of als memory-bestand.

Template: Design Identity

# Wie ik ben

## Rol
Senior visual designer bij [bedrijf]. 
[X] jaar ervaring in [domeinen].

## Design-achtergrond
Opgeleid in [opleiding/stijl]. Beïnvloed door [designers/stromingen]. 
Mijn werk neigt naar [warm minimalistisch / brutalistisch / 
editorial / corporate / speels].

## Hoe ik werk
- Ik denk visueel, niet in code
- Ik stuur op gevoel en intentie, niet op implementatie
- Ik geef directe feedback — geen omwegen
- Ik verwacht specifieke output, geen vage suggesties

## Communicatie
- [Taal] als standaard, technische termen in het Engels
- Direct en concreet
- Geen uitleg over wat code doet — toon het resultaat
- Als iets niet kan, zeg het. Geen work-arounds verzinnen.

## Design voorkeuren
- Typografie: [je standaard fonts en waarom]
- Kleur: [je kleurfilosofie — warm, koud, monochroom, etc.]
- Layout: [asymmetrisch, grid-based, editorial, etc.]
- Motion: [subtiel, vloeiend, cinematisch]

## Wat ik niet wil
- Generieke output die naar een template ruikt
- Uitleg als ik niet om uitleg vraag
- "Opties" als ik om een beslissing vraag
- Voorzichtige disclaimers over design-keuzes

Waarom dit werkt

Elke sessie begint Claude met het lezen van dit bestand. Het weet direct:

  • Op welk niveau het moet communiceren (junior vs. senior)
  • Welke stijl het moet hanteren (geen uitleg nodig als je 10 jaar ervaring hebt)
  • Welke keuzes het autonoom mag maken (je vertrouwt het op code, niet op design)

Laag 2: Memory — Wat Claude over je onthoudt

Claude Code heeft een auto-memory systeem dat informatie opslaat tussen sessies. Dit is fundamenteel anders dan een chatbot die elke sessie opnieuw begint.

Soorten memory

| Type | Voorbeeld | Nut |
|---|---|---|
| **User** | "Ivo is visual designer, denkt visueel" | Stemt communicatie af |
| **Feedback** | "Geen trailing summaries na elke actie" | Voorkomt herhaling van correcties |
| **Project** | "Merge freeze vanaf 5 maart voor release" | Context voor beslissingen |
| **Reference** | "Design tokens staan in src/styles/tokens.ts" | Weet waar dingen staan |

Memory opbouwen voor design

Effectieve design-memories zijn specifiek en actionable:

Goed:
"Gebruiker heeft voorkeur voor Geist Sans + Fraunces combinatie. 
Schaduwen altijd rgba(0,0,0,0.06), nooit harder. 
Achtergrond nooit puur wit, altijd #FAF9F7 of #FAFAF8."

Slecht:
"Gebruiker houdt van mooi design."

Tips

  • Corrigeer een keer — Als Claude Inter gebruikt en je zegt "geen Inter, gebruik Geist", slaat het dit op als memory. Volgende sessie weet het dit al.
  • Bevestig goede keuzes — Zeg "ja, die schaduw is perfect" zodat Claude onthoudt wat werkt, niet alleen wat niet werkt.
  • Laat het leren — Na 10-20 sessies kent Claude je design-voorkeuren beter dan de meeste menselijke collega's.

Laag 3: Skills — Expertise laden

Skills zijn de expertise-laag. Ze zijn al uitgebreid behandeld in Hoofdstuk 4, maar hier is de context-angle:

Skills als context-multiplier

Een skill is niet alleen een instructie-set — het is een lens waardoor Claude naar design kijkt. Met de taste-skill geladen "ziet" Claude:

  • Elk font dat het wil gebruiken door de filter van de banned-lijst
  • Elke layout door de filter van de 40+ creatieve patronen
  • Elke kleurkeuze door de filter van het saturatie-maximum

Dit werkt cumulatief met je identity en memory:

Identity: "Ik houd van warm minimalistisch"
+ Memory: "Gebruikt altijd Geist Sans, vindt #FAF9F7 de perfecte achtergrond"
+ Skill: taste-skill met DESIGN_VARIANCE: 7
= Output die specifiek voor jou voelt, niet generiek

Laag 4: Integraties

De integratie-laag verbindt Claude met externe tools. Voor designers:

| Integratie | Wat het toevoegt |
|---|---|
| **Figma MCP** | Leest designs direct, geen screenshots nodig |
| **GitHub** | Commit code, maak PRs, lees bestaande codebase |
| **Todoist** | Taakbeheer en project-tracking |
| **Lokale bestanden** | Leest en schrijft alles in je project |

Elke integratie maakt je context rijker zonder dat je het handmatig hoeft in te voeren.

Laag 5: Output & Briefing

De buitenste laag: hoe Claude zijn output structureert en presenteert.

Output-voorkeuren instellen

In je CLAUDE.md:

## Output voorkeuren
- Toon altijd welke bestanden je aanmaakt/wijzigt
- Geen samenvattingen na elke actie
- Bij design-output: beschrijf in 1-2 zinnen wat je hebt gedaan, niet waarom
- Bij een nieuwe component: genereer het bestand + toon een preview-beschrijving
- Bij een bugfix: toon alleen de diff

Design briefings

Stel Claude in om je dag te starten met een design-gerelateerde briefing:

## Dagelijks design-briefing
Wanneer ik "briefing" zeg:
1. Check open design-taken in Todoist
2. Toon de status van het huidige project
3. Herinner me aan design-beslissingen van gisteren
4. Stel voor waar ik vandaag het beste aan kan werken

DESIGN.md — Drop-in design systemen

Een relatief nieuw concept: DESIGN.md bestanden die je hele visuele systeem beschrijven in een formaat dat Claude direct begrijpt.

Wat het is

Een DESIGN.md is een gestructureerd markdown-bestand dat je plaatst in je project-root naast CLAUDE.md. Het bevat:

  • Kleurpalet met exacte hex-waarden en gebruikscontext
  • Typografie met font-families, gewichten en schalen
  • Spacing schaal
  • Component-specificaties (border-radius, schaduwen, padding)
  • Animatie-defaults (duur, easing, triggers)
  • Verboden patronen

Template

# Design System

## Kleuren
### Primair
- Background: #FAF9F7 (warm bone)
- Surface: #FFFFFF (kaarten, modals)
- Text Primary: #111111
- Text Secondary: #6B7280
- Accent: #D97706 (amber) — max 10% van visueel oppervlak

### States
- Hover: accent op 80% opacity
- Focus: 2px ring in accent, 2px offset
- Disabled: 40% opacity

## Typografie
### Schaal
| Token | Size | Weight | Line-height | Gebruik |
|---|---|---|---|---|
| display-lg | 64px | 700 | 1.1 | Hero headlines |
| display | 48px | 700 | 1.15 | Sectie-titels |
| heading | 32px | 600 | 1.25 | Kaart-titels |
| body-lg | 18px | 400 | 1.6 | Intro-tekst |
| body | 16px | 400 | 1.6 | Body tekst |
| caption | 14px | 500 | 1.4 | Labels, meta |
| micro | 11px | 500 | 1.3 | Tags, badges |

### Fonts
- Display: Fraunces (Google Fonts)
- Body: Geist Sans (Vercel)
- Mono: Geist Mono

## Spacing
4 — 8 — 12 — 16 — 24 — 32 — 48 — 64 — 96 — 128

## Radius
- Small: 8px (buttons, inputs)
- Medium: 12px (cards)  
- Large: 16px (modals, containers)
- Full: 9999px (pills, avatars)

## Schaduwen
- sm: 0 1px 2px rgba(0,0,0,0.04)
- md: 0 4px 12px rgba(0,0,0,0.06)
- lg: 0 8px 24px rgba(0,0,0,0.08)
- hover: 0 12px 32px rgba(0,0,0,0.10)

## Animatie
- Hover: 200ms ease-out
- Entrance: 600ms ease-out, translateY(12px)
- Stagger: 100ms per element
- Page transition: 300ms ease-in-out
- Spring (kaarten): stiffness 300, damping 30

## Verboden
- Inter, Roboto, Open Sans
- Pure black (#000), pure white (#FFF) als achtergrond
- Neon glows, gradient borders
- Lucide/Feather icons als defaults
- Symmetrische 3-koloms grids
- Schaduw opacity meer dan 0.12

Community templates

De awesome-claude-design repository op GitHub bevat 68+ DESIGN.md templates voor verschillende stijlen:

  • Minimal editorial
  • Dark mode SaaS
  • Brutalist
  • Glassmorphism
  • Corporate clean
  • En meer

Je kunt een template downloaden, aanpassen aan je project, en direct gebruiken.

Context-management in de praktijk

De context-stack

Alles samen vormt je "context stack":

CLAUDE.md        → Projectregels, tech stack
DESIGN.md        → Visueel systeem
~/.claude/CLAUDE.md → Persoonlijke voorkeuren
Skills           → Expertise en patronen
Memory           → Geleerde voorkeuren
Figma MCP        → Live design-data

Claude leest dit allemaal bij elke sessie. Je hoeft het niet te herhalen.

Context-hygiene

  • Houd CLAUDE.md onder 200 regels — Te veel context is net zo slecht als te weinig
  • Een DESIGN.md per project — Niet splitsen in meerdere bestanden
  • Update na grote wijzigingen — Als je design-richting verandert, update je bestanden
  • Wees specifiek — "Warm minimalistisch" is vaag. Hex-waarden en font-namen zijn bruikbaar.

Het compound effect

Na 10 sessies:

  • Claude kent je fonts, kleuren en spacing
  • Het vermijdt automatisch je verboden patronen
  • Het stelt betere alternatieven voor
  • Je besteedt minder tijd aan correctie

Na 50 sessies:

  • Claude anticipeert je voorkeuren
  • Het combineert patronen die bij je stijl passen
  • Je beschrijvingen worden korter omdat de context het werk doet
  • Het systeem voelt als een verlengstuk van je design-proces

Dit is het compound effect uit Hoofdstuk 2 in actie — maar dan op systeemniveau.