Workflows — Praktische recepten voor dagelijks werk

1. Beschrijf het concept
   "Bouw een onboarding-flow voor een fitness-app. 
    3 stappen: doel kiezen → niveau selecteren → schema genereren. 
    Elke stap is een full-screen kaart die naar links 
    animeert bij 'volgende'. Mobiel-eerst."

2. Review op je telefoon
   Open de localhost URL op je telefoon (zelfde wifi-netwerk).
   Test de flow: voelt de navigatie natuurlijk? 
   Zijn de tap-targets groot genoeg?

3. Redirect
   "De transitie tussen stappen is te snel — maak het 400ms 
    met een ease-out. Stap 2 heeft te veel opties — 
    beperk tot 3 niveaus met iconen in plaats van tekst."

4. Itereer tot het klopt
   Gemiddeld 3-5 rondes voor een solide prototype.

1. Definieer tokens
   "Lees mijn DESIGN.md en genereer een tokens.ts bestand 
    met alle kleuren, spacing, typografie en schaduwen 
    als TypeScript constanten."

2. Bouw basiscomponenten
   "Bouw deze componenten op basis van onze tokens:
    - Button (primary, secondary, ghost) in 3 sizes
    - Card (default, elevated, outlined)
    - Input (text, search, textarea)
    - Badge (neutral, success, warning, error)
    Elk component met hover, focus en disabled states."

3. Genereer een preview-pagina
   "Maak een component-showcase pagina die alle componenten 
    toont met hun varianten. Groepeer per component-type."

4. Documenteer
   "Voeg JSDoc comments toe aan elk component met:
    - Props-beschrijving
    - Wanneer deze variant te gebruiken
    - Voorbeeld-gebruik"

1. Scan
   "Lees alle componenten in src/components/ en geef een 
    overzicht: welke componenten zijn er, hoe zijn ze 
    gestijld, en welke voelen het meest generiek?"

2. Audit
   "Voer een design-audit uit op de homepage. 
    Beoordeel op: typografie, kleur, spacing, 
    hover-states, visuele hierarchie en animatie. 
    Geef per categorie een score van 1-10 
    en concrete verbeterpunten."

3. Prioriteer
   Claude geeft een geprioriteerde lijst. 
   De volgorde is bijna altijd:
   1. Font swap (grootste visuele impact)
   2. Color cleanup (warmte toevoegen)
   3. Hover/active states (interactiviteit)
   4. Layout/spacing (ademruimte)
   5. Component upgrades (details)

4. Voer uit
   "Begin met de font swap: vervang Inter door Geist Sans 
    voor body en Fraunces voor display. 
    Pas de typografie-schaal aan."
   
   → Review → Volgende prioriteit

/redesign [URL of pad naar component]

1. Beschrijf de choreografie
   "De hero-sectie heeft deze animatie-volgorde:
    - 0ms: pagina laadt, alles onzichtbaar
    - 300ms: achtergrond fade-in
    - 600ms: headline schuift op van onder, fade-in
    - 900ms: subheadline volgt
    - 1200ms: CTA-knop springt in (spring physics)
    - 1500ms: decoratief element fades in"

2. Claude genereert Storyboard
   /* ANIMATION STORYBOARD
    *
    *    0ms   wacht op mount
    *  300ms   bg → opacity 0→1 (ease-out, 400ms)
    *  600ms   h1 → translateY(24→0) + opacity (ease-out, 500ms)
    *  900ms   p  → translateY(16→0) + opacity (ease-out, 400ms)
    * 1200ms   btn → scale(0.8→1) + opacity (spring: 500/25)
    * 1500ms   deco → opacity 0→1 (ease-out, 600ms)
    */

3. Tune met DialKit
   "Genereer een DialKit panel met sliders voor:
    - Stagger delay (50-200ms)
    - Spring stiffness (200-600)
    - Spring damping (15-40)
    - Entrance distance (8-32px)
    - Overall duration multiplier (0.5-2.0)"

