Claude website bouwen: zo zet je met Claude een echte site live, stap voor stap

Kies je route

Website bouwen met Claude: drie routes en hoe je kiest

Claude is geen websitebouwer zoals Wix, met hosting en een beheerscherm erbij. Claude maakt de pagina's; waar ze komen te staan en wie ze bijhoudt, regel jij. Daarom kies je eerst de route. Wie halverwege moet overstappen, gooit meestal werk weg.

De beslisregel in drie vragen

Staat je site al op WordPress en ben je tevreden over de opbouw? Kies route 3. Een nieuwe site bouwen kost meer dan teksten verbeteren, en je collega's kennen het beheerscherm al.
Moet de pagina binnen een uur ergens te zien zijn, maar hoeft hij niet op je eigen domein? Kies route 1. Een artifact of ontwerp staat er in minuten en kost op het gratis plan niets.
Wil je een site van één tot zes pagina's op je eigen domein, die jij of één collega bijhoudt? Kies route 2, de hoofdtutorial hieronder. Je krijgt gewone bestanden die je overal kunt hosten en die over vijf jaar nog werken.
Heb je een webshop met betalingen, een klantenportaal met login of tien collega's die zelf pagina's moeten aanpassen, dan past geen van de drie routes goed. Daarover meer bij Ons oordeel.

Route 1: waarom een artifact geen bedrijfswebsite is

Een artifact is volgens Anthropic één zelfstandige pagina zonder backend: geen formulieren die versturen, geen tweede pagina via een gewone link. Deel je hem, dan staat hij op een claude.ai-adres, niet op jouwbedrijf.nl, en heeft een bezoeker sinds september 2026 bijna altijd een eigen Claude-account nodig om hem te openen. Een bezoeker die een openbare artifact-link uit Claude Code opent zonder in te loggen, ziet de melding "Content is user-generated and unverified". Prima om een idee te delen, niet als visitekaartje.
Claude Design gaat een stap verder: je maakt een ontwerp in je huisstijl en kiest bij Export voor standalone HTML, een .zip, Netlify, Vercel of Wix. Of je kiest Handoff to Claude Code en dan Send to local coding agent: dan begint route 2 met jouw ontwerp in plaats van met een leeg vel.

Wat heb je nodig

Wat heb je nodig om een Claude website te bouwen?

Voor route 2 heb je zeven dingen nodig. Alleen het Claude-plan en de domeinnaam kosten geld. Verzamel de bedrijfsgegevens vooraf, want Claude vraagt ernaar en mag ze niet verzinnen.

Liever de terminal?

Dat kan ook. Installeer Claude Code met curl -fsSL https://claude.ai/install.sh | bash (macOS en Linux) of irm https://claude.ai/install.ps1 | iex (Windows PowerShell), ga met cd naar je projectmap en typ claude. De stappen hieronder werken dan hetzelfde, alleen zonder de ingebouwde preview. Alles over de installatie staat op Claude Code installeren.

Waarom gewone HTML en geen WordPress of framework

Voor een site van een paar pagina's zijn gewone HTML- en CSS-bestanden het makkelijkst te onderhouden. Er is geen build-stap die kan breken, geen plug-in die updates nodig heeft en geen database. Elke host kan ze serveren, dus je zit nergens aan vast. De grens: wil een collega zonder Claude zelf teksten aanpassen, dan mist hij een beheerscherm. Dan is route 3 of een websitebouwer de betere keuze.

Hosting

Waar zet je je site neer: Netlify, Vercel of GitHub Pages?

In Engelstalige video's zie je vaak Vercel of GitHub Pages. Voor een bedrijfswebsite let je op één ding dat die video's overslaan: mag je het gratis plan commercieel gebruiken? Het antwoord verschilt per aanbieder.

Waarom deze tutorial Netlify gebruikt

