Vibe
coding.

V1

---

De korte versie

Vibe coding is software bouwen door richting te geven in plaats van code te schrijven. Je beschrijft wat je wilt, een AI-agent voert het uit, en je stuurt bij tot het klopt.

Klinkt als magie. Is het niet.

---

Waar het vandaan komt

Andrej Karpathy, voormalig AI-directeur bij Tesla, gaf het een naam in februari 2025: "You fully give in to the vibes, embrace exponentials, and forget that the code even exists."

Sindsdien is het geëxplodeerd. Niet als buzzword, maar als werkwijze. Mensen die nooit code hebben geschreven bouwen SaaS-producten, dashboards, webshops, complete bedrijfssites. Niet als experiment, maar als productie-software die draait en geld verdient.

---

Waarom het nú werkt

Drie dingen kwamen tegelijk samen:

1. De AI werd goed genoeg

Taalmodellen schrijven nu code die werkt. Niet "soort van werkt als je het lang genoeg probeert", maar daadwerkelijk functioneel. De kwaliteit gaat maandelijks omhoog. Wat een jaar geleden 50% correctie vereiste, levert nu 80-90% bruikbare output bij de eerste poging.

2. Hosted environments

Platforms als Replit combineren een code-editor, AI-agent, en hosting in één omgeving. Niets installeren, niets configureren. Open de browser, begin te bouwen, deploy wanneer het klaar is.

3. De drempel verdween

Free tiers, goedkope abonnementen, geen initiële investering in servers of tools. Je kunt vandaag beginnen met €0 en morgen een werkende site live hebben.

---

Wat het niet is

Laat me helder zijn over wat vibe coding niet is. Want de hype overschreeuwt de nuance.

Het is geen "één prompt en klaar"

De grootste misvatting. Je typt geen zin en krijgt een perfecte website terug. Vibe coding is een conversatie. Je geeft richting, bekijkt het resultaat, stuurt bij, verfijnt. Het is iteratief. Soms kost een goed resultaat 5 berichten, soms 50.

Het vervangt geen expertise

AI bouwt wat je vraagt. Als je niet weet wat je moet vragen, krijg je niet wat je nodig hebt. Je hoeft geen code te schrijven, maar je moet begrijpen wat er gebouwd wordt. Het verschil tussen "maak een contactformulier" en "maak een contactformulier met client-side validatie, honeypot spam protection, en een bevestigingsmail" is het verschil tussen een hobbyproject en klantwerk.

Het is geen vervanging voor developers

Developers zijn niet overbodig. Complexe systemen, schaalbare architectuur, security-critical applicaties: daar heb je mensen voor nodig die weten wat ze doen op codeniveau. Vibe coding verlaagt de drempel voor een specifiek type werk (websites, tools, standaard-applicaties), het elimineert het vak niet.

Het is niet gratis

Ja, er zijn free tiers. Maar serieus klantwerk kost credits. Een complexe sessie kan $50-100 kosten. Een volledige site-build $100-300+. Het is goedkoper dan een development team, maar het is niet €0.

---

Wie dit kan

Iedereen die:

• Een duidelijk doel heeft (niet "maak iets moois" maar "maak een site die X doet voor Y")
• Geduld heeft om te itereren (het is een gesprek, geen bestelling)
• Bereid is om te leren wat er gebouwd wordt (niet de code, maar de logica)
• QA serieus neemt (altijd controleren, nooit blind vertrouwen)

Je hebt geen CS-diploma nodig. Geen programmeerervaring. Geen technische achtergrond. Wat je wél nodig hebt is de discipline om precies te zijn in wat je vraagt, en kritisch te zijn over wat je terugkrijgt.

---

Wie dit niet kan

Mensen die denken dat het vanzelf gaat. Die één prompt typen, het resultaat niet controleren, en het live zetten. Die bestaan, en hun sites zijn herkenbaar: halve functionaliteit, gebroken links, geen tracking, geen consent, en een design dat eruitziet als een template uit 2019.

Vibe coding zonder discipline levert rommel op. Snel, maar rommel.

---

Wat dit e-book is

Dit is geen "wat is AI" uitleg. Geen theoretisch verhaal over de toekomst van software development. Het is een praktische gids over hoe ik vibe coding gebruik om professionele websites op te leveren aan echte klanten. Met echte cijfers, echte cases, en eerlijke lessen.

