Guía

Dale a tu agente de programación especificaciones de diseño bajo demanda con MCP

Tu agente puede obtener una especificación de diseño igual que obtiene documentación. Conecta el servidor MCP de Design Extractor y el agente podrá extraer el DESIGN.md de cualquier sitio público, esperar a la extracción, leer el archivo y trabajar a partir de él, todo dentro de una misma tarea.

Sin copiar archivos de un lado a otro y sin pestañas del navegador: nombras un sitio en el prompt y la especificación llega al contexto del agente.

Escrita para desarrolladores que crean agentes y flujos con agentes. Actualizada el .

Qué vas a conseguir

  • El servidor MCP conectado a Claude Code, Codex, Cursor o claude.ai, con sesión iniciada con tu cuenta o con una clave de API.
  • El flujo de herramientas que sigue un agente: comprobar, extraer, esperar, leer.
  • Prompts que hacen que el agente complete todo el ciclo, de la extracción a la interfaz.
  • Lo que cuesta y los límites que hay que tener en cuenta.

Qué recibe el agente

El servidor está en https://www.design-extractor.com/api/mcp y usa HTTP con streaming. 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. Cada extracción también aparece en Mis extracciones en el sitio, como cualquier otra.

El archivo es el mismo que genera el sitio: tokens de colores, tipografía, espaciado, radios y componentes arriba, y las reglas para usarlos debajo. Sigue la especificación DESIGN.md de Google, así que el agente puede leerlo como cualquier otra especificación.

Conecta el servidor

Elige tu cliente. Claude Code, Codex, claude.ai, Claude Desktop y ChatGPT inician sesión con tu cuenta; Cursor y los scripts usan una clave de API.

  1. Añade el servidor una vez. No hace falta clave.

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

  2. Ejecuta /mcp, elige design-extractor y luego Authenticate. Inicia sesión y aprueba en la página que se abre.

  3. Pide un sitio: “extrae el diseño de stripe.com”.

Claude Code, Codex, claude.ai, Claude Desktop y ChatGPT inician sesión con tu cuenta. Cursor, n8n y los scripts usan una clave de API personal de la página de tu cuenta.

Para Claude Code y Codex también hay un plugin. Incluye el servidor junto con un skill apply-designmd que guía al agente para extraer un sitio de referencia y aplicar su DESIGN.md a tu base de código. Después de instalarlo, ejecuta /mcp en Claude Code y autentica el servidor del plugin.

/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

Todos los clientes, el fragmento del Agent SDK y la configuración de las claves están en la página de documentación del servidor MCP.

Las herramientas y el orden en que llamarlas

HerramientaQué hace
list_my_extractionsTus extracciones, de la más reciente a la más antigua. Llámala primero para no pagar dos veces por un sitio que ya tienes.
get_pricingEl coste actual en créditos de una extracción.
get_creditsTu saldo de créditos restante.
extract_designInicia la extracción de una URL pública y gasta los créditos. Pasa tier PRO para recorrer las páginas clave del sitio. Responde en cuanto la extracción entra en la cola.
get_extractionRecibe el nombre o la URL del sitio. Devuelve el estado mientras la extracción avanza y después el texto completo del DESIGN.md. Una extracción fallida explica el motivo.

Una extracción tarda al menos un minuto, así que el flujo es iniciar y después consultar. El propio servidor se lo dice al agente; tú solo nombras el sitio.

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

Ejemplo práctico: Supabase

Supongamos que le piden al agente crear algo con el estilo de supabase.com. Cuando get_extraction indica que la extracción está completa, devuelve todo el DESIGN.md como texto. El DESIGN.md de Supabase de la galería viene del mismo tipo de extracción Pro, así que muestra lo que llega al contexto del agente. Empieza así:

El principio del DESIGN.md de Supabase de la galería, abreviado a unos pocos tokens por grupo.
---
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
---

Extraído del sitio web público de Supabase, no es una guía de marca oficial. Leer el DESIGN.md completo de Supabase

Debajo de los tokens vienen las secciones que el agente lee para obtener reglas y recetas: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts, Responsive Behavior, Iteration Guide, Known Gaps. Solo la sección Components contiene 49 recetas en HTML y CSS, así que el agente reconstruye un botón o una tarjeta a partir de valores medidos en lugar de adivinarlos.

Prompts

Nombra las herramientas, el sitio y qué hacer con el archivo. Estos prompts se escribieron para esta guía; cambia el sitio y la tarea.

Extraer y crear en una sola tarea

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.

Compara antes de elegir

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.

¿Estás creando tu propio agente? Pasa el servidor en la opción mcpServers del Agent SDK con una clave de API y permite mcp__design-extractor__*; la documentación de MCP tiene el fragmento completo.

Créditos y límites

  • Los mismos créditos que en el sitio. Una extracción Pro cuesta 10 créditos, tanto si la inicias en el sitio como si la inicia tu agente. Recarga en Precios.
  • No se cobra dos veces por tus extracciones recientes. Si pides un sitio que extrajiste hace poco, se reutiliza esa extracción.
  • Solo páginas públicas. No se admiten páginas detrás de un inicio de sesión, en localhost o en una red privada.
  • Claves. Hasta cinco claves de API activas, cada una válida durante un año y revocable en la página de tu cuenta. Un cliente con sesión iniciada renueva su propio token; desconéctalo en la misma página.

Preguntas frecuentes

Especificaciones de diseño para agentes por MCP: preguntas

Respuestas breves a lo que la gente pregunta antes de probarlo.

Sí. Usa la misma cuenta y los mismos créditos prepago: una extracción Pro cuesta 10 créditos. El agente puede llamar a get_pricing para ver el coste actual y a get_credits para ver tu saldo; cuando el saldo no alcanza, extract_design lo rechaza y lo indica.

No para los clientes que inician sesión: claude.ai, Claude Desktop, ChatGPT, Claude Code y Codex abren una página de consentimiento una vez y guardan un token que se renueva solo. Cursor, n8n, los scripts y el Agent SDK usan una clave de API personal de la página de tu cuenta.

Al menos un minuto. extract_design responde enseguida; el agente espera alrededor de un minuto y luego llama a get_extraction con el sitio cada 25 segundos hasta que el DESIGN.md está listo.

No por un sitio que extrajiste hace poco: si lo vuelves a pedir, se reutiliza tu extracción y la respuesta indica que no se cobraron créditos. Un sitio que solo extrajeron otras personas sigue costando el precio normal. list_my_extractions muestra lo que ya tienes.

No. El servidor captura la página a partir de su URL, así que no se admiten páginas detrás de un inicio de sesión, en localhost o en una red privada. Publica una vista previa pública o extrae el sitio en vivo.

¿Quieres ver un DESIGN.md antes de conectarlo?

Haz una extracción en el sitio. Tu agente recibe el mismo archivo a través del servidor.

Obtén un DESIGN.md de cualquier sitio web

Guías relacionadas

Ver todas las guías de DESIGN.md