Drie redenen. Het gratis plan mag je voor je bedrijf gebruiken. Netlify heeft een eigen connector in Claude, zodat Claude de site voor je kan publiceren. En contactformulieren werken zonder extra dienst: je zet één attribuut in het formulier en de inzendingen komen in je Netlify-account. Netlify is een Amerikaans bedrijf; het biedt een verwerkersovereenkomst (DPA) en is volgens die DPA gecertificeerd onder het EU-U.S. Data Privacy Framework. Download de DPA via het Trust Center en bewaar hem bij je privacyadministratie.

Stap voor stap

Stap voor stap: een website bouwen met Claude Code en Netlify

Volg de stappen in deze volgorde. Elke stap zegt waarom, zodat je weet wat je overslaat als je iets anders doet. Je werkt in de Code-tab van de Claude desktop-app.

Komt je ontwerp uit Claude Design?

Kies in je ontwerp Export > Handoff to Claude Code > Send to local coding agent. Claude Code krijgt dan een overdrachtsbundel en bouwt de site in jouw ontwerp. Je slaat stap 5 niet over: de bedrijfsfeiten en huisregels in CLAUDE.md heb je nog steeds nodig. Meer over exporteren staat bij Claude Design exporteren.

Werkt het?

Werkt het? De eerste prompt en vijf controles

De startprompt hieronder bepaalt het meeste van de kwaliteit. Daarna controleer je in vijf stappen of de site echt werkt, ook voor een bezoeker die niet bij jou aan het bureau zit.

De eerste prompt om te plakken

#CONTEXT
Je bent een webbouwer die eenvoudige websites maakt voor kleine Nederlandse bedrijven. De lezer is een potentiële klant die op zijn telefoon binnen tien seconden wil zien wat we doen, voor wie, en hoe hij contact opneemt. Ik ben geen programmeur en moet de site later zelf met jou kunnen bijhouden.
#DOEL
Een website van maximaal vijf inhoudspagina's in gewone HTML en CSS, klaar om op Netlify te zetten.
#WERKWIJZE
1. Stel me eerst maximaal acht vragen over mijn bedrijf, klanten, diensten, huisstijl en contactgegevens. Bouw nog niets.
2. Schrijf daarna een CLAUDE.md met die feiten en de regels hieronder, plus een paginalijst met per pagina het doel. Wacht op mijn akkoord.
3. Bouw na mijn akkoord pagina voor pagina en open de site in de preview.
#INFORMATIE VAN MIJ
Handelsnaam: [invullen]
KVK-nummer: [invullen]
Bezoekadres: [invullen]
Wat we doen en voor wie: [twee zinnen]
#OUTPUT
index.html, diensten.html, over-ons.html, contact.html, privacyverklaring.html, 404.html, één style.css, sitemap.xml en robots.txt.
#BELANGRIJKE REGELS
- Verzin geen klantcases, reviews, cijfers, keurmerken of prijzen. Ontbreekt iets, zet dan [AANVULLEN] neer.
- Geen frameworks, geen build-stap, geen externe scripts of trackers. Lettertypen lokaal of systeemletters.
- Elke pagina krijgt een eigen title, een meta description en precies één h1.
- Het contactformulier gebruikt Netlify Forms (name="contact" en data-netlify="true") en vraagt alleen naam, e-mail en bericht.
- KVK-nummer en bezoekadres staan in de footer van elke pagina, met een link naar de privacyverklaring.
- Controleer zelf op 375 pixels breed dat niets zijwaarts scrolt.
#BEPERKINGEN
De privacyverklaring is een concept dat ik zelf laat controleren. Zet dat bovenaan het bestand.

Welke regels het verschil maken

Twee regels doen het meeste werk. "Verzin niets, zet [AANVULLEN] neer" voorkomt dat er een overtuigende maar verzonnen review of klantnaam op je site belandt; zonder die regel vult een taalmodel gaten op met tekst die klopt qua toon maar niet qua feiten. "Geen externe scripts of trackers" houdt je site vrij van cookies waarvoor je toestemming moet vragen, zodat je geen cookiebanner nodig hebt. Zoek na het bouwen met je zoekfunctie op [AANVULLEN] tot je er nul vindt.

