fix: better order
This commit is contained in:
Tim Rijkse
@@ -1,12 +1,4 @@
|
||||
# Les 5: AI voor Content en Asset Generation
|
||||
|
||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||
>
|
||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
||||
> - Les05-Slide-Overzicht.md
|
||||
> - Les05-Lesplan.md
|
||||
> - Les05-Bijlage-A-Lesopdracht.md
|
||||
> - Les05-Bijlage-B-Huiswerkopdracht.md
|
||||
# Les 5: AI Tool Selection & Workflows
|
||||
|
||||
---
|
||||
|
||||
@@ -14,112 +6,302 @@
|
||||
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
||||
|
||||
## Beschrijving
|
||||
AI-gegenereerde visuals en assets voor professionele webprojecten.
|
||||
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
|
||||
|
||||
### Image Generation Tools Vergelijking
|
||||
- DALL-E 3 (via ChatGPT Plus)
|
||||
- Leonardo.ai
|
||||
- Ideogram
|
||||
- Midjourney alternatives
|
||||
### Waarom Tool Selection Belangrijk Is
|
||||
|
||||
### Prompt Engineering voor Images
|
||||
- Style descriptors
|
||||
- Mood en colors
|
||||
- Composition
|
||||
- Aspect ratios
|
||||
- Negative prompts
|
||||
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)
|
||||
|
||||
### Asset Generation Workflow voor Web
|
||||
- Hero images
|
||||
- Icons
|
||||
- Illustrations
|
||||
- Backgrounds
|
||||
**Het probleem:** Elke tool heeft sterke en zwakke punten. De juiste tool kiezen bespaart tijd en levert betere resultaten.
|
||||
|
||||
### Image Optimization voor Web
|
||||
- Compression
|
||||
- Formats (WebP, AVIF, etc.)
|
||||
- Responsive images
|
||||
---
|
||||
|
||||
### Copyright & Licenties
|
||||
- Copyright overwegingen bij AI-generated content
|
||||
- Wat mag wel/niet
|
||||
### Tool Vergelijking
|
||||
|
||||
### Integratie in Next.js
|
||||
- Next.js Image component optimalisatie
|
||||
- Best practices
|
||||
| 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
|
||||
|
||||
---
|
||||
|
||||
### Je Eigen Workflow Documenteren
|
||||
|
||||
Maak een `docs/WORKFLOW.md` in je project:
|
||||
|
||||
```markdown
|
||||
# Mijn AI Workflow
|
||||
|
||||
## Planning Fase
|
||||
- Tool: ChatGPT
|
||||
- Wat: Feature breakdown, technische beslissingen
|
||||
- Template prompt: "Ik wil [feature]. Wat zijn de stappen?"
|
||||
|
||||
## UI Design Fase
|
||||
- Tool: v0.dev
|
||||
- Wat: Component prototypes
|
||||
- Template prompt: "Modern [component] with [requirements]"
|
||||
|
||||
## Implementation Fase
|
||||
- Tool: OpenCode
|
||||
- Wat: Code schrijven en integreren
|
||||
- Template prompt: "Maak [component] in [locatie] met [requirements]"
|
||||
|
||||
## Debugging
|
||||
- Tool: OpenCode (eerst), Claude (als het complex is)
|
||||
- Wat: Errors oplossen
|
||||
- Template prompt: "Ik krijg deze error: [error]. Dit is mijn code: [code]"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- DALL-E 3 (ChatGPT Plus)
|
||||
- Leonardo.ai
|
||||
- Ideogram
|
||||
- Next.js Image component
|
||||
- ChatGPT
|
||||
- Claude
|
||||
- v0.dev
|
||||
- OpenCode/WebStorm
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Complete Visual Identity Challenge
|
||||
### Tool Comparison Challenge
|
||||
|
||||
**Kies thema voor fictieve SaaS landing page:**
|
||||
- Project management
|
||||
- Fitness app
|
||||
- Educational platform
|
||||
- Of eigen keuze
|
||||
**Deel 1: Dezelfde Taak, Drie Tools (1 uur)**
|
||||
|
||||
**Genereer complete asset set:**
|
||||
Bouw een "Contact Form" component met alle drie de tools:
|
||||
|
||||
| Asset | Specificaties |
|
||||
|-------|---------------|
|
||||
| Hero image | 16:9 landscape |
|
||||
| Feature icons | 6 stuks, consistent style, SVG-ready |
|
||||
| Custom illustraties | 2 stuks voor sections |
|
||||
| Background pattern | Seamless texture |
|
||||
| Favicon | Multiple sizes |
|
||||
1. **ChatGPT (20 min)**
|
||||
- Vraag om code + uitleg
|
||||
- Noteer: hoe lang duurde het, kwaliteit output, wat miste?
|
||||
|
||||
**Vereisten:**
|
||||
- Alle assets visueel consistent (coherent color palette, matching style, professional look)
|
||||
- Geoptimaliseerd voor web (<200KB per image, correct formats)
|
||||
- Geïntegreerd in Next.js landing page met Tailwind CSS
|
||||
- Proper Image component usage
|
||||
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)
|
||||
|
||||
### Portfolio Project Visual Refresh
|
||||
### Bouw Je Tool Selection Cheat Sheet
|
||||
|
||||
**Opdracht:**
|
||||
- Kies een bestaand project uit eerdere lessen (of bouw nieuw landing page project)
|
||||
- Vervang ALLE placeholder images met professioneel AI-gegenereerde assets
|
||||
- Doel: cohesieve visual identity die eruitziet als professional design work
|
||||
**Deel 1: Cheat Sheet Maken (1 uur)**
|
||||
|
||||
**Case Study Blog Post (400 woorden):**
|
||||
Maak een persoonlijke "Tool Selection Cheat Sheet" (1 pagina):
|
||||
|
||||
Schrijf over:
|
||||
- Prompts die werkten
|
||||
- Iteratie proces
|
||||
- Challenges encountered
|
||||
- AI vs stock photos/Unsplash comparison
|
||||
- Time saved estimate
|
||||
- Quality assessment
|
||||
- Zou je dit in productie gebruiken?
|
||||
- Tips voor anderen
|
||||
```markdown
|
||||
# Mijn AI Tool Cheat Sheet
|
||||
|
||||
**Include:** Before/after screenshots
|
||||
## 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]
|
||||
|
||||
## Mijn Favoriete Combinaties
|
||||
1. [Workflow 1]
|
||||
2. [Workflow 2]
|
||||
```
|
||||
|
||||
**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 je cheat sheet
|
||||
- Voer uit en noteer resultaat
|
||||
- Update cheat sheet indien nodig
|
||||
|
||||
**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 (Testimonial Card, Dark Mode Toggle)
|
||||
- Reflectie (400 woorden)
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Verschillende image generation tools vergelijken
|
||||
- Effectieve prompts schrijven voor image generatie
|
||||
- Consistente visual assets genereren voor webprojecten
|
||||
- Images optimaliseren voor web performance
|
||||
- Copyright overwegingen bij AI-generated content begrijpen
|
||||
- Assets integreren in Next.js met proper optimization
|
||||
- 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
|
||||
|
||||
Reference in New Issue
Block a user