Website maken met Claude: stap voor stap van idee tot live siteLeestijd: maximaal 17 minuten
Een website maken met Claude klinkt bijna te eenvoudig: je beschrijft wat je wilt en even later staat er een pagina op je scherm. Toch zit het belangrijkste werk niet in die eerste versie. Het verschil tussen een aardig experiment en een betrouwbare website ontstaat daarna. In deze handleiding leer je daarom niet alleen wat je moet vragen, maar vooral in welke volgorde. Zo gebruik je Claude als meedenkend team, zonder te doen alsof één druk op de knop een webbouwer vervangt.


Kun je echt een website maken met Claude?
Ja, maar met een belangrijke nuance.
Claude kan een structuur bedenken, teksten schrijven, een visuele richting voorstellen en werkende websitebestanden maken. In een visuele omgeving kan het resultaat soms direct als voorbeeld verschijnen. Dat betekent echter nog niet dat de site openbaar op internet staat.
Voor een echte website heb je meestal ook nodig:
- een domeinnaam;
- een plek waar de website wordt opgeslagen;
- een beveiligde verbinding;
- een formulier dat werkelijk berichten verstuurt;
- controle op mobiel, tablet en computer;
- onderhoud na publicatie.


De eerste tegenintuïtieve les is daarom: hoe sneller Claude een website maakt, hoe belangrijker de controle achteraf wordt. Snelheid verkort het maakproces, maar niet automatisch het denkwerk.
Anthropic introduceerde Artifacts oorspronkelijk als een apart venster waarin onder meer websiteontwerpen en code naast het gesprek bekeken konden worden. De huidige Claude-omgeving biedt daarnaast gespecialiseerde mogelijkheden voor ontwerpen en programmeren.
Wil je eerst rustig kennismaken met de mogelijkheden, lees dan de complete uitleg over Claude AI. Daar vind je ook de belangrijkste functies en verschillen tussen de beschikbare manieren om Claude te gebruiken.


Wanneer is Claude de juiste keuze?
Claude is vooral sterk wanneer je nog geen volledig uitgewerkt ontwerp hebt, maar wel kunt uitleggen wat je wilt bereiken.


| Situatie | Geschiktheid | Waarom? |
|---|---|---|
| Eenvoudige landingspagina | Goed | Duidelijk doel en beperkte omvang |
| Portfolio | Goed | Tekst, structuur en presentatie komen samen |
| Website voor een lokale onderneming | Goed | Overzichtelijke pagina’s en herkenbare acties |
| Eerste versie van een online dienst | Redelijk tot goed | Sterk voor een eerste concept en gebruikersroute |
| Webshop | Beperkt | Betalen, voorraad en privacy vragen betrouwbare koppelingen |
| Grote bedrijfswebsite | Beperkt | Veel rollen, regels, content en controles |
| Complexe applicatie | Alleen met deskundige begeleiding | Fouten kunnen gevolgen hebben voor gegevens en veiligheid |
Een lokale adviseur kan Claude bijvoorbeeld laten meedenken over een rustige website met diensten, ervaringen en een afspraakknop. Voor een webshop met klantaccounts en betalingen ligt dat anders. Daar moet niet alleen de voorkant mooi zijn; alles achter de schermen moet ook veilig en betrouwbaar werken.
De WegwijsAI-visie: gebruik Claude niet als vervanger van oordeel, maar als versneller van een goed proces. Voor een kleine website kan het veel werk uit handen nemen. Zodra geld, persoonsgegevens of bedrijfskritische functies meespelen, hoort er een deskundige controle bij.
De belangrijkste stap komt vóór de eerste prompt
Veel mensen beginnen met:
Maak een moderne website voor mijn bedrijf.
Dat klinkt logisch, maar het bevat bijna geen bruikbare keuzes. Wat betekent “modern”? Wie bezoekt de website? Welke twijfel moet de site wegnemen? Wat moet iemand na dertig seconden doen?
Claude vult ontbrekende informatie zelf in. Dat voelt intelligent, maar het model kiest dan vaak voor patronen die in veel voorbeelden voorkomen. Het gevolg is een website die technisch netjes kan zijn, maar ook opvallend algemeen oogt.
Dat gebeurt op drie lagen:
- Gebruikerslaag: je ziet een keurige pagina met grote kop, knop en drie blokken.
- Mechanische laag: Claude voorspelt een waarschijnlijke combinatie op basis van je opdracht en beschikbare context.
- Interpretatielaag: zonder eigen keuzes wordt je website het gemiddelde van veel bestaande websites.
Daarom werkt een langere prompt niet vanzelf beter. Een korte prompt met zes scherpe beslissingen kan waardevoller zijn dan een pagina vol losse wensen.
Mis geen nieuw Claude-artikel
Ontvang een melding zodra WegwijsAI een nieuwe handleiding, vergelijking of praktische update over Claude publiceert.
Laat Claude je eerst interviewen


