Überblick

---

Einordnung (was ist was?)

• AGENTS.md → Regeln/Instruktionen fürs Bauen (Code-Standards, Tooling, Workflows)
• DESIGN.md → Regeln/Instruktionen fürs Aussehen & Verhalten (UI-Look, Komponenten, Layout)

Das Repo: awesome-design-md

GitHub: github.com/VoltAgent/awesome-design-md Website: getdesign.md

Eine kuratierte Sammlung von 66 vorgefertigten DESIGN.md-Dateien, extrahiert von echten Websites bekannter Marken. Die Dateien sind sofort einsetzbar — kein eigenes Design-System schreiben nötig.

Verfügbare Design-Systeme (66 Stück)

Kategorie	Marken
AI & LLM Platforms	Claude, Cohere, ElevenLabs, Minimax, Mistral AI, Ollama, OpenCode AI, Replicate, RunwayML, Together AI, VoltAgent, xAI
Developer Tools & IDEs	Cursor, Expo, Lovable, Raycast, Superhuman, Vercel, Warp
Backend, Database & DevOps	ClickHouse, Composio, HashiCorp, MongoDB, PostHog, Sanity, Sentry, Supabase
Productivity & SaaS	Cal.com, Intercom, Linear, Mintlify, Notion, Resend, Zapier
Design & Creative Tools	Airtable, Clay, Figma, Framer, Miro, Webflow
Fintech & Crypto	Binance, Coinbase, Kraken, Revolut, Stripe, Wise
E-commerce & Retail	Airbnb, Meta, Nike, Shopify
Media & Consumer Tech	Apple, IBM, NVIDIA, Pinterest, PlayStation, SpaceX, Spotify, The Verge, Uber, WIRED
Automotive	BMW, Bugatti, Ferrari, Lamborghini, Renault, Tesla

Installation

Option 1: CLI (empfohlen)

Mit dem offiziellen CLI-Tool eine spezifische DESIGN.md installieren:

npx getdesign@latest add apple

Das lädt die Apple-inspirierte DESIGN.md direkt in dein Projekt-Root.

Weitere Beispiele:

npx getdesign@latest add stripe
npx getdesign@latest add tesla
npx getdesign@latest add vercel
npx getdesign@latest add spotify

Option 2: Manuell vom GitHub Repo

1. Gehe zu github.com/VoltAgent/awesome-design-md
2. Navigiere in den design-md/ Ordner
3. Wähle die gewünschte Marke (z.B. apple/)
4. Kopiere den Inhalt der DESIGN.md in dein Projekt-Root-Ordner

Option 3: Website

1. Gehe zu getdesign.md
2. Browse durch die 66 verfügbaren Designs
3. Klicke auf das gewünschte Design
4. Kopiere die DESIGN.md oder nutze den CLI-Befehl

Struktur einer DESIGN.md

Jede DESIGN.md folgt einem standardisierten Format mit 9 Sektionen:

Sektion	Was sie definiert
1. Visual Theme & Atmosphere	Gesamtästhetik, Stimmung, visuelle Sprache
2. Color Palette & Roles	Farben mit Hex-Codes und semantischen Rollen
3. Typography Rules	Schriftarten, Größen, Gewichte, Hierarchie
4. Component Stylings	Buttons, Cards, Inputs, Navigation, etc.
5. Layout Principles	Grid, Spacing, Alignment, Container
6. Depth & Elevation	Shadows, Z-Index, Layering
7. Design Do's and Don'ts	Klare Regeln, was erlaubt ist und was nicht
8. Responsive Behavior	Breakpoints, Mobile/Tablet/Desktop-Anpassungen
9. Agent Prompt Guide	Schnelle Farbreferenz + fertige Prompts für LLMs

Nutzung mit KI-Agenten

Mit Claude (Claude Code / Cowork)

1. DESIGN.md im Projekt-Root platzieren
2. Claude Code starten oder Cowork-Session öffnen
3. Prompt-Beispiel:

