Een DESIGN.md maken voor je AI-tools

Een DESIGN.md is een tekstbestand met de ontwerpregels van je site: kleuren, lettertypes, afstanden, afrondingen, hoe componenten eruitzien en wat nooit mag. Google Stitch gebruikt het als eigen formaat; in Claude Code en Cursor verwijs je ernaar vanuit hun instructiebestanden. Schrijf exacte waarden op, en bij elke regel waarom hij bestaat.

Damian Madronal Munoz, oprichter

Bijgewerkt op 30 oktober 20266 min leestijd

Een AI-tool die moet raden hoe jouw site eruitziet, raadt elke keer anders. Een DESIGN.md haalt dat raden weg: de regels staan in één bestand, en de tool leest het bij elke opdracht. We werken er zelf ook mee. De huisstijl van naltex.nl staat in een DESIGN.md die we bovenaan elke sessie in Claude Design of Claude Code zetten. Hieronder wat erin hoort, een voorbeeld om aan te passen, en hoe je elke tool het laat lezen.

Herken je dit?

Je plakt bij elke prompt dezelfde alinea over je kleuren en je lettertype.
Een collega werkt in een andere tool en krijgt een andere stijl.
De AI houdt zich aan je kleuren, maar zet er verlopen, schaduwen of pilvormige knoppen bij die niemand vroeg.
Een maand later weet niemand meer waarom de koppen 40 pixels zijn.

Regels werken pas als de tool ze elke keer leest

Een prompt geldt voor één gesprek. Een bestand in je project geldt voor elk gesprek, omdat de tool het bij de start inlaadt. Dat is het hele idee achter een DESIGN.md.

Het tweede idee is de reden bij de regel. Een model past een regel beter toe als het weet waarvoor hij dient. “Accentkleur #B93A0C” is een waarde. “Accentkleur alleen voor de primaire knop, zodat er per scherm één ding opvalt” is een regel waarmee het model ook een situatie aankan die je niet voorzag.

Google publiceerde het formaat in april 2026 als open specificatie. Het is een concept in alpha, onder een Apache 2.0-licentie. Een DESIGN.md volgens die specificatie heeft twee delen: bovenaan de exacte waarden in YAML, daaronder in gewone tekst waarom ze bestaan en hoe je ze toepast. Je hoeft die vorm niet te volgen om er iets aan te hebben. Stitch leest hem wel zo, en er hoort een controleprogramma bij.

Wat erin hoort

De specificatie noemt acht onderdelen, in deze volgorde. Ze zijn allemaal optioneel, maar zonder het laatste heb je het halve werk gedaan.

Overview. Eén alinea over voor wie de site is en hoe hij moet voelen, in woorden die iets uitsluiten. “Zakelijk, rustig, één accentkleur” sluit meer uit dan “modern”.
Colors. Elke kleur met een exacte waarde en een rol: tekst, achtergrond, vlak, actie, fout.
Typography. Families, gewichten en maten per niveau, met de regelafstand.
Layout. De afstandsschaal, de maximale breedte van tekst en pagina, de marges.
Elevation & Depth. Schaduwen of niet, en zo ja welke.
Shapes. De afronding per soort element: knop, kaart, invoerveld.
Components. Hoe een knop, een invoerveld en een kaart eruitzien, ook bij hover, focus en uitgeschakeld.
Do’s and Don’ts. Wat nooit mag.

Dat laatste onderdeel ontbreekt het vaakst, en het doet het meeste. Een model zonder verboden valt terug op wat het het vaakst zag: verlopen, glaseffecten, een rij kaarten met elk een icoon. In onze eigen DESIGN.md staat een lijst van wat nooit voorkomt: geen verlopen, geen pilvormige knoppen, geen pijl in een knop, geen kaart die optilt bij hover, geen displayletter tussen 48 en 80 pixels. Zulke regels kan een model niet raden. Je moet ze opschrijven.

Een voorbeeldbestand

Dit is een uitgangspunt voor een zakelijke site met één accentkleur. Vervang de waarden door die van je eigen huisstijl.

---
name: Voorbeeldmerk
description: Zakelijke site voor een technisch bedrijf. Rustig, één accentkleur.
colors:
  ink: "#1B2430"
  muted: "#5B6573"
  paper: "#FFFFFF"
  accent: "#B93A0C"
typography:
  heading:
    fontFamily: "Archivo, system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.1
  body:
    fontFamily: "Source Serif 4, Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 24px
  lg: 48px
  xl: 96px
---

## Overview
Voor inkopers en technici die snel willen zien wat we maken.
Rustig en zakelijk. De inhoud draagt de pagina, niet de effecten.

## Colors
- ink voor alle tekst en koppen.
- muted alleen voor bijschriften en datums, nooit voor lopende tekst.
- accent alleen voor de primaire knop en voor links. Eén primaire knop per scherm.

## Typography
- Koppen in heading, nooit kleiner dan 24px.
- Lopende tekst in body, regels maximaal 70 tekens breed.

## Components
- Knop: accent als vlak, witte tekst, rounded.sm, padding 12px 20px.
  Focus: een rand van 3px in ink, 3px los van de knop.
- Kaart: wit, rand van 1px in muted op 20% dekking, rounded.md, geen schaduw.

## Do's and Don'ts
- Geen verlopen, geen schaduwen, geen glaseffect.
- Geen pilvormige knoppen: afronding maximaal rounded.md.
- Geen pijl of icoon in een knoptekst.
- Geen rij van drie kaarten met elk een icoon.
- Geen verzonnen cijfers, logo's of reviews.