De slimste eerste opdracht bevat nog geen verzoek om een website te bouwen.
Gebruik bijvoorbeeld:
Ik wil een website maken voor mijn bedrijf. Schrijf nog geen website en maak nog geen ontwerp. Stel mij eerst maximaal vijftien gerichte vragen over mijn doelgroep, diensten, uitstraling, vertrouwen, belangrijkste actie, beschikbare inhoud en praktische beperkingen. Stel vervolgvragen wanneer mijn antwoord te algemeen is. Vat daarna mijn keuzes samen in een korte websitebriefing.
Waarom werkt dit?
Claude hoeft nu geen gaten stilletjes op te vullen. Het maakt onduidelijke woorden zichtbaar. “Persoonlijk” kan bijvoorbeeld betekenen dat je foto’s gebruikt, in de ik-vorm schrijft of vooral telefonische aandacht benadrukt. Dat zijn drie verschillende ontwerpkeuzes.
Dit is het tweede tegenintuïtieve inzicht: de beste prompt om een website te maken, vraagt in eerste instantie om géén website.
Website maken met Claude in tien overzichtelijke stappen
Stap 1: bepaal één hoofdbezoeker
Kies niet voor “iedereen die interesse heeft”. Beschrijf één herkenbare bezoeker.
Bijvoorbeeld:
De belangrijkste bezoeker is een ondernemer van 45 tot 65 jaar. Die heeft weinig tijd, vergelijkt drie aanbieders en wil vóór een gesprek begrijpen wat ik doe en wat het ongeveer kost.
Hierdoor kan Claude betere keuzes maken over taal, volgorde en bewijs.
Stap 2: leg het zakelijke doel vast
Een website kan informeren, afspraken opleveren, inschrijvingen verzamelen of een product verkopen. Geef één actie voorrang.
Het belangrijkste doel is dat een bezoeker een vrijblijvend kennismakingsgesprek aanvraagt. Telefonisch contact is de tweede mogelijkheid.
Dit voorkomt dat vijf knoppen tegelijk om aandacht vragen.
Stap 3: laat een eenvoudige sitemap maken
Vraag eerst welke pagina’s werkelijk nodig zijn.
Voor een klein dienstverlenend bedrijf kan dit genoeg zijn:
- Home
- Diensten
- Werkwijze
- Praktijkvoorbeelden
- Over ons
- Contact
Laat Claude bij iedere pagina uitleggen welke vraag van de bezoeker daar wordt beantwoord. Zo wordt de sitemap geen administratief lijstje, maar een route door twijfels en beslissingen.
Stap 4: laat Claude alleen de inhoudsstructuur bepalen
Vraag nog niet om kleuren of animaties. Laat eerst de informatievolgorde beoordelen.
Maak voor de homepage een tekstueel wireframe. Geef per onderdeel aan welke bezoekersvraag wordt beantwoord, welk bewijs nodig is en welke vervolgstap logisch is. Schrijf nog geen definitieve teksten en geen code.
Claude wordt zo eerst informatiearchitect en pas later websitebouwer.
Stap 5: schrijf de teksten vanuit echte bezwaren
Een goede website noemt niet alleen voordelen. Hij begrijpt waarom iemand nog niet klikt.
Een accountant kan bijvoorbeeld denken dat bezoekers vooral zoeken naar “persoonlijke aandacht”. In gesprekken blijkt misschien dat zij vooral bang zijn voor onverwachte kosten of een trage reactie. Dat verandert de hele pagina.
Laat Claude daarom vragen:
Welke vijf twijfels heeft mijn doelgroep waarschijnlijk vóór een eerste gesprek? Welke daarvan kan ik met uitleg beantwoorden en voor welke heb ik bewijs nodig?
Controleer de antwoorden altijd aan de hand van echte gesprekken, mails en vragen van klanten. Claude herkent patronen, maar kent jouw klanten niet uit zichzelf.
Stap 6: bepaal een duidelijke visuele richting
Vermijd woorden als “mooi”, “strak” en “professioneel” zonder toelichting.
Een betere opdracht is:
Ontwerp een rustige, redactionele website voor een onafhankelijk adviesbureau. Gebruik een warme lichte achtergrond, donkerblauwe tekst en één roestkleurig accent. Kies duidelijke typografie en veel rust. Vermijd paarse kleurverlopen, glanzende kaarten en drukke icoontjes. De uitstraling moet betrouwbaar en menselijk zijn, niet technologisch.


