1. Was ist der DESIGN.md Extractor und warum Design-Systeme extrahiert werden sollten

In der modernen Webentwicklung bleiben Design-Systeme oft verschlossen oder fragmentiert: Sie sind in privaten Figma-Mockups versteckt, über Dutzende CSS-Dateien verteilt oder existieren nur im Gedächtnis des leitenden Designers. Wenn Entwickler eine Oberfläche basierend auf einem Referenzdesign erstellen oder schnell die visuelle Sprache einer Kundenwebsite übernehmen müssen, verbringen sie Stunden damit, Hex-Codes manuell aus den DevTools zu kopieren und Button-Radien mit dem Lineal zu messen.

DESIGN.md Extractor ist ein spezialisierter Skill für Claude Code, der den Reverse-Engineering-Prozess von Webdesign vollständig automatisiert. Der Agent analysiert eine Live-Seite, liest System-Tokens direkt aus dem DOM und CSS und generiert anschließend einen maschinenlesbaren Artefakt DESIGN.md zusammen mit einer eigenständigen visuellen Vitrine design-preview.html.

mermaid

flowchart TD A["URL сайту або назва бренду<br><i>'stripe.com'</i>"] --> B["Claude Code + design-md-extractor"] B --> C["DOM & CSS Parser<br><i>(Зчитування :root змінних, обчислення стилів)</i>"] C --> D["Екстракція 4 категорій токенів<br><i>(Кольори, шрифти, відступи, радіуси)</i>"] D --> E["Генерація DESIGN.md<br><i>(YAML-специфікація + дизайн-бриф)</i>"] D --> F["Збірка design-preview.html<br><i>(Офлайн UI-кіт на чистих токенах)</i>"] E & F --> G["Експорт у Tailwind CSS / Figma / Кодову базу"]

Vergleich: Manuelle Analyse vs. Arbeit mit dem Skill

Arbeitsschritt	Manuelle Analyse via DevTools	Nutzung des DESIGN.md Extractors
Sammlung der Farbpalette	Manuelles Kopieren dutzender einzelner `color`- und `background`-Regeln	Automatisches Extrahieren der vollständigen Hierarchie (~35 Tokens) aus `:root`
Typografie-Analyse	Selektive Messung von `font-size` bei verschiedenen Überschriften	Standardisierte siebenstufige Skala mit Zeilenabstand (Line Height) und Tracking
Grid & Abstände	Subjektive Einschätzung von Paddings und Margins zwischen Blöcken	Präziser mathematischer Schritt des modularen Grids (z. B. Basis 8px)
Format des Ergebnisses	Verstreute Notizen im Block oder rohe Screenshots	Standardisiertes `DESIGN.md` und interaktiver UI-Kit in HTML
Zeit pro Projekt	3 bis 6 Stunden Routinearbeit	Weniger als 60 Sekunden für den gesamten Generierungszyklus

Hinweis

Der Skill interagiert mit dem offenen Webcode der Seite und extrahiert die tatsächlichen Parameter, die der Browser für das Rendering verwendet, wodurch Schätzungen oder subjektive Interpretationen vermieden werden.

2. Architektur und Funktionsweise: Von der URL zum Design-System

Die Arbeitspipeline des Extractors besteht aus mehreren miteinander verbundenen Phasen, die die Genauigkeit der Datensammlung sicherstellen.

Schrittweiser Analysealgorithmus

Laden und Rendern der Seite: Claude greift auf die Ziel-URL zu und erhält das vollständige HTML-Dokument sowie die verknüpften Stylesheets.
Parsing globaler Variablen (:root): Der Agent findet deklarierte CSS Custom Properties (--color-primary, --font-sans, --spacing-unit, --radius-lg).
Berechnung der Computed Styles: Für Elemente ohne explizite CSS-Variablen analysiert das Skript Schlüsselkomponenten (Buttons, Überschriften, Inputs, Navigation), indem es die tatsächlichen berechneten Werte des Browsers liest.
Normalisierung und Strukturierung: Rohfarben werden in das kanonische HEX/OKLCH-Format gebracht, und Schriftarten werden mit dem Google Fonts-Katalog oder System-Stacks abgeglichen.
Generierung der Artefakte: Erstellung der Spezifikationsdatei DESIGN.md und Zusammenstellung einer eigenständigen HTML-Vorschauseite.

Tipp

Wenn die Website Utility-Frameworks (wie Tailwind CSS) nutzt, erkennt der Skill Klassen wie p-4, rounded-xl, bg-slate-900 und rekonstruiert die Basiskonfiguration des Themas.

3. Die vier Dimensionen visueller Tokens: Farben, Typografie, Abstände, Form

