πŸŒ™
AI EXPERIMENTS

VIBE CODING

Programmeren op 'vibes'. Vertel de AI wat je wilt, en het wordt gebouwd.
Geen moeilijke code, puur creativiteit.

πŸš€ Hoe werkt het? ✨ Probeer AI Tool πŸ“± Apps & Voorbeelden
// VIBE CODING // GOOGLE CANVAS // CLAUDE ARTIFACTS // V0.DEV // BOLT.NEW // GEMINI // CHATGPT // GITHUB // VERCEL // NETLIFY // NO CODE REQUIRED // PURE CREATIVITY // AI POWERED // EDDIECOOL // VIBE CODING //

De Vibe Roadmap

?

Wat is Vibe Coding?

In jip-en-janneketaal: Je bouwt echte apps, games en websites zonder dat je zelf code hoeft te typen.

Jij vertelt de AI gewoon in het Nederlands wat je wilt hebben. "Maak een Mario-achtig spelletje" of "Bouw een website voor mijn bakkerij". De AI schrijft vervolgens al die ingewikkelde computertaal voor jou.

Jij bent de bedenker (de architect), de AI is de bouwer die het zware werk doet.

1

Kies je Wapens

Vergeet ingewikkelde editors. We gebruiken gratis tools die direct in je browser werken en perfect zijn voor Vibe Coding.

Voor snelle prototypes en visuele ideeΓ«n gebruik je Google Canvas of Claude Artifacts. Deze tools laten je direct zien wat je maakt.

Voor het echte bouwwerk gebruik je gratis online krachtpatsers zoals V0.dev (voor prachtige interfaces) of Bolt.new (voor complete apps). Je kunt ook gewoon ChatGPT of Gemini vragen om de code te schrijven en dit plakken.

Google Canvas Claude Artifacts V0.dev ChatGPT
2

Prompt als een Regisseur

Je schrijft geen code, je geeft instructies. Dit is je belangrijkste skill. Wees specifiek over de rol (bijv. "Je bent een senior frontend developer"), de context en de gewenste stijl.

Gebruik natuurlijke taal: "Maak een dashboard in Neobrutalism stijl met felle kleuren en dikke randen. Voeg een grafiek toe die data inlaadt als je eroverheen hovert."

3

Iterate & Chat

De eerste versie is zelden perfect. Dat is normaal. Nu begint het gesprek. Je "chat" met je code om het te finetunen.

Vraag om aanpassingen: "Maak de tekst groter", "Verander de kleur naar donkerblauw" of "Fix de bug in de mobiele weergave". Zie het als samenwerken met een collega die razendsnel werkt.

4

Secure the Goods (GitHub)

Tevreden met je code? Upload het naar GitHub. Dit is je veilige kluis in de cloud.

Hiermee heb je versiebeheer (je kunt altijd terug als je iets breekt) en kun je jouw project makkelijk delen met hostingplatforms. Het is de ruggengraat van elk serieus project.

Git Versiebeheer Backup
5

Launch & Show off

Tijd om live te gaan! Koppel je GitHub aan Vercel of Netlify. Met één klik staat je site online voor de hele wereld.

Elke keer als je nu een update naar GitHub stuurt, wordt je live site automatisch bijgewerkt. Zo snel kan het gaan.

Vercel Netlify Deployment

Vibe Prompt Generator ✨

Van Saai naar Vibe

Heb je een idee, maar weet je niet hoe je het aan de AI moet vragen? Typ je simpele idee hieronder.

βš™οΈ ENGINE ACCESS (API Key)

πŸ”‘ Nog geen sleutel? Klik hier voor instructies
  1. Ga naar Google AI Studio.
  2. Klik op "Create API key".
  3. Kopieer de key en plak hem hieronder.

⚠️ Veiligheidscheck: Je sleutel wordt alléén in jouw eigen browser opgeslagen (Local Storage). Hij wordt nooit naar onze server verstuurd.

πŸ›‘ Openbare Computer? (School/Bieb): Klik na gebruik ALTIJD op de rode knop 'Wissen'.

πŸ’‘ Tip: Maak een aparte, gratis API key aan voor dit soort tests.

Gemini is aan het koken... 🍳

Jouw Vibe Prompt:

Let's Connect!

Heb je vragen of suggesties? Neem gerust contact met me op.

Neem Contact Op