Een website bouwen met Claude Code die er niet afschuwelijk uitziet

Kort antwoord: Je kunt met Claude Code een website bouwen die er ontworpen uitziet in plaats van gegenereerd, maar alleen als je voorkomt dat het terugvalt op zijn standaardkeuzes. Geef het een echt designsysteem in de vorm van tokens, leg je regels vast in een CLAUDE.md-bestand en een specificatie, bouw in kleine fases die een mens goedkeurt en voeg controles toe voor contrast, tokens, toegankelijkheid en snelheid die de build laten mislukken als er iets afwijkt.

De meeste marketeers die dit proberen, krijgen hetzelfde resultaat. De eerste pagina is snel klaar en ziet er op het eerste gezicht prima uit. Dan valt je oog op het Inter-lettertype, het paarse verloop, de gecentreerde kop boven twee knoppen en drie identieke kaarten, en besef je dat je precies deze site al vele malen eerder hebt gezien.

Deze gids is voor marketeers en oprichters die met Claude Code een marketingsite willen bouwen of herbouwen en daar iets aan overhouden dat bij hun merk past. Je leest waarom met AI gebouwde sites generiek ogen, wat je Claude geeft voordat het één regel schrijft, hoe je het scherp houdt tijdens het bouwen en hoe je een oude site vervangt zonder zoekverkeer te verliezen. De casus die steeds terugkomt is saas-hackers.com zelf, in november 2026 met Claude Code herbouwd vanuit Webflow. Elk resultaat dat uit dat project wordt aangehaald, komt uit de eigen gegevens.

Kun je met Claude Code een website bouwen die er goed uitziet?

Claude Code is een AI-codeertool die je project leest, code schrijft en aanpast, opdrachten uitvoert en zijn eigen werk controleert. Voor een marketingsite betekent dat: het kan het framework opzetten, de componenten bouwen, een CMS koppelen en de tests draaien, terwijl jij bepaalt wat de site moet worden en of elke stap goed genoeg is.

Ja, als je het juiste werk eromheen doet. Claude Code is sterk in het technische werk en snel in de repetitieve onderdelen van een build. Het kent je merk niet, je kopers niet en ook niet de beslissingen die jouw team in een overleg heeft genomen, en het vult die gaten op met de meest gangbare keuze die het kent. Het werk dat bepaalt of de site er goed uitziet, doe je voor en tijdens de build: het designsysteem, de vastgelegde regels en de controles.

Als je nog niet hebt bepaald wat de site voor je pipeline moet doen, begin dan met onze websitestrategiegids voor B2B SaaS. Deze gids gaat ervan uit dat je weet welke pagina's je nodig hebt en ze goed wilt bouwen.

Waarom zien websites die met AI zijn gebouwd er allemaal hetzelfde uit?

Met AI gebouwde websites lijken op elkaar omdat taalmodellen de meest waarschijnlijke volgende keuze maken, en in webdesign is de meest waarschijnlijke keuze de veilige. Anthropic noemt dit distributional convergence: veilige designkeuzes domineren de trainingsdata, dus zonder sturing put het model uit dat waarschijnlijke midden (Anthropic, 2025).

Het eigen frontendteam van Anthropic beschrijft het resultaat zonder omwegen. Als je een model zonder richtlijnen een landingspagina laat bouwen, kiest het “bijna altijd voor Inter-lettertypen, paarse verlopen op witte achtergronden en minimale animaties” (Anthropic, 2025). Hun punt is dat dit de merkidentiteit ondermijnt en AI-interfaces makkelijk herkenbaar en makkelijk weg te wuiven maakt.

De verraderlijke kenmerken zijn makkelijk te herkennen als je ze eenmaal kent:

• Overal Inter, Roboto of systeemlettertypen, met gewichten die nauwelijks verschillen tussen koppen en lopende tekst
• Paarse of violette verlopen en koppen met een verloop als vulling
• Een gecentreerde hero met een badge in pilvorm, een kop, een subkop en twee knoppen
• Drie identieke kaarten onder de hero, wat de inhoud ook is
• Dezelfde afgeronde hoeken en zachtgrijze schaduw overal
• Emoji of generieke lijniconen bij elk punt

Datzelfde onderzoek wijst ook de uitweg. Claude is goed te sturen: vertel het welke standaardkeuzes het moet vermijden en wat het in plaats daarvan moet gebruiken, en de output wordt meteen beter (Anthropic, 2025).

