Design Extract: Wie man das Design einer Website mit KI klont

Du siehst eine Landing Page, die dir gefällt. Im alten Workflow würdest du DevTools öffnen, 50 Elemente inspizieren, manuell Hex-Codes kopieren, Schriftgrößen erraten und bekommst die Abstände trotzdem falsch hin. Design Extract macht das in einem Befehl — es reverse engineert das visuelle Design einer beliebigen Website in eine strukturierte Spezifikation, die Claude Code oder Cursor direkt umsetzen kann.

Das Problem, das es löst

Ein Design mit Worten zu beschreiben ist unpräzise. „Mach es wie Stripes Pricing-Seite" gibt Claude Code ein vages Ziel, das 5-10 Runden visueller Anpassung erfordert. Jede Runde kostet Token und Zeit.

Design Extract beseitigt das Beschreibungsproblem. Es liest das tatsächliche CSS, berechnete Stile, Keyframe-Animationen und die DOM-Struktur einer beliebigen Seite — und verpackt es dann in ein Format, das AI-Coding-Tools direkt implementieren können.

Das Ergebnis: Statt „mach es so aus" gefolgt von endlosen Iterationen erhältst du „hier sind die exakten Spezifikationen" gefolgt von einer genauen Übereinstimmung beim ersten Build.

So verwendest du es

Installiere Design Extract aus seinem GitHub-Repository. Zeige es auf eine beliebige URL. Es gibt ein Design-Dokument aus, das die Farbpalette mit exakten Hex-/RGB-Werten, Typographie einschließlich Schriftfamilien, Größen, Gewichte und Zeilenhöhen, Abstands- und Layout-Messungen, Animations-Keyframes und Timing-Funktionen, Interaktionsmuster wie Hover-Zustände und Übergänge sowie Komponenten-Struktur mit Verschachtelung und Hierarchie enthält.

Übergib dieses Dokument als Kontext an Claude Code oder Cursor, bevor du deinen Build-Prompt schreibst. „Baue mithilfe der beigefügten Design-Spezifikation eine Landing Page mit dem gleichen visuellen Stil" produziert dramatisch genauere Ergebnisse als jede Textbeschreibung.

Was es erfasst (und was nicht)

Design Extract erfasst berechnetes CSS — die tatsächlich gerenderten Stile, nicht den Quellcode. Das bedeutet, es erfasst die endgültige visuelle Ausgabe, unabhängig davon, ob das Original mit Tailwind, CSS-Modulen, Vanilla CSS oder einer CSS-in-JS-Bibliothek erstellt wurde.

Es erfasst Animationen und Übergänge einschließlich Keyframes, Dauern, Easing-Funktionen und Auslösebedingungen. Wenn eine Schaltfläche eine Hover-Animation hat, zeichnet Design Extract exakt auf, wie sie sich bewegt, skaliert und die Farbe ändert.

Was es nicht erfasst: Bilder (es verweist auf ihre Positionen, lädt sie aber nicht herunter), dynamische Inhalte, die nach dem initialen Rendering über JavaScript geladen werden (obwohl es die meisten SPA-Inhalte verarbeitet), und responsive Breakpoints (es erfasst jeweils einen Viewport — führe es bei mehreren Breiten aus, um responsive Spezifikationen zu erhalten).

Praktische Workflows

Reproduktion von Landing Pages. Suche 3 Landing Pages, die dir gefallen. Führe Design Extract auf jeder aus. Übergib alle 3 Spezifikationen an Claude Code mit: „Erstelle mithilfe von Elementen aus diesen 3 Design-Spezifikationen eine Landing Page für [dein Produkt]. Nimm die Farbpalette aus Spezifikation 1, die Typographie aus Spezifikation 2 und die Layout-Struktur aus Spezifikation 3."

Erstellung eines Design Systems. Führe Design Extract auf deiner bestehenden Website aus (oder auf einer Website, deren Stil du übernehmen möchtest). Die Ausgabe wird zu deiner DESIGN.md-Datei für Claude Design — und gibt ihm markengerechten Kontext für jeden zukünftigen Prototyp.

Wettbewerbsanalyse. Extrahiere die Designs deiner Top 3 Konkurrenten. Vergleiche ihre visuellen Ansätze nebeneinander. Nutze die besten Elemente, um deine eigene Design-Richtung zu informieren — ohne hunderte von Elementen manuell zu inspizieren.

Die Ethik-Anmerkung

Design Extract erfasst visuelle Spezifikationen, nicht proprietären Code oder urheberrechtlich geschützte Assets. Es für Inspiration und Lernen zu verwenden ist Standard-Praxis — das Gleiche, was Designer manuell in DevTools jeden Tag tun. Das Design eines Konkurrenten Pixel-für-Pixel zu kopieren und es als Original auszugeben ist ethisch falsch, unabhängig von den Tools, die du verwendest.

Weitere Informationen zu AI-gestützten Design-Workflows findest du in unserem Claude Design praktischen Leitfaden und unserem Claude Design vs Figma Vergleich. Tipps zur Optimierung deiner AI-Coding-Interaktionen findest du in unserem Leitfaden zum Stoppen des Token-Verbrauchs.

Offenlegung: Einige Links in diesem Artikel sind Affiliate-Links. Wir empfehlen nur Tools, die wir persönlich getestet haben und regelmäßig nutzen. Siehe unsere vollständige Offenlegungsrichtlinie.