AI website ontwerp: vijf controlepunten voor elke site

Met AI website ontwerp staat er in ongeveer de tijd die je nodig hebt om een kop koffie in te schenken een geloofwaardige homepage. Die snelheid is echt, en juist daarin zit de valkuil. Een gegenereerde pagina ziet er lang af uit voordat ze af is, en de onafgemaakte delen (contrast, volgorde van koppen, gespiegelde lay-outs, discipline in tokens) zijn precies de delen die een klant pas drie weken na de lancering ontdekt. Hieronder staat de volgorde die wij gebruiken om de snelheid te houden en de verrassingen weg te nemen: vijf controlepunten, in volgorde, elk met een duidelijk slaagt- of zakcriterium.

Waarom ziet een gegenereerde site er af uit terwijl dat niet zo is?

Omdat het model optimaliseert voor wat een screenshot laat zien. Een held, drie kaarten met kenmerken, een rij met getuigenissen, een footer. Elk van die onderdelen is statistisch vertrouwd, dus de hele pagina oogt in één blik professioneel. De dingen die een screenshot niet laat zien, bepalen of de site een overdracht naar de klant overleeft.

Neem toegankelijkheid. Het WebAIM Million 2026-rapport vond gedetecteerde WCAG 2-fouten op 95.9% van de homepages van de miljoen best bezochte sites, en tekst met laag contrast op 83.9% ervan. Een model dat op dat web is getraind, reproduceert dat web. Het levert je met volle overtuiging een lichtgrijs bijschrift op een crèmekleurige achtergrond.

Het tweede onzichtbare probleem is waar de ontwerpbeslissingen leven. Een gegenereerde pagina draagt kleuren, maten en afstanden vaak als letterlijke waarden verspreid door de markup. Verander volgend kwartaal het merkblauw en je zoekt door veertig blokken. Die onderhoudsrekening betaalt de freelancer, niet het model.

De nuttige vraag is dus niet "kan AI deze site ontwerpen?" Het kan een concept maken. De nuttige vraag is: welke beslissingen laat ik het maken, en waar controleer ik het werk? De vijf controlepunten geven daar antwoord op.

Controlepunt een: schrijf de brief voordat je de tool opent

De meeste teleurstellende output gaat terug op een prompt van één regel. "Een website voor een bakkerij in Utrecht" geeft het model de vrijheid om alles te verzinnen: doelgroep, toon, paginalijst, calls to action. Het verzint die dan op basis van het gemiddelde van elke bakkerssite die het ooit heeft gezien.

Een brief die werkt past op een halve pagina. Wie bezoekt de site, en wat wil die bezoeker in de eerste tien seconden doen? De drie pagina's die moeten bestaan. De ene actie waarvoor de site er is (boeken, bellen, bestellen). Twee sites die de klant bewondert en één die hij haat. De talen, inclusief richting: als de site in het Arabisch of Hebreeuws verschijnt, zeg dat nu, niet nadat de lay-out is goedgekeurd.

Die laatste regel telt zwaarder dan hij lijkt. Rechts-naar-links is een eigenschap van de lay-out, geen vertaalklus. Een model dat niets over richting hoort, levert een links uitgelijnd ontwerp met Arabische tekst erin geplakt. Richting in de brief zetten verandert welke lay-outs de tool voorstelt. Het kost één zin.

Sla bijvoeglijke naamwoorden als "modern en strak" over. Ze dragen geen informatie. "Dicht en redactioneel, zoals een krantenpagina" draagt er veel.

Controlepunt twee: vraag om richtingen, nooit om pagina's

Het goedkoopste gebruik van AI in dit hele werk is verkennen. Vraag om drie tot vijf verschillende richtingen als ruwe lay-outs en lettertypecombinaties, en kies voordat er iets wordt gebouwd. Zes schetsen kosten een paar minuten. Een pagina herbouwen die de klant heeft afgewezen kost een middag.