Anthropic heeft die richtlijnen verpakt als een frontend design skill en een Claude Code-plug-in, en merkt op dat je ook zelf een skill kunt bouwen rond het designsysteem van je bedrijf. Dat laatste is wat telt voor een zakelijke website.

Algemeen advies over “interessante lettertypen” levert je een andere generieke site op. Je eigen designsysteem levert je jouw site op.

Begin met een designsysteem, niet met een prompt

Een designsysteem voor een AI-build is een verzameling benoemde beslissingen die Claude kan lezen: kleuren, lettertypen, lettergroottes, witruimte, hoekradius en breakpoints, elk met een taak. Als designtokens in een bestand vastgelegd worden het de enige waarden die de site mag gebruiken.

Het verschil met een pdf met huisstijlrichtlijnen is dat tokens machineleesbaar zijn. Een pdf zegt dat je accentkleur oranje is. Een tokenbestand zegt dat brand.flame gelijk is aan #df4e32 en dat die kleur wordt gebruikt voor het logo, pijlen, actieve filters en de focus van invoervelden, en nergens anders voor. Claude kan die tweede versie exact volgen en een script kan controleren of dat ook gebeurd is.

Wat een bruikbaar designsysteem voor een Claude Code-build bevat:

• Kleurtokens met een taak. Achtergrond, tekst, koppen, gedempte tekst, randen, één signaalkleur en de thema's (bijvoorbeeld een donker en een licht thema) die ze combineren.
• Typografie. De huislettertypen als bestanden die je zelf mag hosten, een typografische schaal met duidelijke groottesprongen en de gewichten die elk niveau gebruikt.
• Witruimte, hoekradius en breakpoints. Een schaal voor witruimte, een radius per rol (knoppen, kaarten, secties) en de schermbreedtes waarop de layout verandert.
• Componenten met elk één naam. Een knop, een kaart of een hero heet in het designbestand, de code en het CMS hetzelfde, zodat niemand hoeft te vertalen.

Waar komt het vandaan? Als je een designer of een Figma-bibliotheek hebt, exporteer de tokens dan daaruit.

Als je een bestaande site hebt die je goed vindt, kunnen de tokens uit de stylesheet worden gehaald, en dat is wat er bij de herbouw van SaaS Hackers gebeurde. Heb je geen van beide, laat dan een designer dit deel doen voordat je iets bouwt. Een dag aan designbeslissingen is goedkoper dan een site die op die van alle anderen lijkt.

Eén technische keuze zorgt dat het systeem blijft werken. Gebruik je Tailwind CSS, importeer dan niet het standaardthema. Genereer het thema in plaats daarvan uit je tokenbestand, zodat de enige kleuren, groottes en lettertypen in het project die van jou zijn. Claude kan dan niet naar een standaardpaars grijpen dat er niet is.

Hoe leg je de regels voor Claude vast?

Claude Code leest aan het begin van elke sessie een bestand met de naam CLAUDE.md, dus daar zet je de regels voor het project. Een CLAUDE.md op projectniveau staat in de repository en wordt via versiebeheer gedeeld met iedereen die eraan werkt (Claude Code docs, 2026).

De richtlijnen van Anthropic voor het schrijven ervan zijn praktisch. Houd elk CLAUDE.md onder de 200 regels, want langere bestanden kosten meer context en verlagen hoe goed Claude ze opvolgt.

Maak instructies zo concreet dat je ze kunt controleren: “Voer npm test uit voordat je commit“ in plaats van ”test je wijzigingen“. Groepeer regels onder kopjes en haal regels weg die elkaar tegenspreken (Claude Code docs, 2026).

Je hoeft ook niet met een leeg vel te beginnen: het commando /init maakt een eerste versie van het bestand op basis van je codebase.

Voor een websitebuild behandelt een CLAUDE.md die werkt vijf dingen:

1. Wat je bouwt en waarmee. De stack, de hosting en waar de content staat.
2. De verbodslijst. Dingen die niet mogen gebeuren: een live URL wijzigen, geheimen committen, zonder te vragen een betaalde dienst of script van derden toevoegen, naar het verkeerde CMS-project schrijven.
3. Standaarden. Geen kleuren, groottes of lettertypen buiten de tokens. Overal dezelfde componentnaam. Standaard statische output. WCAG 2.2 AA. Brits of Amerikaans Engels.
4. Schrijfregels voor alle tekst die Claude toevoegt. Heldere taal, geen verzonnen copy en een placeholder die niemand kan missen (de woorden COPY NEEDED in hoofdletters, plus wat er ontbreekt) waar de tekst nog niet bestaat.
5. Commando's. Hoe je de dev-server, de build en elke controle draait. In de best practices van Anthropic heet het commando dat je controles uitvoert de nuttigste regel in het bestand (Claude Code docs, 2026).

