Design Extract (MCP server) — Anwendungsfälle, Installieren & Live-Demo

Warum nutzen

Hauptfunktionen

Dreistufige DTCG-Token-Ausgabe (primitive → semantic → composite)
Multi-Plattform-Emitter: SwiftUI, Compose, Flutter, Tailwind v4, Figma
WCAG-Sanierungspass — markiert fehlschlagende Paare und schlägt Korrekturen vor
CSS-Gesundheitsaudit (Spezifität, tote Regeln, redundante Token)
Chrome-Extension-Begleiter für One-Click-Erfassung
Playwright-basiert, Node 20+, MIT-lizenziert

Live-Demo

In der Praxis

design-extract-mcp.replay ▶ bereit

0/0

Installieren

Wählen Sie Ihren Client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

Cursor nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "design-extract-mcp",
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  ]
}

Continue nutzt ein Array von Serverobjekten statt einer Map.

~/.config/zed/settings.json

{
  "context_servers": {
    "design-extract-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "design-extract-mcp"
        ]
      }
    }
  }
}

In context_servers hinzufügen. Zed lädt beim Speichern neu.

claude mcp add design-extract-mcp -- npx -y design-extract-mcp

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: Design Extract

So klonst du das visuelle System einer Marke in DTCG-Token

👤 Design-Engineers, Agentur-Teams, markengebundene Produktteams ⏱ ~25 min intermediate

Wann einsetzen: Du baust eine Marketing-Website oder App nach einer Referenz und brauchst ihre Token in 10 Minuten, nicht in einer langen Figma-Session.

Voraussetzungen

Öffentliche URL der Referenzsite — z. B. https://stripe.com — muss öffentlich erreichbar sein

Ablauf

Extrahieren

Use design-extract on https://stripe.com. Output DTCG tokens, SwiftUI, and Tailwind v4. Save to /tokens/.✓ Kopiert

→ tokens.json + tokens.swift + tailwind.css geschrieben; Bericht über Abdeckung
Prüfen

Run the CSS health pass and the WCAG remediation. Flag everything below AA.✓ Kopiert

→ Prüfbericht mit fehlschlagenden Paaren und Vorschlägen
Anwenden

Now generate a starter Next.js page using these tokens — nav, hero, 3 feature cards.✓ Kopiert

→ Seite rendert in der visuellen Markenidentität

Ergebnis: Ein Token-Set, ein Audit und eine Starter-Seite, alles aus einer einzigen URL.

Fallstricke

Site ist stark SSR-abgeschirmt oder hinter einem Login — Eingeloggten Cookie über die Extension oder einen eigenen Playwright-Vorschritt übergeben

Kombinieren mit: filesystem

Eigene Website auf Design-System-Drift prüfen

👤 Interne Design-System-Maintainer ⏱ ~30 min intermediate

Wann einsetzen: Du verdächtigst, dass 47 nicht autorisierte Farben in die Produktion geschlichen sind. Bestätige es.

Ablauf

Inventarisieren

Run design-extract against https://yoursite.com. Don't emit code — just report unique colors, font stacks, spacing values used.✓ Kopiert

→ Anzahl verschiedener Werte pro Kategorie
Mit Quelle vergleichen

Compare against /design/tokens.json. Flag every value used in production that's not in the source-of-truth.✓ Kopiert

→ Drift-Tabelle mit Datei- und Komponenten-Referenzen
Bereinigung planen

Group drift by likely cause (legacy CSS, ad-hoc style, wrong token). Suggest a 3-PR cleanup plan.✓ Kopiert

→ PR-Plan erstellt

Ergebnis: Konkreter Drift-Bericht, den du dem Engineering-Team übergeben kannst, statt einer vagen ‚Wir haben Inkonsistenzen'-Aussage.

Fallstricke

