Aan de slag met Claude Code

Claude Code is een AI-assistent die direct in je terminal draait. Geen losse chat-interface — je werkt in dezelfde omgeving als je code. Voor designers betekent dit: je beschrijft wat je wilt bouwen, en Claude helpt je het te realiseren.

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

Wat je nodig hebt

Voordat je begint, zorg dat je het volgende hebt:

  • Node.js (versie 18+) — check met node --version
  • Een Anthropic API key — maak een account op console.anthropic.com
  • Een terminal — Terminal.app (Mac), iTerm2, of de ingebouwde terminal in VS Code
  • Een project-map — een plek waar je gaat bouwen

Geen paniek over de terminal. Het is een tekstveld waar je typt en resultaat krijgt — net als een chatvenster, maar dan voor je computer.

Installatie

Open je terminal en voer uit:

npm install -g @anthropic-ai/claude-code

Stel je API key in (voeg toe aan je ~/.zshrc of ~/.bashrc):

export ANTHROPIC_API_KEY=sk-ant-jouw-key-hier

Herlaad je shell:

source ~/.zshrc

Test of het werkt:

claude --version

Je bent klaar.

Je eerste sessie

Navigeer naar een project-map en start Claude Code:

cd ~/mijn-project
claude

Je krijgt een interactieve prompt. Typ gewoon wat je wilt:

Maak een simpele landingspagina met een hero-sectie, 
een feature-grid en een footer. Gebruik Tailwind CSS.

Claude leest je project, genereert bestanden, en vraagt toestemming voordat het iets schrijft. Dat is het. Je eerste sessie.

Starten met een prompt

Je kunt ook direct starten met een opdracht:

claude "Maak een React component voor een pricing card"

Sessie hervatten

Wil je verdergaan waar je gebleven was?

# Hervat de laatste sessie
claude --continue

# Hervat en stuur meteen een prompt
claude --continue "Voeg nu animaties toe aan de hero"

# Kies uit recente sessies
claude --resume

CLAUDE.md — Het belangrijkste bestand in je project

CLAUDE.md is het configuratiebestand dat Claude Code automatisch leest bij elke sessie. Het is je project-context, je design brief, je stijlgids — alles in één bestand.

Waarom dit cruciaal is

Zonder CLAUDE.md begint Claude elke sessie blanco. Het weet niet:

  • Welke technologieën je gebruikt
  • Wat je design-voorkeuren zijn
  • Hoe je project gestructureerd is
  • Welke stijl je wilt

Met een goed CLAUDE.md bestand hoef je dit nooit meer uit te leggen. Context vervangt herhaling.

Aanmaken

claude /init

Dit genereert een basis CLAUDE.md in je huidige map. Maar de echte kracht komt pas als je het zelf invult.

Wat erin hoort (voor designers)

# Project Context

## Beschrijving
Portfolio website voor een visual designer. Minimalistisch, 
editorial, met focus op case studies en visueel werk.

## Tech Stack
- Next.js 14 (App Router)
- Tailwind CSS
- Framer Motion voor animaties
- TypeScript

## Design Principes
- Warm minimalistisch — geen klinische witte vlakken
- Typografie-gedreven: display font voor headlines, 
  serif voor body text
- Genereus witruimte (py-24 tot py-40 tussen secties)
- Subtiele hover-states op alle interactieve elementen

