DESIGN.md-Generator
Erstelle eine DESIGN.md aus einer Live-Website. Gib ihre URL ein, und der Generator baut die Datei, die dein Coding-Agent liest: Tokens für Farben, Typografie, Abstände und Komponenten, dazu die Regeln für ihren Einsatz. Neu beim Format? Lies, was eine DESIGN.md ist.
So erstellt der Generator eine DESIGN.md
Website-URL eingeben
Jede öffentliche Seite funktioniert: eine Marketing-Website, eine Doku-Website oder die Landingpage einer Web-App. Registriere dich zuerst; jede Extraktion verbraucht Credits aus einem vorausbezahlten Paket.
Der Generator liest die Website
Er öffnet die Website in einem echten Browser und misst die Farben, Schriften, Abstände, Eckenradien und Komponenten, die sie tatsächlich verwendet. Eine Pro-Extraktion erfasst rund fünf Seiten der Website. Jede Extraktion dauert mindestens eine Minute.
Du bekommst eine DESIGN.md
Die Tokens landen im YAML-Frontmatter, die Regeln für ihren Einsatz im Markdown: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components und Do's and Don'ts. Kopiere sie, lade sie herunter oder bearbeite sie unter „Meine Extraktionen“.
Beispielausgabe: die DESIGN.md von Anthropic
Ein Auszug aus der Datei, die der Generator aus anthropic.com erstellt hat, gekürzt auf einige Tokens pro Gruppe und den Anfang des Abschnitts Overview. Die vollständige Datei umfasst außerdem Layout, Elevation, Formen, Komponenten sowie die Do's and Don'ts.
---
version: alpha
name: Anthropic
colors:
primary: "#141413"
on-primary: "#FAF9F5"
ink: "#141413"
body-muted: "#5E5D59"
surface: "#FAF9F5"
surface-alt: "#F0EEE6"
hairline: "#D1CFC5"
typography:
hero-display:
fontFamily: Anthropic Serif
fontSize: 68.3429px
fontWeight: 400
lineHeight: 1.1
body:
fontFamily: Anthropic Serif
fontSize: 15px
fontWeight: 400
lineHeight: 1.4
rounded:
sm: 8px
md: 12px
lg: 16px
spacing:
base: 4px
section-padding-y: 48px
---
## Overview
Anthropic's site reads like a well-set research journal printed on warm
paper. The canvas is **Parchment** (`surface`, #FAF9F5), text is a
near-black **Ink** (`ink`, #141413), and there is no saturated brand hue
at all.Vollständige DESIGN.md von Anthropic ansehenWeitere DESIGN.md-Beispiele ansehen
FAQ
Fragen zum DESIGN.md-Generator
Was der Generator erstellt, was er kostet und wie du die Datei mit deinem Coding-Agenten nutzt.
Eine DESIGN.md-Datei nach Googles DESIGN.md-Spezifikation. Das YAML-Frontmatter enthält die Tokens der Website für Farben, Typografie, Abstände, Eckenradien und Komponenten. Der Markdown-Teil erklärt Abschnitt für Abschnitt, wie man sie einsetzt, damit ein Coding-Agent neue UI bauen kann, die zur Website passt.
Nicht mit dem Generator: Er erstellt die Datei aus einer öffentlichen Live-Website. Wenn du von Grund auf neu gestaltest, schreib die DESIGN.md selbst nach der Spezifikation und prüfe Struktur und Tokens mit dem kostenlosen DESIGN.md-Validator.
Jede öffentliche Website, die über HTTP oder HTTPS erreichbar ist, auch statische Websites, Single-Page-Apps und serverseitig gerenderte Seiten. Seiten hinter einem Login, auf localhost oder in einem privaten Netzwerk werden nicht unterstützt, und manche Websites blockieren automatisierte Browser.
Du registrierst dich und kaufst ein vorausbezahltes Credit-Paket, ab 5 $ für 50 Credits. Es gibt kein Abo, und Credits verfallen nie. Jede Extraktion verbraucht Credits; die aktuellen Kosten pro Extraktion stehen auf der Preisseite. Schlägt eine Extraktion auf unserer Seite fehl, werden die Credits erstattet.
Speichere sie als DESIGN.md im Stammverzeichnis deines Projekts oder in deinem Doku-Ordner und erwähne sie in deinem Prompt. Claude Code, Cursor, GitHub Copilot, Windsurf und andere Agenten mit Dateizugriff nutzen sie als Stilreferenz. Agenten können den Generator auch selbst über den MCP-Server von Design Extractor ausführen.
Ja. Jede DESIGN.md, die du erstellst, wird unter „Meine Extraktionen“ gespeichert. Dort kannst du sie bearbeiten, erneut herunterladen oder die Website später neu extrahieren. Sie ist reiner Text, also kannst du sie auch in deinem eigenen Editor bearbeiten.