TypeUI vs. Design Extractor
Der DESIGN.md Style Extractor von TypeUI ist eine kostenlose Chrome-Erweiterung, die die Styles der Seite in deinem Tab ausliest und TypeUIs eigene DESIGN.md-Vorlage füllt. Die Datei von Design Extractor folgt Googles DESIGN.md-Spezifikation und liefert jede auf der Seite ausgewählte Komponente als HTML- und CSS-Rezept, das dein Coding-Agent nachbauen kann. Jedes Rezept wird an der Live-Website geprüft oder mit Begründung markiert. Design Extractor funktioniert auch bei Websites, die nur Besuchern aus bestimmten Ländern antworten.
Du kennst das Format noch nicht? Lies zuerst, was eine DESIGN.md ist.
Geprüft am anhand von dem README und Quellcode der Erweiterung, dem Eintrag im Chrome Web Store und dem README von TypeUI. Angebote und Preise ändern sich, prüf also die Website des Anbieters, bevor du dich entscheidest.
Warum Design Extractor
Folgt Googles DESIGN.md-Spezifikation
Das YAML-Frontmatter nutzt nur die Eigenschaften, die die Spezifikation definiert, ohne eigene Top-Level-Schlüssel. Die kanonischen Abschnitte stehen in der Reihenfolge der Spezifikation, von Overview bis Do's and Don'ts. Komponenteneinträge im Frontmatter nutzen nur die acht Eigenschaften der Spezifikation, mit literalen Werten. Prüf jede Datei mit dem kostenlosen DESIGN.md-Validator.
Ein Rezept für jede ausgewählte Komponente der Seite
Header, Footer, Buttons, Eingabefelder, Karten und andere auf der Seite ausgewählte Komponenten kommen jeweils als Rezept: destilliertes HTML und CSS mit literalen Werten, im Abschnitt Components der DESIGN.md. Jedes Rezept listet seine Teile und die Hover- und Fokus-Zustände, die auf der Website zu sehen waren, damit dein Coding-Agent die Komponente nachbauen kann, statt sie zu erraten.
An der Live-Website verifiziert
Jedes Rezept wird einzeln gerendert und an der Live-Website geprüft: ein struktureller Abgleich der gerenderten Teile mit dem, was auf der Seite gemessen wurde, und ein Pixelvergleich mit einer frischen Aufnahme des echten Elements. Ein Rezept, das durchfällt, wird neu gebaut und erneut geprüft. Eines, das dann immer noch nicht besteht, wird mit Begründung markiert und nie als verifiziert ausgeliefert. Die Ergebnisseite zeigt, wie genau die Komponenten übereinstimmen und wie viele Farben und Textstile der Website abgedeckt sind: siehe Stripe in der Galerie.
Funktioniert bei regional eingeschränkten Websites
Manche Websites antworten nur Besuchern aus bestimmten Ländern. Scheitert eine Extraktion daran, bietet die Ergebnisseite eine Länderauswahl an, mit den Ländern, aus denen die Seite bei der Prüfung geladen hat, ganz oben, und führt dieselbe Extraktion über einen Browser im gewählten Land aus. Eine Extraktion über ein anderes Land kostet den Pro-Preis plus einen Credit-Aufschlag von 6 (insgesamt 16 Credits). Wenn die Extraktion fehlschlägt, erstatten wir deine Credits.
Im direkten Vergleich
| TypeUI | Design Extractor | |
|---|---|---|
| Spezifikationskonformität | Nicht angeboten | Folgt Googles DESIGN.md-Spezifikation: Frontmatter nur mit den Eigenschaften der Spezifikation und ohne eigene Top-Level-Schlüssel, die kanonischen Abschnitte in der Reihenfolge der Spezifikation und Komponenteneinträge beschränkt auf die acht Eigenschaften der Spezifikation, mit literalen Werten. |
| Komponenten-Rezepte | Komponenten erscheinen als Anzahl pro Typ (Buttons, Links, Eingabefelder, Karten, Navigation, Listen, Tabellen) unter allgemeinen Hinweisen zu Komponenten. | Jede auf der Seite ausgewählte Komponente, etwa Header, Footer, Buttons, Eingabefelder und Karten, kommt als Rezept: destilliertes HTML und CSS im Abschnitt Components, damit dein Coding-Agent sie nachbauen kann. |
| An der Live-Website verifiziert | Nicht angeboten | Ja. Jedes Rezept wird einzeln gerendert und an der Live-Website geprüft: ein struktureller Abgleich seiner Teile und ein Pixelvergleich. Eine Komponente, die nicht besteht, wird mit Begründung markiert und nie als verifiziert ausgeliefert. |
| Regional eingeschränkte Websites | Nicht angeboten | Ja. Sperrt eine Website Besucher aus manchen Ländern, bietet die gescheiterte Extraktion eine Länderauswahl an, mit den Ländern, aus denen die Seite lädt, ganz oben, und führt dieselbe Extraktion über einen Browser dort aus. Eine Extraktion über ein anderes Land kostet den Pro-Preis plus einen Credit-Aufschlag von 6 (insgesamt 16 Credits). |
| Was es ist | DESIGN.md Style Extractor, eine kostenlose Chrome-Erweiterung von Bergside SRL, dem Hersteller von TypeUI. Version 0.4.0, etwa 40.000 Nutzer im Chrome Web Store, Open Source unter der MIT-Lizenz. | Ein Generator: Gib auf der Website, über MCP oder in der Chrome-Erweiterung eine öffentliche URL an, und du bekommst die DESIGN.md dieser Website. |
| Wonach sich die Ausgabe richtet | TypeUIs eigene DESIGN.md-Vorlage: Mission, Brand, Style Foundations, Accessibility, Writing Tone, Rules und mehr, ohne YAML-Frontmatter. Die Erweiterung kann auch eine SKILL.md schreiben. | Googles DESIGN.md-Spezifikation: Tokens im YAML-Frontmatter und die kanonischen Abschnitte in der Reihenfolge der Spezifikation. |
| Wie die Website gelesen wird | Liest die berechneten Styles von bis zu 280 sichtbaren Elementen der Seite in deinem Tab, in deinem Browser, ohne Netzwerkanfragen. | Unsere Server öffnen die URL in einem Browser und analysieren die gerenderte Seite. Pro liest zusätzlich die wichtigsten Seiten der Website ein. |
| Lesbare Seiten | Die Seite, die in deinem Tab offen ist, auch Seiten, auf denen du angemeldet bist. | Nur öffentliche Seiten. Seiten hinter einem Login, auf localhost oder in einem privaten Netzwerk werden noch nicht unterstützt. |
| Wohin das Ergebnis geht | Wird im Popup angezeigt, wo du es kopierst oder herunterlädst. Ein Button „Quick install“ schreibt die SKILL.md in den Skills-Ordner von Claude Code, Codex oder Cursor in einem Projekt deiner Wahl. | Gespeichert unter „Meine Extraktionen“ in deinem Konto, wo du es bearbeitest, kopierst oder herunterlädst. Dein Agent kann es über MCP lesen. |
| Preis | Kostenlos. Kein Konto, keine Zahlung. | Prepaid-Credits, kein Abo. Credit-Pakete ab 5 $ für 50 Credits; eine Pro-Extraktion kostet 10 Credits. Die Galerie und die kostenlosen Tools kosten nichts. |
| Zugriff für Agenten | Die Erweiterung läuft über ihr Popup. Die separate CLI und der gehostete MCP-Server von TypeUI liefern die kuratierten Design-Skills und UI-Prompts von TypeUI. | Ein Remote-MCP-Server, dessen Extraktions-Tool jede URL annimmt, nutzbar aus Claude Code, claude.ai, ChatGPT, Codex, Cursor und anderen Clients. |
Was TypeUI bietet
- Eine kostenlose Open-Source-Chrome-Erweiterung (MIT) mit etwa 40.000 Nutzern im Chrome Web Store, ohne Konto oder Zahlung.
- Läuft komplett in deinem Browser auf der Seite in deinem Tab, auch auf Seiten, auf denen du angemeldet bist.
- Werte für Typografie, Farben, Abstände, Radius, Schatten und Bewegung in einer DESIGN.md im eigenen Format von TypeUI oder als SKILL.md.
- Kopier die Datei oder lade sie aus dem Popup herunter, oder installier die SKILL.md per Quick install in ein Projekt mit Claude Code, Codex oder Cursor.
- Über die Erweiterung hinaus bietet TypeUI kuratierte Design-Skills, UI-Prompts, eine Open-Source-CLI und einen gehosteten MCP-Server, dazu eine Pro-Version mit erweiterten Design-Skill-Dateien, UI-Prompts für Layouts und einer privaten Discord-Community.
Wo sie sich unterscheiden
Die Erweiterung von TypeUI fasst die Style-Werte zusammen, die sie auf einer Seite findet, und ergänzt allgemeine Hinweise aus ihrer Vorlage. Design Extractor rendert die Website, wählt ihre Komponenten aus, schreibt für jede ein Rezept und prüft anschließend jedes Rezept an der Live-Website, damit dein Agent weiß, welche Komponenten er so nachbauen kann, wie sie beschrieben sind, und welche mit Begründung markiert wurden. Sieh dir das am Beispiel Stripe in der Galerie an.
Du startest lieber aus dem Tab, in dem du gerade bist? Die Chrome-Erweiterung von Design Extractor schickt ihn durch dieselbe Extraktion, mit demselben Konto und denselben Credits. Dein Agent kann außerdem über den MCP-Server eine Extraktion starten und das Ergebnis lesen. Weitere fertige Dateien findest du in der Galerie.
So wechselst du von TypeUI
- Füg die URL der Website auf der Startseite von Design Extractor ein oder klick in der Chrome-Erweiterung auf „Extract this page“, und starte eine Pro-Extraktion.
- Speichere das Ergebnis als DESIGN.md im Stammverzeichnis deines Repos und ersetze damit die alte Datei. Dein Verweis in AGENTS.md oder CLAUDE.md funktioniert weiter.
- Wenn du Quick install genutzt hast, lösch den Designsystem-Skill-Ordner, den TypeUI angelegt hat, und behalte deinen DESIGN.md-Verweis.
- Damit dein Agent Extraktionen selbst startet, verbinde den MCP-Server.
Fazit
Wähl Design Extractor, wenn du eine DESIGN.md brauchst, die Googles Spezifikation folgt, mit einem Rezept für jede auf der Seite ausgewählte Komponente, jedes an der Live-Website geprüft oder mit Begründung markiert, gespeichert in deinem Konto. Design Extractor erreicht regional eingeschränkte Websites. Dein Agent kann Extraktionen über MCP starten. Die Erweiterung von TypeUI ist kostenlos und liest Seiten, auf denen du angemeldet bist, wie die Tabelle zeigt.
Weitere Vergleiche
getdesign.md vs. Design Extractor
Eine kuratierte Sammlung fertiger DESIGN.md-Dateien im Vergleich mit einer spezifikationskonformen DESIGN.md aus jeder URL, mit Komponenten-Rezepten, die an der Live-Website geprüft werden.
designmd.me vs. Design Extractor
Zwei Generatoren, die aus einer URL eine DESIGN.md machen, verglichen nach Spezifikationskonformität, Komponenten-Rezepten, Prüfung an der Live-Website und Preis.
Refero Styles vs. Design Extractor
Eine große kostenlose Bibliothek mit Website-Styles im Vergleich mit einer spezifikationskonformen DESIGN.md aus jeder URL, mit Komponenten-Rezepten, die an der Live-Website geprüft werden.
FAQ
TypeUI vs. Design Extractor: Fragen
Kurze Antworten zu TypeUI und Design Extractor, geprüft am 2026-10-20.
Ja. Am 2026-10-20 war die Erweiterung kostenlos und Open Source unter der MIT-Lizenz, ohne Konto oder Zahlung. Design Extractor ist nicht kostenlos: Extraktionen verbrauchen Prepaid-Credits, mit Credit-Paketen ab 5 $ für 50 Credits und 10 Credits für eine Pro-Extraktion. Die Galerie und die kostenlosen Tools kosten nichts.
Nein. Die Datei folgt dem quelloffenen DESIGN.md-Format von TypeUI, mit Abschnitten wie Mission, Brand, Style Foundations und Rules, und Version 0.4.0 schreibt kein YAML-Frontmatter, sie folgt also nicht Googles DESIGN.md-Spezifikation. Design Extractor folgt Googles Spezifikation, und der kostenlose DESIGN.md-Validator prüft jede Datei dagegen.
Eine DESIGN.md nach Googles Spezifikation, mit Tokens im Frontmatter und jeder auf der Seite ausgewählten Komponente, etwa Header, Footer, Buttons, Eingabefelder und Karten, als Rezept aus destilliertem HTML und CSS. Jedes Rezept wird mit einem strukturellen Abgleich und einem Pixelvergleich an der Live-Website geprüft, und eines, das nicht besteht, wird mit Begründung markiert.
Ja. Sie liest die Seite in deinem Tab in deinem Browser und funktioniert daher auf Seiten, auf denen du angemeldet bist. Design Extractor liest nur öffentliche Seiten: Seiten hinter einem Login, auf localhost oder in einem privaten Netzwerk werden noch nicht unterstützt.
Design Extractor kann die Extraktion aus einem anderen Land ausführen. Scheitert eine Extraktion an einer solchen Sperre, bietet die Ergebnisseite eine Länderauswahl an, mit den Ländern, aus denen die Seite lädt, ganz oben, und führt dieselbe Extraktion über einen Browser dort aus. Eine Extraktion über ein anderes Land kostet den Pro-Preis plus einen Credit-Aufschlag von 6 (insgesamt 16 Credits). Wenn die Extraktion fehlschlägt, erstatten wir deine Credits.
Ja. Beide erzeugen eine DESIGN.md, die in deinem Repo liegt, dein Agent-Setup bleibt also gleich. Lass die Website durch Design Extractor laufen, auf der Website oder mit der Chrome-Erweiterung, und ersetze die Datei. Wenn du Quick install genutzt hast, lösch den Designsystem-Skill-Ordner, den TypeUI angelegt hat, und behalte deinen DESIGN.md-Verweis.
Hol dir eine DESIGN.md für die Website, die du brauchst
Füg eine beliebige öffentliche URL ein. Pro liest die wichtigsten Seiten der Website ein und liefert eine spezifikationskonforme DESIGN.md mit Komponenten-Rezepten, die an der Live-Website geprüft sind.