6.3 KiB
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)
- Ga naar v0.dev
- Log in met je Vercel/GitHub account
- Plak de prompt van ChatGPT
- Klik op genereren
- 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:
- Klik op "Add Integration" in de linkerzijbalk van v0.dev
- Koppel je GitHub account (eenmalig)
- v0 maakt automatisch een repository aan in je GitHub
- 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:
-
Je originele tekening:
- Foto van je papieren schets
-
ChatGPT conversatie:
- Screenshot van je prompt + de gegenereerde output
- Noteer welke specificaties je meegaf (tech stack, kleuren, stijl)
-
v0.dev project:
- Screenshot van je gegenereerde hero section
- Eventuele iteratie-prompts die je gebruikte
-
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
Bonus: Extra uitdaging
Klaar en tijd over? Probeer:
- Tweede component: Maak een pricing table of features section
- Andere stijl: Genereer dezelfde schets met een compleet andere look & feel
- Iteratie experiment: Kijk hoeveel je kunt veranderen met follow-up prompts in v0
Succes en veel plezier met je eerste AI-gegenereerde website!