DESIGN.md-Tools im Vergleich

Design Extractor erstellt eine DESIGN.md aus jeder öffentlichen URL. 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.

Andere Tools gehen andere Wege. Sammlungen wie getdesign.md und Refero Styles bieten fertige Dateien für Websites, die sie bereits analysiert haben; designmd.me erzeugt eine aus einer URL; die Chrome-Erweiterung von TypeUI füllt ihre eigene Vorlage mit den Styles aus deinem Tab. Jeder Vergleich nennt, was wir geprüft haben und wann. Du kennst das Format noch nicht? Lies, was eine DESIGN.md ist.

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.

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.

  • 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.