Der DESIGN.md Extractor zieht visuelle Tokens heraus und strukturiert sie nach vier Hauptkategorien, um ein kohärentes System zu schaffen.

Farbpalette (Colors)

Der Extractor erstellt eine erweiterte Palette mit etwa 35 funktionalen Tokens gemäß den Standards Material Design 3 und Radix UI:

Brand-Akzente: primary, secondary, tertiary sowie ihre Kontrastpaare on-primary, on-secondary.
Oberflächen und Ebenen: background, surface, surface-variant, surface-container (vom hellsten bis zum dunkelsten Erhebungslevel).
Systemzustände: error, warning, success, info zusammen mit den entsprechenden Textkontrasten.
Neutrale Töne: outline, outline-variant, scrim, shadow.

Typografische Hierarchie (Typography)

Das Schriftsystem wird durch 7 standardisierte Level beschrieben:

Token-Level	Zweck	Typische Größe	Zeilenhöhe	Strichstärke
`headline-xl`	Hauptbanner, Hero H1	48px – 64px	1.1 – 1.15	Bold / ExtraBold
`headline-lg`	Sektionsüberschriften H2	32px – 40px	1.2	SemiBold
`title-md`	Kartenüberschriften H3	20px – 24px	1.3	Medium / SemiBold
`body-lg`	Lead-Absätze, Einleitungstext	18px	1.5 – 1.6	Regular
`body-md`	Haupttext der Seite	15px – 16px	1.5 – 1.6	Regular
`label-md`	Buttons, Tabs, Badges	13px – 14px	1.2 – 1.4	Medium
`label-sm`	Feldbeschriftungen, Disclaimers	11px – 12px	1.3	Regular / Medium

Modulares Grid und Abstände (Spacing)

Der Skill bestimmt das Basis-Grid-Modul (üblicherweise 4px oder 8px) und baut eine harmonische Skala auf:

xs (4px), sm (8px), md (16px), lg (24px), xl (32px), 2xl (48px).
Zusätzlich werden globale Layout-Parameter fixiert: maximale Container-Breite (max-width: 1280px) und horizontale Sicherheitsmargen (gutter: 24px).

Geometrie der Formen und Tiefe (Shapes & Elevation)

Radien: Skala der Abrundungen von none (0px) bis full (9999px für runde Avatare und Pill-Buttons).
Schatten (Box Shadows): Mehrstufige Schatten zur Erzeugung von Tiefe (shadow-sm, shadow-md, shadow-xl), die die physische Erhebung von Karten über dem Hintergrund simulieren.

4. Anatomie des DESIGN.md-Artefakts: YAML-Spezifikation und Prose-Sektionen

Die Datei DESIGN.md ist als hybrides Dokument konzipiert: Der obere Teil ist eine strenge YAML-Struktur für Linter, Compiler und Code-Generatoren, während der untere Teil ein professionelles Design-Briefing für Menschen und AI-Assistenten darstellt.

Beispielstruktur des YAML-Frontmatter

yaml

--- name: "Acme Cloud Platform" extractedFrom: "https://acme.example.com" version: "1.0.0" colors: primary: "#4F46E5" on-primary: "#FFFFFF" primary-container: "#EEF2FF" secondary: "#06B6D4" background: "#0F172A" surface: "#1E293B" surface-variant: "#334155" on-surface: "#F8FAFC" outline: "#475569" typography: fontFamilySans: "'Inter', -apple-system, sans-serif" fontFamilyMono: "'JetBrains Mono', monospace" headline-xl: fontSize: "48px" lineHeight: "1.1" fontWeight: "800" letterSpacing: "-0.02em" body-md: fontSize: "16px" lineHeight: "1.5" fontWeight: "400" letterSpacing: "0em" spacing: base: "8px" sm: "8px" md: "16px" lg: "24px" xl: "32px" shapes: borderRadiusSm: "4px" borderRadiusMd: "8px" borderRadiusLg: "16px" borderRadiusFull: "9999px" ---

Sieben beschreibende Abschnitte (Prose Sections)

Nach dem YAML-Block enthält die Datei 7 detaillierte ingenieurtechnische Sektionen:

Brand & Style Personality: Tonality der Marke (z. B. "Strenge ingenieurtechnische Minimalismus im Stil von Linear" oder "Warmes Consumer-Fintech im Stil von Stripe").
Color Palette Rationale: Regeln für Farbkombinationen und Anforderungen an den WCAG-AA-Kontrast.
Typography Rhythm: Regeln für die Hierarchie der Überschriften und die Ausrichtung an der Grundlinie (Baseline Alignment).
Layout & Spacing Philosophy: Prinzipien der Grid-Organisation, adaptive Breakpoints.
Elevation & Depth: Verwendung von Layering, Gradienten und Hintergrundunschärfe (backdrop-filter blur).
Shape & Border Language: Philosophie der Abrundungen, Linienstärke und Umrandungen.
Component Blueprints: Fertige Patterns für die Erstellung von Buttons, Inputs, Karten und Navigationsmenüs.