Tool meldet zu viele Werte, weil CSS-Variablen erst zur Laufzeit aufgelöst werden — --resolve-vars übergeben, damit var(--x)-Ketten vor dem Zählen aufgelöst werden

Kombinieren mit: filesystem

Figma-Variablen aus einer Live-Site generieren

👤 Designer, die Code in Figma spiegeln müssen ⏱ ~15 min beginner

Wann einsetzen: Der Code wurde zuerst geliefert; das Design muss in Figma aufholen.

Ablauf

Figma-JSON ausgeben

Use design-extract on https://yoursite.com with output=figma-variables. Save to /design/figma-vars.json.✓ Kopiert

→ Importierbares Figma-Variablen-JSON
Importieren

Walk me through importing this with the Figma Variables Import plugin.✓ Kopiert

→ Schritt-für-Schritt-Plugin-Anleitung

Ergebnis: Figma-Datei im Einklang mit dem ausgelieferten Code, ohne manuelles Eyedropping.

Fallstricke

Token-Namen kollidieren mit vorhandenen Figma-Variablen — --prefix-Flag verwenden, um z. B. site/color.bg.primary als Namensraum zu setzen

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

design-extract-mcp + filesystem

Token-Ausgaben im Repository persistieren, damit aufeinanderfolgende Läufe einen Diff erstellen können

design-extract-mcp + Figma-Context-MCP

Bidirektionale Synchronisierung — aus der Live-Site extrahieren, zurück zu Figma pushen

Werkzeuge

Was dieses MCP bereitstellt

Werkzeug	Eingaben	Wann aufrufen	Kosten
extract	url, output_format[]: dtcg\|swiftui\|compose\|flutter\|tailwind\|figma\|wordpress\|shadcn	Primärer Einstiegspunkt	1 Playwright-Crawl
audit_css_health	url	Nach oder anstelle von extract, wenn das Ziel Gesundheit statt Klonen ist	1 Crawl
wcag_remediate	tokens	Nach extract, vor der Auslieferung der Token	kostenlos (Nachverarbeitung)
diff_tokens	url, source_tokens_path	Drift-Audit auf der eigenen Site	1 Crawl

Kosten & Limits

Was der Betrieb kostet

API-Kontingent: Lokal — abhängig von deinem Rechner
Tokens pro Aufruf: 1500–6000 pro Extraktionszusammenfassung
Kosten in €: Kostenlos (MIT)
Tipp: Nicht bei jedem PR extrahieren — Ergebnis cachen und nur bei Änderungen ausführen

Sicherheit

Rechte, Secrets, Reichweite

Credential-Speicherung: Keine, außer wenn das Ziel Auth benötigt (dann per Cookie-Datei)

Datenabfluss: Nur an die von dir angepeilte URL. Playwright läuft lokal.

robots.txt und die Nutzungsbedingungen der Zielsite respektieren — dieser Ansatz ruft wie ein Browser ab, aber in größerem Umfang ist es dennoch Scraping.

Fehlerbehebung

Häufige Fehler und Lösungen

Playwright Chromium startet nicht

Einmalig npx playwright install chromium ausführen

Prüfen: `npx playwright --version` gibt eine Version aus

Site blockiert Headless-Browser

--headed übergeben oder einen Residential-Proxy / Cookie-Datei bereitstellen

Ausgabe-Token sehen unvollständig aus

Site verwendet intensives CSS-in-JS — --wait-for-selector main ausprobieren, damit der SPA-Rendervorgang abgeschlossen wird

Alternativen

Design Extract vs. andere

Alternative	Wann stattdessen	Kompromiss
Figma-Context-MCP (GLips)	Die Quelle der Wahrheit ist Figma, nicht eine Live-Site	Figma MCP benötigt eine Figma-Datei; design-extract arbeitet mit beliebigen URLs
Tokens Studio Plugin	Du arbeitest bereits in Figma und möchtest eine Token-Management-UI	Manuell; design-extract automatisiert die initiale Extraktion

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen