MCP-Server

Der Server liegt unter https://www.design-extractor.com/api/mcp, spricht Streamable HTTP und akzeptiert zwei Zugangsarten: eine Anmeldung mit deinem Konto über den standardisierten MCP-Autorisierungsablauf (OAuth 2.1) oder einen persönlichen API-Schlüssel, gesendet als Authorization: Bearer dx_.... Darüber kann ein Agent die 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. Das Ergebnis erscheint außerdem wie jede andere Extraktion in Meine Extraktionen.

Für Claude Code und Codex gibt es zusätzlich ein Plugin, das den Server mit einem apply-designmd-Skill bündelt: Er führt den Agenten durch die Extraktion einer Referenz-Website und überträgt die Tokens auf Tailwind, CSS-Variablen oder eine Token-Datei. Quellcode und Installationshinweise unter Magentix-Studio/design-extractor-plugin.

claude.ai, Claude Desktop, ChatGPT, Claude Code und Codex verbinden sich ohne Schlüssel: Der Client findet die Anmeldung über die Server-URL, du bestätigst einmal im Browser, und der Client hält einen Token, den er selbst erneuert. Nichts einzufügen, nichts zu rotieren.

1. 1

   Server-URL in den Connector-Einstellungen hinzufügen

   claude.ai und Claude Desktop: Settings, Connectors, Add custom connector, dann https://www.design-extractor.com/api/mcp einfügen. ChatGPT: Settings, Connectors, Create, dieselbe URL.

2. 2

   Auf der Zustimmungsseite bestätigen

   Der Client öffnet Design Extractor im Browser. Melde dich an, falls du es noch nicht bist, prüfe, was der Agent anfragt, und bestätige. Extraktionen, die er startet, verbrauchen deine Credits wie jede andere.

3. 3

   Nach einer Website fragen

   „Extrahiere das Design von stripe.com“ reicht. Der Agent erscheint unter „Verbundene Agenten“ auf deiner Kontoseite, wo du ihn mit einem Klick trennst. Ein in claude.ai hinzugefügter Connector erscheint von selbst auch in Claude Code, eine Bestätigung deckt also beides ab.

Claude Code und Codex melden sich im Terminal genauso an: Füge den Server ohne Schlüssel hinzu und authentifiziere dich, wenn der Client fragt. Die genauen Befehle stehen unter Claude Code und Codex.

Ein Befehl registriert den Server für das aktuelle Projekt, kein Schlüssel nötig. Mit --scope user ist er in jedem Projekt verfügbar.

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

Führe dann /mcp aus, wähle design-extractor und dann Authenticate. Melde dich auf der Seite an, die sich öffnet, und bestätige; Claude Code speichert den Token und erneuert ihn selbst.

Oder installiere das Plugin, das den Server und den apply-designmd-Skill hinzufügt. Sein Server meldet sich genauso an: Führe nach der Installation /mcp aus, wähle den Server des Plugins und authentifiziere dich.

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

Um stattdessen einen API-Schlüssel zu nutzen, etwa auf einem Rechner, der keinen Browser öffnen kann, übergib ihn als Header und überspring die Authentifizierung.

claude mcp add --transport http design-extractor https://www.design-extractor.com/api/mcp \
  --header "Authorization: Bearer dx_..."

Prüfe, ob /mcp design-extractor als verbunden anzeigt. Die Tools heißen nach claude mcp add mcp__design-extractor__extract_design und so weiter, und mcp__plugin_design-extractor_design-extractor__extract_design, wenn der Server aus dem Plugin kommt.

Füge den Server ohne Schlüssel hinzu, und Codex öffnet sofort die Anmeldung. Melde dich auf der Seite an, die sich öffnet, und bestätige; codex mcp login design-extractor wiederholt das später bei Bedarf.

codex mcp add design-extractor --url https://www.design-extractor.com/api/mcp

Oder installiere dasselbe Plugin aus seinem Marketplace. In der Codex CLI öffnet /plugins die Übersicht, in der Marketplace-Einträge installiert und aktiviert werden; fragt sein Server nach Authentifizierung, öffnet codex mcp login design-extractor die Anmeldung.

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

Um stattdessen einen API-Schlüssel zu nutzen, gib die Umgebungsvariable an, die ihn enthält, und exportiere sie in der Shell, aus der du Codex startest; sonst wird der Server als fehlgeschlagen mit null Tools angezeigt.

export DESIGN_EXTRACTOR_API_KEY=dx_...

codex mcp add design-extractor --url https://www.design-extractor.com/api/mcp \
  --bearer-token-env-var DESIGN_EXTRACTOR_API_KEY

Dieselbe Deklaration von Hand in ~/.codex/config.toml; um den Schlüssel direkt einzutragen, nutze stattdessen http_headers = { "Authorization" = "Bearer dx_..." }.

[mcp_servers.design-extractor]
url = "https://www.design-extractor.com/api/mcp"
bearer_token_env_var = "DESIGN_EXTRACTOR_API_KEY"

Füge den Server zu .cursor/mcp.json im Projekt hinzu oder zu ~/.cursor/mcp.json für alle Projekte. Cursor akzeptiert im Header-Wert auch ${env:DESIGN_EXTRACTOR_API_KEY}, wenn du den Schlüssel lieber aus der Datei heraushältst.

{
  "mcpServers": {
    "design-extractor": {
      "url": "https://www.design-extractor.com/api/mcp",
      "headers": {
        "Authorization": "Bearer dx_..."
      }
    }
  }
}

Übergib den Server in options.mcpServers mit type: "http" und dem Header, und erlaube seine Tools mit einem Platzhalter, damit der Agent sie ohne Berechtigungsabfrage aufrufen kann.

import { query } from "@anthropic-ai/claude-agent-sdk";

for await (const message of query({
  prompt: "Extract the design system of https://example.com and summarize its colors",
  options: {
    mcpServers: {
      "design-extractor": {
        type: "http",
        url: "https://www.design-extractor.com/api/mcp",
        headers: {
          Authorization: `Bearer ${process.env.DESIGN_EXTRACTOR_API_KEY}`,
        },
      },
    },
    allowedTools: ["mcp__design-extractor__*"],
  },
})) {
  if (message.type === "result" && message.subtype === "success") {
    console.log(message.result);
  }
}

Eine Extraktion über den Server kostet genau so viel wie auf der Website. Lite extrahiert eine Seite, Pro wertet die wichtigsten Seiten der Website aus. Die aktuellen Preise liefert get_pricing (6 Credits für Lite und 10 für Pro zum Zeitpunkt des Schreibens), dein Guthaben get_credits. Reicht das Guthaben nicht für die Stufe, lehnt extract_design ab und sagt das; aufladen kannst du unter Preise.

Fragst du nach einer Website, die du kürzlich extrahiert hast, wird deine Extraktion wiederverwendet, statt eine neue zu starten, und die Antwort sagt, dass keine Credits berechnet wurden; eine Website, die nur andere extrahiert haben, kostet trotzdem den Preis ihrer Stufe. Führe zuerst list_my_extractions aus, um zu sehen, was schon da ist.

Manche Websites antworten nur Besuchern aus bestimmten Ländern. Scheitert eine Extraktion daran, listet get_extraction die Länder auf, aus denen die Seite lädt, und der Agent kann es mit extract_design und country erneut versuchen. Eine Extraktion aus einem anderen Land kostet den Preis der Stufe plus einen Aufpreis, beides aufgeführt von get_pricing.