Waarom is mijn AI-design inconsistent?

Een AI-tool onthoudt geen ontwerpbeslissingen. Bij elk scherm en elke wijziging kiest het model opnieuw een kleur, een afstand en een lettergrootte die ongeveer past, en ongeveer is elke keer net anders. Je lost het op door die waarden vast te leggen voordat je genereert: als tokens, in een regelbestand en in componenten die je hergebruikt.

Damian Madronal Munoz, oprichter

Bijgewerkt op 30 oktober 20266 min leestijd

Je homepage klopt. De tweede pagina zit er net naast, en de vijfde heeft een eigen stijl gekregen. Dat ligt niet aan jou en meestal ook niet aan de tool: zo werkt een taalmodel. Hieronder hoe je meet hoe groot het verschil is, waar het vandaan komt en hoe je het vastzet. Elke oplossing heeft een eigen gids met de uitwerking; deze pagina is de kaart.

Herken je dit?

Knoppen hebben op de homepage een hoek van acht pixels, op de contactpagina twaalf, en in het menu zijn ze helemaal rond.
Gewone tekst staat in drie tinten grijs. Los zie je het niet, naast elkaar wel.
De koppen op pagina twee zijn groter of dunner dan op pagina één.
In de geëxporteerde code staan tientallen kleurcodes, terwijl je huisstijl er twee heeft.
Op de ene pagina heeft een kaart een schaduw, op de andere een rand.

Vraag je één kleine wijziging en verschuift daarna de hele sectie, dan is dat een verwant probleem met een eigen aanpak: AI past meer aan dan je vraagt.

Een taalmodel kiest per scherm, niet per merk

Een AI-designtool draait op een taalmodel dat bij elke opdracht de meest waarschijnlijke uitvoer voorspelt. Het heeft geen geheugen voor beslissingen. Wat het weet, is wat op dat moment in het gesprek staat: je prompt, een deel van de eerdere antwoorden, en een bestand als je dat meegaf.

Vraag je om een contactpagina, dan kiest het model een afstand tussen secties die plausibel is. Dat kan 24 pixels zijn, of 1,5rem, of 32 pixels. Alle drie zijn verdedigbaar, dus het model heeft geen reden om dezelfde te kiezen als de vorige keer. Met kleuren gaat het net zo. Werkt de tool met Tailwind, dan pakt hij voor gedempte tekst de ene keer text-gray-500 en de andere keer text-slate-600, omdat beide in het standaardpalet staan.

Hoe langer het gesprek, hoe groter de afwijking: de eerste schermen raken uit beeld. Een nieuw gesprek per pagina is nog slechter, want dan begint het model blanco. En geef je een screenshot als voorbeeld, dan schat het model kleuren en maten uit pixels. Je groen komt terug als een groen dat erop lijkt.

Tools die een vastgelegd designsysteem meenemen, wijken minder af. In Claude Design neemt een nieuw project automatisch het designsysteem van je organisatie over, als je dat hebt ingesteld. Google Stitch leest designregels uit een DESIGN.md. Zonder zo’n bron begint elke tool per scherm opnieuw.

Zo meet je hoeveel het afwijkt

Voordat je iets repareert, wil je weten hoe groot het probleem is. Dat kan in de browser of in de code.

In de browser

Open de pagina in Chrome en open DevTools. Kies via het menu met de drie puntjes More tools › CSS overview en klik op Capture overview. Je krijgt alle kleuren, lettertypes en lettergroottes die de pagina gebruikt, met hoe vaak ze voorkomen. Een site met een strakke huisstijl heeft daar een handvol kleuren staan. Staan er dertig, dan weet je genoeg. Doe het op twee of drie pagina’s en vergelijk de lijsten.

In de geëxporteerde code

Heb je de code, tel dan de unieke kleurwaarden en hoekafrondingen.

grep -rohiE '#[0-9a-f]{3,8}' src/ | tr 'A-F' 'a-f' | sort | uniq -c | sort -rn

Telt elke kleurcode in de map src en zet de meest gebruikte bovenaan.

grep -rohE 'rounded(-[a-z0-9]+)?|text-(gray|slate|zinc|neutral|stone)-[0-9]+' src/ | sort | uniq -c | sort -rn

Hetzelfde voor Tailwind: welke afrondingen en welke grijstinten in de code staan.

