Vrouw wijst naar website-ontwerp met Claude voor website maken.

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.

Vrouw wijst naar website-ontwerp met Claude voor website maken.
In deze handleiding leer je daarom niet alleen wat je moet vragen, maar vooral in welke volgorde.

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.
In 5 minuten bouwen we een eenvoudige website zoals hierboven. Met een uurtje sleutelen kun je met Claude al iets heel moderns neerzetten.

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.

Met Claude zet je in een handomdraai een website in elkaar

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.

Vrouw wijst naar een overzicht van ontwerpkeuzes en strategieën voor website maken.
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.
SituatieGeschiktheidWaarom?
Eenvoudige landingspaginaGoedDuidelijk doel en beperkte omvang
PortfolioGoedTekst, structuur en presentatie komen samen
Website voor een lokale ondernemingGoedOverzichtelijke pagina’s en herkenbare acties
Eerste versie van een online dienstRedelijk tot goedSterk voor een eerste concept en gebruikersroute
WebshopBeperktBetalen, voorraad en privacy vragen betrouwbare koppelingen
Grote bedrijfswebsiteBeperktVeel rollen, regels, content en controles
Complexe applicatieAlleen met deskundige begeleidingFouten 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:

  1. Gebruikerslaag: je ziet een keurige pagina met grote kop, knop en drie blokken.
  2. Mechanische laag: Claude voorspelt een waarschijnlijke combinatie op basis van je opdracht en beschikbare context.
  3. 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.

🔔 Claude updates

Mis geen nieuw Claude-artikel

Ontvang een melding zodra WegwijsAI een nieuwe handleiding, vergelijking of praktische update over Claude publiceert.

Je kunt dit later altijd weer uitschakelen in je browserinstellingen.

Laat Claude je eerst interviewen

Vrouw geeft duim omhoog met digitale iconen rondom haar.
de beste prompt om een website te maken, vraagt in eerste instantie om géén website.

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.

Illustratie van een laptop met een website ontwerp voor het maken van een website.
Met de bovenstaande prompt gaat Claude aan de slag.

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.

Laptop met webdesign software voor het maken van een website.
Met de beperkte context levert Claude een eerste versie op. Vanaf hier kunnen we echt aan de slag.

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:

  1. inhoud en volgorde;
  2. mobiele weergave;
  3. leesbaarheid;
  4. vormgeving;
  5. vindbaarheid;
  6. toegankelijkheid;
  7. snelheid;
  8. formulieren en foutmeldingen.
Website adviespagina met duidelijke tekst en call-to-action knop.
In 5 minuten bouwen we een eenvoudige website zoals hierboven. Met een uurtje sleutelen kun je met Claude al iets heel moderns neerzetten.

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

Illustratie over psychologie en prompts voor UX-designers.
Een prompt is geen toverspreuk. Het is een tijdelijke briefing

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

OnderdeelWat meet je?
WerktijdMinuten vanaf prompt tot bruikbare versie
Aantal correctiesHoeveel vervolgopdrachten waren nodig?
DuidelijkheidScore van 1 tot 5
Eigen uitstralingScore van 1 tot 5
Mobiele bruikbaarheidScore van 1 tot 5
VertrouwenScore van 1 tot 5
ToegankelijkheidAantal gevonden problemen
PrestatiesLighthouse-score
FoutenAantal 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

  1. Resultaat na de algemene beginprompt.
  2. Resultaat na toevoeging van doelgroep en doel.
  3. Resultaat na vastlegging van de visuele richting.
  4. Mobiele versie vóór verbetering.
  5. Mobiele versie na verbetering.
  6. 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

Vrouw wijst naar digitale webdesign iconen voor website creatie.
Vrouw wijst naar digitale iconen die website maken en ontwerp symboliseren, passend bij WegwijsAI en webontwikkeling.

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.

Over de auteur

Vergelijkbare berichten