In een half uur iets werkends maken? Dit kan met vibe coding
Stel je voor. Je wilt voor een team een eenvoudige tool maken rond lastige beroepsdilemma’s. Een pagina waar iemand een dilemma kiest, twee of drie afwegingen maakt, en daarna een paar reflectievragen krijgt of een passende werkvorm om het gesprek in het team te starten.
Een paar jaar geleden zou je al snel denken: leuk idee, maar daar heb ik een ontwerper, ontwikkelaar, tijd, budget en waarschijnlijk ook drie overleggen voor nodig. Nu kan je het in een half uur werkend krijgen, namelijk met vibe coding!
De afgelopen tijd ben ik daar samen met zo’n tien LOSmakers mee aan het experimenteren geweest. We kwamen twee keer een uurtje online bij elkaar en gingen tussendoor zelf aan de slag. We gebruikten tools als Claude Code, Lovable, Google AI Studio en Base44. In de eerste sessie hadden we Erwin Blom te gast, die ons kort meenam in wat vibe coding is en wat je er wel en niet mee kan. Wel een belangrijke waarschuwing: zie het als een manier om prototypes te maken en interactieve toepassingen die je gebruikt met een klein groepje.
Onze conclusie na dit experimenteren? Heel leuk, veelbelovend en: ga het vooral proberen.
Wat is vibe coding?
Vibe coding is bouwen met gewone taal. Je beschrijft wat je wilt maken, typt of spreekt in wat de toepassing moet kunnen, geeft feedback op wat er verschijnt, en werkt zo stap voor stap toe naar iets dat echt werkt. Je hoeft geen code te kunnen schrijven, want de AI-tool maakt de vertaalslag van jouw idee naar een prototype of app.
Dat is, zeker een eerste keer, wel echt fantastisch. Je zegt hardop: “Maak een eenvoudige pagina met drie kaarten, in rustige kleuren, waarin iemand kan kiezen tussen drie werkvormen rond feedback geven.” En rechts in het scherm verschijnt wat je graag wil. Misschien nog niet perfect, en zo’n eerste versie brengt je weer op nieuwe ideeen. Maar wel al echt iets wat je kunt aanklikken. En vervolgens ga je fine-tunen. Overigens kan je hier, in een met vibe-coding gemaakte test De Vibe-o-Meter, uitvinden wat voor ‘vibe-coding-type’ je bent.
Waarom dit voor L&D zo leuk is
Je wilt een werkvorm aantrekkelijker maken. Een keuzehulp bouwen. Een reflectietool maken. Een verzameling prompts delen. Een mini-spel ontwerpen. Iets dat mensen helpt om op een leuke en interactieve manier te leren. Vaak verdwijnen dat soort ideeën in een notitieboekje of zeg je tegen elkaar: “Daar moeten we ooit eens iets mee.”
Met vibe coding kun je voor veel ideeen nu wél iets concreets en zichtbaars maken.
Of: je hebt een beeld van een interactieve website, e-learning of kaartspel. Dat wil je wel door iemand laten maken, en je gebruikt vibe-coding om een prototype te maken. Het gesprek gaat dan echt makkelijker, want je hebt een concreet voorbeeld bij de hand.
Wat we maakten, een paar ideeen
Ik was onder de indruk van de leuke toepassingen die door ons LOSmakers in zo korte tijd zijn gemaakt. En ook nog met als basis ‘experimenteren’!
- Interactieve flashcards: kaartjes met eigen inhoud die je kunt omdraaien. Hier vind je een voorbeeld van flashcards die we hebben gebruikt om gezamenlijk de oogst op te maken van een langer lopende leergang. Wil je vooruit kijken, terug kijken, of een persoonlijk kaartje omdraaien? Maak denk ook aan flashcards rondom de ‘Why’ en ‘How’. Of met werkvormen. Of…
- Een online boekenkast: dit idee ontstond vanuit de vraag hoe je zichtbaar kunt maken welke boeken op welke lokatie van een organisatie te vinden zijn. Mooi gemaakt met een ‘achterkant’ waar je als beheerder boeken kunt toevoegen. Die verschijnen dan aan de ‘voorkant’ op de boekenplan van bijvoorbeeld lokatie Amersfoort of Nijmegen.Handig!
Een e-learning in eigen huisstijl: met vibecoding kun je een voorbeeld elearning of website geven en dan zeg je ‘maak iets in dezelfde stijl en kleur’. Een van de LOSmakers had een ‘ge-update’ e-learning gemaakt, dus een oude e-learning in een moderner jasje. Ik vond de look and feel mooi, meer van deze tijd en wel met veel gelijkenis met de ‘oudere’ e-learning. Wel zag je dat je de inhoud niet teveel moet overlaten aan de vibecoding tool, want die werd wel minder.- Een dilemma-spel rond de beroepscode. Erg leuk! Je geeft de beroepscode en je vraagt om 5 dilemma’s om voor te leggen met vervolgens 3 of 4 manieren om te reageren. Wat zou jij doen? Inclusief tips, reflectievragen of feedback. Je kunt de dilemma’s zelf meegeven aan de AI tool, je kunt de AI tool vragen om zelf dilemma’s te bedenken. En ook leuk: vraag deelnemers om dilemma’s en zet deze tijdens de sessie in de tool!
- Een website-pagina aantrekkelijk ingericht, kan ook. Ze verzorgen Joitske en ik een sessie over werkplekleren met AI. En in de sessie wilden we de deelnemers even met een paar prompts aan de slag laten gaan. Toch echt wel vlot een leuke pagina gemaakt met onze prompts, die je met een druk op de knop kunt kopieren om vervolgens in je eigen taalmodel te plakken. Werkte uitstekend! Kijk maar eens mee.
- Een app om zelf te reflecteren op AI-gebruik. Ik dacht.. die ‘jagged frontier’… hoe kan ik daar wat meer zicht op krijgen? Ik heb een app gemaakt die ik kan gebruiken als ik met AI heb gewerkt. Ik krijg een paar vragen over het gebruik, de app verzameld al mijn reflecties en die kan ik vervolgens analyseren. Je kunt het zelf eens proberen, zie hier.
Tools die we hebben geprobeerd: Claude Code, Google AI Studio, Lovable, Base44 en Netlify om je product online te zetten.
Wat hebben we geleerd? Wat heeft geholpen?
Begin klein. De leukste resultaten ontstonden bij kleine toepassingen met één duidelijk doel. Niet meteen een complete leeromgeving maken, maar bijvoorbeeld: één keuzehulp, één oefentool, één reflectiepagina, één handige prompt-verzameling.
Denk je ‘app’ goed door. Het helpt enorm als je voor je ziet wat de toepassing moet doen. Niet technisch, maar functioneel.cWat moet de gebruiker kunnen?cWat gebeurt er als iemand op een knop klikt? Welke keuzes zijn er?cWat moet iemand aan het eind meenemen?cDit kun je overigens heel goed uitdenken samen met een taalmodel!
Werk je idee uit met een taalmodel. Het is slim om eerst in Copilot, ChatGPT of Claude je idee uit te werken tot een goede startprompt. Die prompt gebruik je daarna in de vibe-coding tool. Dat scheelt zoekwerk, finetunen en vaak ook credits.
Makkelijk: stel je vragen en aanpassingen in gewone taal
Je hoeft niet precies te weten hoe iets technisch moet. Je kunt gewoon zeggen: maak de knoppen groter, zet dit rustiger onder elkaar, gebruik zachtere kleuren, voeg een downloadknop toe of laat eerst een keuzevraag zien. Dat maakt experimenteren juist zo laagdrempelig.
Hou het bij individueel gebruik. Het lijkt ons slim om iets te maken dat jijzelf of deelnemers individueel kunnen gebruiken. Zodra je in je toepassing wilt samenwerken, of gegevens van meerdere gebruikers wilt verzamelen, wordt het ingewikkelder. Dan heb je een online database nodig en wordt ook het publiceren of ‘wegzetten’ van je app een stuk lastiger.
Let op je credits, spreid je werk. Vibe-coding tools werken vaak met gratis en betaalde versies. Voor experimenteren zijn gratis versies meestal al prima. Vaak krijg je een aantal credits per dag. Om niet in één enthousiaste bui alles op te maken, helpt het om eerst je idee goed uit te denken en pas daarna te gaan bouwen. Bij veel vibe-coding tools krijg je overigens de volgende dag weer nieuwe credits! Een paar dagen achter elkaar wat bouwen en tussendoor finetunen werkt vaak beter best goed.
Test of je app echt bruikbaar is. Iets kan er leuk uitzien, maar nog niet logisch werken. Laat dus altijd even iemand anders klikken, kiezen en uitproberen. Juist dan merk je snel waar iets onduidelijk is, waar een knop mist of waar je flow toch niet zo slim bleek als je dacht. Zo waren Joitske en ik vandaag een app aan het testen en na ongeveer 10 keer kregen we elke keer een foutmelding: data opgebruikt!
Denk ook aan delen. Als je iets gemaakt hebt, wil je het natuurlijk ook kunnen laten zien of gebruiken. Kijk dus of je een link, QR-code of downloadmogelijkheid kunt toevoegen. Fijn is als je ergens een online plek hebt. In Claude en Lovable kun je je product downloaden als html-bestandje en als je dat op je webssite zet, kan vervolgens iedereen erbij.
Last but not least: wil je geen gebruik maken van Amerikaanse tools, kijk dan zeker naar Lovable. Is namelijk Zweeds.
Onze conclusie?
Het smaakt bij ons allemaal wel naar meer! Want het kan echt goed bruikbaar zijn in ons werk.
Je kunt een concept laten zien aan een opdrachtgever.
Je kunt met een team een reflectietool uitproberen.
Je kunt een werkvorm omzetten in een mini-tool.
Je kunt bepaalde inhoud interactief maken, zonder een hele e-learning te maken
Over een half jaar nog eens vibecoden met een groepje? Ik heb het gevoel dat de ontwikkelingen op dit gebied zo hard gaan, dat we over een half jaar nog veel meer kunnen. Ergens in oktober? En tot die tijd: ga uitproberen en laten we vooral onze ideeen ook delen! Ben benieuwd wat jullie gaan maken!
Lees het hele
artikel