De discipline is om het goedkoop te houden. Laat de tool voor elke richting geen volledige pagina's met gegenereerde fotografie renderen. Klanten vallen dan voor de foto's en kunnen de lay-out daarna niet meer losmaken van de beelden. Grijze vlakken en echte koppen volstaan. Als de klant niet kan kiezen tussen drie grijze lay-outs, lag het aan de brief, en dat heb je dan gratis geleerd.

De categorie van de tool doet er hier toe, en het is de moeite waard om daar direct over te zijn. Volledige sitegeneratoren zoals 10Web bouwen uit een prompt, een URL of een Figma-bestand een complete WordPress-site, met abonnementen vanaf $10 per maand bij jaarlijkse betaling voor één site. Gehoste builders zoals Durable brengen je in een paar antwoorden in ongeveer een halve minuut naar een afgewerkte site voor het kleinbedrijf. Beide zijn uitstekend voor controlepunt twee en zwak voor controlepunt vier, omdat ze de ontwerpbeslissingen zelf in handen houden in plaats van ze bloot te geven. Gebruik ze om opties te zien. Wees wantrouwig als je ze gebruikt als eindbouw van een site die je jaren gaat onderhouden.

Controlepunt drie: leg het ontwerp vast in theme.json voordat je bouwt

Dit is het controlepunt dat de meeste workflows overslaan, en het scheidt een site die je kunt onderhouden van een site die je alleen kunt demonstreren. Zodra een richting gekozen is, vertaal je de beslissingen naar tokens en schrijf je die in theme.json: het kleurenpalet, de lettertypefamilies en -maten, de afstandsschaal, de contentbreedte. Vanaf dat moment verwijst elk blok naar een token via de slug, nooit naar een letterlijke waarde.

De referentie voor theme.json bestaat precies voor dit doel. Ze geeft een block theme één plek waar het palet en de schalen worden vastgelegd, die de editor vervolgens als instellingen aanbiedt. Verandert het merkblauw, dan pas je één regel aan. Opent een klant de Site Editor, dan kiest die uit jouw palet in plaats van uit een vrij kleurenwiel, wat een hele categorie merkonvriendelijke aanpassingen stilletjes voorkomt.

Hier verdient de AI zijn geld op een andere manier. Geef het de gekozen richting en vraag om een tokenset, en controleer die daarna op twee regels. Elk paar tekst en achtergrond moet voor normale tekst minimaal 4.5:1 halen (de WCAG AA-drempel), dus reken de verhoudingen zelf uit in plaats van de bewering van het model te vertrouwen. En de schaal moet klein blijven: vijf of zes afstandsstappen, een typeschaal van zes maten. Modellen geven graag veertien bijna identieke grijzen. Schrap er elf.

Een praktische test of dit controlepunt standhield: open het afgewerkte thema en zoek in elk template naar een hexcode. Vind je er een, dan is er een beslissing buiten het systeem gelopen.

Controlepunt vier: bouw met native blocks en houd de generator buiten de lus

Nu bouwen. De structuur die het model voorstelde is meestal de moeite waard om te behouden: de volgorde van de secties, de kolomlogica, het ritme tussen dichte en open delen. De markup die het produceerde meestal niet. Bouw de goedgekeurde structuur na in core-blocks (Group, Columns, Cover, Query Loop) met jouw tokens, en behandel de gegenereerde output als referentietekening, niet als bronbestand.

Dat klinkt trager. Naar onze ervaring is het vanaf de tweede pagina sneller, omdat native blocks de tokens overnemen, reageren op de Site Editor en zich gedragen wanneer een klant ze aanpast. Gegenereerde markup die de stijl hardcodeert, werkt tegen elk van die dingen in. Page builders zitten aan het andere eind van dezelfde afweging. Divi, in februari 2026 als Divi 5 opnieuw gebouwd, levert Divi AI in het Pro-abonnement van $277 per jaar, en de output blijft binnen het modulesysteem van Divi. Voor een bureau dat op Divi is gestandaardiseerd is dat een legitieme keuze. Het is wel een ander product dan een block theme, met een andere exitkost, en die exitkost hoort in de offerte.

