Voyage Digital
    Tools· Design & Kreativ

    design-extract

    Extrahiert das komplette Design-System einer Website aus dem DOM als DTCG-Tokens, Tailwind-Konfiguration, Figma-Variablen und Komponenten-Anatomie, Open Source.

    analytischgestaltendausführbarOpen Source
    Zum Anbieter
    DE

    Beschreibung

    design-extract steuert einen Headless-Browser auf eine beliebige URL und erzeugt mit einem einzigen Kommando mehr als 17 Ausgabedateien: DTCG-Design-Tokens in primitiver, semantischer und komposit-Ebene, eine Tailwind-Konfiguration, ein shadcn/ui-Theme, Figma-Variablen, Motion-Tokens, eine typisierte Komponenten-Anatomie sowie eine fertige Prompt-Vorlage für Tools wie v0, Lovable oder Claude Artifacts.

    Das Werkzeug geht über reine Farb- und Font-Extraktion hinaus: Layout-Muster, responsives Verhalten über mehrere Breakpoints, Hover-, Focus- und Active-States, eine WCAG-Kontrastbewertung, Konsistenzprüfung über mehrere Seiten sowie Drift-Checks gegen eine Referenzquelle gehören zum Umfang. Ergänzend liefert es Emitter für iOS SwiftUI, Android Jetpack Compose, Flutter und WordPress-Blockthemes sowie einen MCP-Server für Claude Code, Cursor und Windsurf.

    Bei Voyage Digital ist design-extract Teil des aktiven Stacks für Design-System-Extraktion, unter anderem als Grundlage für Referenz- und Wettbewerbsanalysen bei Redesign- oder Rebranding-Vorhaben.

    Stärken

    Ein Kommando, viele Ausgabedateien
    DTCG-Tokens, eine Tailwind-Konfiguration, ein shadcn/ui-Theme, Figma-Variablen, Motion-Tokens, eine typisierte Komponenten-Anatomie und eine fertige Prompt-Vorlage für v0, Lovable, Cursor oder Claude Artifacts entstehen alle in einem einzigen Lauf mit mehr als 17 Ausgabedateien.
    Layout-System statt nur Farbwerte
    Grids, Flex-Container, Container-Breiten und Abstände werden als eigenständige Struktur erfasst, nicht nur als Farb- oder Schriftwerte.
    Responsives Verhalten dokumentiert
    Vier Breakpoints werden gecrawlt, Unterschiede zwischen ihnen werden protokolliert.
    Interaktions-States automatisiert erfasst
    Hover-, Focus- und Active-Zustände werden programmatisch ausgelöst, die dabei entstehenden Änderungen werden festgehalten.
    Motion-Sprache als Fingerabdruck
    Dauer, Easing-Familien, Spring-Erkennung und ein Bewegungs-Fingerabdruck wie springy, smooth, mechanical oder mixed fassen den Bewegungsstil einer Seite zusammen.
    WCAG-Kontrastbewertung mit Korrekturvorschlag
    Jedes Vordergrund-Hintergrund-Paar wird bewertet, bei Nichtbestehen schlägt das Werkzeug eine nächstliegende bestehende Farbe zur Korrektur vor.

    Einschätzung

    KI-Funktionen

    • MCP-Server Der MCP-Server stellt Tokens, Seitenbereiche, Komponenten und Kontrast-Paare für MCP-fähige Agenten wie Claude Code bereit.
    • Claude-Code-Plugin Als Plugin installiert wird jeder CLI-Befehl innerhalb einer Claude-Code-Session zum eigenen Slash-Command.
    • Agent-Skill für weitere Ökosysteme Als Skill eingebunden steht das Werkzeug auch in Cursor, Codex und mehr als 40 weiteren KI-Coding-Agenten zur Verfügung.
    • Fertige Prompt-Vorlage Der Extraktionslauf erzeugt eine sofort einsetzbare Prompt-Vorlage für v0, Lovable, Cursor und Claude Artifacts.
    • Agent-Regeldateien Ein einzelnes Flag schreibt zusätzlich Regeldateien für Cursor, Claude Code, CLAUDE.md und generische Agenten mit.

    Wofür geeignet

    • Design- und Frontend-Teams, die das Design-System einer bestehenden Website als strukturierte Tokens statt als manuelle Abschrift brauchen
    • Agenturen, die Referenzseiten für Redesigns oder Wettbewerbsanalysen systematisch auswerten wollen
    • Entwickler, die KI-Coding-Tools wie Claude Code oder Cursor direkt mit einem extrahierten Design-System füttern möchten
    • Teams, die Barrierefreiheit früh im Prozess prüfen wollen, über die eingebaute WCAG-Kontrastbewertung

    Einschränkungen und Hinweise

    • Kopflastiger Standardlauf Ein einzelner Extraktionsdurchlauf verarbeitet bis zu 5.000 DOM-Elemente mit mehr als 25 berechneten Eigenschaften, bei sehr umfangreichen Seiten kann das den Lauf spürbar verlangsamen.
    • Chromium-Download beim ersten Start Ohne die Option für die vorhandene System-Chrome-Installation lädt das Werkzeug eine gebündelte Chromium-Instanz von rund 150 MB herunter.
    • Standardlauf betrachtet nur eine Seite Ohne explizite Tiefenangabe wird ausschließlich die übergebene URL gecrawlt, für Multi-Page-Konsistenzprüfungen muss die Crawl-Tiefe eigens gesetzt werden.
    • Dark Mode nicht automatisch dabei Dunkle Varianten werden nur mit einer zusätzlichen Option mit extrahiert.
    • Geschützte Seiten brauchen Vorbereitung Für Login-geschützte oder zertifikatsseitig abgesicherte Zielseiten müssen Cookies, Header oder eine Option zum Ignorieren von Zertifikatsfehlern vorab konfiguriert werden.

    Quick Start

    1. designlang per npm i -g designlang global installieren, oder ohne Installation direkt über npx designlang aufrufen.
    2. Den Befehl gegen die gewünschte Referenz-URL ausführen, etwa npx designlang https://ihre-referenzseite.de. Das Ergebnis landet standardmäßig im Ordner design-extract-output.
    3. Mit designlang grade und der Ziel-URL eine teilbare Report-Karte erzeugen, oder mit designlang apply und der Ziel-URL die Tokens direkt ins eigene Projekt übernehmen.
    4. Für den vollen Funktionsumfang inklusive Screenshots, responsivem Crawling und Interaktions-States das Flag --full anhängen.
    5. Bei Bedarf als Claude-Code-Plugin über /plugin install Manavarya09/design-extract oder als Agent-Skill über npx skills add Manavarya09/design-extract in der eigenen Coding-Umgebung einbinden.

    Tipps

    • Für CI-Pipelines eignen sich die Befehle für Linting, Drift-Prüfung und visuelle Diffs, alle drei geben bei Abweichungen einen Fehlercode zurück.
    • Bei mehreren Referenzseiten liefert der Mehrfach-Vergleichsbefehl brands eine Matrix statt einzelner isolierter Läufe.
    • Vor einem Redesign lohnt sich der Befehl battle für einen direkten, bewerteten Vergleich zweier Seiten.
    • Wer eine Design-Sprache eher übertragen als kopieren möchte, findet über den Befehl remix einen Ausgangspunkt in einem anderen visuellen Vokabular.
    • Für wiederkehrende Prüfungen eignet sich der Befehl watch, der eine Seite im Intervall auf Design-Änderungen überwacht.

    Zugang

    design-extract ist Open Source unter MIT-Lizenz, die lokale Ausführung erfordert Node.js sowie Playwright für den Headless-Browser. Das ursprüngliche Repository unter github.com/Manavarya09/design-extract ist nicht mehr erreichbar (404); der zugehörige Autoren-Account führt aktuell keine öffentlichen Repositories mehr. Der Autor pflegt das Werkzeug inzwischen unter dem Namen designlang und vertreibt es als npm-Paket (npmjs.com/package/designlang, aktiv gepflegt), allerdings ohne öffentlich einsehbaren Quellcode. Als offen lesbare, MIT-lizenzierte Quelle dient daher der verifizierte Spiegel github.com/joeycumines/design-extract, dessen README sich selbst als Spiegel des Originals ausweist und dessen Funktionsumfang vollständig übereinstimmt. Empfehlung: für die lokale Installation den Spiegel heranziehen, für die stets aktuelle Distribution zusätzlich das npm-Paket designlang beachten.

    Stand: · Angaben zu Preisen, Tarifen und Funktionen sind eine Momentaufnahme. Vor einer Entscheidung lohnt der Blick auf die Anbieterseite.

    Im Workshop wird daraus Ihre Methode.

    Wer diesen Prozess einmal laufen sieht, will als Nächstes den Agenten dahinter. Das bauen wir im Workshop Vom Prozess zum Agenten.

    Workshops ansehen

    Passend dazu

    Alle Ressourcen ansehen
    Skills

    Das Bildwerk

    Erstellt als ausführbarer Claude-Skill mit echter Code-Ausführung ein originales visuelles Werk als PDF oder PNG: zunächst eine eigene Design-Philosophie, danach deren museal anmutende Umsetzung mit minimalem, integriertem Text.

    Mehr erfahren
    21st.dev
    Tools

    21st.dev

    Community-betriebenes Registry-Verzeichnis für React- und Tailwind-Komponenten im shadcn-Format, aus dem sich Bausteine per CLI-Befehl oder KI-Prompt direkt in ein bestehendes Projekt kopieren lassen.

    Mehr erfahren
    Aceternity UI
    Tools

    Aceternity UI

    React- und Next.js-Komponentenbibliothek mit über 200 copy-paste-fertigen, animationsstarken Bausteinen auf Basis von Tailwind CSS und Framer Motion, für Hero-Sections, 3D-Karten und Hintergrund-Effekte.

    Mehr erfahren
    Adobe Firefly
    Tools

    Adobe Firefly

    Adobes KI-Plattform für Bild, Video, Audio und Vektor-Generierung, nativ eingebettet in Photoshop, Illustrator, Express und Premiere.

    Mehr erfahren
    Animmaster Lib
    Tools

    Animmaster Lib

    Kostenpflichtige Bibliothek aus rund 300 handgecodeten Animationskomponenten für Scroll-, WebGL- und Hover-Effekte, bezogen per ZIP-Download und wahlweise manuell oder KI-gestützt in ein Projekt integriert.

    Mehr erfahren
    Basecoat
    Tools

    Basecoat

    Quelloffene Tailwind-CSS- und Vanilla-JavaScript-Bibliothek, die die shadcn/ui-Designsprache als reine CSS-Klassen ohne React-Abhängigkeit auf jeden Webstack bringt, von HTML über Astro bis Shopify Liquid.

    Mehr erfahren
    BR
    Tools

    BraveBrand Vibe Playground

    Kuratierte Prompt-Bibliothek für Landingpages, Funnels, Social-Media-Carousels und Ad-Creatives, zum direkten Einfügen in KI-Builder wie Claude, ChatGPT oder Lovable statt als fertiger Code.

    Mehr erfahren
    Canva
    Tools

    Canva

    Eine breit genutzte Design-Plattform, mit der auch Teams ohne Design-Hintergrund Social-Media-Posts, Präsentationen und andere visuelle Inhalte erstellen.

    Mehr erfahren
    Claude Design
    Tools

    Claude Design

    KI-gestütztes Design-Werkzeug von Anthropic Labs, das beim Onboarding ein bestehendes Design-System einliest und fertige Entwürfe per Handoff-Bundle direkt an einen Coding-Agenten übergibt.

    Mehr erfahren
    ComfyUI
    Tools

    ComfyUI

    Node-basierter Open-Source-Editor für Bild-, Video- und 3D-Generierungs-Pipelines, mit voller Kontrolle über Sampler, Modelle und einzelne Verarbeitungsschritte.

    Mehr erfahren
    Componentry
    Tools

    Componentry

    Kostenlose Sammlung von rund 40 animierten React-Komponenten zum Kopieren und Einfügen, installierbar über die shadcn-Registry und per MCP-Server direkt aus KI-Coding-Assistenten heraus ansprechbar.

    Mehr erfahren
    Cult UI
    Tools

    Cult UI

    Copy-and-paste-Komponenten-Sammlung für React im shadcn-Registry-Format, mit ausgeprägter Textur- und Shader-Ästhetik sowie einem wachsenden Katalog vorgefertigter KI-Agent-Muster.

    Mehr erfahren
    Dotmatrix
    Tools

    Dotmatrix

    Quelloffene Sammlung von über 55 Dot-Matrix-Ladeanimationen für React, TypeScript und Tailwind CSS, installierbar über die shadcn-Registry und nach der Installation lokal frei anpassbar.

    Mehr erfahren
    FI
    Tools

    fireworks-tech-graph

    Open-Source-Werkzeug zur bilingualen Generierung produktionsreifer technischer SVG- und PNG-Diagramme aus natürlichsprachigen Beschreibungen, mit UML- und KI-Architektur-Mustern.

    Mehr erfahren
    Tailark
    Tools

    Tailark

    Open-Source-Registry mit über 200 shadcn/ui-Blocks für Marketing-Websites in drei Design-Kits, installierbar per CLI oder per Prompt über einen eigenen MCP-Server.

    Mehr erfahren
    TR
    Tools

    transitions.dev-Skill

    Externes Repository mit zwölf geprüften, portablen CSS-Übergängen für Standard-UI-Zustände (Modal, Dropdown, Erfolg, Fehler u. a.), gepackt als Skill für KI-Coding-Agenten.

    Mehr erfahren
    Untitled UI
    Tools

    Untitled UI

    React-Komponentenbibliothek aus dem Untitled-UI-Figma-Design-System, deren Bausteine als bearbeitbarer Quellcode statt Paketabhängigkeit installiert werden, mit React Aria als Accessibility-Fundament.

    Mehr erfahren
    UX
    Tools

    ux-designer-skill

    Externes Skill-Repository, das Claude Code kuratiertes UX/UI-Designwissen mitgibt: Layout, Typografie, Farbe, WCAG-2.2-AA-Konformität sowie UX-Review-Kriterien für bestehende Oberflächen.

    Mehr erfahren
    Vengeance UI
    Tools

    Vengeance UI

    Quelloffene React- und Next.js-Komponentenbibliothek für ausdrucksstarke Marketing-Animationen, mit eigenem Template-System für ganze Seitenabschnitte und einer Reihe Bausteinen speziell für Agenten- und KI-Produktoberflächen.

    Mehr erfahren
    Watermelon UI
    Tools

    Watermelon UI

    Shadcn-kompatible Open-Source-Registry mit über 260 React-19- und Tailwind-v4-Komponenten, von einzelnen Bausteinen bis zu fertigen Dashboard- und E-Commerce-Blöcken, per CLI direkt in den eigenen Quellcode installierbar.

    Mehr erfahren

    Gespräch statt Pitch

    Erst verstehen, dann entscheiden. Wir nehmen uns Zeit für ein erstes Gespräch, ohne Verkaufsdruck, ohne Verpflichtung.

    Gespräch vereinbaren