Hey, ich bin Philipp 👋
Wenn du einer KI nur sagst „mach mir eine schöne Webseite“, kommt fast immer derselbe Einheitslook heraus. Viel besser wird es, wenn du ihr ein fertiges Designsystem mitgibst: eine DESIGN.md-Datei mit den Farben, Schriften, Abständen und Layouts einer Marke — plus klaren Regeln, was die KI tun soll und was nicht. Solche Dateien gibt es kostenlos in einem Katalog mit über 2.700 Designsystemen. Hier ist der komplette Weg.
Was steckt in einer DESIGN.md?
Eine DESIGN.md ist eine ganz normale Textdatei. Sie beschreibt das visuelle System einer Marke so, dass eine KI es lesen und direkt umsetzen kann. Am Beispiel Apple sind das diese Abschnitte:
Die Abschnitte einer DESIGN.md
- Überblick — die Designidee in wenigen Sätzen
- Farben — jeder Farbwert mit seiner Rolle, z. B. Hauptfarbe, Text, Hintergrund
- Schriften — welche Schrift wofür, in welcher Größe und Stärke
- Layout, Abstände, Formen und Schatten
- Komponenten — wie Buttons, Karten und Navigation aussehen
- Do's and Don'ts — was die KI tun soll und was sie lassen soll
- Verhalten auf dem Handy und Hinweise zum Weiterbauen
1Such dir im Katalog eine Marke aus
Öffne den Katalog und stöbere nach einem Stil, der zu deinem Projekt passt. Jede Markenseite zeigt dir, wie die echte Webseite aussieht, eine Vorschau, was eine KI mit diesen Vorgaben bauen würde, und die wichtigsten Farbwerte.
Durchstöbern und Kopieren ist kostenlos, ohne Anmeldung.
2Die DESIGN.md kopieren
Scroll auf der Markenseite zum Bereich „Use this design“. Unter „Format for“ wählst du, wofür du die Datei brauchst — für den normalen KI-Chat reicht „Raw“, für Claude Code oder Cursor gibt es eigene Formate. Dann klickst du auf „Copy“ oder lädst die Datei mit „Download“ herunter.
3Der KI die Datei mitgeben
Der Katalog empfiehlt, die kopierte DESIGN.md ganz oben in deinen Prompt einzufügen. Das funktioniert in Claude, ChatGPT und jedem anderen KI-Chat. Darunter schreibst du, was du bauen möchtest — zum Beispiel so:
[Hier die kopierte DESIGN.md einfügen] Baue mir mit diesem Designsystem eine Startseite für [dein Angebot, z. B. meine Physiotherapie-Praxis]. Halte dich genau an die Farben, Schriften, Abstände und Regeln aus der DESIGN.md.
Die KI baut dir dann die Oberfläche in genau diesem Stil. Gefällt dir etwas nicht, sag es ihr einfach im selben Chat — die Vorgaben aus der Datei bleiben dabei erhalten.
4Profi-Weg: Den Katalog direkt mit Claude Code verbinden
Wenn du mit Claude Code arbeitest, musst du gar nichts mehr kopieren. Über eine MCP-Verbindung sucht sich Claude die passende DESIGN.md selbst aus dem Katalog. Dafür holst du dir zuerst auf designmd.co/mcp einen kostenlosen Schlüssel — ohne Karte und ohne Anmeldung. Dann trägst du ihn in diesen Befehl ein und startest ihn im Terminal:
claude mcp add designmd --transport http https://www.designmd.co/api/mcp --header "Authorization: Bearer YOUR_FREE_KEY"
Use DesignMD to plan a landing page for a B2B security product. Start with plan_build.
Dort gibt es die Einrichtung auch für Cursor, Windsurf, VS Code, Zed und OpenAI Codex.
Wichtig zu wissen
Kosten (Stand September 2026, laut designmd.co)
- Katalog durchstöbern, DESIGN.md kopieren und herunterladen: kostenlos
- Kostenloser MCP-Schlüssel: bis 150 Anfragen pro Tag, 3 selbst erzeugte DESIGN.md-Dateien pro Tag
- Pro ab 19 $ im Monat: mehr Anfragen, fertige Bausteine zum Einbauen und unbegrenztes Erzeugen — für den Weg in diesem Guide brauchst du es nicht
Die Dateien sind keine offiziellen Vorgaben der Marken. Der Katalog nennt sie selbst Interpretationen der jeweiligen Designsprache. Nutze sie als Stil-Vorlage für dein eigenes Projekt — Logos, Markennamen oder lizenzpflichtige Schriften großer Marken übernimmst du damit nicht automatisch mit.
Eine Zahl aus dem Video präzisiere ich hier: Ich habe von über 2.000 Webseiten gesprochen — der Katalog nennt inzwischen über 2.700 Designsysteme.