CLAUDE.md is richtlijn, geen afdwinging. Claude behandelt het als context en kan besluiten dat een richtlijn niet van toepassing is. Voor alles wat elke keer moet gebeuren, zoals de formatter draaien of nooit een bestand met geheimen lezen, biedt Claude Code hooks en permissieregels die de tool zelf toepast (Claude Code docs, 2026).

Zet de uitgebreidere briefing in een apart specificatiebestand. Anthropic raadt aan Claude je te laten interviewen tot het de specificatie kan schrijven, die op te slaan als SPEC.md en vervolgens een nieuwe sessie te starten om daarmee te bouwen. Zo begint de build met een schone context en een vastgelegde definitie van klaar (Claude Code docs, 2026). Voor merk- en designregels die maar soms van belang zijn, houdt een skill ze uit de weg tot ze nodig zijn. In onze uitleg over Claude Skills voor marketingteams lees je hoe ze werken.

Bouw in kleine fases die een mens goedkeurt

Een website die met Claude Code is gebouwd, loopt op dezelfde manier mis als een website van een junior developer: te veel tegelijk, terwijl niemand kijkt tot het einde. De oplossing is ook dezelfde. Verdeel de build in fases, beoordeel elke fase en begin pas aan de volgende als de vorige is goedgekeurd.

Een fasevolgorde die werkt voor een marketingwebsite:

1. Set-up. Framework, styling, CMS en hosting gekoppeld, met een lege pagina die wordt gedeployd naar een previewlink.
2. Contentmodel en migratie. CMS-schema's, en bestaande content overgezet als concepten.
3. Designsysteem. Tokens, lettertypen en alle componenten, getoond op één cataloguspagina.
4. Templates en pagina's. Elk paginatype gebouwd uit de componenten en gevuld met echte content.
5. SEO. Head-tags, gestructureerde data, sitemap, redirects en controles tegen de oude site.
6. Publiceren. Previews, de workflow voor redacteuren en alles wat de site opnieuw opbouwt als content verandert.

Elke fase eindigt met een pull request en een previewlink waar iemand doorheen kan klikken. In de pull request staat wat er is gebouwd, wat er is gecontroleerd en wat dat opleverde, wat Claude heeft aangenomen en wat er nog openstaat. Onder die laatste kop komen openstaande vragen boven water in plaats van dat er stilletjes op wordt gegokt.

Waarom een componentencatalogus ertoe doet

De catalogus is één pagina die elk component in elke staat laat zien: elke knopstijl, elke kaart, de header open en dicht, formuliervelden met foutmeldingen, elk sectieblok met voorbeeldcontent. Hier keur je de look goed voordat een template hem gebruikt. Een kaart één keer in de catalogus corrigeren is veel goedkoper dan hem op 200 pagina's fout aantreffen. Houd de catalogus buiten de sitemap en zet hem op noindex.

Bekijk de catalogus op telefoonbreedte en op desktop. De meeste generiek ogende AI-builds vallen op een telefoon als eerste uit elkaar: te kleine tekst, te krappe kaarten, menu's die elkaar overlappen.

Welke controles houden een met AI gebouwde website betrouwbaar?

De controles voorkomen dat een goede start wegglijdt naar een generiek resultaat. De best practices van Anthropic zeggen het simpel: Claude stopt als het werk klaar lijkt, dus geef het iets wat met geslaagd of mislukt terugkomt, dan kan het zijn eigen fouten herstellen voordat jij ze ziet (Claude Code docs, 2026).

Voor een marketingwebsite zijn dit de controles die het inbouwen waard zijn. Laat de build ze zelf uitvoeren, zodat een mislukte controle de deploy stopt in plaats van op een to-dolijst te belanden.