Anthropic waarschuwt in zijn eigen ontwerprichtlijnen dat algemene opdrachten vaak tot veilige standaardkeuzes leiden. Het apart benoemen van typografie, kleuren, beweging en achtergronden levert doorgaans een duidelijkere richting op.


Stap 7: laat de eerste versie bouwen
Pas nu vraag je om de website zelf.
Beginners kunnen starten met een visueel voorbeeld binnen Claude. Wie echte projectbestanden wil laten beheren, kan Claude Code gebruiken. Claude Code werkt in een projectomgeving en kan meerdere bestanden bekijken en aanpassen. Dat biedt meer controle, maar vraagt ook meer kennis en voorzichtigheid.
Lees daarom eerst hoe Claude Code werkt wanneer je verder wilt gaan dan een los voorbeeld.
Stap 8: verbeter de website in rondes
Vraag niet om tien verbeteringen tegelijk. Werk in afzonderlijke rondes:
- inhoud en volgorde;
- mobiele weergave;
- leesbaarheid;
- vormgeving;
- vindbaarheid;
- toegankelijkheid;
- snelheid;
- formulieren en foutmeldingen.


Waarom? Bij een grote gecombineerde opdracht kan een verbetering op het ene punt iets anders verslechteren. Een opvallende animatie kan bijvoorbeeld de pagina zwaarder maken. Een kortere tekst kan belangrijke uitleg verwijderen.
Stap 9: laat Claude zichzelf bekritiseren
Gebruik na de eerste versie deze opdracht:
Beoordeel deze website nu niet als maker, maar als kritische UX-specialist, toegankelijkheidsexpert en websitebeheerder. Noem eerst minimaal twintig concrete zwakke punten. Verdeel ze in: onduidelijkheid, vertrouwen, mobiel gebruik, toegankelijkheid, vindbaarheid, snelheid en risico’s. Verander nog niets. Rangschik de punten op impact.
Dit verandert de taak. Claude hoeft zijn eerdere werk niet langer te verdedigen, maar krijgt expliciet toestemming om fouten te zoeken.
Stap 10: publiceer pas na menselijke controle
Controleer minimaal:
- alle knoppen en links;
- formulieren en bevestigingen;
- spelling en contactgegevens;
- leesbaarheid op een kleine telefoon;
- gebruik met alleen een toetsenbord;
- paginatitels en beschrijvingen;
- laadtijd;
- cookiemelding en privacytekst;
- verwerking van persoonsgegevens;
- werking in meerdere browsers;
- reservekopieën en updates.
Een mooie homepage is namelijk geen bewijs dat de gehele website goed werkt.
Van eerste prompt naar professionele website
De kwaliteit stijgt vooral door gerichte vervolgstappen.
Prompt 1: de ruwe versie
Maak een homepage voor een loopbaancoach. De pagina moet professioneel en rustig zijn.
Waarschijnlijk resultaat: bruikbaar, maar algemeen.
Prompt 2: doelgroep en doel toevoegen
De belangrijkste bezoeker is een ervaren werknemer die twijfelt over een nieuwe loopbaanstap. Het doel is een vrijblijvend gesprek. Vermijd overdreven positieve taal.
Nu kan de inhoud aansluiten op een echte twijfel.
Prompt 3: bewijs toevoegen
Verwerk ruimte voor twee concrete praktijkvoorbeelden, een uitleg van de werkwijze en heldere informatie over wat het eerste gesprek wel en niet inhoudt.
De pagina krijgt meer vertrouwen.
Prompt 4: mobiele aandacht
Beoordeel iedere sectie op een telefoonscherm. Houd teksten kort, maak knoppen gemakkelijk aan te raken en voorkom dat belangrijke informatie pas na lang scrollen verschijnt.
De opdracht stuurt op gebruik, niet alleen op uiterlijk.
Prompt 5: vindbaarheid
Maak de paginatitel, koppen en introductie duidelijk voor iemand die zoekt naar loopbaancoaching bij twijfel over een carrièreswitch. Houd de tekst natuurlijk en vermijd herhaling.
Prompt 6: toegankelijkheid en controle
Controleer kleurcontrast, kopvolgorde, toetsenbordgebruik, beschrijvingen bij afbeeldingen en begrijpelijke foutmeldingen. Geef eerst een lijst met problemen en verbeter daarna alleen de punten met hoge prioriteit.
Het verschil ontstaat dus niet doordat prompt zes “slimmer” klinkt. Iedere ronde voegt een nieuw beoordelingskader toe.
De psychologie achter goede prompts