Je leert:

• Welke tools je nodig hebt en hoe ze samenwerken (Hoofdstuk 2)
• Het complete proces van aanvraag tot deploy (Hoofdstuk 3)
• Een echte case met ~175 pagina's, 4 talen, en $77 aan AI-kosten (Hoofdstuk 4)
• Hoe je dit prijst en positioneert naar klanten (Hoofdstuk 5)
• De vijf dingen die AI standaard vergeet en jij moet opvangen (Hoofdstuk 6)
• Templates, checklists en concrete voorbeelden om morgen te beginnen (Hoofdstuk 7)

Geen fluff. Geen "10 redenen waarom AI de toekomst is." Een werkwijze die werkt, gedocumenteerd door iemand die er elke week klantwerk mee oplevert.

---

V1 — gebaseerd op echte setup

---

Overzicht

Mijn volledige stack bestaat uit drie onderdelen: een plek om te bouwen, een plek om te organiseren, en de output zelf. Alles daaromheen (GitHub, tracking, consent) is ondersteunend.

Functie	Tool	Rol
Bouwen + hosten	Replit	IDE, AI Agent, deploy, hosting
Organiseren + sturen	ClickUp	Projectbeheer, AI Brain, documentatie, MCP
SEO-audit + QA	Screaming Frog	Crawlen, technische SEO, probleemdetectie
Version control	GitHub	Back-up, kleine wijzigingen bij krappe credits
Tracking	GTM + GA4 + Google Ads	Standaard bij elk project
Consent	ConsentEase	GDPR-compliance, standaard

---

Replit: waar alles gebouwd wordt

Replit is een cloud-omgeving waar je software bouwt, test en deployt zonder iets lokaal te installeren. De AI Agent is het hart: je beschrijft wat je wilt, de Agent bouwt het.

Agent Modes

Replit biedt drie niveaus van AI-kracht:

• Free Mode: plannen, exploreren, ontwerpen. Kost geen credits. Ideaal voor de voorbereidingsfase.
• Power Mode: het werkpaard. Hier bouw je. Credits worden verbruikt per actie.
• Max Mode: snelste modellen, duurste. Voor complexe problemen of wanneer snelheid telt.

Ik gebruik ze steeds bewuster. Design/plan in Free Mode. Bouwen in Power. Max alleen wanneer Power vastloopt op iets complex.

Kwaliteit over tijd

De output van Replit Agent is het afgelopen jaar merkbaar beter geworden. Sneller, nauwkeuriger, concreter. Maar dat komt niet vanzelf. Het verschil zit in hoe je het gebruikt: goede skills, precieze prompting, juiste context. De tool wordt beter, maar jouw gebruik ervan bepaalt nog steeds het resultaat.

Checkpoints

Bij elke significante stap maakt Replit automatisch een snapshot van je volledige project: code, database, conversatie-context. Als iets breekt, rollback naar het vorige punt. Geen code verloren, geen paniek.

replit.md

Het geheugen van je project. Eenmalig opgezet bij start, sporadisch bijgewerkt. De Agent leest het bij elke sessie. Alles wat de Agent moet weten over je project, je regels en je grenzen staat hier.

Deploy

Eén klik. Replit bouwt en deployt. Custom domain koppelen kan via Replit zelf of via je eigen registrar (A + TXT record). SSL automatisch. Geen servers beheren, geen pipelines configureren.

Wat het kost

Plan	Prijs	Credits	Geschikt voor
Starter	Gratis	Dagelijks limiet	Uitproberen, eerste project
Core	~$17/maand (jaarlijks)	$20/maand	Freelancers die regelmatig bouwen
Pro	$100/maand	Tiered + 2 maand rollover	Dagelijks bouwen, klantwerk, parallelle taken

Bovenop het abonnement betaal je per gebruikte credits. Die $76,87 voor de kliniek-sessie is een voorbeeld van wat een intensieve sessie kost. Een simpele landingspagina kan voor $5-15 aan credits.

---

ClickUp: je tweede brein op steroïden

ClickUp is meer dan projectbeheer. In mijn setup is het de plek waar alles samenkomt: klantbeheer, documentatie, taken, AI (Brain), time tracking, en de brug naar Replit.

Wat ClickUp Brain doet:

• Dagelijkse mail check en analyse
• Taken aanmaken vanuit klantaanvragen
• Checklists opstellen voor QA
• Prompts samenstellen met volledige context (via MCP naar Replit)
• Documentatie schrijven en bijwerken
• Memory: het onthoudt je processen, voorkeuren, klantcontext

Brain kent je workspace. Hoe meer je documenteert, hoe beter het wordt. Na een paar maanden loop je naast Brain alsof het een stagiair is die alles weet wat jij weet, maar dan sneller kan uitvoeren.

MCP-integratie met Replit

Via ClickUp kun je Replit aansturen. De prompts die daaruit komen zijn beter dan handgeschreven, omdat ClickUp de volledige context al heeft: de taak, de klant, het project, de historie.

Wat het kost

Business-plan met AI-features. De exacte prijs hangt af van seats en add-ons, maar reken op $12-19/maand per gebruiker. De AI-features (Brain) zijn beperkt inbegrepen (ik gebruik uiteraard het betalend model om ongelimiteerd gebruikt te kunnen maken van de functies).

---

De output: wat je daadwerkelijk oplevert

De tech stack van je website wordt grotendeels bepaald door de Replit Agent op basis van de context die je meegeeft. De Agent kiest de beste stack voor het project.

In de praktijk betekent dit meestal:

