Je eigen huisstijl gebruiken in AI-designtools

Een AI-designtool is goed in iets maken dat op je huisstijl lijkt. Daar zit het probleem: lijkt op. Het logo is net anders getekend, het groen is een ander groen en de letter is een vervanger die de tool wel had. Dat los je op met de bronbestanden, niet met een betere beschrijving. Hieronder wat je per onderdeel aanlevert, hoe je het in Claude Design, Stitch en Figma Make krijgt en hoe je daarna controleert wat de tool ervan maakte.

Herken je dit?

Een tool die geen bron heeft, maakt een kopie

Geef je een screenshot of een PDF van je huisstijl, dan schat het model wat het ziet. Kleuren leest het af uit pixels, en die zijn door compressie en kleurprofielen al net verschoven. Het logo tekent het na als nieuwe vormen, of zet het als tekst in een letter die erop lijkt. Een lettertype dat de tool niet heeft, vervangt hij zonder iets te zeggen door het dichtstbijzijnde font dat hij wel kent.

Bij ons is dat een vaste regel. Het woordmerk van Naltex is een SVG-bestand dat niemand opnieuw tekent, mens of AI, en dat staat letterlijk in de ontwerpregels die we elke sessie meegeven. Elk ander bestand laadt dat ene SVG.

Zo lever je je huisstijl aan

Het logo: als SVG, ongewijzigd

Vraag het SVG op bij wie je logo ontwierp, of haal het uit je huisstijlpakket. Controleer of het een echte vector is en niet een plaatje in een SVG-jasje.

grep -c "<image" logo.svg
grep -c "<text" logo.svg

Staat er een <text> in, laat de tekst dan omzetten naar contouren. Anders ziet iedereen zonder dat font een ander logo. Geef het bestand daarna mee met een harde regel: “Gebruik logo.svg ongewijzigd. Teken het logo nooit na, zet het nooit als tekst, verander geen kleur of verhouding.” Heb je een versie voor donkere achtergronden, lever die als apart bestand.

Kleuren: de waarden, met hun rol

Haal de schermwaarden uit je huisstijlhandboek. Pantone en CMYK zijn voor drukwerk; omrekenen met een pipet of een online tool geeft een benadering. Geef elke kleur een rol, want een kleur zonder rol komt overal terecht.

Huisstijlkleuren, exact overnemen:
- #0E3B43 donkerblauwgroen: alle tekst, de footer
- #F2B705 geel: alleen knoppen en markeringen, nooit tekst op wit
- #FFFFFF wit: achtergrond
- #EEF1F1 lichtgrijs: panelen en kaarten
Maak geen lichtere of donkerdere varianten zonder het te vragen.

Die regel bij het geel staat er niet voor niets. Geel op wit haalt een contrast van 1,8:1, ver onder de 4,5:1 die nodig is voor leesbare tekst. Het donkerblauwgroen op het geel haalt 6,7:1. Dat soort keuzes maak je één keer, en dan schrijf je ze op.

Het lettertype: een bestand, of een naam die de tool kent

Een lettertype uit Google Fonts herkent bijna elke tool op naam. Een eigen of gekocht lettertype niet. Kijk eerst of je licentie gebruik op het web toestaat: een licentie voor drukwerk dekt dat niet altijd. Mag het, zet het font dan zelf op je server als woff2-bestand. Hoe je licenties leest en een font kleiner maakt, staat in een lettertype kiezen dat niet naar AI ruikt.

@font-face {
  font-family: "Huisletter";
  src: url("/fonts/huisletter-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

h1, h2, h3 {
  font-family: "Huisletter", Arial, sans-serif;
}

Waar je het kwijt kunt per tool

In Claude Design zet je een designsysteem op vanuit een GitHub-repository, designbestanden, losse uploads of je lokale code. Elk nieuw project neemt dat systeem automatisch over. In Google Stitch importeer je designregels via een DESIGN.md. In Figma Make geef je stijl mee vanuit een bibliotheek van je team, maar dat kan alleen op een betaald plan. Hoe je de regels zelf opschrijft, staat in een DESIGN.md maken voor je AI-tools.

Zo controleer je de export

Na het genereren kijk je of de tool zich eraan hield. Doe dit bij de eerste export, niet pas aan het eind.

Kleuren. Zoek alle kleurcodes in de export en filter je eigen kleuren eruit. Wat overblijft, is een afwijking.

grep -rohiE '#[0-9a-f]{6}' export/ | tr 'a-f' 'A-F' | sort -u | grep -vE '#(0E3B43|F2B705|FFFFFF|EEF1F1)'

Het lettertype. Open de pagina in Chrome, klik met rechts op een kop en kies Inspecteren. Onderaan het tabblad Computed staat onder Rendered Fonts welk font de browser echt gebruikt. Staat daar Arial terwijl je Huisletter verwacht, dan laadt je fontbestand niet.

Het logo. Vergelijk het bestand in de export met je origineel. Is de controlesom verschillend, dan heeft de tool het logo aangepast, ook als je het verschil niet ziet.

shasum logo.svg export/assets/logo.svg

Veelgemaakte fouten

Wanneer je hulp nodig hebt

Heb je geen SVG van je logo, dan is een schone vectorversie de eerste stap. Voor Jadrimex zetten we het logo om naar vector bij de bouw van hun nieuwe website. Is het logo zelf aan vernieuwing toe, kijk dan bij logo laten maken.

Wil je dat je huisstijl er tot op de hexcode in staat, dan regelen we dat bij AI-design omzetten naar een echte website: logo, kleuren en fonts uit de bron, het font zelf gehost. Is de site er al en loopt hij uit de pas met je huisstijl, dan is AI-design laten verbeteren de route. Waarom AI-tools zonder bron per scherm afwijken, lees je in waarom is mijn AI-design inconsistent, en alle gidsen staan in het overzicht van AI-design.