## Verboden Patronen
- Geen Inter, Roboto of Open Sans
- Geen neon glows of "AI purple" gradients
- Geen symmetrische 3-koloms kaartlayouts
- Geen Lucide/Feather icon defaults
- Geen pure black (#000000) — gebruik off-black (#111)

## Communicatie
- Nederlands, technische termen in het Engels
- Direct en concreet, geen vage beschrijvingen
- Toon altijd welke bestanden je aanpast

Resolutie-volgorde

Claude Code laadt CLAUDE.md bestanden van meerdere locaties, van breed naar specifiek:

| Locatie | Bereik |
|---|---|
| `~/.claude/CLAUDE.md` | Globaal — geldt voor alle projecten |
| `~/mijn-project/CLAUDE.md` | Project root — geldt voor dit project |
| `~/mijn-project/src/CLAUDE.md` | Submap — geldt wanneer je hier werkt |

Alle gevonden bestanden worden geladen. Specifiekere bestanden vullen algemene aan (en overschrijven bij conflict).

Pro tip: Zet je persoonlijke design-voorkeuren in het globale bestand (~/.claude/CLAUDE.md), en project-specifieke context in het project-bestand.

.claude/rules/ voor specifieke onderwerpen

Naast CLAUDE.md kun je losse regelbestanden plaatsen in .claude/rules/:

.claude/
  rules/
    animatie.md      → Regels voor motion design
    componenten.md   → Component-conventies
    kleuren.md       → Kleurpalet en variabelen

Deze worden automatisch geladen op basis van relevantie.

Essentiële commando's

Je hoeft er maar een handvol te kennen. Dit zijn de commando's die je dagelijks gebruikt:

Sessie-management

| Commando | Wat het doet |
|---|---|
| `/clear` | Reset je context volledig — begin fris |
| `/compact [focus]` | Comprimeer gesprek, behoud de essentie |
| `/context` | Toon hoeveel context je gebruikt |
| `/btw [vraag]` | Snelle vraag zonder je context te vullen |
| `/cost` | Toon token-gebruik en kosten |

Wanneer welk commando?

`/clear` — Tussen losse taken

De grootste winst. Spring je van "maak een component" naar "fix die bug"? /clear en begin fris. Vermijd "keukenlasessies" waar alles door elkaar loopt.

`/compact` — Bij lange sessies

Werk je lang aan dezelfde taak en wordt Claude trager? Comprimeer:

/compact focus op de animatie van de hero-sectie

Dit verwijdert onnodige gespreksgeschiedenis maar behoudt wat relevant is.

`/btw` — Voor snelle vragen

Wil je even iets opzoeken zonder je werkcontext te vervuilen?

/btw wat is de Tailwind class voor een grid met 3 kolommen?

Het antwoord verschijnt als overlay en komt niet in je gespreksgeschiedenis.

De correctie-loop herkennen

Als je Claude 2x op hetzelfde corrigeert → /clear en schrijf een betere, specifiekere prompt. Dat werkt vrijwel altijd beter dan doormodderen.

Dit is misschien wel de belangrijkste gewoonte die je kunt ontwikkelen. Meer hierover in Hoofdstuk 2: De design-loop.

Permission modes

Claude Code vraagt standaard toestemming voordat het bestanden aanpast of commando's uitvoert. Je kunt dit gedrag instellen:

| Mode | Gedrag |
|---|---|
| `default` | Vraagt toestemming voor schrijven en shell-commando's |
| `plan` | Alleen-lezen — analyseert maar doet niets |
| `full` | Voert alles uit zonder te vragen |

In de praktijk

# Veilig verkennen — Claude kan alleen lezen
claude --permission-mode plan

# Standaard — vraagt toestemming per actie
claude

# Volledig vertrouwen — voor bekende workflows
claude --permission-mode full

Advies voor beginners: Start met default. Je leert snel welke acties Claude uitvoert en wanneer je "ja" klikt. Na een paar sessies kun je overstappen naar full voor vertrouwde taken.

Advies voor automation: Gebruik full voor scripts en geautomatiseerde workflows (zoals een dagelijkse briefing).

Werken met bestanden

Claude Code kan elk bestand lezen en schrijven waar je gebruikersaccount toegang toe heeft. Enkele voorbeelden:

# Lees en analyseer
"Lees src/components/Hero.tsx en geef feedback op de structuur"

# Bewerk bestaand bestand
"Voeg een hover-animatie toe aan de kaart-component in Card.tsx"

# Maak nieuw bestand
"Maak een nieuw component voor een testimonial-slider"

# Zoek in project
"Zoek alle plekken waar we de kleur #3B82F6 gebruiken"

# Verwerk meerdere bestanden
"Lees alle componenten in src/components/ en maak een overzicht"

Bestanden refereren

Gebruik @ gevolgd door het pad om direct naar bestanden te verwijzen:

Kijk naar @src/components/Button.tsx — de hover-state voelt te abrupt

Dit is efficiënter dan de inhoud beschrijven, omdat Claude het bestand direct leest.

Piping — Externe data invoeren

Je kunt data van buiten je project in Claude Code pipen:

# Een bestand verwerken
cat design-tokens.json | claude -p "Converteer deze tokens naar CSS variables"

# Command output verwerken
ls -la src/components/ | claude -p "Welke componenten hebben we?"

# API response analyseren
curl -s https://api.example.com/data | claude -p "Structureer deze data"

Dit is krachtig voor integraties — je kunt data uit elk systeem halen en door Claude laten verwerken.

Checklist: Klaar om te bouwen

Voordat je naar het volgende hoofdstuk gaat, check:

  • Claude Code is geïnstalleerd (claude --version werkt)
  • Je API key is ingesteld
  • Je hebt een CLAUDE.md in je project met basiscontext
  • Je kent /clear, /compact en /btw
  • Je hebt één succesvolle sessie gehad

Dat is alles. Je hebt nu genoeg om te beginnen met het kernmodel van werken met AI.