5. Interaktive Vorschau: Architektur der design-preview.html

Zusammen mit dem Dokument DESIGN.md erzeugt der Skill eine eigenständige HTML-Datei design-preview.html. Dies ist eine vollwertige interaktive Design-Vitrine.

mermaid

flowchart LR subgraph design_preview_html["design-preview.html (Офлайн-вітрина)"] P["Колірна палітра<br><i>(Клік копіює HEX/RGB)</i>"] T["Шрифтовий стенд<br><i>(Google Fonts лінійка)</i>"] C["UI Sandbox<br><i>(Кнопки, картки, форми)</i>"] S["Демо-екран<br><i>(Синтезований макет)</i>"] end design_preview_html --> B["Відкриття у будь-якому браузері<br><i>(Без node_modules, без бекенду)</i>"]

Vorteile der eigenständigen Vorschau

Zero Dependencies: Die Datei benötigt weder Node.js, einen Webserver noch externe Bibliotheken. Ein Doppelklick auf die Datei im Finder oder Explorer genügt.
Eingebettete Assets: Icons und Grafiken sind im Inline-SVG- oder Base64-Format eingebettet, was die Funktionsfähigkeit der Vitrine auch ohne Netzwerkverbindung garantiert.
Token-Kopieren mit einem Klick: Ein Klick auf jede Farbprobe kopiert automatisch den entsprechenden Wert in die Zwischenablage.
Interaktive Zustände: Alle Komponenten unterstützen die Pseudoklassen :hover, :focus-visible, :active und :disabled.

6. Installation und Start des Skills in Claude Code

Der Skill design-md-extractor wird durch natürliche Befehle im Dialog oder über einen speziellen Slash-Call aktiviert.

Startbefehle im Terminal

Was passiert nach dem Senden des Befehls

Claude Code startet die internen Skripte zur Stilsammlung.
Der Agent gibt den Scan-Fortschritt aus: Lesen der CSS-Variablen, Analysieren der Schriften, Messen der Komponenten.
Im Wurzelverzeichnis Ihres Repositoriums erscheinen die Dateien DESIGN.md und design-preview.html.
Der Agent bietet an, die HTML-Datei im Browser zu öffnen (open design-preview.html).

7. Integration der Tokens in Tailwind CSS, Figma und React

Die erhaltenen Tokens lassen sich leicht in reale Produktionsprozesse integrieren, ohne dass Konfigurationen manuell neu geschrieben werden müssen.

Export in die Tailwind CSS-Konfiguration

Verwenden Sie die extrahierten Werte direkt in tailwind.config.ts:

typescript

