DESIGN.md-Beispiele: kostenlose Vorlagen für Websites und Apps.

Der schnellste Weg zu einer guten DESIGN.md ist, mit einer vollständigen zu starten. Hier sind 24 kostenlose Beispiele, 12 für Websites und Dashboards und 12 für Mobile Apps. Jedes hat Farben für Hell- und Dunkelmodus, Schriften, eine Schriftgrößen-Skala, Eckenradius, Abstände und Regeln für ihre Anwendung, und jedes ist eine einfache Markdown-Datei, die dein Agent über ihre URL lesen kann.

Aktualisiert am 6. November 2026 · 5 Min. Lesezeit

Wie eine vollständige DESIGN.md aussieht

Eine DESIGN.md besteht aus YAML-Frontmatter mit den Design-Tokens, gefolgt von Abschnitten, die erklären, wie man sie verwendet. Hier ist eine gekürzte Fassung des Swiss-Beispiels (auf Englisch):

---
version: alpha
name: 'Swiss'
colors:
  primary: '#D70015'
  on-primary: '#FFFFFF'
  surface: '#FFFFFF'
  on-surface: '#0A0A0A'
typography:
  headline-lg:
    fontFamily: 'Archivo'
    fontSize: 56px
    fontWeight: 700
rounded:
  md: 0px
---

## Overview

Swiss follows the International Typographic Style: big grotesque type,
a strict grid, square corners and lots of white.

## Do's and Don'ts

- Do make the headline the biggest thing on the page.
- Don't round corners or add shadows.

Die vollständigen Dateien enthalten außerdem Sekundär- und Tertiärfarben, eine Schriftgrößen-Skala vom Display bis zum Kleingedruckten, Abstände, Komponenten und Layout. Zum Format selbst siehe DESIGN.md für Codex.

DESIGN.md-Beispiele für Websites und Dashboards

Paper, Editorial: Ruhig, redaktionell und gut lesbar, wie eine gut gesetzte Buchseite. DESIGN.md
Swiss, minimalistisches Raster: Schwarz, Weiß und ein Signalrot auf einem strengen Raster. DESIGN.md
Ledger, dunkles SaaS-Dashboard: Eine dichte, dunkle Oberfläche für Zahlen, mit einem Terminal-Bernstein als Akzent. DESIGN.md
Mono, Developer Docs: Schlichte weiße Seiten, Geist-Schrift und ein Kobaltblau, gebaut für Doku und Dev-Tools. DESIGN.md
Atelier, Luxusmode: Elfenbein, Tinte und eine edle Serifenschrift, wie das Lookbook eines Modehauses. DESIGN.md
Noir, dunkles Portfolio: Schwarz, Knochenweiß und eine riesige Serifenschrift. Das Werk ist die einzige Farbe. DESIGN.md
Harbor, Enterprise-B2B: Marineblau, Weißraum und verlässliche Struktur für seriöse B2B-Produkte. DESIGN.md
Nordic, ruhiges SaaS: Gedämpfte Blautöne, sanfte Grautöne und stille Zuversicht für Produktivitäts-Tools. DESIGN.md
Clinic, Healthcare: Ruhiges Petrol, klare Schrift und einfache Sprache für Gesundheits-Websites. DESIGN.md
Terra, erdiges Öko-Design: Moos, Leinen und Ton für Marken, die nah am Land arbeiten. DESIGN.md
Chalk, freundliches Bildungsdesign: Hell, rund und ermutigend, wie ein gutes Klassenzimmer. DESIGN.md
Pop, Neo-Brutalismus: Dicke schwarze Konturen, harte Schatten und Zitronengelb. Absichtlich laut. DESIGN.md

DESIGN.md-Beispiele für Mobile Apps

App-Beispiele ergänzen die Regeln, die Smartphone-Screens brauchen: Touch-Ziele, eine Tab-Leiste unten, Bildschirmränder und wie Zahlen gesetzt werden.

Stride, Fitness-App: Große kondensierte Zahlen und ein energiegeladenes Orange für Bewegungs-Apps. DESIGN.md
Pantry, Lieferdienst-App: Warm, freundlich und appetitlich, für Essens- und Bestell-Apps. DESIGN.md
Calm, Wellness-App: Sanftes Salbeigrün, eine milde Serife und Raum zum Atmen. DESIGN.md
Wallet, Finanz-App: Klare Kontostände, ruhiges Grün und Zahlen, denen du vertrauen kannst. DESIGN.md
Focus, To-do-App: Eine weiße Seite, ein Blau und nichts sonst zwischen dir und der Aufgabe. DESIGN.md
Chatter, Messenger-App: Runde Sprechblasen, ein freundliches Türkis und Unterhaltungen im Mittelpunkt. DESIGN.md
Voyage, Reise-App: Randlose Fotos, Ozeanblau und eine Serife, die sich wie eine Postkarte anfühlt. DESIGN.md
Boutique, Mode-Shopping-App: Randlose Fotos, eine Bodoni-Serife und Schwarz auf Weiß, wie ein Schaufenster. DESIGN.md
Quest, gamifizierte Lern-App: Serien, XP und dicke Buttons, die Üben wie ein Spiel anfühlen lassen. DESIGN.md
Care, Healthcare-App: Eine klare Aufgabe pro Screen, für Patienten, die es einfach erledigen wollen. DESIGN.md
Vinyl, Musik- und Podcast-App: Cover-Art zuerst, ein pinker Play-Button und ein dunkler Raum zum Zuhören. DESIGN.md
Hearth, Smart-Home-App: Warmes Bernsteinlicht auf einem dunklen, ruhigen Startscreen. DESIGN.md

Jeder Name verlinkt auf eine Live-Vorschau in Hell- und Dunkelmodus; jeder DESIGN.md-Link öffnet die reine Datei.

So nutzt du ein Beispiel

Kopiere den Prompt auf der Seite des Systems in Codex oder Claude Code. Er weist den Agenten an, die Datei als DESIGN.md in deinem Projekt zu speichern und sie bei jedem Screen zu befolgen.
Oder lade die Datei herunter und lege sie selbst ins Stammverzeichnis deines Projekts. Codex liest AGENTS.md automatisch, DESIGN.md aber nicht, ergänze also in AGENTS.md eine Zeile, die darauf verweist.
Ändere, was du brauchst. Tausche die Primärfarbe gegen deine Markenfarbe oder bitte deinen Agenten, die Schriften anzupassen, und behalte den Rest.

DESIGN.md ist ein Nur-Text-Format, dieselbe Datei funktioniert also in anderen Tools, die sie lesen, etwa Google Stitch.

Häufige Fragen

Sind diese DESIGN.md-Vorlagen kostenlos?

Ja. Jedes Beispiel darfst du kostenlos kopieren und in deinen eigenen Projekten verwenden.

Gibt es ein DESIGN.md-Beispiel für eine Mobile App?

Ja. Zwölf der Beispiele sind für Mobile Apps gebaut, von Fitness und Essensbestellung bis zu Banking, Messaging und Smart Home.

Kann ich auch eine eigene DESIGN.md erstellen?

Ja. Mit dem DESIGN.md-Generator erstellst du eine aus deinen eigenen Farben, Schriften, Ecken und Abständen.