Je AI-website minder generiek maken

Je hebt het paarse verloop al weggehaald, en je site ziet er nog steeds uit als die van iedereen. Dat komt doordat de patronen zelf niet het probleem zijn. Ze vullen de plekken waar niemand een keuze maakte. Hieronder staan zes ingrepen die die plekken vullen met iets van jou, met per ingreep de code of de instelling erbij.

Wil je eerst weten welke patronen een AI-site verraden, lees dan zo herken je een AI-website. Deze gids gaat over wat ervoor terugkomt.

Herken je dit?

Generiek ontwerp begint bij lege inhoud

Een AI-tool ontwerpt rond wat je hem geeft. Geef je een bedrijfsnaam en drie diensten, dan heeft hij drie woorden om een pagina mee te vullen, en de rest wordt opvulling: een verloop, iconen, een rij cijfers, een glazen kaart. Zet je er een foto van je werkplaats, een prijs, een plaatsnaam en de vraag die klanten je echt stellen naast, dan is er iets om omheen te ontwerpen.

Daarom staat de inhoud hieronder bovenaan. De andere vijf ingrepen werken pas goed als er iets op de pagina staat dat alleen van jou is.

Zes ingrepen, in deze volgorde

1. Zet echte inhoud op de plek van de opvulling

Vervang op je homepage elke zin die bij elk bedrijf past door een feit: wat je doet, voor wie, waar, wat het kost of hoe lang het duurt. Vervang elk gegenereerd beeld door een foto van je eigen werk, je eigen mensen of je eigen product, ook als die met een telefoon is gemaakt.

Hoe je gegenereerde zinnen vindt en herschrijft, staat in AI-teksten op je website herkennen. Wat je met AI-beelden doet, staat in AI-afbeeldingen op je website.

2. Geef de koppen een eigen letter en echt contrast

De meeste AI-sites gebruiken één letter in twee gewichten, met koppen die maar iets groter zijn dan de tekst. Kies een aparte letter voor de koppen en maak het verschil groot: een hoofdkop van drie tot vier keer de tekstgrootte, tussenkoppen daar duidelijk onder.

body { font-size: 1.125rem; line-height: 1.6; }
h1   { font-family: var(--font-display);
       font-size: clamp(2.5rem, 6vw, 4.5rem);
       line-height: 1; text-wrap: balance; }
h2   { font-size: clamp(1.75rem, 3vw, 2.5rem); }

Welke letter je kiest en hoe je hem laadt, staat in een lettertype kiezen dat niet naar AI ruikt.

3. Geef je kleur één taak

Een accentkleur die overal staat, betekent niets meer. Geef hem één taak, bijvoorbeeld: alles wat je kunt aanklikken. Kopjes en iconen worden dan gewoon tekstkleur. Leg dat vast als variabelen, zodat ook de AI-tool er niet van afwijkt.

:root {
  --tekst:   #1b1f1d;  /* alle tekst en koppen */
  --vlak:    #ffffff;  /* achtergrond */
  --actie:   #0b5f8a;  /* alleen knoppen en links */
}

Op deze site hebben we dat gemeten. Op 8 september 2026 was donkergroen 21 procent van de homepage en lime, het eigenlijke merk, 14 procent. We beperkten het donkergroen tot tekst, knoppen en één afsluitend blok per pagina. Daarna was het 26 procent lime en 10 procent donkergroen. Hoe je kleuren als tokens vastlegt, staat in design tokens zodat AI consistent blijft.

4. Haal de layout uit het midden

Een gecentreerde kolom is de veilige keuze, en daarom de keuze van elk model. Zet de kop links en geef de pagina twee kolommen van ongelijke breedte. De brede kolom krijgt het belangrijkste: de kop met wat je doet. De smalle krijgt het bewijs: een foto, een prijs, een klantnaam.

<!-- voor -->
<section class="mx-auto max-w-3xl text-center">

<!-- na -->
<section class="grid gap-12 text-left md:grid-cols-[7fr_5fr]">

Varieer daarna de ruimte tussen secties. Wat bij elkaar hoort, staat dicht op elkaar. Een nieuw onderwerp krijgt veel lucht erboven.

5. Maak van kaarten een lijst

Drie kaarten met een icoon zeggen dat de inhoud even belangrijk en even lang is. Dat is zelden waar. Een lijst met een dunne lijn tussen de regels laat de lengte vrij en leest sneller. Op deze site staan diensten en stappen daarom als rijen: een kop, een zin, een lijn, en waar het een volgorde is een groot cijfer ervoor.

Gebruik een kaart alleen voor iets dat je echt als los ding kunt aanklikken, zoals een project of een product.

6. Schrap de effecten

Zoek in je code naar schaduwen, hover-effecten die kaarten laten bewegen, en animaties op elke sectie.

grep -rnE "shadow-(md|lg|xl|2xl)|hover:scale|hover:-translate-y|animate-|transition-all" src/

Haal ze eruit en kijk wat er overblijft. Houd hooguit één beweging die iets uitlegt, bijvoorbeeld het menu dat opent. Een sectie die bij het scrollen omhoog schuift, voegt niets toe aan wat erin staat. Waarom scroll-animaties ook je site vertragen, staat in scroll-animaties uit je AI-design.

Waar het misgaat

Wanneer je hulp nodig hebt

Kom je er met deze zes niet uit, of verandert de AI-tool bij elke ingreep de rest van je pagina mee, dan doen wij het in je code. Bij AI-design laten verbeteren krijg je eerst een review van elke pagina, daarna een vaste prijs voor de fixes. Moet de site helemaal opnieuw, dan staat bij website vernieuwen hoe dat gaat. De andere gidsen over ontwerpen met AI vind je bij AI-design.