249 lines
6.3 KiB
Markdown
249 lines
6.3 KiB
Markdown
# Bijlage A: Lesopdracht Les 1
|
|
|
|
## Van Schets naar Website met AI
|
|
|
|
**Cursus:** AI Fundamentals
|
|
**Les:** 1 - Introductie AI & Large Language Models
|
|
**Duur:** ~55 minuten
|
|
**Werkvorm:** Individueel
|
|
|
|
---
|
|
|
|
## Leerdoelen
|
|
|
|
Na deze opdracht kun je:
|
|
- Een idee visualiseren door te tekenen
|
|
- ChatGPT gebruiken om een schets om te zetten naar een gedetailleerde prompt
|
|
- Tech stack, kleuren en stijl specificeren in je prompt
|
|
- v0.dev gebruiken om UI-componenten te genereren
|
|
- Een project deployen naar Vercel
|
|
|
|
---
|
|
|
|
## Wat ga je maken?
|
|
|
|
Je gaat een **hero section** bouwen voor een fictieve website. Het bijzondere? **Je begint met een tekening op papier!**
|
|
|
|
Je tekening wordt, via ChatGPT en v0.dev, een echte, werkende website die online staat.
|
|
|
|
**Vereiste elementen in je hero section:**
|
|
- Headline (kop)
|
|
- Subtext (ondertitel/beschrijving)
|
|
- Call-to-action button
|
|
- Visueel element (afbeelding placeholder of illustratie)
|
|
|
|
---
|
|
|
|
## De Workflow
|
|
|
|
```
|
|
1. TEKEN je idee op papier
|
|
↓
|
|
2. Maak een FOTO van je tekening
|
|
↓
|
|
3. Upload naar CHATGPT + beschrijf je wensen
|
|
↓
|
|
4. ChatGPT maakt een gedetailleerde PROMPT
|
|
↓
|
|
5. Plak die prompt in V0.DEV → Website!
|
|
↓
|
|
6. DEPLOY naar Vercel
|
|
```
|
|
|
|
---
|
|
|
|
## Stappenplan
|
|
|
|
### Stap 1: Tekenen (10 min)
|
|
|
|
Pak pen en papier en teken je hero section. Je hoeft geen kunstenaar te zijn!
|
|
|
|
**Teken:**
|
|
- De layout (waar staat wat?)
|
|
- Tekst indicaties (schrijf "HEADLINE" of de echte tekst)
|
|
- Buttons
|
|
- Afbeelding placeholders (vierkant met X erdoor)
|
|
|
|
**Tips:**
|
|
- Simpele blokken en lijnen zijn genoeg
|
|
- Geef aan wat links en rechts staat
|
|
- Schrijf bij elementen wat ze zijn
|
|
|
|
### Stap 2: Foto maken (2 min)
|
|
|
|
Maak een duidelijke foto van je tekening met je telefoon.
|
|
- Zorg voor goede belichting
|
|
- Houd de camera recht boven de tekening
|
|
- Check of alles leesbaar is
|
|
|
|
### Stap 3: ChatGPT - Schets + Beschrijving (15 min)
|
|
|
|
Open ChatGPT en upload je foto. Voeg een gedetailleerde beschrijving toe.
|
|
|
|
**Gebruik dit template:**
|
|
|
|
```
|
|
Dit is een schets voor een hero section van mijn website.
|
|
|
|
Beschrijf deze schets als een gedetailleerde prompt voor v0.dev.
|
|
|
|
**Context:**
|
|
- Type website: [SaaS / Portfolio / Webshop / Blog / etc.]
|
|
- Naam/bedrijf: [Verzin een naam, bijv. "TaskFlow"]
|
|
- Doelgroep: [Bijv. startups, developers, consumenten]
|
|
|
|
**Tech stack:**
|
|
- Gebruik React met Tailwind CSS
|
|
- Maak het responsive (mobile-first)
|
|
|
|
**Kleuren:**
|
|
- Primary: [bijv. #2563EB (blauw) of beschrijf: "warm oranje"]
|
|
- Secondary: [optioneel]
|
|
- Of: [beschrijf het thema: "donker met neon accenten"]
|
|
|
|
**Stijl/Look & Feel:**
|
|
- [Kies: Modern / Minimalistisch / Speels / Corporate / Retro / etc.]
|
|
- [Extra: "Met subtiele animaties" of "Clean en zakelijk"]
|
|
|
|
Genereer een gedetailleerde Engelse prompt die ik direct kan gebruiken in v0.dev.
|
|
```
|
|
|
|
**Voorbeeld ingevuld:**
|
|
|
|
```
|
|
Dit is een schets voor een hero section van mijn website.
|
|
|
|
Beschrijf deze schets als een gedetailleerde prompt voor v0.dev.
|
|
|
|
**Context:**
|
|
- Type website: SaaS landingspagina
|
|
- Naam/bedrijf: TaskFlow
|
|
- Doelgroep: Startups en kleine bedrijven
|
|
|
|
**Tech stack:**
|
|
- Gebruik React met Tailwind CSS
|
|
- Maak het responsive (mobile-first)
|
|
|
|
**Kleuren:**
|
|
- Primary: #2563EB (blauw)
|
|
- Secondary: #1E40AF (donkerder blauw)
|
|
|
|
**Stijl/Look & Feel:**
|
|
- Modern en minimalistisch
|
|
- Professioneel maar toegankelijk
|
|
- Subtiele hover animaties op buttons
|
|
|
|
Genereer een gedetailleerde Engelse prompt die ik direct kan gebruiken in v0.dev.
|
|
```
|
|
|
|
### Stap 4: Prompt kopiëren (1 min)
|
|
|
|
ChatGPT genereert een gedetailleerde prompt. Kopieer deze volledig.
|
|
|
|
**Let op:** De prompt is in het Engels - v0.dev werkt het beste met Engelse prompts.
|
|
|
|
### Stap 5: v0.dev - Genereren (15 min)
|
|
|
|
1. Ga naar [v0.dev](https://v0.dev)
|
|
2. Log in met je Vercel/GitHub account
|
|
3. Plak de prompt van ChatGPT
|
|
4. Klik op genereren
|
|
5. Bekijk het resultaat
|
|
|
|
**Itereren:**
|
|
Als het resultaat niet perfect is, kun je verfijnen:
|
|
- "Make the button larger"
|
|
- "Add more padding"
|
|
- "Change the headline font to be bolder"
|
|
- "Add a subtle gradient background"
|
|
|
|
**Let op:** Je hebt ~7 gratis generaties per dag. Gebruik ze slim!
|
|
|
|
### Stap 6: Deploy naar Vercel (10 min)
|
|
|
|
**Vereist:** GitHub account (maak gratis aan op github.com als je die nog niet hebt)
|
|
|
|
**Deployment in 4 stappen:**
|
|
1. Klik op "Add Integration" in de linkerzijbalk van v0.dev
|
|
2. Koppel je GitHub account (eenmalig)
|
|
3. v0 maakt automatisch een repository aan in je GitHub
|
|
4. Klik op "Deploy" of "Publish"
|
|
|
|
**Resultaat:**
|
|
- Je krijgt een live URL: `jouw-project.vercel.app`
|
|
- Je code staat nu ook in GitHub
|
|
- Elke update in v0 → automatisch opnieuw gedeployd
|
|
|
|
**Problemen?**
|
|
- Geen GitHub account? Maak er nu een aan op github.com
|
|
- v0 vraagt niet om GitHub? Check of je bent ingelogd in v0.dev
|
|
- Deployment mislukt? Vraag de docent om hulp
|
|
|
|
---
|
|
|
|
## Op te leveren
|
|
|
|
Aan het einde van de les heb je:
|
|
|
|
1. **Je originele tekening:**
|
|
- Foto van je papieren schets
|
|
|
|
2. **ChatGPT conversatie:**
|
|
- Screenshot van je prompt + de gegenereerde output
|
|
- Noteer welke specificaties je meegaf (tech stack, kleuren, stijl)
|
|
|
|
3. **v0.dev project:**
|
|
- Screenshot van je gegenereerde hero section
|
|
- Eventuele iteratie-prompts die je gebruikte
|
|
|
|
4. **Live deployment:**
|
|
- Vercel URL van je gedeployde hero section
|
|
|
|
---
|
|
|
|
## Specificaties Checklist
|
|
|
|
Zorg dat je in je ChatGPT prompt het volgende hebt gespecificeerd:
|
|
|
|
| Element | Voorbeeld |
|
|
|---------|-----------|
|
|
| ✅ Tech stack | "React met Tailwind CSS" |
|
|
| ✅ Kleuren | "#2563EB" of "warm oranje thema" |
|
|
| ✅ Stijl | "Modern, minimalistisch" |
|
|
| ✅ Type website | "SaaS landingspagina" |
|
|
| ✅ Responsive | "Mobile-first design" |
|
|
|
|
---
|
|
|
|
## Beoordeling
|
|
|
|
Deze opdracht wordt niet formeel beoordeeld, maar is essentiële oefening voor de rest van de cursus.
|
|
|
|
**Waar let de docent op:**
|
|
- Heb je alle stappen doorlopen?
|
|
- Heb je je specificaties duidelijk gecommuniceerd?
|
|
- Lijkt het eindresultaat op je originele schets?
|
|
- Kun je uitleggen hoe de workflow werkt?
|
|
|
|
---
|
|
|
|
## Hulp nodig?
|
|
|
|
- Vraag je buurman/buurvrouw
|
|
- Steek je hand op voor de docent
|
|
- Check de officiële documentatie: [v0.dev/docs](https://v0.dev/docs)
|
|
|
|
---
|
|
|
|
## Bonus: Extra uitdaging
|
|
|
|
Klaar en tijd over? Probeer:
|
|
|
|
1. **Tweede component:** Maak een pricing table of features section
|
|
2. **Andere stijl:** Genereer dezelfde schets met een compleet andere look & feel
|
|
3. **Iteratie experiment:** Kijk hoeveel je kunt veranderen met follow-up prompts in v0
|
|
|
|
---
|
|
|
|
*Succes en veel plezier met je eerste AI-gegenereerde website!*
|