# Lesplan Les 1: Introductie AI & Large Language Models

> **Titel cursus:** AI Fundamentals
> **Leeruitkomst/prestatie-indicatoren** waaraan gewerkt wordt:

- De student schrijft effectieve prompts voor tekst-, beeld- en codegeneratie met tools zoals ChatGPT, DALL-E en Midjourney.
- De student past AI op ethische wijze toe en houdt rekening met de valkuilen, waaronder auteursrecht, bias en transparantie.
- De student reflecteert kritisch op het gebruik van AI binnen het creatieve of ontwikkelproces.

---

| **Les 1: Introductie AI & Large Language Models (3 uur)** | |
|---|---|
| **Benodigdheden** | Laptop met internetverbinding, projectiescherm, **papier en pen voor elke student**, toegang tot v0.dev, ChatGPT account, GitHub account, Vercel account |
| **Bijzonderheden** | Dit lesplan is voor een **fysieke** les. Focus op "wow-factor" en enthousiasmeren. Kernworkflow: schets op papier → ChatGPT → v0.dev → website. |

---

## Lesverloop

| **Tijd (minuten)** | **Onderdeel** | **Werkvorm + toelichting + clue** |
|---|---|---|
| | | |
| **0-13** | **Welkom & Introductie** | **Welkom en kennismaking** |
| | | *Werkvorm: klassikaal gesprek (5 min)* |
| | | Stel jezelf voor als docent. Vraag kort wie de studenten zijn en wat hun achtergrond is met AI. Peiling: "Wie heeft ChatGPT al eens gebruikt?" |
| | | |
| | | **Lesindeling en planning** |
| | | Communiceer duidelijk de structuur van de les: |
| | | - Theorie over AI en LLMs (~45 min) |
| | | - Praktijk: ChatGPT leren gebruiken (~25 min) |
| | | - Prompt Engineering basics (~15 min) |
| | | - Live demo: van schets naar website (~27 min) |
| | | - Hands-on opdracht: jouw tekening wordt een website (~55 min) |
| | | |
| | | **Leerdoelen van vandaag** |
| | | 1. Begrijpen wat AI en LLMs zijn |
| | | 2. ChatGPT praktisch leren gebruiken |
| | | 3. Prompt engineering: tech stack, kleuren, stijl specificeren |
| | | 4. **Van schets op papier naar werkende website** |
| | | |
| | | **Accounts check** |
| | | Check of iedereen een ChatGPT, GitHub en Vercel account heeft. Laat studenten die dit nog moeten doen dit nu aanmaken. Tip: Vercel koppelen met GitHub is het makkelijkst. |
| | | |
| **13-33** | **Wat is AI?** | *Inventariseren voorkennis (5 min)* |
| | | *Werkvorm: brainstorm* |
| | | |
| | | Stel de vraag: "Wat is AI volgens jullie?" Laat studenten vrijuit antwoorden. Noteer kernwoorden op het bord/scherm. |
| | | |
| | | *Instructievorm: interactief doceren (15 min)* |
| | | |
| | | **Definitie AI** |
| | | Leg uit dat AI een verzamelnaam is voor systemen die taken uitvoeren waarvoor normaal menselijke intelligentie nodig is. Maak onderscheid tussen: |
| | | - Narrow AI (specifieke taken) |
| | | - General AI (theoretisch, nog niet bereikt) |
| | | |
| | | **Large Language Models (LLMs)** |
| | | Kernuitleg: |
| | | - Getraind op enorme hoeveelheden tekst |
| | | - Voorspellen het volgende woord (next-token prediction) |
| | | - Geen echte "kennis" of "begrip", wel patroonherkenning |
| | | |
| | | *Demonstratie: Next-token prediction (5 min)* |
| | | Open ChatGPT en typ langzaam een zin. Bijvoorbeeld: "De kat zat op de..." |
| | | |
| | | **Hallucinaties** |
| | | Leg uit wat hallucinaties zijn en waarom ze voorkomen. Benadruk het belang van verificatie. |
| | | |
| | | **Clue: LLMs zijn geen databases met feiten, maar statistische modellen die patronen herkennen.** |
| | | |
| **33-45** | **AI Landscape** | *Instructievorm: vergelijkende demonstratie (12 min)* |
| | | |
| | | **De grote spelers** |
| | | Loop door de belangrijkste AI-tools: ChatGPT, Claude, Gemini, Grok. |
| | | |
| | | **Gratis vs Betaald** |
| | | Bespreek kort de verschillen. Conclusie: gratis is voldoende voor deze cursus. |
| | | |
| | | **Welke tool voor welke taak?** |
| | | Korte klassikale discussie. |
| | | |
| | | **Clue: Er is geen "beste" AI-tool - de juiste keuze hangt af van je specifieke use case.** |
| | | |
| **45-70** | **ChatGPT in de Praktijk** | *Werkvorm: interactieve demonstratie met meekijken (25 min)* |
| | | *Doel:* Studenten leren ChatGPT effectief gebruiken |
| | | |
| | | **Interface rondleiding (5 min)** |
| | | Open ChatGPT op het projectiescherm. Laat studenten meekijken en hun eigen ChatGPT openen. |
| | | |
| | | **Model kiezen (3 min)** |
| | | Demonstreer de model selector: GPT-4o, GPT-4o with canvas, GPT-4. |
| | | |
| | | **Tijdelijke Chat (3 min)** |
| | | Demonstreer waar dit staat en wanneer je het gebruikt. |
| | | |
| | | **Afbeeldingen analyseren (5 min)** |
| | | Live demonstratie: upload een schets en laat ChatGPT beschrijven wat hij ziet. **Dit is de basis voor de workflow straks!** |
| | | |
| | | **Bestanden uploaden (3 min)** |
| | | Demonstreer het uploaden van een PDF of document. |
| | | |
| | | **Custom Instructions (3 min)** |
| | | Laat zien waar dit staat en geef voorbeelden. |
| | | |
| | | **Mini-oefening (3 min)** |
| | | Laat studenten experimenteren: start een chat, upload een afbeelding. |
| | | |
| | | **Clue: ChatGPT kan afbeeldingen "lezen" - dit gebruiken we straks om schetsen om te zetten naar prompts.** |
| | | |
| **70-85** | **Prompt Engineering Basics** | *Instructievorm: demonstratie met oefening (15 min)* |
| | | |
| | | **Wat is een prompt?** |
| | | Een prompt is de instructie die je aan een AI geeft. |
| | | |
| | | **Slechte vs Goede Prompt** |
| | | Toon het verschil tussen vage en specifieke prompts. |
| | | |
| | | **Prompt Framework** |
| | | Introduceer: Rol, Context, Taak, Format. |
| | | |
| | | **Tech Stack Specificeren** |
| | | Leg uit wat een tech stack is en waarom je dit moet meegeven: |
| | | - React - JavaScript framework voor UI |
| | | - Tailwind CSS - Utility-first CSS framework |
| | | - "v0.dev genereert automatisch React + Tailwind" |
| | | |
| | | **Kleuren en Look & Feel** |
| | | Leg uit hoe je visuele specificaties meegeeft: |
| | | - Kleuren: hex codes (#2563EB) of beschrijvend ("warm oranje") |
| | | - Stijl: modern, minimalistisch, speels, corporate, etc. |
| | | - Sfeer en referenties: "In de stijl van Stripe.com" |
| | | |
| | | **Clue: Specificeer altijd je tech stack, kleuren en stijl voor consistente resultaten.** |
| | | |
| **85-112** | **Live Demo: v0.dev** | *Instructievorm: live demonstratie (27 min)* |
| | | *Doel:* "Wow-moment" creëren met de schets-naar-website workflow |
| | | |
| | | **Introductie v0.dev (3 min)** |
| | | Leg uit wat v0.dev is: AI-powered UI generator van Vercel. |
| | | |
| | | **De Slimme Workflow (2 min)** |
| | | Leg de 5-stappen workflow uit: |
| | | 1. TEKEN op papier |
| | | 2. FOTO maken |
| | | 3. Upload naar CHATGPT + beschrijf wensen (tech stack, kleuren, stijl) |
| | | 4. ChatGPT maakt PROMPT |
| | | 5. Plak in V0.DEV → Website! |
| | | |
| | | **Demo 1: Schets maken (3 min)** |
| | | Teken live op papier een hero section: links tekst + button, rechts afbeelding placeholder. |
| | | |
| | | **Demo 2: Foto naar ChatGPT (8 min)** |
| | | Upload foto en geef beschrijving mee: |
| | | - "Dit is een schets voor een hero section" |
| | | - Tech stack: React met Tailwind CSS |
| | | - Kleuren: Blauw thema met primary #2563EB |
| | | - Stijl: Modern, minimalistisch, professioneel |
| | | - "Maak hier een gedetailleerde prompt voor v0.dev van" |
| | | |
| | | **Demo 3: Prompt naar v0 (6 min)** |
| | | Kopieer de gegenereerde prompt naar v0.dev. Toon het resultaat. |
| | | |
| | | **Demo 4: Itereren (3 min)** |
| | | Verfijn met follow-up prompts. |
| | | |
| | | **Demo 5: Deployen (2 min)** |
| | | Doorloop het deployment proces: Add Integration → GitHub → Deploy. |
| | | |
| | | **Clue: De schets is je startpunt, ChatGPT is je vertaler, v0.dev is je bouwer.** |
| | | |
| **112-165** | **Hands-on Opdracht** | *Werkvorm: individueel werken (53 min)* |
| | | *Doel:* Zelfstandig de workflow doorlopen |
| | | |
| | | **Opdracht introductie (5 min)** |
| | | Deel de opdracht uit (zie Bijlage: Lesopdracht). Studenten gaan: |
| | | 1. **TEKENEN** op papier - hero section |
| | | 2. **FOTO** maken van schets |
| | | 3. **CHATGPT** - upload + beschrijf (tech stack, kleuren, stijl) |
| | | 4. **PROMPT** kopiëren |
| | | 5. **V0.DEV** - genereren |
| | | 6. **DEPLOY** naar Vercel |
| | | |
| | | **Benodigdheden check** |
| | | Zorg dat iedereen papier en pen heeft! |
| | | |
| | | **Zelfstandig werken (40 min)** |
| | | Loop rond en help studenten waar nodig. Let op: |
| | | - Kwaliteit van de schets (simpel is prima) |
| | | - Volledigheid van ChatGPT prompt (tech stack, kleuren, stijl) |
| | | - Problemen met v0.dev of deployment |
| | | |
| | | **Tussentijdse check (halverwege)** |
| | | "Wie heeft al een prompt uit ChatGPT?" |
| | | "Wie is al in v0.dev bezig?" |
| | | |
| | | **Clue: Het doel is de workflow leren, niet perfectie!** |
| | | |
| **165-180** | **Afsluiting** | *Werkvorm: klassikaal gesprek (15 min)* |
| | | |
| | | **Korte terugblik (5 min)** |
| | | Vraag 2-3 studenten om te delen: |
| | | - Hoe was de ervaring? |
| | | - Leek het resultaat op je schets? |
| | | |
| | | **Samenvatting (3 min)** |
| | | - LLMs en next-token prediction |
| | | - Prompt engineering: tech stack, kleuren, stijl |
| | | - **De workflow: Schets → ChatGPT → v0.dev → Website** |
| | | |
| | | **Huiswerk (5 min)** |
| | | Deel de huiswerkopdracht (zie Bijlage: Huiswerkopdracht): |
| | | - Reflectie schrijven (500 woorden) |
| | | - 5 AI use cases bedenken |
| | | - **Tweede schets doorlopen met andere component** |
| | | - Inleveren via Teams chat |
| | | |
| | | **Vooruitblik** |
| | | Volgende les: Prompt Engineering verdieping. |
| | | |
| | | **Afsluiting** |
| | | Bedank de studenten. Wijs op de beschikbaarheid voor vragen (Teams). |

---

## Timing Overzicht

| Blok | Onderwerp | Start | Eind | Duur |
|------|-----------|-------|------|------|
| 1 | Welkom & Introductie | 0:00 | 0:13 | 13 min |
| 2 | Wat is AI? | 0:13 | 0:33 | 20 min |
| 3 | AI Landscape | 0:33 | 0:45 | 12 min |
| 4 | ChatGPT in de Praktijk | 0:45 | 1:10 | 25 min |
| 5 | Prompt Engineering | 1:10 | 1:25 | 15 min |
| 6 | Live Demo v0.dev | 1:25 | 1:52 | 27 min |
| 7 | Hands-on Opdracht | 1:52 | 2:45 | 53 min |
| 8 | Afsluiting | 2:45 | 3:00 | 15 min |

**Totaal: 180 minuten (3 uur)**

---

## Notities voor de docent

### Voorbereiding
- **BELANGRIJK:** Zorg voor papier en pennen voor alle studenten
- Test v0.dev vooraf - soms zijn er rate limits
- Zorg voor backup-schermafbeeldingen mocht live demo falen
- Maak zelf een schets klaar voor de demo
- Zorg dat je eigen accounts werken (ChatGPT, Claude, v0.dev, GitHub)

### De Schets-Workflow - Key Points
- Benadruk dat tekenen NIET mooi hoeft te zijn
- Simpele blokken en lijnen zijn voldoende
- Het gaat om communiceren van layout en structuur
- ChatGPT is de "vertaler" - die maakt de technische prompt

### Prompt Specificaties - Wat moeten studenten meegeven?
1. **Tech stack:** React met Tailwind CSS (v0 default)
2. **Kleuren:** Hex codes of beschrijving
3. **Stijl:** Modern/minimalistisch/speels/corporate etc.
4. **Responsive:** Mobile-first design
5. **Doel:** Type website (SaaS, portfolio, webshop)

### Mogelijke vragen/discussiepunten
- "Kan ik ook mijn eigen schets direct uploaden naar v0?" → Ja, maar ChatGPT maakt de prompt gedetailleerder
- "Wat als mijn tekening lelijk is?" → Maakt niet uit, het gaat om de layout
- "Welke kleuren moet ik kiezen?" → Kies wat je wilt, of gebruik Tailwind default colors

### Differentiatie
- **Snelle studenten:** Laat ze een tweede component maken of experimenteren met andere stijlen
- **Studenten die moeite hebben:** Help met de ChatGPT prompt, geef ze het template

### Assessment indicatoren
Observeer tijdens de les:
- Maken studenten daadwerkelijk een schets?
- Geven ze volledige specificaties mee aan ChatGPT?
- Kunnen ze de workflow zelfstandig doorlopen?
- Begrijpen ze waarom je tech stack/kleuren/stijl specificeert?

---

## Bijlagen
1. Bijlage A: Lesopdracht - Van Schets naar Website met AI
2. Bijlage B: Huiswerkopdracht - Reflectie, Use Cases en Tweede Schets