7.0 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
- Zelfstandig een project deployen naar Vercel
Wat ga je maken?
Je gaat een complete landingspagina bouwen voor een fictief product of bedrijf. 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:
- Minimaal 3 secties (bijv. hero, features, pricing, testimonials, footer)
- Minimaal 1 carousel (image slider of testimonial slider)
- Minimaal 1 accordion (FAQ of uitklapbare features)
- Je bent vrij in wat je tekent en welk "product" je bedenkt!
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 (15 min)
Pak pen en papier en teken je complete landingspagina. Je hoeft geen kunstenaar te zijn!
Teken:
- Meerdere secties onder elkaar (minimaal 3!)
- Geef aan waar je carousel komt
- Geef aan waar je accordion komt
- Tekst indicaties (schrijf "HEADLINE" of de echte tekst)
- Buttons en afbeelding placeholders
Tips:
- Simpele blokken en lijnen zijn genoeg
- Schrijf bij elementen wat ze zijn
- Denk na over de flow van je pagina
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 Project - Schets + Beschrijving (15 min)
Open je ChatGPT Project "Les 1 - v0.dev Prompt Engineer" en upload je foto. Voeg een gedetailleerde beschrijving toe.
Gebruik dit template:
Dit is een schets voor een complete landingspagina.
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"]
**Let op:** Er moet een carousel in zitten en een accordion.
Genereer een gedetailleerde Engelse prompt die ik direct kan gebruiken in v0.dev.
Voorbeeld ingevuld:
Dit is een schets voor een complete landingspagina.
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
**Let op:** Er moet een carousel in zitten en een accordion.
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 (20 min)
- Ga naar v0.dev
- Log in met je Vercel/GitHub account
- Plak de prompt van ChatGPT
- Klik op genereren
- Bekijk het resultaat
Itereren voor carousel en accordion: Als de carousel of accordion er niet (goed) in zit, gebruik follow-up prompts:
- "Add a testimonial carousel with 3 slides"
- "Add an FAQ accordion section"
- "Make the carousel auto-scroll"
- "Style the accordion with smooth animations"
Let op: Je hebt ~7 gratis generaties per dag. Gebruik ze slim!
Stap 6: Deploy naar Vercel (10 min)
Dit ga je zelf uitzoeken! Dit is een belangrijke skill als developer.
Hints:
- Je hebt een GitHub account nodig (maak gratis aan op github.com)
- Zoek naar "Add Integration" of "Deploy" in v0.dev
- v0 kan koppelen met GitHub → Vercel deployt automatisch
Resultaat:
- Je krijgt een live URL:
jouw-project.vercel.app - Je code staat nu ook in GitHub
Vastgelopen?
- Vraag eerst een klasgenoot om hulp
- Probeer het 5 minuten zelf voordat je de docent vraagt
- Google is je vriend: "v0.dev deploy to vercel"
Op te leveren
Aan het einde van de les heb je:
-
Je originele tekening:
- Foto van je papieren schets (met 3+ secties zichtbaar)
-
ChatGPT conversatie:
- Screenshot van je prompt + de gegenereerde output
- Noteer welke specificaties je meegaf (tech stack, kleuren, stijl)
-
v0.dev project:
- Screenshot van je landingspagina met carousel zichtbaar
- Screenshot van je landingspagina met accordion zichtbaar
- Eventuele iteratie-prompts die je gebruikte
-
Live deployment:
- Vercel URL van je gedeployde landingspagina
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" |
| ✅ Carousel | "Testimonial slider" of "Image carousel" |
| ✅ Accordion | "FAQ sectie" of "Uitklapbare features" |
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?
- Heeft je landingspagina minimaal 3 secties?
- Zit er een werkende carousel in?
- Zit er een werkende accordion in?
- Heb je de deployment zelf uitgezocht?
- 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:
- Extra interactie: Voeg een contact formulier of newsletter signup toe
- Andere stijl: Genereer dezelfde schets met een compleet andere look & feel (dark mode?)
- Animaties: Voeg scroll-animaties of hover-effecten toe via prompts
- Help een klasgenoot: Uitleggen is de beste manier om te leren!
Succes en veel plezier met je eerste AI-gegenereerde website!