Vijf controles voordat je de link deelt

1. Preview: de site staat in het Browser-paneel en alle menulinks werken.
2. Openbaar: open de netlify.app-URL in een privévenster. Vraagt de pagina om een wachtwoord of zie je niets, dan staat het project nog op privé.
3. Formulier: verstuur een test via je contactpagina. De inzending verschijnt in Netlify onder Forms en je krijgt de e-mailmelding.
4. Domein: https://jouwdomein.nl opent met een slotje in de adresbalk.
5. Geen tracking: typ in Claude Code: Controleer of de site cookies plaatst of verzoeken naar andere domeinen doet en geef een lijst. Een lege lijst is wat je wilt.

Zelf regelen

Wat je als ondernemer zelf regelt, en wat Claude voor je doet

Claude bouwt de pagina's. De verantwoordelijkheid voor wat erop staat en wat de site met gegevens van bezoekers doet, blijft bij jou. Dit is het deel dat de meeste handleidingen in één regel afdoen.

Cookies: waarom je zonder trackers geen banner nodig hebt

Volgens Ondernemersplein vraag je altijd toestemming voor cookies die privacygevoelige informatie verzamelen, en hoef je dat niet voor cookies die niet privacygevoelig zijn, zoals functionele en sommige analytische cookies met weinig gevolgen voor de privacy. Toestemming moet actief zijn: geen vooraf aangevinkte vakjes, geen cookiewall, en intrekken moet even makkelijk zijn als geven. De Autoriteit Persoonsgegevens controleert cookiebanners. Plaatst je site geen tracking cookies, dan heb je geen banner nodig. Vermeld wel in je privacyverklaring welke cookies je eventueel gebruikt, want informeren moet altijd. Wil je later bezoekers meten, kies dan een privacyvriendelijke dienst en vraag Claude om de instellingen te tonen die daarvoor nodig zijn, of leg het voor aan iemand die de regels kent.

Toegankelijkheid: geldt de plicht voor jou?

Ondernemersplein meldt dat websites met aanbod aan consumenten sinds 28 juni 2025 toegankelijk moeten zijn als je meer dan 10 mensen in dienst hebt of meer dan 2 miljoen euro omzet maakt. Een brochuresite zonder online verkoop valt daar meestal buiten, maar toegankelijk bouwen kost met Claude weinig extra. Vraag na het bouwen: Controleer de site op contrast, alt-teksten, koppenvolgorde en bediening met alleen het toetsenbord, en los op wat je vindt.

De valkuil: live zonder privacyverklaring, of zonder iemand die hem bijhoudt

De fout die we het vaakst zien bij ondernemers die zelf bouwen: de site staat binnen een middag live en ziet er professioneel uit, maar mist een privacyverklaring terwijl het contactformulier namen en e-mailadressen verzamelt. Of er staat een analytics-script op dat cookies plaatst zonder toestemming, omdat een voorbeeld van internet het zo deed. De tweede variant duikt na een paar maanden op: de site werkt, maar niemand weet nog waar de map staat of hoe je publiceert. Leg daarom bij oplevering in CLAUDE.md vast hoe je een wijziging maakt en publiceert, en zet de map in een gedeelde, geback-upte locatie.

WordPress

Route 3: je bestaande WordPress-site verbeteren met Claude

Draait je site al op WordPress, dan hoef je niet opnieuw te bouwen. Claude helpt bij wat er het vaakst blijft liggen: verouderde teksten, dunne dienstpagina's en berichten die nooit geschreven worden. Hoe je Claude erbij haalt, hangt af van waar je WordPress draait.

Waarom de toegangskeuze account-breed is

De keuze tussen Read only en Full access geldt volgens WordPress.com voor je hele account, dus ook voor andere AI-tools die je eraan koppelt. Zet je hem op Full access voor één klus, zet hem daarna terug. Wat een connector precies is en hoe je rechten kiest, lees je op MCP en connectors.

