novi-lessons/Samenvattingen/Les10-Samenvatting.md

Les 10: AI Tool Selection & Workflows

---

Hoofdstuk

Deel 3: AI Tooling & Prototyping (Les 10-12)

Beschrijving

Leer de sterke en zwakke punten van elke AI tool kennen. Ontwikkel een framework om de juiste tool te kiezen voor de juiste taak en bouw je eigen workflow.

---

Te Behandelen

Waarom Tool Selection Belangrijk Is

Je kent nu meerdere AI tools:

• ChatGPT (brainstormen, planning, uitleg)
• Claude (lange context, nuance, analyse)
• v0.dev (UI prototyping)
• OpenCode (code schrijven met project context)

Het probleem: Elke tool heeft sterke en zwakke punten. De juiste tool kiezen bespaart tijd en levert betere resultaten.

---

Tool Vergelijking

Tool	Sterk in	Minder sterk in	Kosten
ChatGPT	Brainstormen, uitleg, planning, algemene kennis	Grote codebases, lange context	Gratis / Pro €20/maand
Claude	Lange documenten, nuance, analyse, veiligheid	Soms te voorzichtig, geen images genereren	Gratis / Pro $20/maand
v0.dev	UI components, snel prototypen, Tailwind	Complexe logica, backend	Gratis tier
OpenCode	Code schrijven, project context, terminal	Geen web access, geen images	Gratis

---

Tool Selection Framework

Stap 1: Identificeer de taak

• Wat wil je bereiken?
• Hoe complex is het?
• Hoeveel context is nodig?

Stap 2: Kies de juiste tool

Als je wilt...                        Gebruik...
─────────────────────────────────────────────────
Brainstormen over een idee            → ChatGPT
Een lange codebase analyseren         → Claude
Snel een UI component maken           → v0.dev
Code schrijven met project context    → OpenCode
Een complex document begrijpen        → Claude
Uitleg krijgen over een concept       → ChatGPT
React component met styling           → v0.dev
Feature implementeren in project      → OpenCode

---

Workflow Patterns

Pattern 1: Planning → Prototyping → Implementation

1. ChatGPT: Brainstorm features, maak planning
2. v0.dev: Genereer UI prototypes
3. OpenCode: Implementeer met project context

Pattern 2: Research → Design → Build

1. ChatGPT/Claude: Research beste aanpak
2. v0.dev: Design components
3. OpenCode: Bouw en integreer

Pattern 3: Quick Iteration

1. v0.dev: Snel component genereren
2. OpenCode: Aanpassen en integreren
3. Repeat

---

Praktijk: Dezelfde Taak, Drie Tools

Opdracht: Bouw een Contact Form component

Met ChatGPT:

Prompt: Ik wil een contact form maken met React en Tailwind.
Velden: naam, email, bericht. Validatie nodig.
Geef me de code en leg uit hoe het werkt.

→ Krijg: Uitleg + code, maar zonder project context

Met v0.dev:

Prompt: Modern contact form with name, email, message fields.
Tailwind styling, validation, responsive design.

→ Krijg: Visueel prototype, direct te gebruiken

Met OpenCode:

Prompt: Maak een ContactForm component in src/components/
met naam, email en bericht velden. Gebruik onze bestaande
Input en Button components. Voeg Zod validatie toe.

→ Krijg: Geïntegreerde code die past in je project

---

Wanneer Combineer Je Tools?

Scenario 1: Nieuwe feature bouwen

1. ChatGPT: "Hoe zou je een dark mode toggle implementeren in React?"
2. v0.dev: "Dark mode toggle component with smooth transition"
3. OpenCode: "Integreer deze toggle in onze navbar, sla preference op in localStorage"

Scenario 2: Bug oplossen

1. OpenCode: Vraag om bug te identificeren
2. Claude: Als de foutmelding complex is, vraag om uitleg
3. OpenCode: Implementeer de fix

Scenario 3: Nieuwe technologie leren

1. ChatGPT: "Leg uit hoe React Server Components werken"
2. v0.dev: "Example of React Server Component with data fetching"
3. OpenCode: "Help me dit toe te passen in mijn Next.js project"