import type { Config } from 'tailwindcss'; const config: Config = { content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'], theme: { extend: { colors: { brand: { primary: '#4F46E5', 'on-primary': '#FFFFFF', surface: '#1E293B', background: '#0F172A', }, }, borderRadius: { sm: '4px', md: '8px', lg: '16px', }, fontFamily: { sans: ['Inter', 'sans-serif'], }, }, }, plugins: [], }; export default config;

Anbindung über CSS Custom Properties

Sie können die Variablen auch in die Datei globals.css importieren:

css

:root { --color-primary: #4f46e5; --color-on-primary: #ffffff; --color-surface: #1e293b; --radius-md: 8px; --spacing-base: 8px; }

Synchronisation mit Figma über Tokens Studio

Der YAML-Block aus der Datei DESIGN.md kann in das JSON-Format (tokens.json) konvertiert und in das Plugin Tokens Studio for Figma importiert werden, um sofort einen Satz Figma Variables zu erstellen.

8. Praktische Business-Szenarien und Use Cases

Der Design-System-Extractor ist ein unverzichtbares Werkzeug für schnelle Produktentwicklung und Analytik.

Vier Hauptszenarien der Anwendung

Reverse-Engineering und Wettbewerbsanalyse: Holen Sie sich die vollständige Stil-Aufschlüsselung von Branchenführern (Linear, Vercel, Apple, Stripe), bevor Sie die erste Zeile eigenen CSS schreiben.
Onboarding auf neue Kundenprojekte: Statt langwieriger Befragungen des Kunden zum Brandbook genügt es, den Extraktor auf deren aktueller Website laufen zu lassen, um innerhalb einer Minute eine fertige Stilbasis zu erhalten.
MVP-Aufbau ohne Designer: Startup-Gründer können die visuelle Harmonie eines erfolgreichen Produkts als Grundlage nehmen, Akzentfarben anpassen und so vom ersten Tag an einen professionellen Look der App erreichen.
Speisung agentischer Systeme: Die Datei DESIGN.md dient als systemischer Kontext für andere AI-Assistenten und stellt sicher, dass von Modellen generierte neue Seiten strikt dem vorgegebenen Design-System entsprechen.

9. Praktischer Workshop: Extraktion des Design-Systems und Komponentenaufbau

Versuchen wir den gesamten Zyklus zu durchlaufen: von der Analyse der Website bis zur Erstellung einer neuen React-Komponente basierend auf den erhaltenen Tokens.

Schritt 1. Start der Extraktion der Ziel-Website

Öffnen Sie das Terminal in Ihrem Projekt und führen Sie aus:

text

Extract design system from https://news.ycombinator.com or your preferred inspiration website

Claude sammelt die Daten und generiert DESIGN.md.

Schritt 2. Überprüfung des generierten UI-Kits

Öffnen Sie die erhaltene Vorschau im Webbrowser:

bash

open design-preview.html

Stellen Sie sicher, dass Palette, Kontraste und typografische Größen der Ästhetik der Website entsprechen.

Schritt 3. Generierung einer Komponente anhand der DESIGN.md-Datei

Geben Sie Claude Code eine Aufgabe mit direktem Verweis auf die erstellte Spezifikation:

text

Using the tokens and component rules defined in DESIGN.md, create a responsive PricingCard component in src/components/PricingCard.tsx with primary and secondary CTA buttons.

Claude liest die exakten Radien, Schatten und Farben aus DESIGN.md und erstellt eine Komponente, die sich organisch in das Ziel-Design-System einfügt:

typescript

import React from 'react'; interface PricingCardProps { title: string; price: string; features: string[]; isPopular?: boolean; } export const PricingCard: React.FC<PricingCardProps> = ({ title, price, features, isPopular }) => { return ( <div className={`p-6 rounded-[16px] border ${isPopular ? 'border-[#4F46E5] bg-[#1E293B]' : 'border-[#475569] bg-[#0F172A]'} text-[#F8FAFC]`}> <h3 className="text-xl font-semibold mb-2">{title}</h3> <div className="text-4xl font-extrabold mb-4">{price}</div> <ul className="space-y-3 mb-6"> {features.map((feat, idx) => ( <li key={idx} className="text-sm text-[#94A3B8] flex items-center gap-2"> ✓ {feat} </li> ))} </ul> <button className="w-full py-3 rounded-[8px] bg-[#4F46E5] hover:bg-[#4338CA] text-white font-medium transition-colors"> Почати користування </button> </div> ); };

10. Schnelle Selbstüberprüfung und abschließende Checkliste

Festigen Sie Ihr Wissen über die Arbeit mit dem Design-System-Extraktor.

Kontrollfragen

Tipp

1. Woher nimmt der DESIGN.md Extractor die exakten Werte für Farben und Schriften?

Antwort: Der Skill liest echte CSS Custom Properties (:root) und berechnete Stile (Computed Styles) direkt aus dem DOM der Live-Site, statt Werte zufällig zu generieren.

Tipp

2. Welche zwei Schlüsseldateien entstehen durch die Arbeit des Skills?

Antwort: Das maschinenlesbare Dokument DESIGN.md (mit YAML-Header und 7 Textabschnitten) sowie die eigenständige Offline-Vorschauseite design-preview.html.

Tipp

3. Wie hilft die Datei DESIGN.md bei der Arbeit anderer Claude AI-Skills?

Antwort: Sie dient als strenger Design-Kontext: AI-Interface-Generatoren lesen die Tokens aus DESIGN.md und erstellen neue Komponenten, die zu 100 % mit dem Corporate Style übereinstimmen.

Checkliste für die Bereitschaft des extrahierten Design-Systems

Die Datei DESIGN.md enthält einen validen YAML-Frontmatter-Block mit Tokens für Farben, Schriften und Abstände.
Alle 7 Textabschnitte beschreiben die Spezifika der untersuchten Marke ohne allgemeine Klischees.
Die Datei design-preview.html öffnet korrekt lokal im Browser ohne Konsolenfehler.
Die Kontraste der Akzentfarben wurden auf Einhaltung der WCAG-Zugänglichkeitsstandards überprüft.
Die Tokens wurden in tailwind.config.ts oder globals.css des Zielprojekts übertragen.
Die generierten ersten Interface-Komponenten wurden auf Kompatibilität mit dem allgemeinen Grid getestet.