vibecode — boot
[root@vibecode ~]$ ./start --intro

Intro AI
Vibecoding

software bouwen door te praten met AI

Hackerspace Drenthe

Wat is vibecoding?

Stel je voor: je typt in gewoon Nederlands wat je wilt bouwen. Een AI leest mee, begrijpt je, en schrijft de code. Jij bent de regisseur. De AI is je volledige filmcrew — camera, licht, geluid, alles.

Je hoeft geen code te lezen. Je hoeft alleen te kunnen uitleggen wat je wilt.

mens.txt
Jij zegt:
"Maak een donkere pagina
met een groene titel
en een knop onderaan"
ai-output.html
AI schrijft:
<body style="background:#0a0a0a">
 <h1 style="color:#00ff41">
  Welkom
 </h1>
 <button>Start</button>
</body>

Waarom is dit bijzonder?

Tot voor kort moest je jarenlang leren programmeren om software te bouwen. Dat is voorbij. Nu kan iedereen met een goed idee direct aan de slag — studenten, ondernemers, kunstenaars, iedereen.

De drempel is weg. Iedereen die kan uitleggen wat hij wil, kan nu bouwen.

Het bewijs? Dit.

Wat je nu ziet — deze presentatie, met al zijn animaties, quizzen en effecten — is zelf gebouwd door een mens die tegen een AI praatte. Geen programmeerkennis nodig. Alleen een goed idee en de juiste aanpak.

livechat.log
[mens]$ Maak een presentatie over vibecoding

[AI]$ Hoe lang? Welke stijl? Doelgroep?

[mens]$ 10 min, hackerspace, non-IT

[AI]$ Plan klaar: 22 slides, 10 quizvragen.
      Akkoord?

[mens]$ Minder vragen, betere voorbeelden,
        Hollywood hacker style

[AI]$ Plan bijgewerkt: 14 slides, 3 quizzen,
      strakker verhaal. Mag ik bouwen?

[mens]$ Ja

[systeem] Building... done ✓
[systeem] 0 external dependencies
[systeem] PDCA cycle: complete

AI is een djinn in een fles

Je krijgt precies wat je vraagt — niet wat je bedoelt.

🧞 Uw wens is mijn bevel...
🪔
wish.log
[wens]$ "Maak mij rijk"
[djinn]$ Hier is 1.000.000 Zimbabwaanse dollars.
        (waarde: €0,23)

[wens]$ "Bouw een website"
[djinn]$ Hier is een website.
        (1 lege pagina, geen tekst, geen stijl)

Wees specifiek. De djinn is machtig — maar jij moet de juiste wens formuleren.

Zonder structuur wordt het chaos

AI is krachtig, maar het is geen toveraar. Het doet precies wat je zegt — niet wat je bedoelt. Zonder structuur bouw je een kaartenhuis: het ziet er mooi uit, totdat iemand eraan komt.

spaghetti.js
// geen plan, geen structuur
var x = doeIets();
var y = x + 42; // magic number
if(y) { fix(y,x,true,null,undefined); }
// TODO: dit later fixen
// HACK: geen idee waarom dit werkt
// BUG: crasht soms op dinsdag
function fix(a,b,c,d,e) {
  // 200 regels spaghetti...
}
⚠ CRITICAL: 47 bugs gedetecteerd
⚠ SECURITY BREACH: 3 kwetsbaarheden gevonden
⚠ MAINTENANCE: IMPOSSIBLE — nobody understands this code
⚠ SYSTEM STATUS: compromised
clean-code.js
// helder plan, nette structuur
function berekenKorting(prijs, percentage) {
  return prijs * (percentage / 100);
}

function pasKortingToe(prijs, percentage) {
  const korting = berekenKorting(prijs, percentage);
  return prijs - korting;
}

const eindprijs = pasKortingToe(100, 15);
// → €85 — helder, testbaar, onderhoudbaar ✓

De oplossing: werk in rondes

De truc is verrassend simpel: werk niet in één rechte lijn, maar in rondes. Maak een plan. Bouw het. Controleer het. Verbeter het. Herhaal — net zolang tot het klopt.

PPlan
DDo
CCheck
AAct

Dit heet de PDCA-cyclus. Het is de basis van elke goede samenwerking — ook die met AI.

De 5 spelregels

Naast de rondes zijn er vijf simpele regels die alles bij elkaar houden:

Stel vragen
Hoe specifieker jij bent, hoe beter AI levert
🧱
Eén taak per stuk
Elk onderdeel doet maar één ding
🌐
Open standaarden
HTML/CSS/JS — werkt overal, altijd
🔒
Alles zelfstandig
Geen externe servers of diensten nodig
📱
Elk scherm
Ontwerp voor mobiel én desktop

Het gesprek maakt het verschil

Het verschil tussen goed en slecht vibecoden zit in het gesprek. Hoe duidelijker jij bent, hoe beter AI levert. Vergelijk zelf:

chat — vaag
[gebruiker]$ maak iets moois

[AI]$ OK, ik bouw... iets.

RESULTAAT:
→ Een willekeurige pagina met willekeurige kleuren
→ Niet wat je wilde
→ Tijd verspild, opnieuw beginnen
chat — specifiek
[gebruiker]$ maak een presentatie over vibecoding
[AI]$ Hoe lang moet het duren?
[gebruiker]$ 10 minuten
[AI]$ Welke stijl?
[gebruiker]$ Hollywood hacker, donker, neon
[AI]$ Doelgroep?
[gebruiker]$ non-IT-ers
[AI]$ Hier is mijn plan. Akkoord?
[gebruiker]$ Ja, bouw het

→ Helder plan → goed resultaat ✓

Hoe ziet het er in het echt uit?

Vibecoding is gewoon een goed gesprek voeren. Jij typt wat je wilt. AI vraagt door. Je maakt samen een plan. En dan wordt er gebouwd — stap voor stap, ronde voor ronde.

workflow.sh
Stap 1: Jij beschrijft je idee
Stap 2: AI stelt vragen
Stap 3: Samen maak je een plan
Stap 4: AI bouwt, jij controleert
Stap 5: Niet goed? Terug naar stap 1

STATUS: Jij houdt de regie ✓
QUIZ 1/3

Je vraagt aan AI:
"maak een website"

Wat gebeurt er?
QUIZ 2/3

Een functie berekent korting, stuurt een e-mail, én slaat data op. Wat is het probleem?
QUIZ 3/3

Wie heeft het laatste woord over hoe de software is opgebouwd?

Live Vibecoding

Nu gaan we het zelf doen. Samen. Live. Met de hele zaal.

live-session.sh
Stap 1: Jullie bedenken wat we bouwen
Stap 2: Samen schrijven we een PLAN.md
Stap 3: AI bouwt het — live op het scherm
Stap 4: We checken het resultaat samen
Stap 5: Niet goed? Nieuwe ronde!

SPELREGELS: RULES.md geladen ✓
PLAN: wordt nu live gemaakt met jullie
STATUS: READY TO HACK

De spelregels staan klaar. Het plan maken we nu samen. En dan gaat de AI aan het werk — terwijl jullie meekijken.

Onthoud dit

Werk in
rondes
Stel
vragen
Eén taak
per stuk
Open
standaarden
Jij
beslist

Vibecoding maakt software bouwen toegankelijk voor iedereen. Maar de mens houdt altijd de regie — met een simpele methode die altijd werkt.

Wat gaan we bouwen?

Kies samen wat we live gaan vibecoden!

Hackerspace Drenthe