← Alle gidsen
Websites

Een kleine website met AI

Je bouwt een kleine website met AI in rondes. Je begint bij de bezoeker, kiest een stijl en bouwt op je eigen computer. Daarna controleer je alles voordat iemand de site ziet.

Ray · 13 oktober 2026 · 3 min lezen

Getekende illustratie van iemand aan een bureau die een website bouwt, met schetsen, een laptop en een telefoon met een vinkje.

Werk in rondes, op je eigen computer

Ronde 1 gaat over de bezoeker. Schrijf op wie komt en welke vraag die persoon heeft. Noteer ook de ene stap die hij moet zetten: bellen, mailen, kopen of inschrijven. Past een onderdeel daar niet bij, dan gaat het eruit. Dat besluit neem je zelf, want jij kent je bezoeker.

Ronde 2 gaat over de stijl. Vraag om drie richtingen, bijvoorbeeld rustig, krachtig en speels. Kies er één en leg drie kleuren, twee lettertypes en de toon van je tekst vast. Elke volgende pagina houdt dan dezelfde stijl. Voor beelden lees je Eén stijl met AI-beelden.

Daarna bouw je, met één onderwerp per ronde: de opzet, de kop, de tekst, het contact. Bouw nooit op de plek waar bezoekers komen. Werk in een kopie op je eigen computer. Vraag de AI naar het adres waarop je de site in je browser opent, en kijk na elke ronde mee.

Zo bouwde ik deze twee sites

Op 13 oktober 2026 bouwde ik met AI-agents twee sites. Vibecodingnederland.nl is persoonlijk, met projecten en gidsen. Sobercode.nl is zakelijk, met diensten en kennis over AI op het werk.

Eerst stonden er twee eenvoudige binnenkort-pagina's online. Daarna ging het in rondes: een eigen huisstijl per site met kleuren, lettertype en logo, dan de homepages, dan zeven projectpagina's, dan de gidsen.

De sites zijn gewone HTML en CSS, zonder framework. De projectpagina's komen uit één Python-script, zodat elke pagina dezelfde opbouw heeft. De lettertypes staan op mijn eigen server. De sites draaien op een kleine gehuurde server in Duitsland met de webserver Caddy, met Cloudflare ervoor.

Agents herschreven de gidsen uit stukken van de oude site. Elke gids is korter geworden en heeft een voorbeeld uit eigen werk.

Controleer voordat iemand de site ziet

Voor elke livegang maak ik schermafbeeldingen op 390 en 768 pixels breed, voor telefoon en tablet. Ik controleer ook dat niets horizontaal uitsteekt.

Alle links moeten antwoord 200 geven. Elke pagina heeft een canonical-link, die zoekmachines het hoofdadres van de pagina wijst, en staat in de sitemap.

Een collega las de teksten mee. Zinnen die naar AI klonken gingen eruit. Lees zelf ook elke zin. Houd hem alleen als hij klopt en als jij hem zo zou zeggen.

Bij elke livegang zet de agent alleen de gewijzigde bestanden over. Eerst maakt hij een reservekopie op de server.

Geef gewijzigde bestanden een nieuwe naam

Cloudflare bewaart een kopie van je bestanden. Een aangepast script of plaatje bleef daardoor onzichtbaar tot het een nieuwe naam kreeg, of een toevoeging als ?v=3. Zie je zelf nog de oude versie, denk dan eerst aan de cache.

Begin met ronde 1

Kopieer de opdracht hieronder. Hij bouwt pas nadat jij een stijl hebt gekozen.

Opdracht om te kopiëren

Je bouwt een kleine website voor [doelgroep] met één hoofdvraag: [vraag]. De bezoeker moet één ding kunnen doen: [stap]. Maak gewone pagina's in HTML en CSS, zonder framework. Stel eerst drie stijlrichtingen voor en wacht op mijn keuze. Werk in een kopie in deze map en verander niets daarbuiten. Ontbreekt de doelgroep, de vraag of de stap, dan stop je en vraag je die. Verzin ze niet. Controle: je bouwt pas na mijn stijlkeuze, buiten deze map is niets veranderd en op 390 pixels breed steekt niets horizontaal uit.

Meer gidsen