Ik wilde al langer een nieuwe, persoonlijke website. Een simpele one-pager die laat zien wie ik ben en wat ik doe. Beheersbaar, mobile first en vooral: gebouwd op een manier die toekomstvast is. Geen pagebuilder, geen overbodige plugins, maar een WordPress-theme dat ik zelf kan blijven aanpassen. Tegelijkertijd wilde ik iets anders testen: wat gebeurt er als je zo’n project vrijwel volledig met AI uitvoert? Niet door hele functies ‘over te dragen’ aan AI, maar door AI in te zetten als meewerkend team. Dus wat is er met AI allemaal mogelijk en wat komt er dan uit.

De website staat inmiddels live.

Het uitgangspunt: simpel en beheersbaar

Mijn uitgangspunten waren vrij strak:

  • Een one-pager
  • Mobile first gebouwd
  • Draait op WordPress, zodat ik content via het CMS kan aanpassen
  • Code moet leesbaar en onderhoudbaar blijven (het liefst wel via AI)
  • Alles stap voor stap op te bouwen en uit te breiden

Belangrijk detail: ik wilde niet ‘even snel iets maken’, maar een fundament neerzetten waar ik later ook echt mee verder kan. Dat betekent dat keuzes over structuur, code en beheer ook zwaar wegen en niet alleen het visuele resultaat.

Stap-voor-stap de WordPress site bouwen met AI

In mijn hoofd bestond dit project uit meerdere disciplines:

  • Business analist
  • UX-design
  • visueel ontwerp
  • front-end en back-end development
  • content en copy
  • SEO & analytics
  • testen en QA

In de praktijk heb ik AI ingezet voor al deze rollen, maar met één duidelijke rolverdeling: AI produceert, ik redigeer. Dat klinkt simpel, maar is cruciaal. Je moet zelf nog steeds weten wat je goed vindt, wat niet klopt en waar je bij moet sturen. Waarbij ik natuurlijk ook niet alles (meer) weet van html, css en scripts.

Voor het onderzoek ben ik gestart met Gemini. Ik heb Gemini gevraagd om voorbeelden van personal websites te verzamelen, vijftien in totaal. Daaruit heb ik vier stijlen gekozen die aansloten bij wat ik zocht. Die vier voorbeelden vormden de basis voor de volgende stap: structuur en ontwerpkeuzes.

Kleur, stijl en iteraties

Voor het kleurenschema heb ik zowel ChatGPT als Gemini gebruikt. ChatGPT hielp vooral bij het redeneren: waarom werkt een kleur wel of niet in een zakelijke context, wat doet het met leesbaarheid en hiërarchie? Gemini kwam juist met een kleurenschema dat net iets meer variatie had en visueel spannender was. Die combinatie werkte verrassend goed: breed verkennen, daarna kritisch kiezen.

Met Stitch heb ik vervolgens het kleurenschema en de vier voorbeeldsites ingevoerd. Stitch gaf twee voorstellen terug. Vanaf dat moment begon het iteratieve ontwerpwerk: combineren wat ik goed vond, schrappen wat niet werkte en opnieuw laten verfijnen. Na meerdere iteraties begon het ontwerp als één geheel te voelen in plaats van losse onderdelen.

Van HTML naar WordPress theme

Stitch levert een export op als één HTML-bestand. Prima om snel te starten, maar niet geschikt voor onderhoud of WordPress-integratie. Daarom heb ik die export in GitHub gezet en met Codex opgesplitst in drie losse bestanden: HTML, CSS en vanilla JavaScript. Dat was een bewuste stap. Ik wilde eerst een ‘schone’ front-end basis voordat ik aan WordPress begon. Vervolgens heb ik met ChatGPT een plan gemaakt om van deze bestanden een WordPress-theme te maken, gevuld met Advanced Custom Fields Pro (de enige betaalde plugin die ik heb gebruikt) in plaats van Gutenberg blocks. De prompts daarvoor heb ik stap voor stap aangescherpt met ChatGPT (reasoning), waarna Codex ze gebruikte voor de daadwerkelijke code.

Wat hier goed werkte:

  • ChatGPT voor denken en structureren
  • Codex voor bouwen en refactoren

Elke prompt werd eerst inhoudelijk scherp gemaakt voordat er code gegenereerd werd.

De realiteit: lokaal installeren en bijschaven

Na veertien stappen en meerdere code reviews heb ik het theme lokaal in WordPress geïnstalleerd. En toen begon misschien wel het meest leerzame deel: de aanpassingen ná installatie. Er bleken best veel zaken die pas zichtbaar worden als je het thema echt gebruikt:

  • beheer aan de achterkant
  • kleine UX-details aan de voorkant
  • styling die in de praktijk toch net niet klopt

AI kan veel genereren, maar of het ook altijd aansluit bij de conventies en verwachtingen van developers, blijft iets wat je kritisch moet blijven toetsen. Daarom ook uiteindelijk de vraag, is het nog een ‘nette’ code volgens developer-standaarden? En ik ben natuurlijk daar niet de expert in om die vraag te beantwoorden.

Wat dit experiment voor mij laat zien

Dit project bevestigt voor mij een paar dingen:

  • AI vervangt geen expertise, maar verplaatst het zwaartepunt
  • Je wordt meer redacteur en/of regisseur dan uitvoerder
  • Goede prompts vragen nog steeds inhoudelijke kennis
  • Begrijpen wat je krijgt is net zo belangrijk als krijgen wat je vraagt

Ik heb niet alles gratis gedaan: ik betaal voor mijn domein, voor ACF Pro en voor twee AI-tools (ChatGPT en Gemini).

Waarom ik dit deel

Ik schrijf dit artikel niet omdat alles perfect is, maar juist omdat ik benieuwd ben naar reacties. Van developers: hoe kijken jullie naar deze code? Van UX’ers: klopt de structuur en flow? Van contentspecialisten: wat zou anders of beter kunnen? En breder: hoe gebruiken jullie AI in jullie werk? Waar helpt het echt en waar niet?

Bekijk de site gerust, trek ‘m uit elkaar en laat vooral weten wat je ervan vindt. Dat is voor mij het echte doel van dit experiment.