Refero Styles vs. Design Extractor
Design Extractor erstellt eine DESIGN.md aus jeder öffentlichen URL, die du angibst. Die Datei 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.
Refero Styles ist eine große, kostenlose Bibliothek mit Website-Styles, jeweils mit Farben, Typografie, Abständen und Komponenten in mehreren Formaten. Du kennst das Format noch nicht? Lies, was eine DESIGN.md ist.
Geprüft am anhand von styles.refero.design, einer der Style-Seiten und der Style-Sitemap. 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
| Refero Styles | 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 | Jede Komponente wird in Fließtext beschrieben, mit ihrer Rolle und ihren Maßen, ohne HTML. | 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 | Eine kostenlose Bibliothek mit Website-Styles, in der Beta, von Refero, dem UI-Referenzprodukt auf refero.design. | Ein Generator: Du gibst eine öffentliche URL an und bekommst die DESIGN.md dieser Website. |
| Jede Website auf Abruf | Nicht angeboten | Ja. Füg eine beliebige öffentliche URL ein und die Extraktion startet sofort. |
| Abdeckung | 1.342 Style-Seiten, wie in der Style-Sitemap aufgeführt. | Jede öffentliche Website, dazu eine Galerie vorab extrahierter Marken. |
| Formate pro Style | DESIGN.md (kompakt und erweitert), Tailwind v4, CSS-Variablen und Design-Tokens. | Eine DESIGN.md, mit Tokens im Frontmatter und Komponenten-Rezepten in HTML und CSS. |
| Preis | Kostenlos zum Durchstöbern und Kopieren. | Prepaid-Credits, kein Abo. Credit-Pakete ab 5 $ für 50 Credits; eine Pro-Extraktion kostet 10 Credits. |
| Aktualität | Schnappschüsse. Der Apple-Style wurde am 2026-09-20 extrahiert. | Zum Zeitpunkt deiner Extraktion aus der Live-Website erstellt. |
| Zugriff für Agenten | Jede Style-Seite verlinkt auf Referos MCP für Claude, ChatGPT, Cursor, Codex und mehr. | Ein Remote-MCP-Server, dessen Extraktions-Tool jede URL annimmt, nutzbar aus Claude Code, claude.ai, ChatGPT, Codex, Cursor und anderen Clients. |
| Browser-Erweiterung | Nicht angeboten | Eine Chrome-Erweiterung, die den Tab extrahiert, in dem du gerade bist. |
Was Refero Styles bietet
- Eine kostenlose Bibliothek mit Website-Styles, durchsuchbar nach Stimmung, etwa Dark-Mode-SaaS oder redaktionelle Layouts.
- Mehrere Formate pro Style: DESIGN.md (kompakt und erweitert), Tailwind v4, CSS-Variablen und Design-Tokens.
- Links zu Referos MCP für Claude, ChatGPT, Cursor, Codex und mehr.
Eine Bibliothek vs. jede URL auf Abruf
Eine Bibliothek deckt die Websites ab, die jemand bereits aufgenommen hat. Design Extractor liest die Live-Website, die du nennst, und deckt so dein eigenes Produkt, einen Kunden, einen Wettbewerber oder eine Nischenmarke ab, so wie sie heute aussehen.
Füg die URL auf der Startseite ein oder überlass es deinem Agenten über den MCP-Server. Fertige Dateien mit ihren Rezepten und Prüfergebnissen findest du in der Galerie.
So wechselst du von Refero Styles
- Füg die URL der Website auf der Startseite von Design Extractor ein und starte eine Pro-Extraktion.
- Speichere das Ergebnis als DESIGN.md im Stammverzeichnis deines Repos und behalte den Verweis in AGENTS.md oder CLAUDE.md. Prüf Änderungen von Hand mit dem kostenlosen DESIGN.md-Validator.
- Oder überlass es deinem Agenten: Verbinde den MCP-Server und bitte ihn, die Website zu extrahieren.
Fazit
Wähl Design Extractor, wenn du eine DESIGN.md für jede öffentliche Website brauchst, nicht nur für die Websites in einer Bibliothek, mit Komponenten-Rezepten, die an der Live-Website geprüft sind. Das Tool liest die Website so, wie sie jetzt aussieht, und folgt Googles Spezifikation, mit einem Rezept für jede auf der Seite ausgewählte Komponente, das mit Begründung markiert wird, wenn es nicht besteht. Design Extractor erreicht regional eingeschränkte Websites. Dein Agent kann Extraktionen über MCP starten.
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.
TypeUI vs. Design Extractor
Die kostenlose Chrome-Erweiterung von TypeUI, die ihre eigene Vorlage mit den Styles aus deinem Tab füllt, im Vergleich mit einer spezifikationskonformen DESIGN.md mit Komponenten-Rezepten, die an der Live-Website geprüft werden.
FAQ
Refero Styles vs. Design Extractor: Fragen
Kurze Antworten zu Refero Styles und Design Extractor, geprüft am 2026-10-20.
Ja. Am 2026-10-20 war das Durchstöbern und Kopieren von Styles auf styles.refero.design kostenlos. Die Seiten verlinken auf Referos MCP auf refero.design.
Nein. Refero Styles bietet keine Möglichkeit, eine eigene URL einzureichen: Du wählst aus der Bibliothek. Design Extractor erstellt eine DESIGN.md aus jeder öffentlichen URL, wenn du die Extraktion startest.
Nein. Design Extractor erzeugt eine Datei: eine DESIGN.md nach Googles Spezifikation, mit Tokens im Frontmatter und jeder auf der Seite ausgewählten Komponente als Rezept aus destilliertem HTML und CSS. Dein Coding-Agent liest sie und schreibt die Styles, die dein Projekt nutzt.
Jedes Komponenten-Rezept wird einzeln gerendert und mit der Live-Website verglichen: ein struktureller Abgleich seiner Teile mit dem, was auf der Seite gemessen wurde, und ein Pixelvergleich mit einer frischen Aufnahme des echten Elements. Ein Rezept, das nicht besteht, wird mit Begründung markiert und nie als verifiziert ausgeliefert.
Am 2026-10-20 listete die Style-Sitemap 1.342 Style-Seiten.
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.
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.