Een prompt is geen toverspreuk. Het is een tijdelijke briefing.
Een rol bepaalt waarop Claude let
“Je bent een UX-designer” zorgt ervoor dat Claude eerder kijkt naar bezoekersroutes, duidelijkheid en drempels.
Maar een rol is geen garantie voor deskundigheid. Een veelvoorkomend misverstand is dat Claude door zo’n zin daadwerkelijk een erkende specialist wordt. Dat klopt niet. De rol verandert vooral het perspectief van het antwoord.
Een doelgroep vermindert willekeur
Zonder doelgroep probeert Claude voor iedereen tegelijk te schrijven. Daardoor worden teksten vaak algemeen.
Met een doelgroep kan Claude prioriteiten stellen. Een zelfstandige die snel offertes wil aanvragen heeft andere informatie nodig dan een sollicitant die een portfolio bekijkt.
Beperkingen geven vaak meer creativiteit
Dat lijkt vreemd, maar “maak iets creatiefs” geeft bijna onbeperkte keuzeruimte. Het model kiest dan gemakkelijk veilige gemiddelden.
Een opdracht als “gebruik één accentkleur, geen kaartenstructuur en één opvallend redactioneel element” dwingt tot gerichtere ontwerpkeuzes.
Claude als team van experts
Je kunt Claude achtereenvolgens verschillende rollen geven:
- Product Owner: bewaakt doel en prioriteiten.
- Informatiearchitect: bepaalt pagina’s en volgorde.
- UX-designer: vermindert twijfel en verwarring.
- Copywriter: schrijft begrijpelijke teksten.
- SEO-specialist: helpt zoekmachines de pagina begrijpen.
- Front-endbouwer: zet het ontwerp om in een werkende pagina.
- Toegankelijkheidsexpert: controleert bruikbaarheid.
- Conversiespecialist: beoordeelt de vervolgstap.
Voer die rollen niet allemaal in één prompt uit. Laat iedere rol eerst beoordelen wat er al ligt. Hierdoor ontstaat een gesprek tussen perspectieven, in plaats van één groot antwoord waarin alles door elkaar loopt.
Voor grotere opdrachten kun je informatie, stijlafspraken en voorbeelden ook binnen Claude Projects organiseren. Zo hoeft belangrijke context niet steeds opnieuw in iedere opdracht te staan.
Waar gaat Claude vaak de mist in?
Claude kan een overtuigend resultaat tonen terwijl er achter de schermen nog problemen zitten.
Veelvoorkomende zwakke punten zijn:
- algemene teksten die ook bij een concurrent passen;
- knoppen zonder duidelijke vervolgstap;
- fictieve ervaringen of cijfers;
- onnodige animaties;
- een rommelige mobiele weergave;
- ontbrekende beschrijvingen bij afbeeldingen;
- formulieren die er goed uitzien, maar niets versturen;
- onduidelijke foutmeldingen;
- ontbrekende pagina-informatie voor zoekmachines;
- onderdelen die na meerdere aanpassingen dubbel voorkomen.
De oorzaak is meestal niet dat Claude “slecht kan bouwen”. Het probleem is dat zichtbare overtuigingskracht en technische betrouwbaarheid twee verschillende dingen zijn. Een bezoeker ziet een knop. Het systeem achter die knop moet echter ook valideren, verzenden, beveiligen en bevestigen.
Claude of ChatGPT voor een website?
Er is geen winnaar voor iedere situatie.
Claude past vaak goed bij:
- lange briefings;
- het analyseren van bestaande teksten;
- het uitwerken van structuur;
- herhaald verbeteren van websitebestanden;
- een rustige samenwerking in meerdere rondes.
ChatGPT kan handig zijn wanneer je daarnaast veel wilt werken met afbeeldingen, breed online onderzoek of andere algemene hulpmiddelen binnen dezelfde omgeving. Recente vergelijkingen benadrukken vooral dat de keuze steeds meer afhangt van de werkwijze en functies, niet van één universeel intelligentiecijfer.
Wil je beide mogelijkheden uitgebreider naast elkaar zien? Lees dan de vergelijking Claude versus ChatGPT.
WegwijsAI-test: zo meet je of een betere prompt echt helpt
Veel artikelen laten alleen het mooiste eindresultaat zien. Daardoor weet je niet hoeveel correctierondes nodig waren.
Een eerlijker experiment gebruikt bij iedere ronde dezelfde opdracht, doelgroep en beoordelingsschaal. Test bijvoorbeeld een website voor een fictieve Nederlandse financieel administrateur.
Leg per ronde dit vast
| Onderdeel | Wat meet je? |
|---|---|
| Werktijd | Minuten vanaf prompt tot bruikbare versie |
| Aantal correcties | Hoeveel vervolgopdrachten waren nodig? |
| Duidelijkheid | Score van 1 tot 5 |
| Eigen uitstraling | Score van 1 tot 5 |
| Mobiele bruikbaarheid | Score van 1 tot 5 |
| Vertrouwen | Score van 1 tot 5 |
| Toegankelijkheid | Aantal gevonden problemen |
| Prestaties | Lighthouse-score |
| Fouten | Aantal kapotte of onjuiste onderdelen |
Gebruik voor alle rondes dezelfde browser en hetzelfde apparaat. Anders vergelijk je niet alleen prompts, maar ook verschillende omstandigheden.
Maak deze zes screenshots
- Resultaat na de algemene beginprompt.
- Resultaat na toevoeging van doelgroep en doel.
- Resultaat na vastlegging van de visuele richting.
- Mobiele versie vóór verbetering.
- Mobiele versie na verbetering.
- Eindversie na de kritische controle.
Laat bij ieder screenshot ook één opvallend probleem zien. Juist dat maakt de test geloofwaardig.
Wat bewijst de test wel en niet?
De test laat zien welke promptvolgorde binnen één concreet project beter werkt. Hij bewijst niet dat Claude altijd beter is dan een andere tool. Daarvoor zou je meerdere typen websites, vaste beoordelaars en herhaalde tests nodig hebben.
Die beperking is geen zwakte. Transparantie maakt praktijkdata juist betrouwbaar.
De mens blijft verantwoordelijk voor de laatste tien procent
Een kleine ondernemer liet Claude een website opstellen voor workshops. De eerste versie zag er verzorgd uit. Toch stond de belangrijkste informatie — voor wie de workshops bedoeld waren — pas bijna onderaan.
Claude had de onderdelen correct gemaakt, maar kende de terugkerende vraag uit telefoongesprekken niet. Pas nadat die echte klantvraag werd toegevoegd, veranderde de pagina van “mooie uitleg” in een bruikbare verkooproute.
Dat is de kern van een website maken met Claude: het systeem kan razendsnel vorm geven aan wat jij aanlevert. Maar het weet niet automatisch welk detail voor jouw klant doorslaggevend is.
Conclusie: laat Claude niet direct bouwen