• Tokens actueel. Het gegenereerde stylesheet komt overeen met het tokenbestand, zodat niemand het ene heeft aangepast zonder het andere.
• Contrast. Elk tekst-, formulierveld- en focuspaar in elk thema voldoet aan WCAG 2.2 AA. Dat is minstens 4,5:1 voor normale tekst en 3:1 voor grote tekst (W3C, 2023). De focusring en de randen die een bedieningselement aanduiden hebben ook 3:1 nodig.
• Token-lint. Een script dat faalt op elke kleur, grootte of lettertype in de code dat geen token is: geen hexcodes, geen rgb(), geen pixelgroottes die in een component zijn getypt, geen lettertypenamen.
• Componentnamen. Elk sectieblok in het CMS heeft een component met dezelfde naam, en omgekeerd.
• Toegankelijkheidsscan. Een geautomatiseerde scan zoals axe op elk paginatype, plus een toetsenbordcontrole: kun je elk menu, filter en formulier bereiken en gebruiken zonder muis?
• Snelheid. Lighthouse op mobiel voor de homepage en de belangrijkste templates, meer dan eens uitgevoerd. In onze uitleg over Core Web Vitals lees je wat de snelheidsscores meten.
• Layout op echte breedtes. Screenshots of een overflowscan op telefoon-, tablet- en desktopbreedte, op zoek naar tekst die buiten zijn vak valt.

Vraag Claude elke keer om bewijs: het commando dat het uitvoerde en de output. “Alle controles geslaagd” zegt op zichzelf weinig, en de output lezen gaat sneller dan het zelf opnieuw draaien (Claude Code docs, 2026).

Bekijk daarna de pagina's met eigen ogen. Geautomatiseerde controles vangen wat meetbaar is. Ze kunnen je niet vertellen dat een pagina op een template lijkt.

Hoe vervang je een bestaande site zonder zoekverkeer te verliezen?

Een live site vervangen is een migratie, en het risico is dat je rankings verliest, niet dat het er slecht uitziet. De regel die je beschermt: elke URL die op de oude site bestaat, behoudt exact hetzelfde adres op de nieuwe, of krijgt een permanente redirect naar de juiste pagina.

Claude Code is goed geschikt voor het controleren, omdat dat repetitief en nauwkeurig werk is. Zet bij een rebuild drie controles op voordat je overschakelt:

• Routecontrole: Elk adres in de oude sitemap geeft een 200 op de nieuwe preview, en een onbekend adres geeft een 404.
• Pariteitscontrole: Vergelijk voor elk adres de titel, metabeschrijving, canonical, H1 en gestructureerde data met de live pagina, en laat de controle falen bij alles wat verloren is gegaan.
• Redirectcontrole: Elke redirect die het oude platform bevatte is opnieuw aangemaakt, ketens zijn platgeslagen en niets verwijst door naar een pagina die zelf weer doorverwijst.

Laat Claude nooit een slug aanpassen “om op te ruimen”. Zet “wijzig nooit een URL die op de live site bestaat” in de nooit-lijst. Onze SEO-strategiegids behandelt het bredere plaatje. Is de site groot of is het verkeer erg belangrijk, dan kan een bureau uit onze lijst met SEO-migratiebureaus het migratieplan op zich nemen terwijl Claude de build doet.

In de praktijk: zo is SaaS Hackers met Claude Code herbouwd

SaaS Hackers (beheerd door Team 4) stapte in november 2026 over van Webflow naar Astro, Tailwind CSS, TypeScript, Sanity en Netlify, waarbij Claude Code de build deed. De briefing was bewust over de look: de huidige vormgeving herbouwen, geen redesign. Er was geen Figma-bestand of designsysteem, dus het designsysteem werd opgebouwd vanuit de live site.

Dat bepaalde de aanpak. De kleuren, lettertypen, witruimte en afronding werden uit het live stylesheet in een tokenbestand gelezen, dat uiteindelijk 26 kleurtokens en drie thema's bevatte (donker, zwart en licht). Het display-lettertype van het merk, Heming, heeft een licentie voor self-hosting en Inter is open source, dus beide werden zelf gehost.

Het standaardthema van Tailwind werd niet geïmporteerd, dus de tokens waren de enige beschikbare waarden. De header, footer, kaarten, onderdelen van het expertprofiel, formuliervelden, berichttekst en 14 sectieblokken werden gebouwd met bijbehorende CMS-blokken en getoond in een componentencatalogus.

De vier designcontroles (tokens, contrast, token-lint en componentnamen) draaien aan het begin van elke build en stoppen die als er één faalt. De componenten werden op telefoon- en desktopbreedte goedgekeurd voordat een template ze gebruikte.

De eigen projectgegevens laten zien hoe het standhield:

