Anleitung

Gib deinem Coding-Agenten Design-Specs auf Abruf, per MCP

Dein Agent kann eine Design-Spec abrufen wie eine Dokumentation. Verbinde den MCP-Server von Design Extractor, und der Agent kann die DESIGN.md jeder öffentlichen Website extrahieren, auf die Extraktion warten, die Datei lesen und daraus bauen, alles in einer Aufgabe.

Kein Hin- und Herkopieren von Dateien, kein Browser-Tab: Du nennst im Prompt eine Website, und die Spec landet im Kontext des Agenten.

Geschrieben für Entwickler, die Agenten und Agent-Workflows bauen. Aktualisiert am .

Das bekommst du

  • Der MCP-Server, verbunden mit Claude Code, Codex, Cursor oder claude.ai und angemeldet mit deinem Konto oder einem API-Schlüssel.
  • Der Tool-Ablauf, dem ein Agent folgt: prüfen, extrahieren, warten, lesen.
  • Prompts, mit denen der Agent den ganzen Ablauf erledigt, von der Extraktion bis zur UI.
  • Was es kostet und mit welchen Limits du planen musst.

Was der Agent bekommt

Der Server läuft unter https://www.design-extractor.com/api/mcp und spricht Streamable HTTP. Darüber kann ein Agent eine Extraktion einer öffentlichen Website starten, auf sie warten, die fertige DESIGN.md lesen, Preis und Guthaben prüfen und auflisten, was du bisher extrahiert hast. Jede Extraktion erscheint außerdem wie jede andere unter „Meine Extraktionen“ auf der Website.

Die Datei ist dieselbe, die die Website erzeugt: oben Tokens für Farben, Typografie, Abstände, Radien und Komponenten, darunter die Regeln für ihren Einsatz. Sie folgt der DESIGN.md-Spezifikation von Google, deshalb kann der Agent sie wie jede andere Spezifikation lesen.

Verbinde den Server

Wähl deinen Client. Claude Code, Codex, claude.ai, Claude Desktop und ChatGPT melden sich mit deinem Konto an; Cursor und Skripte nutzen einen API-Schlüssel.

  1. Füge den Server einmal hinzu. Kein Schlüssel nötig.

    claude mcp add --transport http design-extractor https://www.design-extractor.com/api/mcp

  2. Führe /mcp aus, wähle design-extractor und dann Authenticate. Melde dich auf der Seite an, die sich öffnet, und bestätige.

  3. Frag nach einer Website: „Extrahiere das Design von stripe.com“.

Claude Code, Codex, claude.ai, Claude Desktop und ChatGPT melden sich mit deinem Konto an. Cursor, n8n und Skripte nutzen einen persönlichen API-Schlüssel von der Kontoseite.

Für Claude Code und Codex gibt es außerdem ein Plugin. Es bündelt den Server mit einem apply-designmd-Skill, der den Agenten durch das Extrahieren einer Referenz-Website und das Anwenden ihrer DESIGN.md auf deine Codebasis führt. Führe nach der Installation /mcp in Claude Code aus und authentifiziere den Server des Plugins.

/plugin marketplace add Magentix-Studio/design-extractor-plugin
/plugin install design-extractor@design-extractor
codex plugin marketplace add Magentix-Studio/design-extractor-plugin
codex plugin add design-extractor@design-extractor

Alle Clients, das Snippet für das Agent SDK und die Einstellungen für API-Schlüssel findest du auf der Doku-Seite zum MCP-Server.

Die Tools und die Reihenfolge ihrer Aufrufe

ToolWas es tut
list_my_extractionsDeine Extraktionen, neueste zuerst. Ruf es zuerst auf, damit du für eine Website, die du schon hast, nicht doppelt zahlst.
get_pricingDie aktuellen Credit-Kosten einer Extraktion.
get_creditsDein verbleibendes Credit-Guthaben.
extract_designStartet eine Extraktion einer öffentlichen URL und verbraucht die Credits. Übergib tier PRO, um die wichtigsten Seiten der Website auszuwerten. Kehrt zurück, sobald die Extraktion in der Warteschlange ist.
get_extractionNimmt den Namen oder die URL der Website. Liefert den Status, solange die Extraktion läuft, danach den vollständigen Text der DESIGN.md. Eine fehlgeschlagene Extraktion nennt den Grund.

Eine Extraktion dauert mindestens eine Minute, deshalb lautet der Ablauf: starten, dann abfragen. Das sagt der Server dem Agenten selbst; du nennst nur die Website.

1. list_my_extractions    is the site already there?
2. extract_design         url and tier PRO
3. wait about 60 seconds
4. get_extraction         site name, every 25 seconds until COMPLETED
5. save the DESIGN.md text and build from it

Praxisbeispiel: Supabase

Angenommen, der Agent soll im Stil von supabase.com bauen. Wenn get_extraction die Extraktion als abgeschlossen meldet, liefert es die ganze DESIGN.md als Text. Die DESIGN.md von Supabase in der Galerie stammt aus derselben Art von Pro-Extraktion, sie zeigt also, was im Kontext des Agenten landet. Sie beginnt so:

