Design Extractor Chrome-Erweiterung
Die Chrome-Erweiterung von Design Extractor macht aus der Website in deinem aktuellen Tab eine DESIGN.md: eine Designsystem-Datei mit den Farben, der Typografie, den Abständen, Formen und Komponentenregeln der Website, geschrieben für Coding-Agenten wie Claude Code, Cursor und Copilot. Ein Klick in der Symbolleiste, keine URL zum Einfügen.
Die Installation ist kostenlos. Jede Extraktion verbraucht Credits aus deinem vorausbezahlten Guthaben, zum selben Preis wie auf der Website.
Was sie kann
Eine DESIGN.md aus deinem aktuellen Tab
Extrahiert die Seite in deinem Tab
Ein Klick schickt die Adresse deines aktuellen Tabs durch dieselbe Extraktion wie das Formular auf der Startseite. Pro erfasst zusätzlich die wichtigsten Seiten der Website, sodass das Ergebnis die Website abbildet, nicht nur eine einzelne Ansicht.
Schreibt ein vollständiges Designsystem
YAML-Tokens für Farben, Typografie, Abstände und Formen, dazu die acht Abschnitte des DESIGN.md-Formats: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components und Do's and Don'ts.
Ein Rezept für jede Komponente
Die Komponenten, die sie von der Seite auswählt, etwa Header, Buttons, Eingabefelder und Karten, kommen jeweils als destilliertes HTML und CSS, gegen die Live-Website geprüft oder mit Begründung markiert.
Gleiches Konto, gleiche Credits
Die Erweiterung nutzt deine Sitzung auf design-extractor.com. Kein zweites Login, und das Popup zeigt dein Credit-Guthaben.
So funktioniert es
In drei Schritten vom Tab zur DESIGN.md
Zu Chrome hinzufügen und anheften
Installiere sie aus dem Chrome Web Store und hefte sie über das Puzzle-Symbol an. Sie fragt nach Zugriff auf design-extractor.com und den aktiven Tab, sonst nichts. Melde dich einmal auf der Website an; das Popup nutzt diese Sitzung.
Öffne eine öffentliche Seite und klicke auf „Extract this page“
Wähle im Popup eine Stufe und starte die Extraktion. Der Fortschritt erscheint im Popup, während sie läuft, und du kannst weitersurfen.
Öffne die DESIGN.md
„Open result“ bringt dich zur DESIGN.md auf der Website. Sie wird auch unter „Meine Extraktionen“ gespeichert, wo du sie kopierst, herunterlädst oder bearbeitest, bevor du sie in dein Repo legst.
Installation, Anmeldung, Credits und aktuelle Grenzen findest du in der Einrichtungsanleitung der Erweiterung. Lieber eine URL einfügen? Dieselbe Extraktion läuft auch auf der Startseite.
Im Vergleich
Was sie gegenüber dem DESIGN.md Style Extractor von TypeUI zusätzlich bietet
Der DESIGN.md Style Extractor von TypeUI ist eine kostenlose Open-Source-Erweiterung, die die eigene Vorlage von TypeUI mit den Styles der Seite in deinem Tab füllt. Die Erweiterung von Design Extractor bietet zusätzlich:
Eine DESIGN.md nach Googles Spezifikation
Tokens im YAML-Frontmatter und die kanonischen Abschnitte in der Reihenfolge der Spezifikation. Prüfe jede Datei mit dem kostenlosen DESIGN.md-Validator.
Ein Rezept für jede ausgewählte Komponente
Destilliertes HTML und CSS für Header, Buttons, Eingabefelder, Karten und mehr, jeweils mit einem Strukturabgleich und einem Pixelvergleich gegen die Live-Website geprüft oder mit Begründung markiert.
Regional gesperrte Websites
Wenn eine Website Besucher aus einigen Ländern sperrt, kann die Extraktion über einen Browser in einem anderen Land laufen. Eine Länder-Extraktion kostet den Pro-Preis plus einen Credit-Aufschlag von 6 (insgesamt 16 Credits).
Dasselbe Konto und dieselben Credits wie auf der Website
Jede Extraktion wird unter „Meine Extraktionen“ gespeichert, wo du sie bearbeitest, kopierst oder herunterlädst, und dein Agent kann sie über MCP lesen.
Geprüft am anhand von Version 0.4.0 der TypeUI-Erweiterung, ihrer README und ihres Quellcodes und ihres Eintrags im Chrome Web Store.
| Aspekt | Design Extractor | TypeUI DESIGN.md Style Extractor |
|---|---|---|
| Wie sie die Website liest | Unsere Server öffnen die Adresse der Seite in einem Browser und analysieren die gerenderte Seite. Pro erfasst zusätzlich die wichtigsten Seiten der Website. | Liest die berechneten Styles von bis zu 280 sichtbaren Elementen der in deinem Tab geöffneten Seite, innerhalb deines Browsers. |
| Woran sich die Ausgabe hält | Googles DESIGN.md-Spezifikation: Tokens im YAML-Frontmatter und die kanonischen Abschnitte in der Reihenfolge der Spezifikation. | Die eigene DESIGN.md-Vorlage von TypeUI (Mission, Brand, Style Foundations, Rules und mehr), ohne YAML-Frontmatter, oder eine SKILL.md. |
| Komponenten | Ein Rezept aus destilliertem HTML und CSS für jede Komponente, die sie von der Seite auswählt, mit einem Strukturabgleich und einem Pixelvergleich gegen die Live-Website geprüft oder mit Begründung markiert. | Eine Anzahl pro Komponententyp unter allgemeinen Hinweisen zu Komponenten. Die Ausgabe wird nicht mit der gerenderten Seite verglichen. |
| Wohin das Ergebnis geht | Gespeichert unter „Meine Extraktionen“ auf der Website, wo du es bearbeiten, kopieren oder herunterladen kannst. | Wird im Popup angezeigt, wo du es kopierst oder als Datei herunterlädst. |
| Welche Seiten sie lesen kann | Nur öffentliche Seiten. Seiten hinter einem Login, auf localhost oder in einem privaten Netzwerk werden noch nicht unterstützt. | Die in deinem Tab geöffnete Seite, auch Seiten, auf denen du angemeldet bist, da sie diese Seite direkt liest. |
| Preis | Die Installation ist kostenlos. Extraktionen verbrauchen vorausbezahlte Credits. | Kostenlos und Open Source (MIT). |
Wähle die Erweiterung von Design Extractor, wenn du eine DESIGN.md nach Googles Spezifikation brauchst, mit einem gegen die Live-Website geprüften Rezept für jede Komponente, gespeichert in deinem Konto. Den vollständigen Vergleich findest du unter TypeUI vs. Design Extractor.
FAQ
Fragen zur Chrome-Erweiterung
Kurze Antworten zur Installation der Erweiterung, zu den Daten, die sie sendet, und zu den Kosten.
Die Installation ist kostenlos. Jede Extraktion verbraucht Credits aus deinem vorausbezahlten Guthaben, zum selben Preis wie auf der Website. Pakete gibt es ab 5 $ für 50 Credits, es gibt kein Abo, und Credits verfallen nie. Schlägt eine Extraktion auf unserer Seite fehl, werden die Credits erstattet.
Nur die Adresse des aktuellen Tabs und die gewählte Stufe, wenn du auf „Extract this page“ klickst. Sie liest nie den Inhalt der Seite, läuft nicht im Hintergrund auf den Seiten, die du besuchst, und enthält keine Analyse-Tools.
Noch nicht. Unsere Server erfassen die Seite über ihre Adresse, daher muss die Seite öffentlich sein. Seiten hinter einem Login, auf localhost oder in einem privaten Netzwerk werden nicht unterstützt. Die Erweiterung gibt es nur für Chrome.
Nein. Das Popup nutzt die Sitzung, mit der du dich auf design-extractor.com angemeldet hast. Bist du abgemeldet, zeigt es einen „Sign in“-Button, der die Website öffnet. Wenn du dich im Popup abmeldest, wirst du auch auf der Website abgemeldet.
Jeder Agent, der Dateien aus deinem Repo liest. Speichere die DESIGN.md neben deinem Code und verweise Claude Code, Cursor, GitHub Copilot, Codex, Windsurf oder Google Stitch darauf als Stilreferenz für neue UI.
Erweiterungen wie der DESIGN.md Style Extractor von TypeUI lesen berechnete Styles in deinem Browser und füllen ihre eigene Vorlage mit den Werten. Design Extractor schreibt eine DESIGN.md nach Googles Spezifikation, mit einem Rezept aus HTML und CSS für jede Komponente, die es von der Seite auswählt, gegen die Live-Website geprüft oder mit Begründung markiert, und speichert sie in deinem Konto.
Hol dir eine DESIGN.md aus deinem aktuellen Tab
Die Installation ist kostenlos. Jede Extraktion verbraucht Credits aus deinem vorausbezahlten Guthaben, zum selben Preis wie auf der Website.