---

Anti-Patterns (Wat Niet Te Doen)

❌ Verkeerde tool voor de taak:

• ChatGPT vragen om een hele app te bouwen → te weinig context
• v0.dev vragen om complexe backend logica → niet zijn sterke punt
• OpenCode vragen om design inspiratie → kan geen images maken

❌ Heen en weer kopiëren zonder begrip:

• Kopieer niet blind code van ChatGPT naar je project
• Begrijp eerst WAT de code doet

❌ Dezelfde prompt in elke tool:

• Pas je prompt aan per tool
• v0.dev wil visuele beschrijvingen
• OpenCode wil project-specifieke context

---

Tools

• ChatGPT
• Claude
• v0.dev
• OpenCode/WebStorm

---

Lesopdracht (2 uur)

Tool Comparison Challenge

Deel 1: Dezelfde Taak, Drie Tools (1 uur)

Bouw een "Contact Form" component met alle drie de tools:

1. ChatGPT (20 min)

   • Vraag om code + uitleg
   • Noteer: hoe lang duurde het, kwaliteit output, wat miste?

2. v0.dev (20 min)

   • Genereer visueel prototype
   • Noteer: hoe snel, hoe mooi, hoe aanpasbaar?

3. OpenCode (20 min)

   • Integreer in bestaand project
   • Noteer: hoe goed past het, hoeveel aanpassing nodig?

Deel 2: Analyse (30 min)

Vul dit schema in:

Aspect	ChatGPT	v0.dev	OpenCode
Tijd tot werkend component
Kwaliteit code
Visueel design
Past in project
Hoeveel aanpassing nodig
Totaalscore (1-10)

Deel 3: Workflow Documentatie (30 min)

• Maak docs/WORKFLOW.md in je project
• Documenteer je ideale workflow per taaktype
• Inclusief template prompts voor elke tool

Deliverable

• Screenshot van alle 3 contact forms
• Ingevuld vergelijkingsschema
• docs/WORKFLOW.md bestand

---

Huiswerk (2 uur)

Bouw Je Tool Selection Cheat Sheet

Deel 1: Cheat Sheet Maken (1 uur)

Maak een persoonlijke "Tool Selection Cheat Sheet" (1 pagina):

# Mijn AI Tool Cheat Sheet

## Wanneer gebruik ik wat?

### ChatGPT
- ✅ Gebruik voor: [jouw ervaring]
- ❌ Niet voor: [jouw ervaring]
- 💡 Beste prompt tip: [jouw tip]

### Claude
- ✅ Gebruik voor: [jouw ervaring]
- ❌ Niet voor: [jouw ervaring]
- 💡 Beste prompt tip: [jouw tip]

### v0.dev
- ✅ Gebruik voor: [jouw ervaring]
- ❌ Niet voor: [jouw ervaring]
- 💡 Beste prompt tip: [jouw tip]

### OpenCode
- ✅ Gebruik voor: [jouw ervaring]
- ❌ Niet voor: [jouw ervaring]
- 💡 Beste prompt tip: [jouw tip]

Deel 2: Testen op Nieuwe Taken (45 min)

Test je cheat sheet op 2 nieuwe taken:

1. Bouw een "Testimonial Card" component
2. Voeg een "Dark Mode Toggle" toe

Per taak: kies tools op basis van cheat sheet, voer uit, update cheat sheet.

Deel 3: Reflectie (15 min)

Schrijf korte reflectie (400 woorden):

• Welke tool is jouw favoriet en waarom?
• Wanneer combineer je tools?
• Wat ga je anders doen na deze les?

Deliverable

• Tool Selection Cheat Sheet (1 pagina)
• 2 gebouwde components
• Reflectie (400 woorden)

---

Leerdoelen

Na deze les kan de student:

• De sterke en zwakke punten van elke AI tool benoemen
• De juiste tool kiezen voor een specifieke taak
• Meerdere tools combineren in een effectieve workflow
• Een persoonlijke workflow documenteren
• Template prompts schrijven per tool
• Kritisch evalueren welke tool wanneer het beste werkt