DESIGN.md: design systems voor AI coding tools

Definitie

DESIGN.md is een open markdown-formaat (geintroduceerd door Google Stitch) dat design-specificaties vastlegt in plain text. AI coding tools lezen het bestand en bouwen consistent UI zonder dat je elke keer je stijlkeuzes hoeft te herhalen. designmd.ai is het community-platform met 100+ downloadbare design systems.

Context

Bij UI-ontwikkeling met AI-agents (Claude Code, Cursor, Copilot) is het probleem dat elke sessie opnieuw moet weten welke kleuren, fonts en spacing je gebruikt. Een DESIGN.md in de project root lost dit op: het wordt automatisch meegelezen als context, zoals een README.md.

Kernpunten

Inhoud van een DESIGN.md

• Kleuren — hex-codes, primair/secundair/accent, light/dark mode
• Typografie — font families, groottes, gewichten, regelhoogtes
• Spacing — base unit, schaal (4px, 8px, 16px, etc.)
• Componenten — herbruikbare UI-patronen (buttons, cards, modals)
• Iconen — library-referentie, stijlvoorkeur

CLI tool (designmd)

npm install -g designmd                           # installatie
designmd search "dark saas" --sort trending       # zoek design systems
designmd download user/slug -o ./DESIGN.md        # download (API key nodig)
designmd upload ./DESIGN.md --name "Mijn Kit"     # publiceer eigen systeem
designmd tags                                     # 50 beschikbare tags

API key nodig voor downloads: designmd.ai/api-keys (gratis).

Workflow

1. Download een DESIGN.md of schrijf er zelf een
2. Plaats in de project root
3. Instrueer AI: “Gebruik het @DESIGN.md bestand bij het stylen”

Voordeel t.o.v. MCP-integratie

Een MCP-server voor design tokens kost 1-2K tokens per gesprek (altijd geladen). DESIGN.md kost alleen tokens wanneer het daadwerkelijk gelezen wordt.

Toepassing voor eigen projecten

Relevant voor projecten met bestaande design tokens:

• Atelier: Outfit font, 680px kolom, CSS custom properties
• jimvandenbreemen.nl: eigen design systeem

Een DESIGN.md kan bestaande design tokens bundelen in een formaat dat elke AI-tool begrijpt.

Verbanden

• Zie ook: wiki-atelier-design-system — Atelier-specifieke design tokens

• Zie ook: wiki-jimvandenbreemen-design-systeem — website design systeem

• Gerelateerd project: Atelier, jimvandenbreemen.nl

• Zie ook: wiki-eindredacteur-plugin — semantically_similar_to

Bronnen

• Platform: designmd.ai
• CLI npm: designmd (v0.2.1, maintainer: shafius)
• GitHub repo: designkit-md/designkit.md

Sessie-herkomst

• raw-sessie-2026-04-24-ai-skill-ecosysteem-qmd-designmd