# DESIGN.md-Extraktor: Analyse des Designs beliebiger Websites mit Claude > Ein umfassender praktischer Leitfaden zur Nutzung des DESIGN.md-Extractor-Skills für Claude Code: Extraktion visueller Tokens, Generierung der DESIGN.md-Datei, interaktive HTML-Vorschau und Export in Tailwind CSS. ## 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 сайту або назва бренду
'stripe.com'"] --> B["Claude Code + design-md-extractor"] B --> C["DOM & CSS Parser
(Зчитування :root змінних, обчислення стилів)"] C --> D["Екстракція 4 категорій токенів
(Кольори, шрифти, відступи, радіуси)"] D --> E["Генерація DESIGN.md
(YAML-специфікація + дизайн-бриф)"] D --> F["Збірка design-preview.html
(Офлайн UI-кіт на чистих токенах)"] 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 | > [!NOTE] > 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 1. **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. 2. **Parsing globaler Variablen (`:root`):** Der Agent findet deklarierte CSS Custom Properties (`--color-primary`, `--font-sans`, `--spacing-unit`, `--radius-lg`). 3. **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. 4. **Normalisierung und Strukturierung:** Rohfarben werden in das kanonische HEX/OKLCH-Format gebracht, und Schriftarten werden mit dem Google Fonts-Katalog oder System-Stacks abgeglichen. 5. **Generierung der Artefakte:** Erstellung der Spezifikationsdatei `DESIGN.md` und Zusammenstellung einer eigenständigen HTML-Vorschauseite. > [!TIP] > 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: 1. **Brand & Style Personality:** Tonality der Marke (z. B. *"Strenge ingenieurtechnische Minimalismus im Stil von Linear"* oder *"Warmes Consumer-Fintech im Stil von Stripe"*). 2. **Color Palette Rationale:** Regeln für Farbkombinationen und Anforderungen an den WCAG-AA-Kontrast. 3. **Typography Rhythm:** Regeln für die Hierarchie der Überschriften und die Ausrichtung an der Grundlinie (Baseline Alignment). 4. **Layout & Spacing Philosophy:** Prinzipien der Grid-Organisation, adaptive Breakpoints. 5. **Elevation & Depth:** Verwendung von Layering, Gradienten und Hintergrundunschärfe (backdrop-filter blur). 6. **Shape & Border Language:** Philosophie der Abrundungen, Linienstärke und Umrandungen. 7. **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["Колірна палітра
(Клік копіює HEX/RGB)"] T["Шрифтовий стенд
(Google Fonts лінійка)"] C["UI Sandbox
(Кнопки, картки, форми)"] S["Демо-екран
(Синтезований макет)"] end design_preview_html --> B["Відкриття у будь-якому браузері
(Без node_modules, без бекенду)"] ``` ### 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 :::tabs @tab Über direkte URL ```text /design-md-extractor https://linear.app ``` @tab Über Markenname ```text Create a comprehensive DESIGN.md and preview for Stripe dashboard ``` @tab Lokale Datei oder Mockup ```text Analyze the design system from our prototype at http://localhost:3000 and export DESIGN.md ``` ::: ### Was passiert nach dem Senden des Befehls 1. Claude Code startet die internen Skripte zur Stilsammlung. 2. Der Agent gibt den Scan-Fortschritt aus: Lesen der CSS-Variablen, Analysieren der Schriften, Messen der Komponenten. 3. Im Wurzelverzeichnis Ihres Repositoriums erscheinen die Dateien `DESIGN.md` und `design-preview.html`. 4. 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 1. **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. 2. **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. 3. **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. 4. **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 = ({ title, price, features, isPopular }) => { return (

{title}

{price}
); }; ``` --- ## 10. Schnelle Selbstüberprüfung und abschließende Checkliste Festigen Sie Ihr Wissen über die Arbeit mit dem Design-System-Extraktor. ### Kontrollfragen > **1. Woher nimmt der DESIGN.md Extractor die exakten Werte für Farben und Schriften?** > > > [!TIP] > > **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. > **2. Welche zwei Schlüsseldateien entstehen durch die Arbeit des Skills?** > > > [!TIP] > > **Antwort:** Das maschinenlesbare Dokument `DESIGN.md` (mit YAML-Header und 7 Textabschnitten) sowie die eigenständige Offline-Vorschauseite `design-preview.html`. > **3. Wie hilft die Datei DESIGN.md bei der Arbeit anderer Claude AI-Skills?** > > > [!TIP] > > **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.