Contact
Skip to main content
Van idee naar werkend prototype in 2 uur: vibe-coding in de praktijk
Vorige week hadden we in een meeting een idee voor een nieuw dashboard voor een van onze klanten. Normaal zou dit betekenen: aannames opschrijven, eerste wireframes maken in Figma, prototype maken, feedback ophalen, aanpassen, opnieuw bespreken. Als alles meezit heb je na een week iets dat je kunt laten zien aan de klant.
Maar met het breed inzetbaar worden van AI toepassingen, pakken we het sinds enige tijd anders aan. We gebruikten Figma Make, schreven een eerste prompt en begonnen te vibe-coden. Twee uur later hadden we een werkend prototype met echte interacties, voorbeelddata en flows die je kon testen alsof het al gebouwd was. Geen plaatjes, maar een werkend prototype. Niet mooi, niet af, maar goed genoeg om te testen en van te leren.
Dit artikel gaat over wat dat met ons ontwerpproces doet. Niet als het zoveelste hypeverhaal over AI, maar als praktische reflectie: wat werkt, waar win je tijd en waar moet je nog zelf scherp blijven. We baseren ons op drie concrete cases die we hebben uitgewerkt met vibe-coding.
We kozen drie totaal verschillende domeinen, juist om te testen of vibe-coding alleen werkt voor ‘mooie demo’s’ of ook voor complexe, serieuze systemen. Dit laatste is waar Hike One zich voornamelijk mee bezig houdt.
ProRail beheert het Nederlandse spoornetwerk. Bij verstoringen telt elke minuut. Verkeersleiders moeten direct zien waar het probleem zit, wat de impact is en welke actie logisch is. We bouwden een dashboard waarin kaartvisualisaties, tijdlijnen en actievoorstellen samenkomen.
EDSN faciliteert data-uitwisseling voor energienetbeheerders. Door de energietransitie exploderen aanvragen voor zonnepanelen, laadpalen en warmtepompen, terwijl het net steeds voller raakt. In deze case bouwden we een dashboard dat inzicht geeft in dreigende congestie, wachtrijen en waar uitbreiding nodig is.
Een hypotheekverstrekker verwerkt honderden aanvragen per maand. Elke aanvraag doorloopt meerdere stappen en elk uitstel vergroot de stress bij klanten. Hier verkenden we hoe een dashboard adviseurs helpt om knelpunten, deadlines en doorlooptijd inzichtelijk te maken.
De inhoud verschilt, maar de aanpak was hetzelfde: zo snel mogelijk van idee naar iets dat je kunt gebruiken om beslissingen te nemen.
ProRail – Spoor Incident Dashboard: Download het PDF met alle prompts.
Voor vibe-coding
Ideeën verzamelen → Figma → bespreken → aanpassen → opnieuw bespreken → goedkeuring. Dit duurt al snel enkele weken, en dan moet het echte werk nog beginnen.
Met vibe-coding
Ideeën verzamelen → vibe-coden → prototype testen → itereren. Binnen één dag.
In de ProRail-case ontstond tijdens een gesprek het idee om verstoringen niet als losse meldingen te tonen, maar als tijdsblokken die laten zien hoe lang ze al lopen en wat de verwachte hersteltijd is. Normaal zou dat een schets zijn geweest. Nu stond er binnen een uur een interactieve tijdlijn die je kon scrollen, filteren en aanklikken. Het effect: minder overdrachtsmomenten en minder interpretatie. Iedereen kijkt naar hetzelfde gedrag en kan daar iets van vinden.
Wat ook goed werkte was niet éen prototype te maken, maar 3 totaal verschillende, gemaakt met steeds unieke prompts. Deze uitkomsten legden we naast elkaar, kozen de beste onderdelen en combineerden we weer.
Iedere designer kent dit probleem. Je probeert een interactie uit te leggen met pijltjes, annotaties en handgebaren. De boodschap komt half over en iedereen vult de rest zelf in. Met vibe-coding laat je het direct zien.
In de EDSN-case hadden we bijvoorbeeld filters die invloed hebben op meerdere grafieken tegelijk. In een statische mockup is dat lastig te communiceren. In een werkend prototype klik je op ‘Utrecht’ en zie je direct hoe alle data zich aanpast. Geen discussie meer over hoe het ‘bedoeld’ is.
Werkende prototypes communiceren beter dan plaatjes. Dat klinkt logisch, maar het verschil in snelheid is groot.
EDSN – Netcongestie bij energienetbeheerders: Download het PDF met alle prompts.
Voor
Variant A uitwerken in Figma, variant B uitwerken in Figma, daarna een lange discussie over wat we gaan bouwen.
Nu
Beide varianten vibe-coden, dezelfde dag testen en laten beslissen door het te gebruiken.
In de hypotheekcase speelden we met twee navigatiestructuren: één rond processtappen en één rond status en urgentie. In plaats van daar lang over te praten, bouwden we ze allebei en legden ze voor aan gebruikers. Binnen een middag was duidelijk welke beter werkte.
Sneller falen betekent sneller leren. En omdat de kosten per variant laag zijn, durf je meer te proberen.
Een klassieke frustratie: het design klopt, maar in de bouw voelt het net anders. Responsive gedrag wijkt af, animaties zijn te traag of te snel, details sneuvelen.
Met vibe-coding vervaagt die grens. In de ProRail- en EDSN-cases simuleerden we het werk van designers en developers samen in hetzelfde prototype. De code die Figma Make genereert is beslist niet productie-klaar, maar wel concreet genoeg om samen over te praten.
Het gevolg: minder heen-en-weer en sneller begrip. Designers en developers spreken eerder dezelfde taal.
Normaal wacht je tot iets ‘af genoeg’ is voordat je het durft te testen. Met vibe-coding is die drempel lager.
In meerdere cases testten we al na een paar uur met gebruikers. Ruw, maar werkend. Hypotheses die normaal pas in week drie of vier getoetst worden, konden we nu in week één valideren of afschieten.
Dat scheelt tijd, maar vooral verspilde energie in de verkeerde richting.
Over de drie cases zagen we vergelijkbare tijdwinsten:
Het is geen magie en het vervangt geen ontwerpvaardigheid. Maar het verschuift waar je je tijd aan besteedt: minder productie, meer denken en razendsnel testen.
Vibe-coding heeft ook duidelijke nadelen. Het grootste risico is dat je een probleem minder open benadert. Omdat je vrijwel direct een werkend prototype ziet, ontstaat er snel een richting die “goed voelt”. Die eerste richting is vaak overtuigend, juist omdat hij al werkt. Dat maakt het lastiger om fundamenteel andere oplossingen te blijven verkennen.
Waar je bij schetsen of abstracte modellen nog langer in probleemruimte blijft, duwt vibe-coding je sneller de oplossingsruimte in. Daarnaast kan de snelheid een vals gevoel van zekerheid geven: iets werkt in een prototype, maar is nog niet doordacht op randgevallen, schaalbaarheid of governance.
Ook ontwerpdetails krijgen soms te weinig aandacht. Kleine keuzes in hiërarchie, timing of gedrag sluipen ongemerkt het ontwerp in omdat ze door de tool worden ingevuld.
Tot slot vraagt vibe-coding om discipline in teams: zonder expliciete momenten om te vertragen, terug te stappen en aannames te bevragen, loop je het risico dat snelheid belangrijker wordt dan scherpte.
Hypotheekverstrekker – grip op aanvragen
1. Begin met het juiste soort projecten
Dashboards, complexe flows en interactierijke concepten lenen zich het best. Het uitwerken van definitieve ontwerpen juist niet.
2. Kies je tools bewust
Figma Make werkte voor ons goed in combinatie met bestaande Figma-bestanden.
3. Leer effectief prompten
Beschrijf context, doelgroep en doelen. Voeg beperkingen toe. Itereer in kleine stappen.
4. Combineer met je huidige proces
Zie vibe-coding niet als vervanging van Figma of code, maar als versneller ertussen.
5. Deel vroeg en vaak
Laat ruwe prototypes zien. Wacht niet tot het ‘mooi’ is.
De grootste winst van vibe-coding zit niet in sneller pixels maken, maar in sneller leren. In onze experimenten zagen we tijdwinsten tot vijf keer ten opzichte van ons normale proces.
Voor ons betekent dit een andere manier van werken: eerder concreet, eerder testen en eerder keuzes maken. Niet alles wordt makkelijker, maar veel wordt wel duidelijker.
Onze oproep: probeer het. Begin deze week met één klein experiment en ervaar zelf wat het doet met je ontwerpproces
