Deze week Algemeen

DESIGN.md: zo zet je een design system op voor AI-tools

• 10 min leestijd • Sepp
Kort antwoord

Een design system opzetten voor AI-tools doe je het snelst met een DESIGN.md-bestand. Eén tekstbestand met je kleuren als hex-codes, je fonts en drie tot vijf stijlregels. Je plakt de inhoud in elke AI-prompt die iets visueels maakt. Resultaat: geen willekeurig AI-design meer, maar consistente output die er elke keer hetzelfde uitziet.

Het probleem: AI-tools missen context van jouw merk

Je laat een AI een banner of UI maken en krijgt drie keer iets anders terug. Andere kleur, ander gevoel. Niet jouw stijl. Dat is geen bug. AI-tools werken op basis van wat je ze geeft. Zonder merkinformatie gokken ze op iets generieks.

Bij mijn klanten zie ik dit elke week. Vorige week kwam een klant in de hospitality bij me met drie social-posts uit een AI-tool: drie keer dezelfde prompt, drie keer een ander oranje. Hij dacht eerst dat het aan zijn ogen lag, tot ik de hex-codes naast elkaar zette en hij het verschil zwart-op-wit zag.

De fout zit niet in de tool, hij zit in het gebrek aan context. Bij Midjourney, Claude, ChatGPT en Figma AI werkt het allemaal zo. Geen merkinformatie? Dan gokken ze. DESIGN.md vult die context in één keer in en houdt hem voor elke volgende prompt vast.

Wat DESIGN.md is en waarom het werkt

DESIGN.md is een tekstbestand met je merkinfo in een formaat dat AI direct begrijpt. Geen formeel document. Geen technische specificatie. Kleuren als hex-codes, fontnamen, een paar stijlsteekwoorden, korte componentbeschrijvingen. Eén tot twee pagina's max.

Ik gebruik dit zelf voor elk klantproject sinds een half jaar. Het scheelt me makkelijk een uur per ontwerpronde aan corrigeren en herhalen. Werkt in elke AI-tool die tekst als input accepteert: ChatGPT, Claude, Midjourney, Figma AI, Cursor, Lovable.

Het bestand zelf hoef je nergens te uploaden. Je plakt de inhoud aan het begin van je prompt, daarna pas komt je opdracht. Resultaat: consistente output die er elke keer hetzelfde uitziet.

De vier basissecties die je opschrijft