Vijf soorten afronding en zes grijzen voor dezelfde rol is geen uitzondering. Bewaar de lijst. Daaruit kies je straks per rol één waarde.

De oplossing: vastleggen voordat je genereert

Inconsistentie haal je niet weg door achteraf per scherm te corrigeren. Je voorkomt hem door de keuzes één keer te maken en ze de tool bij elke opdracht mee te geven. Dat gebeurt op vier plekken, die elkaar aanvullen.

Tokens. Elke waarde krijgt een naam: --color-text in plaats van een hexcode, --space-4 in plaats van 24 pixels. De tool kiest dan uit jouw set in plaats van uit alles wat bestaat. Hoe je zo’n set opzet in CSS of in Tailwind, staat in design tokens zodat AI consistent blijft.

Een regelbestand. Tokens zeggen welke waarden er zijn. Ze zeggen niet wanneer je welke gebruikt, of wat nooit mag. Dat schrijf je op in een DESIGN.md die de tool bij elke sessie leest. Wat erin hoort en welke tools het lezen: een DESIGN.md maken voor je AI-tools.

De bronbestanden van je huisstijl. Geef de tool je logo als SVG, je kleuren als exacte waarden en je lettertype als bestand, niet als screenshot. Hoe je dat aanlevert en daarna controleert: je eigen huisstijl gebruiken in AI-designtools.

Componenten. Staat de knop één keer goed, laat de tool dan die knop hergebruiken in plaats van per pagina een nieuwe te tekenen. In code is dat één component per onderdeel, waar elke pagina naar verwijst. Zeg het in je prompt: “Gebruik de bestaande Button-component, maak geen nieuwe.”

De volgorde doet ertoe. Eerst de huisstijl en de tokens, dan de regels, dan pas genereren. Tien pagina’s achteraf gelijktrekken kost meer tijd dan de waarden vooraf vastzetten.

Veelgemaakte fouten

Per scherm terugprompten. “Maak deze pagina gelijk aan de homepage” laat het model opnieuw raden. Je krijgt een derde variant in plaats van een kopie.
Een screenshot als stijlgids. Een model leest geen hexcodes uit pixels. Het schat, en die schatting verschilt per keer.
Elke pagina in een nieuw gesprek. Zonder een bestand dat de keuzes vasthoudt, begint de tool steeds bij nul.
De code opruimen, de bron niet. Je vervangt alle grijzen in de CSS door één waarde. Bij de volgende generatie komen ze terug, omdat nergens staat dat er maar één mag zijn.

Wanneer je hulp nodig hebt

Is het ontwerp al uitgegroeid tot tientallen schermen, dan is gelijktrekken een klus op zich: waarden inventariseren, per rol één kiezen, componenten samenvoegen en controleren dat er onderweg niets breekt. Dat doen we bij AI-design laten verbeteren, met de fixes erbij. Moet het ontwerp een echte website worden die op één set tokens draait, dan is AI-design omzetten naar een echte website de route. De andere gidsen over ontwerpen met AI staan in het overzicht van AI-design.

Veelgestelde vragen⁠

Ligt het aan de tool die ik gebruik?

Deels. Een tool die een vastgelegd designsysteem of een DESIGN.md meeneemt, wijkt minder af. Maar zonder vastgelegde waarden kiest elk model per scherm opnieuw, welke tool je ook gebruikt.

Helpt een langere prompt?

Zolang het gesprek kort is, een beetje. Bij elk nieuw scherm moet je dezelfde waarden opnieuw noemen, en dat gaat een keer mis. Daarom zet je ze in een bestand dat de tool bij elke opdracht leest.

Kan ik een ontwerp dat al uit elkaar loopt nog rechttrekken?

Ja. Zet alle gebruikte waarden op een rij, kies per rol één waarde en vervang de rest. Hoeveel werk dat is, hangt af van het aantal pagina’s en hoeveel varianten van dezelfde knop of kaart er zijn.

Is het erg als bezoekers het niet bewust zien?

Ze zien het wel, ze benoemen het alleen niet. Een site waarop knoppen per pagina verschillen, oogt minder verzorgd. En elke volgende wijziging kost meer tijd, omdat er geen vaste waarde is om op terug te vallen.

Verder lezen⁠

