Had je al van Vibecoding gehoord? Dankzij dit populaire platform moet je niet kunnen programmeren om slimme digitale oplossingen te bouwen, voor het werk of als hobbyproject. We geven je alvast een voorsmaakje.
Van zodra je een persoonlijk project in je hoofd hebt, begint het echte werk: je idee omzetten in werkende code. Je leert hoe je prompts schrijft, hoe je omgaat met de eerste versie en hoe je door blijft itereren totdat je iets hebt dat werkt. Dit is een jamsessie waarin jij de richting aangeeft en de AI het zware werk doet.
Je zit achter je scherm. Het Vibecoding Canvas ligt naast je toetsenbord, ingevuld en klaar. Je hebt een lege chat voor je en je cursor knippert. Dit is het moment waarop veel mensen vastlopen. Wat typ je als eerste? De eerste prompt is niet de belangrijkste, maar wel de engste. Je wilt het perfect doen, bang om tijd te verspillen of de verkeerde richting in te slaan. Maar hier is het geheim: de eerste prompt mag rommelig zijn. Het is een openingszet, geen schaakmat.
Begin bij de missie van je Canvas. Dat is je fundament. Neem die ene zin die je formuleerde, “Dit lost [probleem] op voor [wie] zodat [resultaat]”, voeg er nog sfeer en uitstraling aan toe en maak daar je startpunt van. Bijvoorbeeld: “Ik wil een tool bouwen voor een tourmanager van een band. Het probleem is dat info over shows verspreid staat in mail, Excel en WhatsApp. Het doel is één centrale plek waar je per show alles ziet wat je moet weten. Het moet de sfeer van een oefenruimte uitstralen.” Dat is genoeg om mee te beginnen. De AI begrijpt nu het speelveld. Vanaf hier kan je verder bouwen.
Een goede prompt is als een goede briefing voor een stagiair: helder over wat je wilt, maar niet overdreven gedetailleerd over hoe het moet. Te vaag, en je krijgt iets generieks terug. Te specifiek, en je verliest de ruimte voor slimme oplossingen die je zelf niet had bedacht. Een goede prompt bevat op zijn kleinst drie dingen:
1. Context: Wat is de situatie? Voor wie is dit? Wat is het probleem?
2. Doel: Wat moet de gebruiker kunnen doen? Wat is de kernfunctie?
3. Sfeer: Hoe moet het aanvoelen? Welke vibe streef je na?
Bijvoorbeeld: ‘Bouw een interne tool voor een HR-manager bij een middelgroot bedrijf. De tool moet per medewerker tonen: naam, rol, contracttype, startdatum, verlofsaldo en eerstvolgende evaluatiedatum. De primaire use case is snel overzicht tijdens gesprekken. Interface moet rustig en zakelijk zijn. Ontworpen voor desktop, maar leesbaar op tablet. Geen franje, alles gericht op snelheid en foutloos werken.’ De prompt geeft de AI genoeg om mee te werken, maar laat ruimte voor interpretatie. De AI kan nu keuzes maken over lay-out, kleuren en functionaliteit binnen het kader dat jij geschetst hebt.
Je hoeft het wiel niet opnieuw uit te vinden bij elke prompt. Het Vibecoding Canvas dat je invulde is eigenlijk je cheatsheet. Elk vakje kan direct vertaald worden naar een stuk van je prompt.
Zo gebruik je het canvas in je eerste prompt:
• De naam: “Ik bouw een tool genaamd [naam].”
• Probleem & doel: “Het probleem is [x], het doel is [y].”
• Voor wie: “De primaire gebruiker is [rol/persoon].”
• Taken: “De must-have functies zijn: [1], [2], [3].”
• De vibe: “Het moet aanvoelen als [sfeerbeeld].”
• Data: “Ik heb al: [data/bestanden die je wilt gebruiken].”
• Afbakening: “We bouwen nadrukkelijk GEEN [functie] omdat [reden].”
• Experiment: “Dit is geslaagd als [concreet moment].”
Door deze structuur te volgen, geef je de AI een compleet beeld. Je hoeft niet alles in één prompt te stoppen, maar je hebt wel een rode draad voor de hele sessie.
Na het geven van de prompt, wordt het spannend. De AI spuugt code uit. Je ziet een interface verschijnen. Soms word je aangenaam verrast, maar vaak denk je: dit is het niet helemaal. Of dit is het helemaal niet. Dat hoort erbij. De eerste versie (v1) is vrijwel nooit perfect. Zie het als een voorstel, een eerste schets, een startpunt om over te praten. De AI heeft geprobeerd jouw woorden te vertalen naar een werkend systeem, maar heeft aannames gemaakt waar jij het misschien niet mee eens bent. Kleuren die niet kloppen. Knoppen op de verkeerde plek. Functionaliteit die net iets anders werkt dan je bedoelde. Dit is geen falen. Dit is het proces. Ik vergelijk het met de eerste repetitie met een nieuwe band. De drummer speelt net iets te snel, de bassist mist de wisseling, de zanger komt te vroeg in. Maar je speelt door. Je luistert, je past aan, je probeert het opnieuw. Zo werkt vibecoding ook. De kracht zit in het itereren. Je neemt v1, kijkt wat er goed is en wat er beter moet en je geeft nieuwe instructies. “Die knop moet groter.” “Maak de tabel compacter.” “Voeg een knop toe om data te exporteren.” Elke ronde brengt je dichter bij wat je in je hoofd had. Maar alleen als je blijft praten met de AI.
Itereren is een groot woord voor een simpel concept: stapje voor stapje verbeteren. Je bouwt niet in één keer de perfecte app. Je bouwt een werkende versie, test hem, vindt wat niet lekker loopt en past het aan. Het ritme wordt:
Prompt – code – test – feedback – nieuwe prompt. Maar hier is de truc: houd je iteraties klein. Vraag niet om tien dingen tegelijk te veranderen. De AI raakt dan de draad kwijt, vergeet eerdere instructies of haalt per ongeluk dingen weg die wel goed waren. Focus op één of twee verbeteringen per ronde. Voorbeeld van een goede iteratie: “Maak de datumkolom breder en zet de knop ‘Toevoegen’ rechtsboven in plaats van linksonder.” Voorbeeld van een slechte iteratie: “Verander de kleuren, maak alle tekst groter, voeg een zoekfunctie toe, fix de lay-out op mobiel en zorg dat de tabel sorteerbaar is op datum.” In het tweede voorbeeld vraag je te veel. De kans is groot dat de AI iets overslaat, iets anders kapotmaakt of de code zo ingewikkeld maakt dat je de volgende ronde nog meer moet fixen. Klein, gericht en consequent. Dat is het ritme dat werkt.
Soms doet de AI precies het tegenovergestelde van wat je vroeg. Of erger: hij haalt iets weg dat je juist goed vond. Dit is het moment waarop je moet leren terugpraten. “Nee, niet dat. Breng de vorige versie terug.” De AI is geduldig. Hij heeft geen ego. Je kan zonder gêne zeggen: “Dit werkt niet, ga terug naar hoe het was.” Of: “Je hebt de verkeerde knop aangepast, ik bedoelde die andere.” Maar wees specifiek. “Dit is fout” helpt niet. De AI weet niet wat “dit” is. Beter: “Je hebt de blauwe knop aangepast, maar ik bedoelde de groene knop rechts.” En soms moet je gewoon opnieuw beginnen. Als de chat te rommelig wordt, de code te ingewikkeld of de AI compleet de weg kwijt is, gooi dan de sessie weg en start een nieuwe chat. Neem je Canvas, schrijf een nieuwe eerste prompt op basis van wat je nu weet en begin opnieuw. Dat voelt als verlies, maar het is vaak sneller dan een kapotte sessie proberen te redden.
Jij weet hoe je tool werkt. Jij hebt hem gebouwd. Daarom ben je de slechtste persoon om hem te testen, als je een tool maakt waar ook anderen mee moeten werken. Zodra je een werkende v1 hebt, zelfs als hij nog vol zit met bugs en rare keuzes, geef hem aan iemand anders. Een collega. Een vriend. Iemand uit je fanbase. Zeg niks over hoe het werkt. Geef ze alleen de link en kijk.
• Waar klikken ze?
• Waar lopen ze vast?
• Welke knop zoeken ze die er niet is?
Dit zijn gouden momenten. Dit zijn de dingen die jij nooit had gezien, omdat jij weet waar alles staat. Echte gebruikers zijn meedogenloos eerlijk zonder het te willen zijn. Ze klikken op de verkeerde plek, lezen de tekst niet, en verwachten dingen die er niet zijn. En dat is perfect. Want nu weet je wat je moet fixen. Noteer hun frustraties. Vraag door: “Wat verwachtte je hier te zien?” Neem die feedback mee naar je volgende iteratie. Doe dit minimaal drie keer met drie verschillende mensen voordat je beslist dat je tool af is. Tenzij de tool dus alleen voor jou is. Dan ben je natuurlijk de ultieme tester.
Hier is een gevaarlijk moment: je tool werkt. Mensen gebruiken hem. Maar jij ziet nog tien dingen die beter kunnen. En dus blijf je doorwerken. Nog een feature. Nog een kleurtje. Nog een optimalisatie. Dit is de valkuil van perfectie. Je vergeet waarom je begon: om een probleem op te lossen. Als dat probleem opgelost is, ben je klaar. Alles daarna is leuk, maar niet nodig voor v1. Kijk terug naar je Canvas. Naar vakje 8: Het beslismoment, ook wel de lakmoesproef genoemd. Heb je dat moment bereikt? Is die ene persoon de tool gaan gebruiken? Zijn die drie collega’s enthousiast? Dan ben je klaar. v1 hoeft niet perfect te zijn. v1 moet werken. De rest komt later. In v2. Of v3. Of nooit, omdat het niet nodig blijkt te zijn. Laat perfectie los. Ship je tool. Vier het. Trek een biertje open. En dan begin je aan het volgende project.
Tot slot een voorbeeldproject dat we opzetten aan de hand van het volgende prompt: “Bouw Release Radar, een tool die artiesten helpt bij het beheren van muziekreleases door fases, taken, contacten en files te organiseren in een gestroomlijnde workflow. In een Neo Brutalism stijl.”
De volgende functionaliteit is het resultaat van deze simpele prompt. AI interpreteert je wensen en bijbehorende (data)structuur.
• Releases: Creëer nieuwe releases met details zoals titel, artiest, label, releasetype (single, EP, album) en een streefdatum.
• Templates: Gebruik sjablonen die standaardfasen, beslissingen, taken en instellingen voor files bevatten.
• Contactbeheer: Voeg en beheer contacten met rollen zoals artiest, produceren PR-agent. Wijs deze contacten toe aan specifieke releases. Filebeheer: Upload en organiseer diverse files per release, zoals persberichten, biografieën, master audio, MP3’s en foto’s.
• Kalender: Volg belangrijke deadlines voor mixing, mastering, artwork, promotie en meer, overzichtelijk weergegeven voor elke release.
• Voortgangsoverzicht: Een helder dashboard toont de algemene voortgang van elke release, inclusief de status van beslissingen en voltooide taken.
• Release detailpagina: Een aparte pagina voor elke release biedt een diepgaand overzicht van alle gerelateerde informatie.
• Releases bewerken of verwijderen: Pas bestaande releasedetails, fasen, taken en assets eenvoudig aan. Of verwijder releases definitief.
Dit artikel is een hoofdstuk uit het Handboek Vibecoding van Erwin Blom. Hierin laat de auteur zien hoe toegankelijk het bouwen van websites, apps en tools inmiddels is geworden. Dankzij no-code en low-code platforms heb je geen technische kennis meer nodig om slimme digitale oplossingen te maken voor werk, hobby of een eigen project. Je kan vandaag nog beginnen met iets dat werkt én er goed uitziet.
Erwin Blom volgt ook deze ontwikkeling van dichtbij. In dit praktische boek legt hij stap voor stap uit hoe vibecoding werkt, welke tools je kan gebruiken, wat de voor- en nadelen daarvan zijn, en hoe je er meteen mee aan de slag kunt. Met duidelijke voorbeelden, handige schema’s en inspirerende verhalen van mensen die zélf iets zijn gaan bouwen.
Handboek Vibecoding is onder meer verkrijgbaar bij Standaard Boekhandel voor 34,99 euro.
Schrijf je in op onze nieuwsbrief en ontvang elke week het beste van Clickx in je mailbox.
Volg Clickx op Google Nieuws om onze nieuwste artikels in je feed te krijgen. Vergeet niet om op ‘Volgen’ te klikken.
Krijg Clickx magazine 10 keer per jaar (waarvan 2 extra dikke dubbelnummers) keurig thuisbezorgd.
