← Terug naar logboek

Wat is vibe design? De gids voor 2026 om te ontwerpen vanuit intentie

Beschrijf het gevoel en de richting van een UI en laat AI die genereren — maar de meeste tools blijven steken bij een mooie mockup. Dit is wat vibe design echt is, vibe design versus vibe coding, en hoe je het van prompt naar uitgeleverde code brengt.

Wat is vibe design? De gids voor 2026 om te ontwerpen vanuit intentie

Ontwerpers, oprichters en product engineers horen in 2026 voortdurend de term “vibe design” — maar de helft van de artikelen is een verkooppraatje en de andere helft vertelt nooit wat er gebeurt nadat de AI een scherm heeft uitgespuugd. Deze gids geeft je een heldere definitie, de afkomst, hoe de workflow verloopt, en het ene gat waar niemand het over heeft: uitleveren.

Wat is vibe design?

Vibe design is een benadering van UI- en productontwerp waarbij je primaire input intentie is — uitgedrukt in natuurlijke taal, een referentieafbeelding of een URL — en een AI het ontwerp genereert terwijl jij op gevoel bijstuurt in plaats van met de hand.

In plaats van componenten te plaatsen, afstanden bij te schaven en door kleurkiezers te zoeken, beschrijf je de vibe: de toon, de richting van de layout, het gevoel. Je gedraagt je minder als een ambachtsman en meer als een creatief directeur die beoordeelt en bijstuurt. Drie dingen kenmerken het:

  • Intentie erin — een prompt, een screenshot, een referentiesite of een ruwe schets.
  • Generatie eruit — de AI levert echte UI op, geen leeg canvas.
  • Bijsturen — je geeft kritiek en stuurt bij in natuurlijke taal tot het klopt.

Vibe design versus vibe coding

De term stamt rechtstreeks af van vibe coding, in 2025 bedacht door Andrej Karpathy: schrijf geen code met de hand — beschrijf wat je wilt en laat AI het implementeren. Vibe design past diezelfde “intentie-eerst”-filosofie toe op de visuele laag.

Vibe codingVibe design
InputIntentie (wat het moet doen)Intentie (hoe het eruit moet zien en aanvoelen)
OutputWerkende codeWerkende interface
Je stuurt bij viaGedrag en logicaToon, layout, smaak
Populair gemaakt doorKarpathy, 2025Google Stitch, begin 2026

Het zijn twee uiteinden van dezelfde verschuiving, en in 2026 komen ze samen: de nuttigste agents ontwerpen én bouwen. Google bracht “vibe design” naar het grote publiek met de lancering van Stitch begin 2026, en gaf de categorie daarmee een naam en een golf van zoekvraag.

Screenshot-placeholder van Google Stitch dat één UI-scherm genereert vanuit een tekstprompt
Google Stitch maakte “vibe design” mainstream — maar blijft steken bij een gegenereerd scherm.

Hoe vibe design echt werkt

Een typische lus verloopt in vier stappen:

  1. Beschrijf de vibe — “een rustig, betrouwbaar fintech-dashboard, veel witruimte, één accentkleur.”
  2. Genereer — de AI levert een echt scherm op (of meerdere varianten).
  3. Stuur bij — “maak het compacter”, “warmer kleurenpalet”, “voeg een lege toestand toe.”
  4. Itereer tot het overeenkomt met de intentie.

De winst zit in snelheid en toegankelijkheid: één of twee mensen die een AI aansturen, kunnen tientallen verfijnde concepten per week produceren, en niet-ontwerpers kunnen een geloofwaardige interface bereiken zonder een zwaar gereedschap te leren.

In een agent-native werkomgeving als Open Design leeft deze lus op één oppervlak — je beschrijft de vibe aan dezelfde agent die later de code kan schrijven, zodat het bijsturen van het ontwerp en het bouwen van het product geen twee losgekoppelde tools zijn. (Openheid: wij bouwen Open Design.)

