Zo herken je een AI-website

Een bezoeker ziet in een paar seconden dat je site uit een AI-tool komt, ook als hij niet kan zeggen waaraan. Hieronder staan de acht patronen die het verraden. Bij elk patroon staat waarom een model het kiest. Wie de oorzaak kent, weet ook wat hij in zijn prompt of zijn code moet veranderen. Daarna volgen vier controles voor je eigen site.

Herken je dit?

Wat je herkent, zijn de keuzes die niemand maakte.

Een model kiest wat het vaakst voorkwam

Een taalmodel schrijft code zoals het tekst schrijft: het kiest steeds het meest waarschijnlijke vervolg. Geef je het een korte prompt (“maak een website voor een installatiebedrijf”), dan ligt bijna elke keuze nog open. Welke letter, welke kleur, hoe de bovenkant eruitziet: het model vult elk open punt in met wat het in zijn trainingsdata het vaakst zag. Dat is code uit tutorials, templates en open-sourceprojecten, vaak gebouwd met dezelfde paar gereedschappen.

Daar komt de tool zelf bij. Veel AI-builders zetten een project op met Tailwind CSS en een kit met kant-en-klare componenten. v0 van Vercel gebruikt shadcn/ui als standaard, en schrijft in zijn eigen documentatie dat het model getraind is op de standaardversies van die componenten en moeite kan hebben met aanpassingen. Wat in de kit de standaard is, wordt zo de standaard van je site.

Acht patronen en waar ze vandaan komen

Inter of Poppins, en verder niets

Inter is een goede letter voor schermen. Wij gebruiken hem zelf voor lopende tekst. Hij is ook de letter waarin alle voorbeelden van Tailwind UI zijn gemaakt, en de startcode van Next.js laadde hem tot 2024 standaard. Daardoor staat font-family: Inter in een enorme hoeveelheid voorbeeldcode. Voor Poppins werkt hetzelfde mechanisme: hoe vaker een gratis letter in voorbeeldcode staat, hoe vaker het model hem kiest.

Het patroon is dus niet de letter. Het is één letter voor koppen en tekst, in twee gewichten, omdat niemand iets anders koos. Hoe je kiest: een lettertype kiezen dat niet naar AI ruikt.

Een paars of indigo verloop

In augustus 2025 bood Adam Wathan, de maker van Tailwind CSS, half grappend excuses aan. Vijf jaar eerder had hij elke knop in Tailwind UI bg-indigo-500 gegeven, en nu was elke AI-interface paars. Dat indigo stond in de demo’s, en dus in de tutorials en artikelen die het overnamen. Een verloop van indigo naar paars, in code from-indigo-500 to-purple-600, is daar de luxere variant van.

Drie kaarten met een icoon

Drie gelijke kaarten, elk met een icoon in een rondje, een kopje van twee woorden en een zin. Het is de featuresectie uit landingspagina-templates, en de kaart is een van de eerste componenten van een kit als shadcn/ui. De iconen komen uit een gratis set als Lucide, waarin het model bij elk woord een plaatje vindt: een schild bij “veilig”, een raket bij “snel”.

Drie is ook geen keuze. Drie kaarten vullen een rij op een laptop netjes, dus stonden er in de voorbeelden meestal drie.

Glas: wazige, doorschijnende vlakken

Een doorschijnend vlak dat de achtergrond vervaagt, heet glassmorphism. In Tailwind is dat één klasse, backdrop-blur, met een achtergrond als bg-white/10. Omdat het zo weinig moeite kost, zet een model het ook waar niets achter ligt om te vervagen: een grijs waas over een effen kleur.

Knoppen als pil

Volledig ronde knoppen, in code rounded-full, vaak met een pijl achter de tekst. Het model koppelt het woord knop aan die vorm omdat ze in zijn voorbeelden vaak samen stonden. Of de vorm bij je merk past, weegt daarbij niet mee.

Een gecentreerde kop met een label erboven

Bovenaan een klein afgerond label (“Nieuw: nu met AI”), daaronder een grote kop in het midden, een regel tekst en twee knoppen. Zo staat de hero in componentenbibliotheken als voorbeeld. Een gecentreerde opbouw werkt ook bij elke tekstlengte en op elk scherm. Een model dat niet weet wat er op je pagina moet, kiest de opbouw die het minst kan misgaan.

Eén woord in de kop in een andere kleur

Een kop als “Bouw je bedrijf sneller”, waarin alleen “sneller” een verloop of de accentkleur heeft. In code is het een <span> met bg-clip-text text-transparent, uit dezelfde templates als het paarse verloop. Het verbergt ook iets: een kop die niets zegt, krijgt zo toch nadruk.

Logo’s en reviews die niet bestaan

Een strook “Vertrouwd door” met logo’s, drie reviews met naam, functie en vijf sterren, en een rij cijfers als “500+ tevreden klanten”. Templates leveren die secties met voorbeeldinhoud. Het model vult ze aan met wat waarschijnlijk klinkt, want het weet niet wie je klanten zijn.

Dit is het enige patroon op deze lijst dat meer kost dan uitstraling. Een bezoeker die één naam opzoekt en niets vindt, gelooft de rest van je site ook niet meer.

Zo controleer je je eigen site

1. Dek je logo af

Houd je hand over je logo en je naam, en vraag iemand in welke branche je zit. Is het antwoord “iets met software” terwijl je cv-ketels installeert, dan zegt je bovenkant niets over jou.

2. Zoek de standaardklassen in je code

Heb je de code, uit een export of uit GitHub, zoek dan naar de klassen die bij de patronen horen.

grep -rnE "from-(indigo|purple|violet)|backdrop-blur|rounded-full|bg-clip-text" src/

Op een rond profielplaatje is rounded-full prima. Staat het op elke knop en elk label, dan koos de kit.

3. Kijk welke letter er echt geladen wordt

In Chrome klik je met de rechtermuisknop op een kop en kies je Inspecteren. Open het tabblad Computed. Onderaan, bij Rendered Fonts, staat welke letter de browser gebruikt. Doe hetzelfde bij een alinea lopende tekst. Staat er twee keer dezelfde naam, dan heeft je site één letter.

4. Zoek de bron van elk logo, elke review en elk cijfer

Schrijf bij elke naam, elk logo en elk getal op waar het vandaan komt: een echte klant, een review op Google, een telling die je kunt laten zien. Wat geen bron heeft, haal je vandaag weg.

Waar het misgaat als je de patronen weghaalt

Wanneer je hulp nodig hebt

Zie je de meeste van deze patronen terug, dan is elk los repareren vaak meer werk dan de bovenkant, de kleuren en de letter in één keer herzien. Dat doen we bij AI-design laten verbeteren: we zeggen welke patronen eruit moeten en wat ervoor terugkomt, en voeren het uit.

Staat je ontwerp nog niet online, dan begint het bij je AI-design omzetten naar een echte website. Alles over ontwerpen uit AI-tools staat bij AI-design.