Design omzetten naar website: Je ontwerp uit Claude Design, Google Stitch, Figma Make of een screenshot wordt een website die snel laadt, gevonden wordt en die je zelf bijhoudt.
AI-website niet in Google: Je site uit Lovable, Bolt, v0 of Claude Code staat niet in Google. Vaak krijgt een zoekmachine een lege pagina. Wij zorgen dat elke pagina als HTML klaarstaat.
AI-design laten verbeteren: Een review van je AI-site met de fixes erbij: de AI-patronen eruit, consistentie, typografie, mobiel en toegankelijkheid. Vaste prijs na een blik op je site.
Claude Design naar website: De HTML-export of de overdracht aan Claude Code, en wat je daarna nog regelt: beheer, een formulier, SEO per pagina en hosting.
Stitch naar website: Exporteren naar Figma of naar HTML met Tailwind, DESIGN.md meenemen, en bouwen wat Stitch niet maakt: alles achter de schermen.
HTML-export online zetten: Statische hosting, je eigen domein, HTTPS, een contactformulier dat echt mailt en bezoekers meten met een cookiemelding.
AI-design in WordPress: Waarom HTML plakken niet werkt, en hoe je het ontwerp nabouwt: als eigen blokthema, met patronen in je huidige thema of in een pagebuilder.
AI-design in Framer of Webflow: Importeren via Figma of de browserextensie, nabouwen met componenten en variabelen, en terugkerende inhoud in CMS-collecties.
Teksten zelf aanpassen: Waarom elke tekstwijziging nu een prompt is, en drie manieren om teksten bewerkbaar te maken: eigen bestanden, een git-CMS of een headless CMS.
Kapot op mobiel: Vaste breedtes, koppen die van het scherm lopen, menu’s die alleen op hover werken en een pagina die zijwaarts schuift: zo test en repareer je het.
DESIGN.md maken: Eén bestand met je kleuren, typografie, afstanden, componenten en verboden patronen, dat je designtool en je codeer-agent bij elke opdracht lezen.
Design tokens voor AI: Kleuren, lettergroottes, afstanden en afrondingen als benoemde variabelen in je code, zodat een AI-tool kiest uit jouw set in plaats van zelf waarden te verzinnen.
Huisstijl in AI-design: Je logo als SVG, de kleurwaarden uit je huisstijlhandboek en de echte fontbestanden aanleveren, en daarna controleren waar de tool toch afweek.
AI verandert te veel: Je vraagt een andere knopkleur en de hele sectie verschuift. Waarom dat gebeurt, en hoe je met afbakening, versiebeheer en vaste componenten alleen verandert wat je bedoelt.
AI-designtools vergeleken: Wat Claude Design, Google Stitch en Figma Make kunnen, wat ze kosten, wat je eruit exporteert en waar je vastloopt als het een echte website moet worden.
Toegankelijk AI-design: Lichtgrijze tekst, verdwenen focusranden, lege alt-teksten en menu’s die niet met het toetsenbord werken: zo vind en repareer je ze in een AI-design.
Haperende scroll-animaties: Blokken die bij het scrollen invliegen, haperen op een telefoon of laten de pagina verspringen. Waarom, en hoe je ze met CSS en een paar regels JavaScript licht maakt.
AI-website herkennen: Acht keuzes die een AI-tool maakt als niemand iets anders vraagt, en per keuze waar hij vandaan komt.
Minder generiek maken: Zes ingrepen die een AI-website uit het gemiddelde halen, in de volgorde waarin ze het meeste doen.
Designprompt zonder AI-look: De acht onderdelen van een prompt die een AI-designtool keuzes geeft in plaats van ruimte voor zijn standaard.
AI-teksten herkennen: Typische Nederlandse AI-zinnen, waarom ze zo klinken en hoe je ze herschrijft, met voorbeelden voor en na.
Lettertype kiezen: Waarom AI standaard Inter kiest, hoe je zelf een combinatie kiest, en hoe je die met de juiste licentie snel en zelf gehost op je site zet.
AI-afbeeldingen: Waarom gegenereerde beelden je site goedkoop laten ogen, wat je in plaats daarvan doet, en wanneer je moet melden dat een beeld met AI is gemaakt.

Wij maken van je schermen weer één ontwerp⁠

De kennismaking is gratis. We reageren binnen één werkdag.

Plan een kennismaking Bel direct