Design MD Generator
Echte Design-Token aus einer öffentlichen URL extrahieren und DESIGN.md für KI-Coding-Agenten erstellen
Über Design MD Generator
Design MD Generator nimmt eine öffentliche URL an, extrahiert Farben, Schriften, Schriftgrößenverhältnisse, Abstände, Eckenradien, Schatten und Komponentenstatus aus echtem CSS und erstellt eine DESIGN.md mit neun Abschnitten zu Themen, Palettenrollen, Typografie, Layout, Komponenten, Hierarchie, Radien, Bewegung und Designrichtlinien. Die Datei kann in ein Code-Repository gelegt und aus CLAUDE.md oder .cursor/rules referenziert werden, damit erzeugte Oberflächen zum Designsystem der Quellwebsite passen. Über MCP können Editoren außerdem die Bibliothek durchsuchen, Dateien lesen oder den Generator ausführen.
Am besten geeignet
Beste Einsatzszenarien
Eine Designsystemdatei für eine bestehende Website erstellen
Einen KI-Coding-Agenten das Design der Quellwebsite wiederverwenden lassen
Den Generator über MCP aus einem Editor ausführen
Vorhandene DESIGN.md-Designsysteme durchsuchen
Funktionen
Echtes CSS-Extrahieren
Erfasst Farben, Schriftstapel, Schriftgrößenverhältnisse, Abstände, Eckenradien, Schatten und CSS-Custom-Properties aus echten Styles.
Evidenzbasierte Analyse
Jede Hexfarbe, jeder Schriftname und jeder Eckenradius stammt aus dem echten CSS der Website; der Extraktor erfindet keine Token.
DESIGN.md mit neun Abschnitten
Ein KI-Designanalyst erstellt Themen, Palettenrollen, Typografie, Layout, Komponenten, Hierarchie, Radien, Bewegung und Richtlinien.
MCP-Editor-Verbindung
Über MCP die Bibliothek durchsuchen, DESIGN.md lesen oder den Generator in einem Editor ausführen.
Vorteile
- Token stammen aus echtem CSS und vermeiden Vermutungen
- Ausgabe kann in ein Code-Repository gelegt und von Agenten referenziert werden
- Kostenlose Generierung innerhalb des Tageslimits
- MCP-Unterstützung für bequeme Bedienung im Editor
Nachteile
- Tägliches Generierungslimit pro Besucher
Preispläne
Kostenlos
- DESIGN.md generieren
- Tägliches Limit pro Besucher
- Keine Kreditkarte erforderlich
* Die Preisangaben dienen nur zur Orientierung. Bitte beachten Sie die aktuellen Informationen auf der offiziellen Website von Design MD Generator.