Lies die DESIGN.md in meinem Projekt-Root.
Baue mir eine Landing Page mit Hero-Section, Feature-Grid
und Footer — exakt im Apple-Stil gemäß der DESIGN.md.
Verwende Next.js + Tailwind CSS.

Claude liest die DESIGN.md automatisch als Kontext und generiert UI, die dem definierten Design-System entspricht.

Mit ChatGPT / GPT-4

1. DESIGN.md-Inhalt kopieren
2. Als System-Prompt oder am Anfang der Konversation einfügen
3. Prompt-Beispiel:

Hier ist mein Design-System (DESIGN.md):
[DESIGN.md Inhalt einfügen]

Erstelle eine Pricing-Page im Stil dieses Design-Systems.
HTML + Tailwind CSS. Responsive. Dark Mode.

Mit Cursor / Windsurf / andere AI-IDEs

1. DESIGN.md im Projekt-Root ablegen
2. Die IDE erkennt die Datei automatisch als Kontext
3. Beim Coden referenziert der KI-Agent das Design-System
4. Prompt-Beispiel in Cursor:

@DESIGN.md Baue einen Dashboard-Header mit Navigation
und User-Avatar. Verwende die definierten Farben und Typography.

Mit Google Stitch

DESIGN.md wurde ursprünglich von Google Stitch eingeführt. Stitch liest die Datei nativ und generiert UI-Komponenten, die exakt dem Design-System entsprechen.

Mit Lovable / Bolt / v0

Den Inhalt der DESIGN.md als Kontext in den Prompt einfügen. Diese Tools verstehen Markdown-basierte Design-Spezifikationen und generieren entsprechende UI.

Warum DESIGN.md statt Figma?

Aspekt	Figma	DESIGN.md
LLM-Kompatibilität	Braucht Plugins/Export	Nativ lesbar
Versionierung	Proprietär	Git-tracked
Zusammenarbeit	Figma-Account nötig	Jeder Texteditor
AI-Agent-Ready	Indirekt (über API)	Direkt im Kontext
Kosten	Figma-Lizenz	Kostenlos (MIT)
Format	Binär/Proprietär	Plain Markdown

Praxis-Beispiel: Apple-Website nachbauen

Schritt 1: Design installieren

mkdir mein-projekt && cd mein-projekt
npx getdesign@latest add apple

Schritt 2: Projekt aufsetzen (z.B. Next.js)

npx create-next-app@latest . --typescript --tailwind

Schritt 3: KI-Agent nutzen

Lies die DESIGN.md. Baue mir eine Produktseite im Apple-Stil:
- Hero mit großem Produktbild und Headline
- Scroll-basierte Feature-Sections
- Specs-Vergleichstabelle
- Call-to-Action Footer
Nutze die exakten Farben, Typography und Component-Styles
aus der DESIGN.md. Next.js App Router + Tailwind CSS.

Schritt 4: Iterieren

Der KI-Agent hält sich an das Design-System. Jede weitere Komponente, die du baust, ist automatisch konsistent — weil die DESIGN.md als Single Source of Truth dient.

Tipps für die Praxis

1. Eine DESIGN.md pro Projekt — nicht mischen. Wähle ein Design-System und bleibe dabei.
2. Kombiniere mit AGENTS.md — AGENTS.md für Code-Konventionen, DESIGN.md für visuelles Design. Zusammen = vollständiger Kontext für den KI-Agenten.
3. Anpassen nach Bedarf — Die DESIGN.md ist ein Startpunkt. Passe Farben, Fonts und Spacing an deine Marke an.
4. Preview nutzen — Viele Einträge haben preview.html und preview-dark.html Dateien, die Farbpalette, Typography und Komponenten visuell zeigen.
5. Agent Prompt Guide lesen — Sektion 9 jeder DESIGN.md enthält fertige Prompts und eine Quick Color Reference, die du direkt copy-pasten kannst.

Links

• GitHub Repo: github.com/VoltAgent/awesome-design-md
• Website: getdesign.md
• Lizenz: MIT (kostenlos, auch kommerziell nutzbar)