Website laten maken door Claude

Door Marc geplaatst op 19 augustus 2026

Een eenvoudige website bouwen hoeft tegenwoordig niet meer te betekenen dat je eerst HTML, CSS en JavaScript moet leren. Met AI is het mogelijk om een compleet ontwerp te laten maken, de bijbehorende code te genereren en de website vervolgens zelf online te zetten.

In dit artikel laat ik zien hoe ik dat aanpak met Claude. Ik begin met het laten ontwerpen van een website, laat Claude vervolgens de code schrijven en exporteren naar een map en test de website lokaal in de browser. Daarna zet ik de bestanden op een hostingpakket.

Voor een eenvoudige informatieve website is dit verrassend laagdrempelig. Je hebt geen WordPress, thema’s of pagebuilder nodig. Wel is het belangrijk om te begrijpen wat AI precies oplevert en waar je zelf nog op moet letten.

Dit moet je vooraf weten

In dit artikel laat ik je zien hoe je een eenvoudige website laat maken zonder dat je dynamische functionaliteiten moet opzetten zoals een database. Met deze methode ben je beperkt in de mogelijkheden, maar het levert wel eenvoudig een supersnelle nette website. Wil je wat meer functionaliteiten zoals een contactformulier, filtering, producten verkopen, etc? Dan is deze methode minder geschikt. Verder heb je minimaal Claude Pro nodig om design en code te laten genereren. Dit kost €18,- per maand. Wat mij betreft is dat het dubbel en dwars waard.

Wat heb je nodig?

Voor deze aanpak heb je in de basis vier dingen nodig:

• Claude Pro
• Claude Desktop
• Een hostingpakket
• Een domeinnaam

Claude Code is bedoeld voor het werken met code en kan rechtstreeks bestanden in een projectmap bekijken en aanpassen. Claude Desktop vormt daarbij de gebruikersinterface waarmee je met Claude werkt. Anthropic beschrijft Claude Code als een command-line tool waarmee Claude complexe programmeertaken rechtstreeks in een project kan uitvoeren.

Daarnaast heb je uiteraard een plek nodig om de website uiteindelijk te publiceren. Voor een eenvoudige website volstaat een standaard hostingpakket met ondersteuning voor bijvoorbeeld HTML, CSS en JavaScript.

Een database of PHP is voor een volledig statische website niet noodzakelijk.

1. Een design laten maken

Ik begin niet meteen met de opdracht om een website te programmeren. Eerst laat ik Claude nadenken over het ontwerp. Dat doe ik met Claude Design. Je vindt Claude Design door de Desktop App te openen en linksonder op Design te klikken.

Vervolgens geef je een beschrijving van het gewenste design. Wees niet te beknopt. Zet er direct ook praktische informatie in zoals contactgegevens of openingstijden. Dat scheelt later weer. Claude zal vervolgens een eerste ontwerp uitwerken.

Stel je bent een fietsenmaker, dan zou je de prompt als volgt kunnen schrijven:

Ontwerp een moderne website voor het bedrijf Fietsservice Noord uit Groningen.

Het bedrijf is gespecialiseerd in onderhoud en reparatie van elektrische fietsen, met een haal- en brengservice voor klanten in Groningen en omgeving.

Gegevens voor het ontwerp:

Helperpark 1234, 9723 AB Groningen
050 - 123 4567
info@fietsservice-noord.nl

De website moet in alles uitstralen dat dit een premium fietsenmaker is. Gespecialiseerd in stadsfietsen van VanMoof en Cowboy. Design moet clean en stads uitstralen. Als het ware de Apple onder de fietsenmakers. Wees creatief, gedurfd en exclusief.

Ontwerp een sterke homepage met een duidelijke hero, diensten, werkwijze, voordelen van de haal- en brengservice, reviews, werkgebied en een opvallende knop Reparatie aanmelden.

Nu is dit natuurlijk een vrij beperkte prompt. Claude stelt je bij zo’n prompt hoogstwaarschijnlijk nog wat vervolgvragen over je wensen. Toch is het beter om direct veel meer details op te geven. Zodat Claude minder gaat gissen en meer rekening houdt met jouw wensen. Het resultaat wordt aanzienlijk beter wanneer je zelf vooraf bepaalt:

• Wat het bedrijf doet
• Wie de doelgroep is
• Welke diensten worden aangeboden
• Welke pagina’s nodig zijn
• Welke actie bezoekers moeten ondernemen
• Welke teksten en afbeeldingen beschikbaar zijn

AI is enorm krachtig, maar uiteindelijk wel afhankelijk van jouw input. Garbage in = Garbage out 🙂

In het geval van dit voorbeeld is er toch een aardig design gegenereerd. Enkel de afbeeldingen missen nog. Dus in een vervolgprompt geef ik nog op:

