Du siehst eine Website und weißt sofort: So soll mein nächstes Projekt aussehen. Aber dann fängst du an, Farben per Pipette zu ermitteln, Abstände zu messen und Schriftgrößen zu raten. Stunden später hast du eine halbe Sammlung von CSS-Werten, die trotzdem nicht zusammenpassen.
design-extract macht genau diesen Schritt überflüssig. Der MCP-Server für Claude Code analysiert eine beliebige Website und gibt dir ihr komplettes Design-System zurück. Nicht als Screenshot, sondern als saubere Tokens, direkt nutzbar in Tailwind v4, iOS, Android, Flutter, Figma oder shadcn/ui.
Was ist design-extract?
design-extract ist ein MCP-Server (Model Context Protocol), den du mit Claude Code verbindest. Sobald du ihm eine URL gibst, öffnet er die Seite mit Playwright im Hintergrund, analysiert das DOM und extrahiert alle relevanten Design-Informationen.
Das Ergebnis folgt dem DTCG-Standard (Design Token Community Group). Das ist das Format, das Figma, Style Dictionary und andere moderne Design-Tools verstehen. Du bekommst also keine rohen CSS-Variablen, die du manuell umbauen musst, sondern strukturierte Token mit klaren Namen.
Was wird extrahiert? Typischerweise:
- Farben (Primär, Sekundär, Neutrals, Semantisch)
- Schriftgrößen, Zeilenhöhen und Schriftfamilien
- Abstände (Spacing-Skala)
- Rahmenradien und Border-Werte
- Schatten und Elevation-Token
- Komponentenspezifische Werte, wo sie erkennbar sind
Anschließend wählst du, in welches Format design-extract exportiert. Zur Auswahl stehen Tailwind v4, iOS Swift, Android Compose, Flutter, Figma Tokens oder shadcn/ui. Du baust also keine Brücke manuell, du rufst einfach den passenden Emitter auf.
Wie richtest du design-extract ein?
Du brauchst zuerst Node.js und npm auf deinem Rechner. Dann installierst du den MCP-Server und bindest ihn in Claude Code ein:
# MCP-Server direkt in Claude Code hinzufügen
claude mcp add design-extract npx design-extract@latest serve
# Alternativ: globale Installation
npm install -g design-extract
Nach der Einrichtung ist der Server in Claude Code verfügbar. Du rufst ihn direkt im Chat auf:
Extrahiere das Design-System von https://example.com
und exportiere es als Tailwind-v4-Token.
Claude Code schickt die Anfrage an design-extract, wartet auf die Analyse und liefert dir eine fertige Ausgabe. Bei Tailwind v4 erhältst du eine design-tokens.css mit allen CSS-Custom-Properties. Bei iOS eine Swift-Datei, bei Flutter ein Dart-Paket.
Wichtig: Playwright muss auf deinem System laufen. Falls Chromium noch nicht installiert ist, erledigt design-extract das bei der ersten Nutzung automatisch.
Praxisbeispiel: Design eines Vorbilds als Ausgangspunkt
Stell dir vor, du baust eine neue Landing Page für ein SaaS-Produkt. Du hast ein klares Vorbild: eine Website mit dunkelblauem Hintergrund, scharfem Akzentblau für CTAs und gut gestaffelten Schriftgrößen. Früher hättest du mindestens eine Stunde damit verbracht, diese Werte manuell zu ermitteln.
Mit design-extract dauert das einen Aufruf. Du öffnest Claude Code, gibst die URL ein und bekommst ein vollständiges Token-Set zurück. Du wählst Tailwind v4 als Output-Format und kopierst die Datei in dein Projekt.
Was du dann bekommst, ist kein visueller Copy-Paste, sondern ein strukturierter Ausgangspunkt. Du passt Farbnamen an, ersetzt einzelne Werte nach deinen Anforderungen und hast trotzdem den größten Teil der Arbeit bereits erledigt. Dein Tailwind-Stylesheet ist von Anfang an konsistent, weil es auf einem echten System basiert, das nachweislich funktioniert.
Wer bereits mit UI-Design-Skills in Claude Code arbeitet, kann design-extract als vorgelagerten Schritt einsetzen: erst Token extrahieren, dann mit Claude Code auf Basis dieser Token direkt komponieren.
Wann lohnt sich design-extract?
Das Tool ist besonders nützlich in diesen Situationen:
Redesigns mit bestehendem Referenz-Design: Du willst das visuelle Vokabular einer bekannten Website als Basis nehmen. Statt alles per Hand zu übertragen, extrahierst du das System einmal und arbeitest dann weiter.
Multi-Platform-Projekte: Du baust dieselbe App für iOS, Android und Web. design-extract erzeugt aus einem einzigen Analyse-Lauf plattformspezifische Ausgaben. Dieselben Werte dreifach eintragen entfällt.
Schnelle Prototypen: Du brauchst für einen Kundenpitch rasch etwas Vorzeigbares. design-extract verkürzt den Einstieg merklich, ohne dass du ein Design-System von Grund auf aufbauen musst.
Design-Systeme benchmarken: Du willst verstehen, welche Token andere Produkte in deiner Kategorie verwenden, um das eigene System zu vergleichen. Kein manueller Vergleich mehr, sondern ein direkter Token-Dump.
Für kleinere Einzelprojekte mit einem einzigen Ziel-Format ist der Aufwand der MCP-Einrichtung möglicherweise größer als der Nutzen. Wer aber regelmäßig zwischen Plattformen wechselt oder öfter neue Designprojekte startet, spart mit design-extract MCP deutlich Zeit.
FAQ
Darf ich Design-Systeme von fremden Websites extrahieren?
design-extract liest öffentlich sichtbare CSS- und DOM-Informationen aus: nichts, was nicht ohnehin im Browser-Inspektor zu sehen wäre. Trotzdem solltest du das extrahierte Design als Inspiration und Ausgangspunkt behandeln, nicht als fertiges Ergebnis. Eigene Anpassungen sind nicht nur rechtlich sinnvoller, sie verbessern das Resultat auch.
Funktioniert design-extract mit allen Websites?
Grundsätzlich ja, weil Playwright eine vollständige Browser-Engine nutzt. Websites mit starken Anti-Bot-Maßnahmen können den Analyse-Prozess unterbrechen. Bei sehr dynamischen Single-Page-Applications kann das Ergebnis etwas weniger vollständig ausfallen als bei klassisch aufgebauten Seiten.
Kann design-extract auch meine eigene lokale App analysieren?
Ja. Du kannst eine laufende Entwicklungsumgebung übergeben, zum Beispiel http://localhost:3000. Das ist praktisch, wenn du ein bestehendes Projekt dokumentieren oder auf ein neues Format migrieren möchtest, ohne die Live-URL zu brauchen.
Wenn dich Tools wie design-extract interessieren und du tiefer in KI-gestütztes Arbeiten einsteigen willst, komm in die kostenlose Claude Business Community. Dort lernst du Claude, Automatisierung, Co-Work, Claude Code, App-Building und Agent-Coding. Zeit sparen, Kosten sparen, Business skalieren: skool.com/unternehmernetzwerk-2071
Autor: Marcel Porcher, newways.ai