Servidor MCP

El servidor está en https://www.design-extractor.com/api/mcp, usa HTTP con streaming y acepta dos credenciales: un inicio de sesión con tu cuenta mediante el flujo de autorización estándar de MCP (OAuth 2.1), o una clave de API personal enviada como Authorization: Bearer dx_.... A través de él, un agente puede iniciar la extracción de un sitio público, esperar a que termine, leer el DESIGN.md terminado, consultar el precio y tu saldo, y ver lo que extrajiste antes. El resultado también aparece en Mis extracciones como cualquier otra extracción.

Para Claude Code y Codex también hay un plugin que incluye el servidor junto con un skill apply-designmd: guía al agente para extraer un sitio de referencia y trasladar los tokens a Tailwind, variables CSS o un archivo de tokens. Código fuente e instrucciones de instalación en Magentix-Studio/design-extractor-plugin.

claude.ai, Claude Desktop, ChatGPT, Claude Code y Codex se conectan sin clave: el cliente descubre el inicio de sesión a partir de la URL del servidor, apruebas una vez en el navegador y el cliente guarda un token que renueva por su cuenta. Nada que pegar, nada que rotar.

1. 1

   Añade la URL del servidor en la configuración de conectores

   claude.ai y Claude Desktop: Settings, Connectors, Add custom connector, y pega https://www.design-extractor.com/api/mcp. ChatGPT: Settings, Connectors, Create, con la misma URL.

2. 2

   Aprueba en la página de consentimiento

   El cliente abre Design Extractor en el navegador. Inicia sesión si aún no lo has hecho, revisa lo que pide el agente y apruébalo. Las extracciones que inicie gastan tus créditos como cualquier otra.

3. 3

   Pide un sitio

   Basta con “Extrae el diseño de stripe.com”. El agente aparece en Agentes conectados en la página de tu cuenta, donde puedes desconectarlo con un clic. Un conector añadido en claude.ai también aparece por sí solo en Claude Code, así que una sola aprobación sirve para ambos.

Claude Code y Codex inician sesión de la misma forma desde la terminal: añade el servidor sin clave y autentícate cuando el cliente lo pida. Los comandos exactos están en Claude Code y Codex.

Un solo comando registra el servidor para el proyecto actual, sin clave. Añade --scope user para tenerlo en todos los proyectos.

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

Después ejecuta /mcp, elige design-extractor y luego Authenticate. Inicia sesión y aprueba en la página que se abre; Claude Code guarda el token y lo renueva por su cuenta.

O instala el plugin, que añade el servidor y el skill apply-designmd. Su servidor inicia sesión de la misma forma: después de instalarlo, ejecuta /mcp, elige el servidor del plugin y autentícate.

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

Para usar una clave de API en su lugar, en una máquina que no puede abrir un navegador, pásala como cabecera y sáltate el paso de autenticación.

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

Comprueba que /mcp muestra design-extractor como conectado. Las herramientas se llaman mcp__design-extractor__extract_design, etc., tras claude mcp add, y mcp__plugin_design-extractor_design-extractor__extract_design cuando el servidor viene del plugin.

Añade el servidor sin clave y Codex abre el inicio de sesión de inmediato. Inicia sesión y aprueba en la página que se abre; codex mcp login design-extractor lo repite más adelante si hace falta.

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

O instala el mismo plugin desde su marketplace. En la CLI de Codex, /plugins abre el navegador de plugins, donde se instalan y activan las entradas del marketplace; si su servidor pide autenticación, codex mcp login design-extractor abre el inicio de sesión.

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

Para usar una clave de API en su lugar, indica la variable de entorno que la contiene y expórtala en la shell desde la que inicias Codex; si no, el servidor aparece como fallido y con cero herramientas.

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

La misma declaración a mano en ~/.codex/config.toml; para incluir la clave directamente, usa 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"

Añade el servidor a .cursor/mcp.json en el proyecto, o a ~/.cursor/mcp.json para todos los proyectos. Cursor también acepta ${env:DESIGN_EXTRACTOR_API_KEY} en el valor de la cabecera si prefieres dejar la clave fuera del archivo.

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

Pasa el servidor en options.mcpServers con type: "http" y la cabecera, y permite sus herramientas con un comodín para que el agente pueda llamarlas sin pedir permiso.

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);
  }
}

Una extracción a través del servidor cuesta exactamente lo mismo que en el sitio. Lite extrae una página, Pro recorre las páginas clave del sitio. Los precios actuales vienen de get_pricing (6 créditos para Lite y 10 para Pro en el momento de escribir esto) y tu saldo de get_credits. Cuando el saldo no cubre el modo, extract_design lo rechaza y lo indica; recarga en Precios.

Si pides un sitio que extrajiste hace poco, se reutiliza tu extracción en lugar de iniciar una nueva, y la respuesta indica que no se cobraron créditos; un sitio que solo extrajeron otras personas sigue costando el precio de su modo. Ejecuta primero list_my_extractions para ver lo que ya tienes.

Algunos sitios solo responden a visitantes de ciertos países. Cuando una extracción falla por eso, get_extraction muestra los países desde los que carga la página y el agente puede reintentar con extract_design y country. Una extracción desde otro país cuesta el precio del modo más un recargo, ambos indicados por get_pricing.