Twee jaar geleden duurde een gemiddelde marketingwebsite voor mij vier tot zes weken. Nu zit ik comfortabel op één tot twee weken voor hetzelfde resultaat — soms minder. Niet omdat ik harder werk, maar omdat de tools fundamenteel beter zijn geworden.
Dit artikel is voor webdesigners, developers en ondernemers die willen begrijpen hoe je AI écht kunt inzetten in een webdev-workflow. Niet als hype, maar als concreet gereedschap. Ik leg uit wat ik gebruik, waarom, en wanneer je welk framework kiest.
Waarom AI code-assistenten anders zijn dan je denkt
De meeste mensen denken bij “AI en webdevelopment” aan een chatbot die stukjes code genereert die je daarna handmatig plakt. Dat was 2023.
Wat Claude Code doet is fundamenteel anders: het begrijpt je hele project, leest bestanden, schrijft en bewerkt code, draait terminal-commando’s en bouwt stap voor stap wat je vraagt. Het is geen autocomplete — het is een junior developer die nooit moe wordt, geen ego heeft en altijd beschikbaar is.
Het grootste verschil met tools als GitHub Copilot of Cursor: Claude denkt over architectuur na. Als ik zeg “maak een blogpost-systeem met content collections in Astro”, begrijpt het wat dat betekent, welke bestanden er nodig zijn, hoe het gesorteerd moet worden op datum en welke SEO-structuur logisch is. Het vraagt om verduidelijking als iets onduidelijk is, en corrigeert zichzelf als het fout gaat.
Dat wil niet zeggen dat het altijd goed gaat. Claude maakt fouten. Het overschat soms zijn kennis van heel recente libraries. En het helpt enorm als je zelf begrijpt wat er onder de motorkap gebeurt. Maar voor iemand met een solide webdev-achtergrond is het een multiplier, geen vervanging.
Claude Code + Ship Studio: mijn dagelijkse setup
Ik gebruik Claude Code via de Pro-subscription: €21 per maand. Voor dat bedrag krijg je toegang tot Claude Sonnet — snel, slim en meer dan capabel voor nagenoeg elk webproject.
Wie veel bouwt of werkt op grote codebases kan overwegen te upgraden naar Max. Maar voor de meeste freelance- en agency-projecten is Pro ruim voldoende.
Wat mijn workflow bijzonder maakt is Ship Studio — een editor die Claude Code integreert met een realtime preview. Terwijl Claude code schrijft, zie ik de wijzigingen meteen in de browser naast de terminal. Geen dev-server die je handmatig moet herladen, geen context-switching tussen tools. Je ziet letterlijk in real-time hoe de pagina eruitziet terwijl de AI schrijft.
Dit klinkt als een detail, maar het verandert de workflow fundamenteel. Ik geef feedback op basis van wat ik zie, niet op basis van wat ik denk dat de code doet. Dat scheelt enorm veel iteraties.
Framework-keuze: Astro, Next.js of Vue?
Dit is de vraag die de meeste mensen het langst bezighoudt. Mijn antwoord is: het hangt af van wat je bouwt. Maar laat me concreet zijn.
Astro — mijn standaard voor marketingwebsites
Voor veruit de meeste websites van kleine en middelgrote bedrijven kies ik Astro. Landingspagina’s, portfolio’s, dienstverleners, lokale bedrijven, SaaS-marketing — Astro.
Waarom? Astro bouwt standaard statische HTML. Geen JavaScript tenzij je het expliciet toevoegt. Het resultaat: PageSpeed-scores van 95–100, bijna nul onderhoud na oplevering, goede SEO out of the box en hosting op een CDN die extreem goedkoop (of gratis) is.
Astro heeft ook een elegant content collections-systeem voor blogs, portfolio-items en andere herhalende content. Je schrijft in Markdown of MDX, Astro genereert de pagina’s automatisch. Dat is precies wat de meeste bedrijfswebsites nodig hebben.
Het nadeel van Astro: het is minder geschikt zodra je gebruikerssessies, realtime data of complexe client-side interacties nodig hebt. Dan moet je iets anders pakken.
Next.js — als het app-achtig wordt
Zodra een project voelt als een applicatie in plaats van een website, kies ik Next.js.
Denk aan: een SaaS met login en dashboard, een platform waar gebruikers content aanmaken, een e-commerce flow met dynamische prijzen, of een intranet. Alles waarbij de content per gebruiker verschilt of waarbij je server-side logica nodig hebt.
Next.js heeft uitstekende ondersteuning voor API-routes, server components, authenticatie-libraries en integraties met databases. De learning curve is steiler en de infrastructuur duurder, maar voor applicaties is het de juiste keuze.
Claude Code werkt overigens uitstekend met Next.js. De conventies zijn goed gedocumenteerd en Claude kent het framework door en door.
Vue — de derde optie
Vue is mijn keuze in twee specifieke situaties:
1. Er bestaat al een Vue-codebase. Als een klant een bestaand project heeft in Vue (of Nuxt, het Vue-framework), dan werk ik daarin verder. Frameworks door elkaar gebruiken is geen goed idee.
2. Je bouwt een interactieve SPA zonder de complexiteit van een volledig Next.js-project. Vue is lichter dan React in setup en mentaal model, en Nuxt (het Vue-equivalent van Next.js) is een uitstekende keuze als je SSR wilt zonder het React-ecosysteem. Voor teams die al vertrouwd zijn met Vue, of voor projecten in Europa waar Vue populairder is dan in de VS, is dit een logische keuze.
Voor nieuwe projecten ga ik bijna altijd Astro of Next.js — afhankelijk van het type project. Maar Vue is geen slechte keuze, alleen minder mijn standaard.
Hosting: Cloudflare vs Netlify
Beide zijn uitstekend. Beide hebben een gratis tier die ruim genoeg is voor de meeste statische sites. Dit is het verschil:
Netlify is makkelijker om mee te beginnen. De interface is intuïtiever, de documentatie is goed, en Netlify Forms (ingebouwde formulierverwerking) is handig als je niet een aparte form-service wilt opzetten. Het nadeel: je zit snel aan limieten van de gratis tier als je meerdere projecten host, en de edge-infrastructuur is minder uitgebreid dan Cloudflare.
Cloudflare Pages heeft een groter gratis tier, een superieur wereldwijd CDN-netwerk (meer edge-locaties dan vrijwel elke concurrent), en gratis analytics. De setup is iets technischer, maar niet ingewikkeld. Cloudflare heeft ook Workers voor serverless functies en R2 voor opslag — nuttig als je later wilt uitbreiden.
Ik heb gekozen voor Cloudflare. De paginasnelheid is meetbaar beter door het grotere netwerk, en de gratis tier is genereuzer. Voor professionele projecten is dat de betere keuze op de lange termijn.
Formulieren: Web3Forms
Statische sites hebben één probleem: ze kunnen geen formulieren native verwerken. Je hebt een backend of een externe service nodig.
Er zijn twee populaire opties:
- Netlify Forms — ingebouwd als je op Netlify host, nul configuratie, maar alleen beschikbaar op Netlify.
- Web3Forms — werkt met elke host, gratis tier tot 250 submissions per maand, één access key in je HTML. Geen backend, geen server, gewoon een
fetchnaar hun API.
Ik gebruik Web3Forms. Het is het eenvoudigste dat werkt. Je voegt één hidden input toe met je access key, stuurt de form-data naar https://api.web3forms.com/submit, en je krijgt een e-mail. Klaar.
Voor hoge volumes of geavanceerde workflows (CRM-integraties, automatische antwoorden, conditionals) kijk ik naar Formspree of een custom Worker op Cloudflare. Maar voor 95% van de projecten is Web3Forms meer dan genoeg.
De volledige stack op een rij
| Tool | Gebruik | Kosten |
|---|---|---|
| Claude Code | AI-assistent voor alle code | €21/maand (Pro) |
| Ship Studio | Editor met realtime preview | Onderdeel van Claude Code |
| Astro | Marketingwebsites, blogs | Gratis (open source) |
| Next.js | Web-applicaties, SaaS | Gratis (open source) |
| Vue / Nuxt | Bestaande Vue-projecten of interactieve SPAs | Gratis (open source) |
| Cloudflare Pages | Hosting | Gratis tier |
| Web3Forms | Formulierverwerking | Gratis tier (250/maand) |
De totale kosten voor een volledig functionele professionele website: €21 per maand voor de AI-assistent. De rest is gratis.
Wat verandert er in jouw workflow?
Als je vandaag begint met deze stack, zijn de eerste weken een leercurve. Claude Code is niet magisch — het werkt het beste als je begrijpt hoe de frameworks werken en als je duidelijke instructies geeft. “Maak een contactpagina” is te vaag. “Maak een contactpagina in Astro met een Web3Forms-formulier, twee kolommen op desktop, validatie op required fields en een succes-state na submit” is een goede prompt.
Na die leercurve gaat alles sneller. Niet alleen het schrijven van code, ook het oplossen van bugs, het uitleggen van wat er fout gaat en het bedenken van alternatieve aanpakken.
Het verandert ook hoe ik over projecten praat met klanten. Ik kan sneller iets demonstreren, sneller aanpassen op feedback en sneller opleveren. Dat heeft direct effect op mijn positie als freelancer.
Wil je weten hoe ik een specifiek type project zou aanpakken met deze stack? Bekijk mijn Astro websites of AI website development, of neem contact op — ik denk graag mee.