Waar AI-generatie nog wel een plek heeft in de bouw, is de repetitieve laag: een variant van een prijssectie, placeholdertekst die op de echte tekst lijkt, alternatieve heroschikkingen die de klant kan vergelijken. Behandel elk daarvan als een concept-patroon dat opgeschoond en geregistreerd moet worden, nooit als afgewerkt werk.

Eén eerlijke grens. Heeft het project echte interactie nodig (gefilterde archieven, eigen queryslogica, alles met JavaScript-gedrag), dan kan geen generator dat dragen. Een ontwikkelaar schrijft dat deel, en de bijdrage van AI blijft aan de randen.

Controlepunt vijf: controleer wat een screenshot niet kan tonen

Voer dezelfde korte audit op elke site uit, in dezelfde volgorde, zodat het een gewoonte wordt en geen bui.

Eerst contrast. Controleer de echte weergegeven combinaties, inclusief tekst over afbeeldingen en de uitgeschakelde en hover-toestanden waar het model niet aan heeft gedacht. Ten tweede de structuur van koppen: precies één H1, koppen die stap voor stap dalen zonder over te slaan, en geen kop die alleen is gekozen omdat hij groot is. Ten derde het toetsenbord: tab door de hele pagina en controleer of de focus zichtbaar is en of de volgorde de leesvolgorde volgt. Ten vierde alt-tekst bij elke betekenisvolle afbeelding en lege alt-tekst bij de rest.

Het vijfde controlepunt is wat deze audit onderscheidt van een generieke checklist: richting. Heeft de site een Arabische of Hebreeuwse versie, bekijk die dan in rechts-naar-links en zoek naar wat niet is gespiegeld. Pijlen die de verkeerde kant op wijzen, een heldafbeelding waarvan het hoofdonderwerp nu tegen de tekst aan staat, padding die is geschreven als margin-left in plaats van een logische eigenschap zoals margin-inline-start. Die zijn goedkoop te repareren als je ze bij dit controlepunt vindt en pijnlijk als je ze in de screenshot van een klant tegenkomt.

Bewaar het bewijs van de audit. Een voor-en-na-paar per pagina, een notitie van wat faalde en een notitie van wat je hebt veranderd. Dat maakt "met AI ondersteund" van een vage claim tot een opleverbaar onderdeel, en het is de alinea in je overdrachtsdocument die je tarief verdedigt tegenover een klant die het de week ervoor zelf met een generator heeft geprobeerd.

Hoe zit het met de one-prompt sitebouwers?

Ze hebben een plek, en die plek is smal. Een one-prompt builder is een prima manier om een wegwerpprototype voor een pitch te maken, een landingspagina voor een weekendevenement of een visueel startpunt voor een klant die niet kan beschrijven wat hij wil. Framer combineert een AI-sitegenerator met een vrij canvas en een gratis abonnement, wat het geschikt maakt voor precies dat soort snel, wegwerpbaar visueel werk. Het Basic-abonnement begint bij $10 per maand.

Sla ze over wanneer de site op WordPress moet draaien, door een niet-technische klant moet kunnen worden aangepast of een rechts-naar-links publiek moet bedienen, want dan bouw je de output toch opnieuw in blocks. Het prototype was de moeite waard; de pagina was het niet waard om op te leveren. Weten in welke van die twee situaties je zit, bespaart de meeste tijd van allemaal.

Wat je bij je volgende brief kunt proberen

Kies één lopend project en voer alleen controlepunt een en drie uit. Schrijf de halve pagina brief en leg daarna het gekozen palet en de schalen vast in theme.json, voordat er ook maar één pagina bestaat. Meet de tijd en vergelijk die met hoe lang je vorige site nodig had om een stabiel ontwerp te bereiken. Houdt het resultaat stand, dan voeg je de andere drie controlepunten één voor één toe. Welk controlepunt had de meeste pijn bespaard bij de laatste site die je hebt opgeleverd?