Vier secties zijn genoeg. Kleuren als hex-codes (niet "donkerblauw" maar #0A1F44). Fonts met gewicht ("Inter Regular 400"). Drie tot vijf stijlsteekwoorden. Korte componentbeschrijvingen voor je terugkerende UI-elementen.

Concrete waarden zijn het belangrijkst. Niet "warm oranje" maar #F5821F. Niet "modern blauw" maar #0A1F44. AI vertaalt jouw woorden naar pixels, en die vertaling werkt alleen voorspelbaar bij exacte waarden.

Mijn eigen fout in het begin: te veel willen vastleggen. Ik schreef pagina's vol met uitzonderingen, edge cases en gedragsregels per component. De AI raakte juist meer in de war en mengde regels door elkaar. Sinds ik me beperk tot een halve A4 met alleen de essentials, werkt het tien keer beter.

Voor componenten geef je één regel per type: "Primaire knop: oranje achtergrond, witte tekst, 4px border-radius, geen schaduw." Dat is genoeg. Te veel detail laat de AI dwalen.

Werkend voorbeeld: DESIGN.md voor een bouwbedrijf

Dit is de DESIGN.md die ik gebruik voor een klant in de bouw. Concreet, in dezelfde structuur die ik altijd hanteer. Gebruik 'm als template: vervang de waarden door die van jou en je hebt binnen tien minuten een werkend bestand.

De fictieve klant heet "Bouwbedrijf Janssen". De structuur hieronder werkt 1-op-1 voor elke andere branche, alleen de waarden verschillen.

# DESIGN.md voor Bouwbedrijf Janssen

## Kleuren
- Primair: #1B3A57 (donkerblauw, voor headers en knoppen)
- Accent: #E8A33D (warm geel-oranje, voor CTA's en hover-states)
- Tekst: #1A1A1A op #FFFFFF
- Achtergrond licht: #F5F2ED (gebroken wit, geen plat wit)
- Lijnen en borders: #D4CFC4

## Typografie
- Headings: Montserrat SemiBold 600
- Body: Inter Regular 400
- Captions: Inter Light 300, 14px
- Knoppen: Montserrat Medium 500, all caps

## Stijl in steekwoorden
Solide, ambachtelijk, betrouwbaar, ruime witregels, geen schaduwen, foto's altijd warm-getint.

## Componenten
- Primaire knop: #1B3A57 achtergrond, witte tekst, 4px border-radius, hover #E8A33D
- Secundaire knop: transparant, 1px border #1B3A57, blauwe tekst
- Kaart: #FFFFFF achtergrond, 8px border-radius, 1px border #D4CFC4, geen schaduw
- Foto's: altijd 16:9, warme tint via 5% sepia-overlay

## Tone of voice
Direct, geen jargon, jij/je-vorm, korte zinnen. Vermijd: "innovatief", "passie", "kwaliteit". Gebruik: "we bouwen", "we leveren op tijd".

Plak deze inhoud aan het begin van je prompt en je AI-tool weet direct wat hij wel en niet moet doen. Een UI-generator levert nu een knop op met #1B3A57, niet met een willekeurig blauw.

Hoe je DESIGN.md in de praktijk gebruikt

In de praktijk: open je AI-tool, plak de DESIGN.md, daarna pas je opdracht. Werkt voor afbeeldingen, UI, code en zelfs teksten als je een tone of voice-sectie toevoegt. Maak twee versies: een korte voor snelle prompts, een complete voor diepere opdrachten.

Voorbeeld voor een UI-generator: "[DESIGN.md inhoud] Maak nu een contactformulier met deze stijl. Velden: naam, e-mail, bericht." Je krijgt een formulier in jouw kleuren, met jouw font, met de juiste border-radius. Geen willekeur meer.

Voor afbeeldingsgeneratoren werk je met een ingedikte versie. Niet de hele DESIGN.md, alleen de relevante regels: primaire en accent-kleur, drie stijl-steekwoorden, eventuele foto-stijl. Vier regels meegeven werkt vaak beter dan twintig.

Voor AI-codeertools zoals Cursor of Claude Code sla je het bestand op in je projectmap. Tools die met repositorybestanden werken pikken het automatisch op als context. Wat ik bij klanten doe: bouw DESIGN.md in de eerste week van een Project en sla hem op naast de README. Geen overleg meer over kleuren, geen "welk geel was het ook alweer?". Het bestand is de bron van waarheid.

Conclusie

Voor mij is DESIGN.md een van die kleine dingen die elk klantproject sneller maken. Vijf minuten je kleuren en fonts opschrijven, en AI-tools houden op met gokken. Mijn advies: wacht niet tot je een 'echt' design system hebt opgezet. Begin met een tekstbestand op je bureaublad en breid het pas uit als je merkt dat je het nodig hebt. Bij de meeste klanten met wie ik werk komt dat moment nooit, en dat is prima.

Veelgestelde vragen

Eén tot twee pagina's, gevuld met concrete waarden. Niet meer. Lange bestanden laten AI-tools dwalen, korte bestanden missen context. Twee pagina's is de sweet spot.

Elke tool die langere tekst-context accepteert: ChatGPT, Claude, Midjourney, Figma AI, Cursor, Lovable. Je plakt de inhoud in de prompt, het bestand zelf hoef je nergens te uploaden. Bekijk ook hoe Figma Weave AI-workflows opzet voor een werkend voorbeeld.

Open je website. Klik met rechtermuisknop op een element en kies "Inspecteren" (in Chrome of Firefox). Daar zie je de hex-codes en fonts staan. Drie minuten werk en je hebt de basis voor je DESIGN.md. Voor kleurkeuzes en toegankelijkheid raadpleeg je MDN over kleurcontrast.

Ja. Voeg een sectie "Tone of voice" toe met drie regels: aanspreekvorm (jij of u), zinslengte, woorden die je vermijdt en woorden die je gebruikt. Plak die mee in tekstgenererende tools en je krijgt content die bij je merk past, niet bij ChatGPT's standaardstem.

Alleen als je huisstijl verandert. Nieuwe kleur in je logo, ander font, andere stijlrichting. Een simpele tekstbewerking van vijf minuten. Houd het in versiebeheer of een tools-map zodat je altijd de laatste versie pakt.

Pas wanneer je merkt dat je het bestand wilt uitbreiden met details over hover-states, focus-rings, error-meldingen, spacing-tokens en gedragsregels. Dan ben je toe aan een echt design system in Figma. Voor de meeste ondernemers gebeurt dat nooit.

Meer over Algemeen