Placeholder van de Open Design-interface met links een prompt in natuurlijke taal en rechts een gegenereerde UI
De lus intentie → genereren → bijsturen, in Open Design.

Het gat waar niemand het over heeft: van mockup naar uitgeleverd

Hier stoppen de meeste “vibe design”-tools stilletjes — bij een statische mockup. Je krijgt een prachtig scherm, en daarna ben je weer terug bij het met de hand omzetten naar code, en het ontwerp wordt nooit meer bijgewerkt.

Echte vibe design zou niet bij een plaatje moeten eindigen. De moeilijkere, waardevollere variant is agentic vibe design: een agent die het ontwerp genereert, het bekritiseert en laat evolueren, en het uitlevert naar productiecode — terwijl ontwerp en code synchroon blijven terwijl jij bijstuurt.

FaseDe meeste tools vandaagAgentic vibe design
UI genereren
Zelfkritiek en itereren❌ één statisch scherm✅ agent herziet
Uitleveren naar echte code❌ later met de hand omzetten✅ exporteert werkende code
Ontwerp ↔ code synchroon houden
Open source / BYOKmeestal gesloten

Dit is de baan waarin Open Design werkt — de open source, agent-native ontwerpwerkomgeving. Je beschrijft de vibe, een agent ontwerpt de UI, laat die evolueren en levert die uit naar echte code; het is BYOK en werkt naast de coding agent die je al gebruikt (Claude Code, Cursor en andere) in plaats van je op te sluiten in een gesloten canvas — zodat de doorloop hieronder de workflow laat zien, en die niet alleen beweert.

Placeholder van de Open Design-interface met een gegenereerd ontwerp dat naar productiecode exporteert
Agentic vibe design eindigt in uitleverbare code, niet in een screenshot.

Een concrete lus die wij voortdurend draaien: prompt een dashboard → krijg een werkende layout → “haal de afstanden strakker en voeg een donkere modus toe” → de agent herziet ontwerp en code samen → exporteer productie-HTML. Het resultaat is uitleverbaar, geen screenshot.

Veelvoorkomende mythes over vibe design

  • “Het vervangt ontwerpers.” Nee — het verschuift hen naar creatieve regie en smaak, waar oordeel meer telt, niet minder.
  • “Het maakt alleen wegwerp-mockups.” Alleen als de tool bij mockups stopt. Agentic tools brengen het tot code.
  • “Je moet technisch zijn.” Juist andersom — intentie is de interface.
  • “Het is gewoon AI-beeldgeneratie.” Vibe design produceert gestructureerde, bewerkbare UI, geen plat plaatje.

Hoe je vandaag begint met vibe designen

  1. Kies een intentie-eerst tool dat uitlevert naar code, niet alleen mockups, zodat je werk niet doodloopt.
  2. Begin vanuit een referentie — plak een screenshot of URL; zeg wat je wilt behouden en wat je wilt veranderen.
  3. Stuur bij in gewone taal — itereer op dichtheid, palet, toon en toestanden.
  4. Ga vroeg naar code — hoe eerder het ontwerp echte code is, hoe eerder je leert wat werkt.
  5. Houd het open en van jezelf — open source + BYOK voorkomt lock-in nu de categorie snel beweegt. (Kom je van een gesloten canvas, dan vind je hier het open source-pad weg van Figma en weg van Claude Design.)

De kern

Vibe design is intentie-eerst ontwerpen: jij beschrijft, AI genereert, jij stuurt bij. Geboren uit vibe coding en door Google Stitch in 2026 naar het grote publiek gebracht, laat het de afstand tussen idee en interface ineenklappen. Maar de variant die ertoe doet, blijft niet bij een mockup steken — die is agentic, en levert uit naar code. Begin daar en vibe design wordt echte output, niet alleen een mooi plaatje.

Klaar om het te proberen? Open de app of blader door de bibliotheek met ontwerpsystemen en skills.


← Terug naar logboek GitHub · Bron ↗