4. Finetunen
   Gebruik de live sliders om waarden aan te passen 
   totdat de animatie precies goed voelt.
   
   "Lock deze waarden in en verwijder het DialKit panel."

| Context | Stiffness | Damping | Karakter |
|---|---|---|---|
| Kaarten/containers | 300 | 30 | Smooth settle, professioneel |
| Pop-ins/badges | 500 | 25 | Snappy, speels |
| Slides/entrances | 350 | 28 | Gebalanceerd |
| Bouncy buttons | 400 | 20 | Veerkrachtig |
| Trage reveals | 200 | 35 | Elegant, dramatisch |

1. Start de critique
   "Voer een design critique uit op deze pagina. 
    Analyseer als een senior designer die het werk 
    van een getalenteerde junior reviewt.
    Wees direct, specifiek en constructief."

2. Claude analyseert in 6 stappen:
   1. Context — Wat is dit? Voor wie?
   2. First Impressions — Wat valt direct op?
   3. Visual Design — Kleur, typografie, schaduwen, spacing
   4. Interface Design — Focus, disclosure, density, feedback
   5. Consistency — Patronen, platform-conventies
   6. User Context — Hoe voelt dit voor de eindgebruiker?

3. Verwerk de feedback
   Claude geeft feedback gesorteerd op impact:
   - Structural (breekt de ervaring)
   - Behavioral (hindert de gebruiker)
   - Visual (vermindert de kwaliteit)
   
   Begin altijd met structural issues.

1. Selecteer in Figma
   Open het frame in Figma Desktop App.

2. Context laden
   "Bekijk het geselecteerde Figma frame. 
    Lees ook DESIGN.md en src/styles/tokens.ts. 
    Gebruik bestaande componenten waar mogelijk."

3. Genereer
   "Bouw dit frame als [React/Vue/Svelte] component. 
    Responsive: mobiel-eerst. 
    Gebruik onze design tokens, geen harde waarden."

4. Vergelijk
   "Screenshot het resultaat en vergelijk met 
    het Figma-ontwerp. Waar wijken we af?"

5. Finetunen
   Claude geeft een lijst afwijkingen. 
   Fix de grootste eerst:
   "De padding in de hero is 48px in Figma maar 32px in code. 
    De schaduw op de kaarten is te hard. 
    De font-weight van de subheading moet 500 zijn, niet 400."

6. Itereer tot pixel-perfect

Laag 1: Skills (Expertise)
    → HOE te bouwen: design-regels, verboden patronen, 
      component-specificaties

Laag 2: Canvas (Oppervlak) 
    → WAAR te bouwen: het project, de context, 
      de bestaande code en tokens

Laag 3: Inspiration (Smaak)
    → WAAROM het er zo uitziet: referenties, moodboards, 
      stijl-beschrijvingen, design-intentie

Stap 1: Skills laden
   Zorg dat taste-skill en interface-craft actief zijn.
   Check: "Welke design skills heb je geladen?"

Stap 2: Canvas opzetten
   "Lees CLAUDE.md, DESIGN.md en de bestaande componenten 
    in src/components/. Dat is onze basis."

Stap 3: Inspiratie geven
   "Ik wil een about-pagina bouwen. De sfeer: 
    denk aan Monocle magazine — editorial, warm, 
    typografie-gedreven. Referenties: 
    the-outline.com en readymag.com/examples"

Stap 4: Bouwen
   "Bouw de pagina. Gebruik de skills voor kwaliteit, 
    onze canvas voor consistentie, en de referenties 
    voor het visuele karakter."

| Situatie | Workflow |
|---|---|
| Nieuw idee valideren | Rapid Prototyping |
| Nieuw project starten | Design System opzetten |
| Bestaand project upgraden | Component Audit |
| Complexe animatie bouwen | Storyboard Animation |
| Eigen werk reviewen | Design Critique |
| Figma design bouwen | Design-to-Code Handoff |
| Maximale kwaliteit | Drie-Lagen Harnas |