Problemen

Het werkt niet: meldingen, oorzaken en oplossingen

Dit zijn de meldingen waar beginners op vastlopen, in de volgorde waarin je ze tegenkomt.

Limiet op terwijl je amper hebt gebouwd?

Claude Code deelt zijn limiet met je chats en andere Claude-gebruik. Een ochtend chatten kan dus je bouwmiddag beperken. Hoe je dat meet en wat je kunt doen, staat op Claude Code limiet bereikt.

Ons oordeel

Ons oordeel: wanneer een Claude website wel en niet past

Met Claude Code bouw je in een middag een nette, snelle site die je zelf in handen hebt. Dat is voor veel kleine bedrijven genoeg. De vraag is niet of het kan, maar of jij of een collega het daarna kan bijhouden.

Wel doen als

Je een site van één tot zes pagina's nodig hebt die vooral uitlegt wat je doet en aanvragen binnenhaalt. Je zelf, of één vaste collega, wijzigingen laat maken en publiceert. Je huidige site verouderd is en een webbureau voor een eenvoudige site meer kost dan het oplevert. Je het leuk vindt om in gewone taal te sturen en elke wijziging even te controleren.

Niet doen als

Je online verkoopt met betalingen en herroepingsrecht: dan heb je een webshopplatform nodig, zie webshop maken met AI. Je klanten moeten inloggen. Meerdere collega's willen zelf teksten aanpassen zonder Claude: dan past een systeem met beheerscherm beter, zoals route 3. Of niemand in je bedrijf wil de verantwoordelijkheid nemen voor privacy en onderhoud: dan besteed je het beter uit.

Een herkenbaar MKB-voorbeeld

Een verzonnen maar herkenbaar geval: een installatiebedrijf met acht medewerkers heeft een site uit 2017 die niet goed werkt op een telefoon. De eigenaar maakt een lege map, plakt de startprompt en beantwoordt Claudes vragen over werkgebied, diensten en storingsnummer. Na een uur staan vijf pagina's in de preview. In de eerste versie staat op de dienstenpagina "al meer dan 500 tevreden klanten": een getal dat niemand heeft aangeleverd. Omdat de prompt dat verbiedt, valt het op bij de controle; de zin wordt [AANVULLEN] en daarna een echte zin over het werkgebied. De privacyverklaring gaat als concept naar een adviseur die de AVG-kant controleert. Een dag later staat de site op het eigen domein, en in CLAUDE.md staat hoe de binnendienst een vacature toevoegt.

Wat nu?

Wat nu? Je site bijhouden en verder bouwen

Een site is nooit af. Maak het bijhouden daarom net zo eenvoudig als het bouwen: open de map, vraag de wijziging, controleer de preview, commit en publiceer.

Je eerste wijziging na livegang

Open de Code-tab, kies dezelfde map en typ: Voeg op de dienstenpagina een blok toe over [dienst], controleer de preview, maak een commit en publiceer naar Netlify. Omdat CLAUDE.md je bedrijfsfeiten en regels bevat, hoef je niets opnieuw uit te leggen.

Verder met deze tutorials

Werken er meer mensen aan de site, zet hem dan op GitHub en laat Netlify bij elke wijziging automatisch publiceren: zie Claude Code met GitHub. Wil je Claude je pagina's laten testen, voeg dan een browser-server toe met een MCP-server toevoegen. Liever in een editor werken? Lees Claude Code in VS Code. Laat wijzigingen nakijken met code review met Claude.

Verdieping

Een ontwerp in je huisstijl maken: Claude Design. De desktop-app en wat elk plan kan: Claude Desktop. Wat vibe coding is en waar de grenzen liggen bij apps in plaats van websites: app maken met AI. Hoe een CLAUDE.md werkt, lees je in het woordenboek.

Liever samen live zetten?

Loop je vast op domein, formulier of privacyverklaring, dan lossen we dat in één AI-werksessie van 90 minuten samen op, aan je eigen site.