• axe vond 0 overtredingen op 13 pagina's toen de templates klaar waren.
• Alle 409 adressen binnen de scope gaven in dezelfde fase een 200 op de preview.
• Alle 409 adressen deden het bij de pariteitscontrole (titel, beschrijving, canonical, H1 en schema) minstens zo goed als de live Webflow-pagina's, zonder verlies.
• Lighthouse mobiel op productie, drie runs per stuk op de Engelse en Duitse homepage, een bericht en een expertprofiel, gaf 99 tot 100 voor prestaties en 100 voor toegankelijkheid en best practices.
• Een overflowscan van 11 paginatypen in 7 talen op 4 schermbreedtes vond geen problemen.

Wat het verschil maakte, was simpel. Claude hoefde nooit een kleur of lettertype te kiezen, omdat het tokenbestand dat al had gedaan. En een mens beoordeelde elke fase voordat de volgende begon, zodat problemen in de catalogus werden gevonden in plaats van op live pagina's. Het werk dat Claude sneller deed dan een team was het repetitieve deel: de contentmigratie, de 134 redirects die bij de lancering klaarstonden en dezelfde controles opnieuw draaien na elke wijziging. Hoe de site dagelijks draait, met zijn agents en vangrails, lees je in onze gids over de Claude Code-techstack voor een agentische website.

Veelgemaakte fouten en hoe je ze voorkomt

De meeste mislukte AI-websitebuilds mislukken om een van een handvol redenen. Elke heeft een eenvoudige oplossing.

Beginnen met “bouw me een homepage”. Claude vult elk gat met een standaardkeuze, en de homepage bepaalt de look van alles wat erna komt. Schrijf eerst het designsysteem en het CLAUDE.md, bouw dan de componenten en daarna de pagina's.

Het merk beschrijven in bijvoeglijke naamwoorden. “Gedurfd, modern, betrouwbaar” betekent niets waar een model iets mee kan. Geef het tokens, lettertypebestanden en een screenshot van een pagina die je mooi vindt. De docs van Anthropic raden aan de designscreenshot direct in de prompt te plakken.

Alles in één sessie bouwen. Lange sessies verliezen vroege beslissingen uit het oog. Werk in fases, start nieuwe sessies vanuit de specificatie en houd elke wijziging klein genoeg om te beoordelen.

Blind vertrouwen op “klaar”. Claude meldt wat het zelf gelooft. Laat de build de checks uitvoeren, vraag om de output en bekijk de preview zelf op telefoonbreedte voordat je iets goedkeurt.

Tekst die uit het niets verschijnt. Een AI-build schrijft aannemelijke headlines en testimonials om ruimte te vullen. Verbied verzonnen tekst in CLAUDE.md en gebruik zichtbare placeholders, zodat er niets nep op de live site belandt. In onze gids over Claude gebruiken voor copywriting lees je hoe je de echte tekst schrijft.

Wanneer schakel je een designer of een bureau in?

Claude Code neemt veel bouwtijd uit handen. Het vervangt geen ontwerpinzicht. Haal een designer erbij als je geen designsysteem hebt, als de merkidentiteit zelf aandacht nodig heeft, of als je site de belangrijkste manier is waarop kopers je beoordelen en “prima” niet goed genoeg is.

Een verstandige verdeling is om een designer te betalen voor het systeem en de ontwerpen van de belangrijkste pagina's, en Claude Code daarna te laten bouwen volgens die ontwerpen, met de checks hierboven. Een designer geeft je ook iets om mee te vergelijken: een mockup waartegen je Claude kunt controleren wint het altijd van een beschrijving. Bekijk onze lijst met webdesigners voor B2B SaaS-merken voor freelancers die dit deel kunnen oppakken.

Schakel een bureau in als je het geheel wilt uitbesteden: strategie, design, bouw, migratie en iemand die verantwoordelijk is als er iets misgaat. Vraag hoe ze AI inzetten in hun bouwproces en welke checks draaien voordat er iets live gaat. Wil je het hele project liever uit handen geven, vergelijk dan de beste webdesignbureaus voor B2B SaaS voordat je iemand briefet.

Over SaaS Hackers

SaaS Hackers is een community van B2B SaaS-specialisten die praktische inzichten delen, gebouwd door de doeners achter de groei. Het publiceert praktische gidsen, templates en een zorgvuldig samengestelde directory van bureaus en experts met bewezen ervaring in digitale marketing voor B2B SaaS. SaaS Hackers wordt gerund door Team 4, en deze site is opnieuw opgebouwd met Claude Code volgens de aanpak uit deze gids.