Voorzie de placeholders van echte afbeeldingen. Bijvoorbeeld van Unsplash.

Voor zo’n minimale prompt vind ik het resultaat behoorlijk netjes, al zeg ik het zelf 😉

Nu valt het me wel op dat het design niet optimaal is op een smaller scherm. Het wordt dan een rommeltje. Eerlijk is eerlijk, ik heb in de prompt daar ook niet om gevraagd.

Dus doen we nog een vervolgprompt:

Maak het design mobielvriendelijk. Het moet een burgermenu tonen bij smalle schermen. De grote titel moet ook op smalle schermen indruk maken.

Wow, dat is echt stukken beter! Omdat ik niet specifiek in de prompt heb vermeld welke pagina’s nodig zijn, heeft Claude er een onepager van gemaakt. Dus een website waarbij alle content op 1 pagina staat. Daarom doe ik nog een laatste prompt:

Maak een dienstenpagina over accu-diagnose & herstel. Deze pagina moet nauw aansluiten bij het design van de homepage. Op deze pagina wordt uitgelegd wat de dienst inhoudt, wat de voordelen zijn en wat de kenmerken zijn van een falende accu. Plaats ook een aantal reviews ter ondersteuning van deze dienst. 

Met als resultaat dit design voor de dienstenpagina:

Nu is het tijd om de designs over te dragen aan Claude Code zodat we er een werkende website van kunnen maken. De beste manier daarvoor is door rechtsboven in Claude Design te klikken op Share.
In het menu dat nu verschijnt, klik je op More formats and apps. Nu zie je Claude Code staan. Klik op de Send knop.

Vervolgens moeten we nog de bestanden selecteren die Claude Code moet gebruiken. Klik op Add more files en selecteer dan Project root. Daarmee worden alle bestanden geselecteerd. Daarna klik je op Copy prompt.

2. De code laten maken

Nu wordt het tijd om het design tot leven te brengen. Sluit Claude Design en ga terug naar de Claude App. Klik bovenin het scherm op Code om naar Claude Code te gaan.

Klik op + New om een nieuw gesprek te starten. Vervolgens plak je de eerder gekopieerde prompt en druk je op enter.
Claude Code importeert nu het design. Waarschijnlijk stelt Claude je nu een aantal vragen. Bijvoorbeeld in welke vorm je de website wilt bouwen. Kies voor een statische HTML website.

Na de vragen heeft Claude een paar minuten (of langer) nodig om alles te genereren. Vervolgens zal het ook ontroleren of het allemaal in orde is. Bij een groot project kan dit wel even duren.

Nadat Claude de website heeft opgezet, kun je deze bekijken in de browser van Claude zelf of simpelweg naar het mapje op je computer gaan en daar op index.html klikken. Eventuele foutjes of andere gewenste aanpassingen voer je uit met een prompt.

Je controleert bijvoorbeeld:

• Werken alle pagina’s?
• Werken de knoppen?
• Werken de menu’s?
• Zijn alle afbeeldingen zichtbaar?
• Werkt de website op mobiel?
• Zijn teksten niet afgebroken?
• Enzovoort

Alles naar wens? Dan is het tijd om de website online te zetten.

3. De website publiceren

De website staat nu lokaal als een verzameling bestanden op je computer. Het grote voordeel van een statische html website is dat je in principe alleen deze bestanden hoeft te publiceren. Er hoeft geen ingewikkeld CMS of framework op de server te draaien.

Je hebt bijvoorbeeld:

• Mijn website
  • index.html
  • diensten.html
  • css/
  • js/
  • images/

Deze hele map vormt feitelijk de website. Het enige wat je dus moet doen is deze bestanden uploaden naar je hostingpakket. Er zijn nogal wat verschillende hostingpakketten, maar in de basis kun je vaak uploaden via FTP of via een dashboard waarin je bij de bestanden van je hostingpakket kunt komen. Veel hostingpartijen maken gebruik van Plesk of DirectAdmin. Login bij je hostingpakket en ga naar de file browser. Vervolgens upload je de inhoud van de websitemap (dus niet de hoofdmap zelf) naar je hostingpakket.

Bezoek nu je domeinnaam en je zult zien dat de website online staat.

Tot slot

In dit artikel liet ik je zien hoe je een eenvoudige html website laat maken door Claude. Dit werkt prima als je snel een simpele website nodig hebt als visitekaartje. Heb je meer geavanceerde functies nodig? Zoals een CMS waarin je kunt inloggen, verkoop van producten of koppelingen met andere systemen? Dan is zo’n basis html website niet afdoende. Claude Code is echter ook in staat veel complexere websites of applicaties te bouwen. Dit leg ik in een ander artikel uitgebreid uit.