Een goede Claude-website begint niet met code. Hij begint met keuzes.
Laat Claude eerst vragen stellen. Bepaal daarna de doelgroep, het doel, de pagina’s en de informatievolgorde. Werk vervolgens in kleine rondes aan tekst, ontwerp, mobiel gebruik en controle.
Zo blijft het proces begrijpelijk, zelfs als je geen programmeur bent. Je hoeft niet alles technisch te kunnen. Je moet vooral leren beoordelen of de website duidelijk, geloofwaardig en bruikbaar is.
FAQ
Kan Claude een volledige website voor mij maken?
Claude kan de structuur, teksten, vormgeving en websitebestanden voor een eenvoudige website maken. De site staat daarna niet altijd automatisch online. Je hebt meestal nog een domeinnaam, hosting en een controle van formulieren, veiligheid en mobiele weergave nodig.
Heb ik technische kennis nodig om een website met Claude te maken?
Voor een eerste ontwerp of eenvoudig prototype heb je weinig technische kennis nodig. Je moet wel kunnen beoordelen of informatie klopt en of de website prettig werkt. Voor betalingen, klantaccounts, persoonsgegevens of ingewikkelde functies is professionele controle verstandig.
Is Claude beter dan ChatGPT voor websites maken?
Niet in iedere situatie. Claude is vaak prettig voor lange briefings, stapsgewijze verbeteringen en het werken aan websitebestanden. ChatGPT biedt weer andere algemene en visuele hulpmiddelen. De beste keuze hangt af van je website, ervaring en gewenste werkwijze.
Kan ik een website van Claude direct publiceren?
Publiceer een gegenereerde website niet zonder controle. Test eerst alle links, formulieren, mobiele schermen, teksten, privacyonderdelen en foutmeldingen. Wat er goed uitziet, hoeft achter de schermen nog niet volledig te werken.
Welke website kan ik als beginner het beste met Claude maken?
Begin met een kleine website, portfolio of landingspagina met één duidelijk doel. Zo blijft het aantal pagina’s en functies overzichtelijk. Een webshop of website met accounts en betalingen vraagt aanzienlijk meer controle.







