Deze site is in een middag herbouwd door AI
Ik was uitgekeken op mijn eigen site, dus liet ik drie AI's een nieuwe maken. Mijn bijdrage: screenshots sturen, op knoppen drukken en één keer vergeten op Save te klikken.
De site die je nu leest is ontworpen, gebouwd en online gezet door AI. Niet als demo of gedachte-experiment, maar als de gewone werkwijze: ik heb geen regel code geschreven en geen pixel ontworpen. Wat ik wel deed: kiezen, beoordelen en op precies één cruciaal moment vergeten op Save te drukken. Daarover straks meer.
Eerst waar ik vandaan kwam. De oude Nieuwslab draaide op WordPress met een donker thema dat ik nooit mooi heb gekregen. Elke aanpassing was een gevecht met CSS-variabelen die mijn wijzigingen overschreven, en voor elke nieuwe functie moest er een plugin bij. Ik wilde het omgekeerde: licht, strak, en een site waar ik dingen aan kan toevoegen zonder eromheen te moeten werken. De content mocht ook weg. Een schone lei dus.
Drie Claudes en een taakverdeling
Het werk is gedaan door drie varianten van hetzelfde AI-model, elk met een eigen rol. Claude in de chat was de regisseur: die stelde de aanpak voor, legde elke stap uit en loodste me met screenshots door de delen die ik zelf moest doen. Claude Design maakte het ontwerp. Claude Code bouwde de site en pushte de code naar GitHub.
Dat klinkt als een geolied team, en meestal was het dat ook. Maar de interessante momenten zaten waar het schuurde, en die wil ik hier vastleggen.
Eerst een design system, dan pas pagina’s
Claude Design wilde niet beginnen met een homepage, maar met een design system: een set vastgelegde afspraken over kleuren, lettertypen en componenten waar elke pagina zich aan moet houden. In de code heten de kleuren letterlijk paper en ink, papier en inkt. De koppen staan in Newsreader, een letter die voor nieuwssites is getekend. Dat systeem verdiende zichzelf twee keer terug. Elke pagina die daarna gegenereerd werd, klopte automatisch met de rest, zonder dat ik per pagina hoefde bij te sturen. En toen de site later in echte code werd herbouwd, waren diezelfde afspraken de meetlat: de bouwer nam de kleuren en maten letterlijk over uit het systeem, in plaats van ze op het oog na te maken.
Eerste kanttekening: het ontwerp dat eruit kwam was desktop-only. Geen mobiele weergave, geen breakpoints. Claude Code constateerde dat zelf tijdens het bouwen en heeft de mobiele versie erbij geïmproviseerd. Dat pakte goed uit, maar het is wel de omgekeerde wereld: het ontwerp hoort te bepalen hoe de site zich gedraagt op een telefoon, niet de bouwer achteraf.
Van React-demo naar echte site
Wat Claude Design oplevert is een werkende demo, geschreven in React (de programmeertaal-plus-bouwdoos waar veel webapps mee gemaakt worden) en verpakt in één bestand. Mooi om te delen, ongeschikt als fundament. Claude Code heeft de site daarom opnieuw opgezet in Astro, een framework voor contentsites, met de designcode als referentie ernaast. Artikelen zijn voortaan simpele tekstbestanden, geschreven in markdown: platte tekst met een paar opmaaktekens voor koppen en links. Die bestanden staan in git, een systeem dat elke wijziging bijhoudt en waarin je een wijziging doorvoert met een zogeheten commit. Dat is meteen hoe publiceren hier werkt: nieuw tekstbestand, commit, en de site bouwt zichzelf opnieuw. Geen beheeromgeving, geen opslaan-knop. Nou ja, over die knop zo meer.
Onderweg corrigeerde de regisseur één keuze van de bouwer: de lettertypen kwamen in de eerste versie via Google Fonts binnen, waarmee elke bezoeker een verzoek naar Google stuurt. Nu staan ze op de eigen server. Kleine moeite, en niemand kijkt mee.
De server, en wat er misging
De site draait niet bij een hostingpartij maar op mijn eigen server, naast n8n, de software waarmee ik mijn automatiseringen draai. Coolify, het dashboard waarmee ik die server beheer, haalt de code op van GitHub, bouwt de site en zet hem online met een SSL-certificaat erbij. De eerste deploy duurde 35 seconden.
Toen het sluitstuk: de webhook, het belletje waarmee GitHub aan Coolify doorgeeft dat er nieuwe code is. Opzet van twee minuten, zei de regisseur. Werd een half uur. De testpush kwam aan bij Coolify, die vriendelijk “200 OK” terugzei en vervolgens niets deed. In het antwoord stond de echte boodschap: “Invalid signature”. Het gedeelde geheim waarmee Coolify controleert of een belletje echt van GitHub komt, klopte niet. Oorzaak, na enig speurwerk: ik had het geheim in Coolify ingevuld en niet op Save gedrukt.
Twee lessen voor de prijs van één. Een statuscode 200 betekent “bericht ontvangen”, niet “bericht goedgekeurd”; de foutmelding zat een klik dieper. En de mens in het proces blijft het zwakste punt, ook als zijn enige taak het indrukken van een knop is.
Waarom dit meer is dan een nieuw jasje
De verbouwing is de opmaat voor het eigenlijke experiment. Omdat publiceren nu een git-commit is, kan de publicatieketen die ik aan het bouwen ben er rechtstreeks op aansluiten: een n8n-workflow waarin AI wekelijks het vaknieuws doorneemt, een artikel schrijft en dat klaarzet als voorstel. Niet als gepubliceerd stuk, maar als pull request: een wijziging die pas doorgaat als ik hem goedkeur. Mijn merge is de redactionele handtekening, en die kan technisch niet worden overgeslagen. Elk AI-artikel krijgt bovendien een label, en wat de AI aanleverde en wat ik veranderde is achteraf na te lezen in de versiegeschiedenis.
Of dat werkt, en waar het wringt, lees je hier de komende maanden. De site waarop dat verslag verschijnt is alvast door AI gebouwd. Het eerste artikel erover heeft AI ook al geschreven; ik heb alleen de eindredactie gedaan. Dit was dat artikel.
