Voor het Scrum Event 2026 had adviesbureau Agile Scrum Group een website nodig. Ik heb deze event website gebouwd zonder één regel code zelf te typen. Van eerste schets tot live website in drie dagen en in dit artikel leg ik uit hoe jij dat zelf kunt doen (dit proces staat ook wel bekend als vibe coding).
De tools die ik gebruikte
- Claude Design (claude.ai/design): ontwerptool waarmee je met AI een visueel prototype maakt in HTML/CSS. Je beschrijft wat je wilt, de AI bouwt het, en je itereert in gespreksvorm.
- Claude Code (claude.ai/code): AI coding agent in je terminal. Krijgt toegang tot je bestanden en voert wijzigingen door op basis van instructies in gewone taal.
Het proces in 5 stappen
Stap 1: Ontwerpen in Claude Design
De eerste stap was ontwerp, geen code. In Claude Design heb ik gevraagd:
"Maak 3 simpele voorstellen voor een onepager website"
De AI had via een "Design System" (standaard functionaliteit van Claude Design) toegang tot de huisstijl van Agile Scrum Group (kleuren, fonts, logo's) en maakte op basis daarvan drie richtingen:
- Energiek: speels, veel kleur en beweging
- Clean/editorial: strak, wit, rustig
- Warm magazine: een tussenweg, uitnodigend en fotorijk
Elk voorstel was een redelijk uitgewerkte pagina: werkende HTML, niet alleen een afbeelding dus. Dat maakt het makkelijk om te voelen wat werkt.
Na de drie voorstellen heb ik verder geïtereerd:
"Kun je verder itereren op voorstel 3? Ik wil alleen de header van voorstel 2. Maak een nieuwe iteratie visueler door foto's toe te voegen."
Zo mix je het beste van twee richtingen. Het resultaat was een visueel prototype met warme magazine-opzet, strakke header en echte eventfoto's. Een duidelijke blauwdruk voor de site, maar nog geen productiecode.
Stap 2: Exporteren naar Claude Code
Claude Design heeft een export-functie die een "handoff bundle" maakt. Dit pakket bevat:
- De HTML-prototypes met alle styling
- De volledige chat-geschiedenis (zodat de coding agent weet wat je wilde, niet alleen wat er staat)
- Een README met instructies voor de coding agent
Dat laatste punt is belangrijk. De chat-geschiedenis bevat ontwerpbeslissingen: waarom ik voorstel 3 koos, waarom ik de header van voorstel 2 wilde. Die context gaat dus niet verloren bij de overdracht.
Ik opende het pakket in Claude Code. De AI las het prototype, begreep de opzet, en begon de echte website te bouwen. Met dit als uiteindelijke resultaat:
In stap 3 leg ik uit hoe ik in enkele iteraties tot dit resultaat kwam.
Stap 3: De website bouwen
Met Claude Code heb ik de site opgebouwd door instructies te geven in gewone taal. Dit ging in rondes:
Ronde 1: De basis (dag 1)
De eerste versie van de homepage stond er binnen een sessie: hero-sectie met video, sprekers, programma-overzicht. Daarna direct itereren op details: video-afmetingen aanpassen, YouTube-embed-instellingen finetunen, pricing-sectie toevoegen.
Ronde 2: Content en optimalisatie (dag 2)
De grote bouwdag. In één lange sessie is het meeste werk gebeurd:
- Content bijwerken: een derde spreker toevoegen, locatie, thema en tijden invullen
- Afbeeldingen optimaliseren (van 12MB naar 1MB door automatische WebP-conversie)
- Een tweede pagina bouwen voor tickets, met Eventbrite-integratie
- SEO toevoegen: meta tags, favicon, Open Graph afbeelding voor social media
- Nginx-configuratie schrijven voor hosting en redirects van oude URLs zodat de oude website netjes overloopt in deze nieuwe
- Alles mobiel responsive maken
Dat klinkt als veel, maar elke stap is een korte instructie gevolgd door een review van het resultaat. "Maak de afbeeldingen kleiner." "Voeg een ticketpagina toe." "Zorg dat de header er goed uitziet op mobiel." Je hoeft het alleen maar te bedenken.
Ronde 3: Tracking en polish (dag 3)
Google Tag Manager toevoegen, cookie-consent regelen, en kleine visuele aanpassingen. Deze dag is gebruikt om advertenties via Google Ads, Bing Ads, Meta, en Linkedin in te stellen. Ook de advertenties zijn gemaakt door Claude Design en Claude Code in een vergelijkbaar proces als je leest op deze pagina.
Stap 4: Deployen
De website draait op Coolify, een self-hosted deployment platform. Binnen de interface is een koppeling gemaakt met Github. Elke push naar de main-branch triggert automatisch een nieuwe deploy. Je zegt dus tegen Claude: "commit en push de wijzigingen", daarmee zorgt Claude dat de wijzigingen in Github komen, die dan autmatisch door Coolify worden opgepikt en live gezet.
Stap 5: Doorlopend bijschaven
Na de launch zijn er nog kleine aanpassingen gedaan: nieuw logo, tekstcorrecties, doelgroep uitbreiden. Voor deze wijzigingen heb ik het chat-gesprek met Claude Code open gehouden. Als er feedback kwam op de site kon ik direct in het open gesprek vragen het te verwerken.
Wat valt op?
Ik heb geen regel code aangeraakt in dit proces. De hele site is gebouwd door te beschrijven wat ik wilde: "Maak de header responsive." "Voeg een pricing-sectie toe." "Optimaliseer de afbeeldingen." De vaardigheid zit daarmee in helder formuleren in plaats van in een programmeertaal kennen.
Ontwerp kwam eerst, code pas daarna. Doordat ik in Claude Design begon, had de coding agent al een visueel vertrekpunt en hoefde niet te raden hoe het eruit moest zien.
Context bleef bewaard dankzij een instructiebestand (CLAUDE.md): Nederlandse tekst, WebP-afbeeldingen, groene brand-kleur, geen frameworks, clean URLs. Bij elke nieuwe sessie kende de AI die afspraken, zonder dat ik het project opnieuw hoefde uit te leggen.
Het resultaat is productiewaardig: twee HTML-pagina's, volledig responsive, met YouTube-embeds, Tracking & Analytics, Eventbrite-integratie, en SEO-tags. Totale bestandsgrootte ongeveer 1MB. Simpele bestanden, zonder framework of build-stap, dus niks dat over zes maanden alweer verouderd is.
Wil jij dit ook leren?
In onze Vibe Coding Training leer je in twee dagen websites en apps bouwen met AI, zonder programmeerervaring. Wil je specifiek met Claude werken? Bekijk dan de Claude Code Training. En voor een complete basis in AI zonder programmeren is er de 5-daagse AI Opleiding. Benieuwd naar meer praktijkvoorbeelden met Claude Code? Lees ook hoe we er content mee schrijven.
Rik is data scientist, AI engineer en marketeer bij Data Science Partners. Vanuit zijn achtergrond op de Technische Universiteit Eindhoven heeft hij veel affiniteit met data. Na zijn studie heeft hij als consultant altijd met data gewerkt en tevens ervaring opgedaan in het geven van trainingen.
