designmd.me vs. Design Extractor
designmd.me und Design Extractor machen beide aus einer Website-URL eine DESIGN.md für deinen KI-Coding-Agenten. 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 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 designmd.me, der Preisseite, der CLI-Referenz, der Figma-Seite und einer Datei im Discover-Bereich. 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
| designmd.me | Design Extractor | |
|---|---|---|
| Spezifikationskonformität | Schreibt YAML-Frontmatter mit den Tokens der Spezifikation, dazu Top-Level-Schlüssel, die die Spezifikation nicht definiert, etwa source, themes und breakpoints. Die Abschnitte folgen einem eigenen Schema, nummeriert von Visual Theme & Atmosphere bis Known Gaps. | 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 ist eine Liste von Style-Werten, etwa Hintergrund, Schrift, Innenabstand, Rahmen und Radius, 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 | Ein Generator: URL einfügen, DESIGN.md bekommen. Entwickelt von Crowdlinker. | Ein Generator: öffentliche URL einfügen, die DESIGN.md dieser Website bekommen. |
| Gelesene Seiten | Einzelseite (die Landingpage) oder mehrere Seiten (die wichtigsten Seiten der Website), bei jedem Durchlauf frei wählbar. | Pro liest die wichtigsten Seiten der Website ein. |
| Preis pro Durchlauf | 4 Credits für eine Einzelseite, 8 Credits für mehrere Seiten, berechnet nur bei Erfolg. | 10 Credits für eine Pro-Extraktion. Extraktionen, die bei uns fehlschlagen, werden erstattet. |
| Credit-Pakete | 5 $ für 50, 15 $ für 175, 30 $ für 375 oder eine individuelle Aufladung. Credits verfallen nie. | 5 $ für 50, 10 $ für 110, 25 $ für 300. Credits verfallen nie. Kein Abo. |
| Kostenloser Einstieg | 4 kostenlose Credits beim ersten Besuch und 20 weitere bei der Registrierung. Keine Karte zum Start nötig. | Keine kostenlosen Credits bei der Registrierung. Die Galerie und die kostenlosen Tools kosten nichts. |
| Extras | Eine HTML-Vorschaudatei (8 Credits extra), ein Figma-Import von Variables, Styles und einem Board (12 Credits, einmal pro Generierung) und Vergleiche zweier Websites nebeneinander. | Die Ansichten „Quelltext“ und „Vorschau“ der Datei und der Bereich „Visuelles System“ auf der Ergebnisseite, dazu kostenlose Tools: ein DESIGN.md-Validator, ein Schriftart-Finder und ein Farbpaletten-Extraktor. |
| Fertige Beispiele | Ein Discover-Bereich mit generierten Websites, mit Kategorien und einer Rangliste. | Eine Galerie vorab extrahierter Marken, kostenlos zum Lesen und Kopieren. |
| Zugriff für Agenten | Eine CLI (@crowdlinker/designmdme) und ein Agent-Skill für Claude Code, Cursor und andere Agenten mit Skill-Unterstützung. Kein MCP-Server. | Ein Remote-MCP-Server für Claude Code, claude.ai, ChatGPT, Codex, Cursor und andere Clients sowie ein Plugin für Claude Code und Codex. |
| Browser-Erweiterung | Nicht angeboten | Eine Chrome-Erweiterung, die den Tab extrahiert, in dem du gerade bist. |
Was designmd.me bietet
- Kostenlose Credits beim ersten Besuch und bei der Registrierung, ohne Karte zum Start.
- Einzelseiten-Durchläufe für 4 Credits und Mehrseiten-Durchläufe für 8, berechnet nur bei Erfolg.
- Eine HTML-Musterseite und ein Figma-Import von Variables und Styles, jeweils gegen zusätzliche Credits.
- Vergleiche der Designsysteme zweier Websites nebeneinander.
- Eine CLI und ein Agent-Skill für Claude Code, Cursor und andere Agenten mit Skill-Unterstützung.
Wo sie sich unterscheiden
Beide Tools liefern eine DESIGN.md aus einer URL. Design Extractor liefert jede auf der Seite ausgewählte Komponente als Rezept und prüft es 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.
Design Extractor ist außerdem dort, wo du arbeitest. Dein Agent kann über den MCP-Server eine Extraktion starten und das Ergebnis lesen, und die Chrome-Erweiterung extrahiert den Tab, in dem du gerade bist. Weitere fertige Dateien findest du in der Galerie.
So wechselst du von designmd.me
- 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 ersetze damit die alte Datei. Dein Verweis in AGENTS.md oder CLAUDE.md funktioniert weiter.
- Damit dein Agent Extraktionen selbst startet, verbinde den MCP-Server statt der CLI von designmd.me.
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. Design Extractor erreicht regional eingeschränkte Websites. Dein Agent kann Extraktionen über MCP starten. designmd.me kostet weniger Credits pro Durchlauf, 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.
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.
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
designmd.me vs. Design Extractor: Fragen
Kurze Antworten zu designmd.me und Design Extractor, geprüft am 2026-10-20.
Der Einstieg ist kostenlos: Am 2026-10-20 bekamen neue Besucher 4 kostenlose Credits und bei der Registrierung 20 weitere, ohne Karte. Danach gibt es Credit-Pakete ab 5 $ für 50 Credits. Ein Einzelseiten-Durchlauf kostet 4 Credits, ein Mehrseiten-Durchlauf 8.
designmd.me. Die Pakete von designmd.me beginnen bei 5 $ für 50 Credits, unsere bei 5 $ für 50 Credits. Ein Mehrseiten-Durchlauf bei designmd.me kostet 8 Credits und ein Einzelseiten-Durchlauf 4; eine Pro-Extraktion bei Design Extractor kostet 10. HTML-Vorschau und Figma-Import kosten bei designmd.me zusätzliche Credits.
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.
Nein. designmd.me bietet eine CLI und einen Agent-Skill, aber keinen MCP-Server. Design Extractor ist ein Remote-MCP-Server: claude.ai, Claude Desktop, ChatGPT und Claude Code verbinden sich per Anmeldung, Codex, Cursor und Skripte nutzen einen API-Schlüssel.
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 und ersetze die Datei.
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.