DESIGN.md aus jeder
Website erstellen

Eine DESIGN.md ist ein Designsystem-Dokument als reine Textdatei, das KI-Coding-Agenten lesen, um eine einheitliche UI zu erzeugen. Sie ist das Design-Gegenstück zur AGENTS.md: Menschen und Agenten können sie lesen, bearbeiten und durchsetzen. Technisch hat sie zwei Ebenen. Das YAML-Frontmatter enthält maschinenlesbare Design-Tokens wie Farben, Typografie und Abstände. Der Markdown-Teil erklärt die Designentscheidungen.

Eine DESIGN.md enthält meist acht kanonische Abschnitte in dieser Reihenfolge: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components und Do's and Don'ts. Das YAML-Frontmatter legt die exakten Token-Werte fest. Der Markdown-Teil erklärt, wie und warum sie angewendet werden. Abschnitte können wegfallen, wenn sie nicht relevant sind, und zusätzliche fachspezifische Abschnitte können hinzukommen.

Füge die URL einer beliebigen öffentlichen Website in Design Extractor ein und klick auf Extrahieren. Registriere dich, kauf ein Credit-Paket, und jede Extraktion verbraucht ein paar Credits. Das Ergebnis ist eine DESIGN.md, die du kopieren kannst. Leg die DESIGN.md in dein Repo, und dein KI-Agent liest sie als Stilreferenz für Claude, Cursor, Copilot oder Stitch.

Jedes KI-Coding-Tool, das Markdown-Dateien aus deinem Projektverzeichnis liest, kann DESIGN.md nutzen. Dazu gehören Claude Code, Cursor, GitHub Copilot und andere Coding-Assistenten mit Dateizugriff. Leg die DESIGN.md ins Projekt-Root oder in einen Docs-Ordner und verweise in deinem Prompt darauf.

Jede öffentlich zugängliche Website. Design Extractor analysiert die Live-Seite so, wie ein Browser sie rendert. Das funktioniert mit statischen Websites, SPAs und serverseitig gerenderten Seiten. Die Website muss über eine normale HTTP/HTTPS-URL erreichbar sein.

Manche Websites, etwa Behördenportale und lokale Shops, öffnen sich nur für Besucher aus bestimmten Ländern. Schlägt eine Extraktion fehl, weil die Website den Besuch abgelehnt hat, sagt die Ergebnisseite das und schlägt Länder vor, in denen die Website lädt. Wähl eins davon, dann lädt ein Browser in diesem Land die Seite, und sie wird wie gewohnt extrahiert. Eine Extraktion aus einem anderen Land kostet den Preis der Stufe plus einen kleinen Aufschlag, der vor dem Start angezeigt wird, und eine Extraktion, die trotzdem fehlschlägt, wird erstattet. Die gleiche Option gibt es in der Chrome-Erweiterung und über den MCP-Server.

Ja. Die Erweiterung von Design Extractor für Chrome nutzt die Sitzung, mit der du dich auf der Website angemeldet hast: kein separates Login. Ihr Popup zeigt dein Credit-Guthaben, und ein Klick schickt die Seite in deinem aktuellen Tab an dieselbe Extraktion wie das Formular auf der Startseite, in Lite oder Pro, für dieselben Credits. Die fertige DESIGN.md öffnet sich auf der Website und erscheint unter „Meine Extraktionen“. In dieser ersten Version muss die Seite öffentlich sein: Der Server erfasst sie, daher werden Seiten hinter einem Login, auf localhost oder in einem privaten Netzwerk noch nicht unterstützt. Bearbeiten und Herunterladen passieren weiterhin auf der Website.

Ja. Design Extractor ist auch ein MCP-Server. In claude.ai, Claude Desktop oder ChatGPT fügst du die Server-URL als Connector hinzu und meldest dich mit deinem Konto an; in Claude Code, Codex, Cursor oder dem Agent SDK verbindest du ihn mit einem Befehl (die Doku-Seite hat den Block für jeden Client, mit einem API-Schlüssel von deiner Kontoseite, wo der Client einen braucht) und bittest deinen Agenten, eine Website zu extrahieren. Der Agent startet die Extraktion, schaut nach etwa einer Minute wieder nach und erhält den DESIGN.md-Text zum Speichern in deinem Repo, für dieselben Credits wie auf der Website. Claude Code und Codex können ihn auch als Plugin installieren, das einen Skill hinzufügt, der eine DESIGN.md auf eine Codebase anwendet.