• TypeScript als taal (Agent's voorkeur, en terecht: type safety voorkomt bugs)
• React + Tailwind voor de frontend
• Neon PostgreSQL voor database-projecten
• Astro voor statische sites (snel, SEO-friendly, weinig overhead)
• Next.js of Express voor dynamische applicaties

Waarom niet WordPress?

Overhead. Plugins, security patches, hosting configuratie, trage laadtijden, constante updates. Een vibe-coded site op Replit is sneller, lichter, en je hebt volledige controle. Geen plugin-conflicten, geen "de update brak mijn site."

Hosting

Altijd via Replit. De klant heeft al een domein? Prima, je koppelt het. Geen domein? Koop het via Replit in één klik. Of de klant koopt zelf een domein en jij wijst de DNS.

---

Screaming Frog: zien wat AI niet ziet

Screaming Frog is een desktop crawler. Je geeft het een URL, het crawlt de hele site, en je krijgt een compleet overzicht: broken links, duplicate titles, ontbrekende meta descriptions, redirect chains, ontbrekende alt-teksten, heading-fouten, sitemap-inconsistenties.

Sinds ik Screaming Frog standaard inzet, zijn de SEO-resultaten van mijn projecten merkbaar beter. De reden is simpel: AI maakt fouten die je niet ziet door naar individuele pagina's te kijken. Een dubbele title tag op pagina 47 van 175. Een redirect chain die drie hops maakt. Een afbeelding zonder alt-tekst in een template dat op 30 pagina's hergebruikt wordt.

Screaming Frog ziet het allemaal in één crawl.

Wanneer ik het gebruik:

• Na elke grote bouw- of wijzigingssessie
• Bij overname van een bestaand project (baseline audit)
• Als verificatie vóór launch
• Periodiek bij klanten met grote sites

Wat het oplevert:

Het vangt precies de dingen die AI vergeet (zie Hoofdstuk 6): ontbrekende alt-teksten, gebroken heading-hiërarchie, duplicaten, 404's, sitemap-fouten. Eén crawl van 5 minuten vervangt een uur handmatig doorklikken.

Kost £199/jaar voor een licentie. Verdient zichzelf terug bij het eerste project.

Eigen tool in ontwikkeling: LibreCrawl

Ik ben bezig met een eigen, lichtere versie: een online crawler op crawl.saerensadvertising.com. Het idee: een publieke tool waar je een URL invoert, een beperkte crawl (~20 pagina's) krijgt, en na email-registratie het volledige rapport ontvangt. Lead magnet en service tool in één.

De tool is live (gebouwd op Replit, uiteraard), maar nog in ontwikkeling voor de publieke versie met email-gate en rate limiting. Het doel: prospects een tastbare eerste waarde geven vóór er een gesprek plaatsvindt.

---

GitHub: back-up en noodoplossing

GitHub is niet de plek waar ik bouw. Het is de plek waar code bewaard wordt. Elke klantsite heeft een privé-repository.

Twee functies:

1. Back-up: als Replit morgen verdwijnt, heb ik de code nog
2. Kleine wijzigingen bij krappe credits: een typo fixen of een tekst aanpassen rechtstreeks in GitHub kost geen Replit credits

Het is geen essentieel onderdeel van de dagelijkse workflow. Het is een vangnet.

---

Tracking en consent: standaard, niet optioneel

Elke site die ik oplever bevat:

• Google Tag Manager: container voor alle tags
• Google Analytics 4: bezoekersdata
• Google Ads conversies: als er campagnes lopen
• ConsentEase: cookie/consent banner, GDPR-compliant

Dit is geen "als de klant erom vraagt." Het is standaard. Een site zonder tracking is een site waarvan je niet weet of die werkt. En een site zonder consent banner is een site die niet compliant is.

---

Hoe het samenwerkt

Het klinkt als veel tools, maar in de praktijk is de flow simpel:

1. ClickUp ontvangt het werk en organiseert het
2. ClickUp Brain analyseert, plant, en schrijft de prompt
3. Replit Agent bouwt op basis van die prompt + replit.md context
4. Replit deployt met één klik
5. Screaming Frog crawlt de site en vangt technische SEO-fouten
6. GitHub bewaart de code als back-up
7. GTM/GA4/ConsentEase zorgen dat je kunt meten en compliant bent

Twee tools doen het zware werk (ClickUp en Replit). De rest is infrastructuur.

Exacte configuratie per tool en hoe je ze instelt vind je in Hoofdstuk 7.

---

V1 — gebaseerd op echte workflow

---

Het principe

Het belangrijkste idee achter mijn workflow: documenteer hoe jij werkt, zodat je tools (AI of niet) het volgens jouw processen doen.

Dat kader is het verschil tussen "laat AI iets bouwen" en "laat AI iets bouwen dat ik aan een klant kan opleveren."

---

Fase 1: Aanvraag binnenkomt

Klantwijzigingen komen op allerlei manieren binnen. E-mail, WhatsApp, telefoon, een gedeeld document. Het kanaal maakt niet uit. Wat wel uitmaakt: dat het ergens terechtkomt waar je er iets mee kunt doen.

Ik gebruik ClickUp Brain als een soort stagiair op steroïden. Brain kent mijn workspace, mijn klanten, mijn processen, mijn voorkeuren. Elke ochtend check ik mail via Brain. Het analyseert wat binnenkomt, categoriseert het, en maakt er taken van.

Voorlopig loop ik nog naast dat proces. Er zijn manuele tussenstappen. Maar het doel is duidelijk: elke stap die op punt staat, automatiseren. Dat is een continu proces, geen eindpunt.

Het resultaat van deze fase: een taak in ClickUp met een duidelijke checklist. Niet jouw interpretatie van wat de klant wil, maar wat de klant letterlijk heeft gevraagd, vertaald naar afvinkbare items.

---

Fase 2: Context verzamelen

Voordat je een AI-agent iets laat bouwen, moet die agent begrijpen wat het project is. Dat doe je één keer goed, bij de start van een project, en je houdt het bij.

replit.md

Dit bestand is de knowledge base van je project. Je maakt het aan bij projectstart en je wilt het zo correct mogelijk hebben vanaf dag één. Het is een levend document, maar de kern verandert zelden. Sporadische updates wanneer de architectuur evolueert of er nieuwe regels bijkomen.

Wat erin staat:

• Tech stack en bestandsstructuur
• Naamconventies en codeerstijl
• Business rules (zoals de medische claims policy bij de kliniek-case)
• Anti-patterns: wat de Agent expliciet niet mag doen
• Beschermde routes en gevoelige gebieden

De Agent leest dit bestand bij elke sessie. Het is je stuur. Hoe preciezer het is, hoe minder je per prompt moet corrigeren.

Bijlagen en context per sessie

Naast replit.md stuur je alles mee dat relevant is voor de specifieke opdracht. Screenshots, documenten, referentiesites, eerder werk. Alles dat de Agent helpt om te begrijpen wat je verwacht.

Meer context = betere output. Niet "meer woorden", maar meer relevante informatie. Een screenshot van hoe de huidige pagina eruitziet. Het document dat de klant stuurde. Een link naar een concurrent die het goed doet.

---

Fase 3: Ontwerp eerst, bouw daarna

Dit is waar mijn workflow recent is veranderd. En het is het belangrijkste advies in dit hele e-book.

Nieuwe aanpak: Design Mode eerst

Voordat er ook maar één functionaliteit wordt gebouwd, zet je het volledige ontwerp klaar. Documenteer in ClickUp. Verzamel alle context. Stuur het naar Replit's Design Mode en laat de Agent het ontwerp uitwerken: pagina-structuur, componenten, layout, navigatie.

Pas als het ontwerp staat, ga je naar Build Mode.

Dit is significant goedkoper en sneller dan 6-12 maanden geleden. Ontwerpen kost weinig tot geen credits. Bouwen wel. Als je direct begint te bouwen zonder ontwerp, betaal je credits voor iteraties die je had kunnen voorkomen met 10 minuten nadenken.

De grote prompt

Zodra het ontwerp klaar is en de context compleet, stuur je het hele pakket naar de Agent. De volledige lijst wijzigingen in één prompt. Niet stap voor stap, niet feature voor feature. Alles in één keer.

Waarom? Omdat de Agent met volledige context betere beslissingen maakt. Die ziet het geheel, niet alleen het stukje waar je net om vraagt. Conflicten tussen wijzigingen worden direct opgelost in plaats van pas bij de vijfde prompt.

In de kliniek-sessie resulteerde dit in 289 acties en 80-90% van het werk in één keer gedaan. De rest is finetuning.

Via ClickUp, niet handmatig

Ik stuur prompts via ClickUp (Replit MCP-integratie). Niet omdat dat technisch noodzakelijk is, maar omdat ClickUp al de volledige context heeft: de taak, de checklist, de klanthistorie, het project. De prompts die daaruit komen zijn beter dan wat ik handmatig zou schrijven.

---

Fase 4: QA

AI vergeet dingen. Niet veel, en steeds minder, maar genoeg om QA verplicht te maken. Elke keer, geen uitzonderingen.

Na de eerste grote wijzigingen laat ik Brain een QA-checklist opstellen. Concreet:

• Site openen, doorklikken als gebruiker
• Nieuwe pagina's: laden ze? Klopt de navigatie? Zitten ze in de sitemap?
• SEO basics: title tags, meta descriptions, structured data
• Mobiel: ziet het er uit? Werken de interacties?
• Functioneel: formulieren, booking-links, webshop, taalswitch
• Screaming Frog crawl: duplicate titles, broken links, ontbrekende alt-teksten, redirect chains. Eén crawl van 5 minuten vangt wat je handmatig over het hoofd ziet.

Tracking (GTM, GA4, Ads conversies) check ik alleen bij grote wijzigingen of een launch. Niet bij elke sessie. Het staat er of het staat er niet; tussentijds breekt het zelden.

Lighthouse/performance is een quality gate, geen dagelijkse check. Doel: mobile ≥ 90. Als dat zakt na een sessie, fix je het direct.

De realiteit: QA kost 15-30 minuten. Het bespaart je uren aan problemen die je pas twee weken later ontdekt wanneer een klant belt.

---

Fase 5: Deploy

Eén klik in Replit.

Dat is het. Geen staging server, geen CI/CD pipeline, geen handmatige Git operaties. Replit bouwt, deployt, en je site is live.

Bij projecten met een database (zoals de kliniek-case): seed draaien naar productie als onderdeel van de sessie. Maar de deploy zelf is letterlijk een knop.

Post-deploy bij een launch of grote wijzigingen:

• Sitemap opnieuw indienen bij Search Console
• Google Merchant Center laten syncen
• Live verificatie: de checklist van fase 4, maar dan op productie

Bij reguliere updates: deploy klikken en door. De site is live. Klaar.

---

Het verschil met hoe anderen het doen

De meeste tutorials over vibe coding laten het proces zien als: "typ een prompt, krijg een website." Dat is het deel dat iedereen al begrijpt. Het interessante zit in alles eromheen:

1. Documentatie: hoe je ervoor zorgt dat de AI consistent werkt over sessies
2. Context management: wat je meegeeft en wanneer
3. Scope control: ontwerpen vóór bouwen, niet tegelijk
4. Quality assurance: wat je altijd controleert, ongeacht hoe goed de output leek
5. Tooling-integratie: hoe ClickUp + Replit + Brain samen een systeem vormen

De prompt is 5% van het werk. De andere 95% is het systeem eromheen.

Concrete voorbeelden van prompts, replit.md templates en QA-checklists staan in Hoofdstuk 7.

---