Bovenaan de waarden in YAML, daaronder per onderdeel de regels en de reden.

Het contrast in dit voorbeeld klopt: muted op wit is 5,9:1 en wit op accent 5,7:1, allebei boven de 4,5:1 die WCAG voor gewone tekst vraagt. De kopnamen zijn die van de specificatie. Houd ze Engels als je het controleprogramma gebruikt; de inhoud mag Nederlands zijn.

Dat controleprogramma is een CLI van Google. Het kijkt of de structuur klopt, of elke verwijzing naar een token bestaat en of de kleurparen genoeg contrast hebben.

npx @google/design.md lint DESIGN.md

Controleert structuur, verwijzingen en contrast, en stopt met een foutcode als er iets mis is.

Zo laat je elke tool het lezen

Google Stitch

DESIGN.md is het eigen formaat van Stitch. Je exporteert er de designregels van een project mee, en importeert ze in het volgende, zodat dat dezelfde regels krijgt.

Claude Code

Claude Code leest bij elke sessie de CLAUDE.md in je project. Daarin verwijs je met een @ naar je DESIGN.md, en dan laadt Claude Code dat bestand mee.

# CLAUDE.md
Volg bij alle werk aan de interface de regels in @DESIGN.md.
Wijkt een opdracht ervan af, vraag het dan eerst.

Een verwijzing in CLAUDE.md die DESIGN.md bij elke sessie meelaadt.

Heeft je project geen CLAUDE.md maar wel een AGENTS.md, dan leest Claude Code die. Dezelfde verwijzing werkt daar ook.

Cursor

Cursor leest een AGENTS.md in de root van je project, en regels in de map .cursor/rules. Die regels zijn .mdc-bestanden met een kopje in YAML; een gewoon .md-bestand in die map slaat Cursor over. Noem je @DESIGN.md in een regel, dan leest de agent het bestand op het moment dat hij het nodig heeft. Wil je dat de belangrijkste verboden altijd meegaan, zet ze dan ook in de regel zelf.

---
description: Ontwerpregels voor alle interfacecode
alwaysApply: true
---
Gebruik alleen de kleuren, lettertypes en afstanden uit @DESIGN.md.
Geen verlopen, geen schaduwen, geen pilvormige knoppen.

Een regel in .cursor/rules/design.mdc die bij elke opdracht meegaat.

Claude Design

De handleiding van Claude Design noemt DESIGN.md niet als formaat. Claude Design bouwt een designsysteem uit een GitHub-repository, designbestanden, losse uploads of je lokale code, en elk nieuw project neemt dat systeem over. Zet je DESIGN.md in die repository of upload hem mee. Wij plakken de onze daarnaast bovenaan de sessie, zodat de verboden patronen ook in het gesprek zelf staan.

Veelgemaakte fouten

Bijvoeglijke naamwoorden in plaats van waarden. “Strak en modern” vertelt een model niets wat het niet al dacht. “Afronding 4px, geen schaduw” wel.
Alleen opschrijven wat mag. Zonder verboden patronen vult het model de gaten met zijn eigen gewoontes.
Een bestand dat te lang is. In dertig pagina’s raken regels elkaar kwijt. Onze eigen DESIGN.md telt ruim tweehonderd regels, en dat is ongeveer wat een mens nog in één keer doorleest.
De code aanpassen en DESIGN.md niet. Je verandert de accentkleur in de CSS. Bij de volgende opdracht zet de tool de oude terug, want die staat nog in het bestand.

Wanneer je hulp nodig hebt

Een DESIGN.md is zo goed als de keuzes erin. Heb je nog geen vaste kleuren en lettertypes, begin dan bij je eigen huisstijl gebruiken in AI-designtools. Dezelfde waarden horen daarna als tokens in je code: design tokens zodat AI consistent blijft.

Staat er al een ontwerp dat uit elkaar loopt, kijk dan bij AI-design laten verbeteren: daar trekken we de afwijkingen recht. Moet het een echte website worden, dan gaan dezelfde regels bij AI-design omzetten naar een echte website mee de code in. Alle gidsen over dit onderwerp staan in het overzicht van AI-design.

Veelgestelde vragen⁠

Moet het bestand DESIGN.md heten?

Voor Stitch wel, dat is het formaat. Claude Code en Cursor lezen het omdat je er in hun eigen instructiebestand naar verwijst; daar mag de naam anders zijn. Met één vaste naam in de root van je project weet wel iedereen waar hij moet kijken.

Schrijf ik het in het Nederlands of in het Engels?

De uitleg mag in het Nederlands. Houd de Engelse kopnamen van de specificatie aan als je het controleprogramma van Google gebruikt. Waarden zoals hexcodes en pixels zijn in elke taal hetzelfde.

Wat is het verschil met design tokens?

Tokens zijn de waarden zelf, met een naam, in je code. Een DESIGN.md bevat die waarden ook, plus de regels en de reden erachter, zodat een AI-tool weet wanneer hij welke waarde gebruikt en wat nooit mag.

Is het formaat al af?

Nee. Google noemt het een conceptspecificatie in alpha, en velden kunnen nog veranderen. Je waarden en regels blijven bruikbaar als het formaat verschuift; hooguit pas je de opmaak aan.

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.
Inconsistent AI-design: Elke pagina een ander grijs, elke knop een andere hoek: waarom een AI-tool per scherm nieuwe waarden kiest, en wat je ertegen doet.
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 zetten je ontwerpregels op papier⁠

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

Plan een kennismaking Bel direct