Der Anfang der DESIGN.md von Supabase aus der Galerie, gekürzt auf ein paar Tokens pro Gruppe.
---
name: Supabase
colors:
  primary: "#0E7E4E"
  primary-fill: "#007243"
  primary-deep: "#15593B"
  focus-ring: "#30BA79"
  brand: "#3FCF8E"
  brand-tint: "#A9F1CA"
typography:
  hero-display:
    fontFamily: Manrope
    fontSize: 46px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: normal
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 450
    lineHeight: 1.5
    letterSpacing: normal
rounded:
  xs: 2.66667px
  sm: 4px
  md: 5.33333px
---

Extrahiert aus der öffentlichen Website von Supabase, keine offiziellen Markenrichtlinien. Die vollständige DESIGN.md von Supabase lesen

Unter den Tokens folgen die Abschnitte, die der Agent für Regeln und Rezepte liest: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts, Responsive Behavior, Iteration Guide, Known Gaps. Allein der Abschnitt Components enthält 49 Rezepte in HTML und CSS, sodass der Agent einen Button oder eine Karte aus gemessenen Werten nachbaut, statt sie zu raten.

Prompts

Nenne die Tools, die Website und was mit der Datei passiert. Diese Prompts wurden für diese Anleitung geschrieben; ändere Website und Aufgabe.

Extrahieren und bauen in einer Aufgabe

Use the design-extractor tools to get a Pro DESIGN.md of supabase.com.
Check list_my_extractions first, so we don't pay twice for a recent run.
When it is complete, save it as DESIGN.md in the repo root.
Then restyle src/app/settings with its color, typography and rounded tokens
and its component recipes. Keep the layout and logic as they are.

Vergleichen, bevor du wählst

Get Pro DESIGN.md files for supabase.com and linear.app with the design-extractor tools.
Compare their primary colors, fonts and radii in a short table,
and tell me which one fits a dense admin dashboard better and why.

Du baust deinen eigenen Agenten? Übergib den Server im Agent SDK über die Option mcpServers mit einem API-Schlüssel und erlaube mcp__design-extractor__*; die MCP-Doku enthält das vollständige Snippet.

Credits und Limits

  • Dieselben Credits wie auf der Website. Eine Pro-Extraktion kostet 10 Credits, egal ob du sie auf der Website startest oder dein Agent. Credits aufladen kannst du unter Preise.
  • Keine doppelte Abbuchung für deine eigenen kürzlichen Extraktionen. Fragst du nach einer Website, die du kürzlich extrahiert hast, wird diese Extraktion wiederverwendet.
  • Nur öffentliche Seiten. Seiten hinter einem Login, auf localhost oder in einem privaten Netzwerk werden nicht unterstützt.
  • Schlüssel. Bis zu fünf aktive API-Schlüssel, jeder ein Jahr gültig und auf deiner Kontoseite widerrufbar. Ein angemeldeter Client erneuert sein Token selbst; trenne seine Verbindung auf derselben Seite.

FAQ

Design-Specs für Coding-Agenten per MCP: Fragen

Kurze Antworten auf das, was Leute fragen, bevor sie es ausprobieren.

Ja. Sie nutzt dasselbe Konto und dieselben vorausbezahlten Credits: Eine Pro-Extraktion kostet 10 Credits. Der Agent kann get_pricing für die aktuellen Kosten und get_credits für dein Guthaben aufrufen; reicht das Guthaben nicht, lehnt extract_design ab und sagt das.

Nicht für Clients mit Anmeldung: claude.ai, Claude Desktop, ChatGPT, Claude Code und Codex öffnen einmal eine Zustimmungsseite und behalten ein Token, das sich selbst erneuert. Cursor, n8n, Skripte und das Agent SDK nutzen einen persönlichen API-Schlüssel von deiner Kontoseite.

Mindestens eine Minute. extract_design kehrt sofort zurück; der Agent wartet etwa eine Minute und ruft dann alle 25 Sekunden get_extraction mit der Website auf, bis die DESIGN.md fertig ist.

Nicht für eine Website, die du kürzlich extrahiert hast: Eine erneute Anfrage nutzt deine Extraktion wieder, und die Antwort sagt, dass keine Credits abgebucht wurden. Eine Website, die nur andere extrahiert haben, kostet weiterhin den normalen Preis. list_my_extractions zeigt, was du schon hast.

Nein. Der Server erfasst die Seite über ihre URL, deshalb werden Seiten hinter einem Login, auf localhost oder in einem privaten Netzwerk nicht unterstützt. Stell eine öffentliche Vorschau bereit oder extrahiere die Live-Website.

Willst du eine DESIGN.md sehen, bevor du verbindest?

Starte eine Extraktion auf der Website. Dein Agent bekommt über den Server dieselbe Datei.

DESIGN.md aus jeder Website erstellen

Verwandte Anleitungen

Alle DESIGN.md-Anleitungen ansehen