/ Directorio / Playground / Design Extract
← Todos los servidores ↗ GitHub
● Comunidad Manavarya09 ⚡ Instantáneo

Design Extract

por Manavarya09 · Manavarya09/design-extract

Apunta Claude a cualquier URL de sitio web y obtén un sistema de diseño completo — tokens DTCG, primitivos, semánticos y exportaciones para iOS, Android, Tailwind y Figma.

Design Extract rastrea un sitio objetivo con Playwright, audita el CSS renderizado, lo destila en niveles de tokens conformes con DTCG (primitivo / semántico / compuesto) y genera código listo para usar: SwiftUI, Jetpack Compose, Flutter, Tailwind v4, theme.json de WordPress, variables de Figma y mappings de shadcn/ui. Diseñado para diseñadores e ingenieros que necesitan clonar o auditar una identidad visual existente en minutos, no en un sprint.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por qué usarlo

Características clave

Demo en vivo

Cómo se ve en la práctica

design-extract-mcp.replay ▶ listo
0/0

Instalar

Elige tu cliente

~/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"
      ]
    }
  }
}

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "design-extract-mcp",
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  ]
}

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json
{
  "context_servers": {
    "design-extract-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "design-extract-mcp"
        ]
      }
    }
  }
}

Añádelo a context_servers. Zed recarga en caliente al guardar.

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

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: Design Extract

Cómo clonar el sistema visual de una marca a tokens DTCG

👤 Ingenieros de diseño, equipos de agencias, equipos de producto alineados con la marca ⏱ ~25 min intermediate

Cuándo usarlo: Estás reconstruyendo un sitio de marketing o app desde una referencia y necesitas sus tokens en 10 minutos, no una sesión de copiado en Figma.

Requisitos previos
  • URL pública del sitio de referencia — p. ej. https://stripe.com — debe ser accesible públicamente
Flujo
  1. Extraer
    Usa design-extract en https://stripe.com. Genera tokens DTCG, SwiftUI y Tailwind v4. Guarda en /tokens/.✓ Copiado
    → tokens.json + tokens.swift + tailwind.css escritos; informe de cobertura
  2. Auditar
    Ejecuta la pasada de salud CSS y la remediación WCAG. Señala todo lo que esté por debajo de AA.✓ Copiado
    → Informe de auditoría con pares fallidos y sugerencias
  3. Aplicar
    Ahora genera una página Next.js de inicio usando estos tokens — nav, hero, 3 tarjetas de características.✓ Copiado
    → La página se renderiza con la identidad visual de la marca

Resultado: Un conjunto de tokens + auditoría + página de inicio, todo derivado de una URL.

Errores comunes
  • El sitio está fuertemente bloqueado por SSR o detrás de login — Proporciona una cookie de sesión autenticada mediante la extensión o un paso previo personalizado de Playwright
Combinar con: filesystem

Audita tu propio sitio para detectar desviaciones del sistema de diseño

👤 Responsables internos del sistema de diseño ⏱ ~30 min intermediate

Cuándo usarlo: Sospechas que 47 colores no autorizados se colaron en producción. Confírmalo.

Flujo
  1. Inventario
    Ejecuta design-extract contra https://tusitio.com. No generes código — solo reporta colores únicos, familias tipográficas y valores de espaciado usados.✓ Copiado
    → Recuentos de valores distintos por categoría
  2. Comparar con la fuente
    Compara contra /design/tokens.json. Señala cada valor usado en producción que no esté en la fuente de verdad.✓ Copiado
    → Tabla de desviaciones con referencias de archivo/componente
  3. Planificar limpieza
    Agrupa las desviaciones por causa probable (CSS legado, estilo ad-hoc, token incorrecto). Sugiere un plan de limpieza en 3 PRs.✓ Copiado
    → Plan de PR redactado

Resultado: Un informe concreto de desviaciones que puedes entregar a ingeniería, no una queja vaga de 'tenemos inconsistencias'.

Errores comunes
  • La herramienta sobreestima porque usa variables CSS que se resuelven en tiempo de ejecución — Pasa --resolve-vars para que trace las cadenas var(--x) antes de contar
Combinar con: filesystem

Genera variables de Figma a partir de un sitio en producción

👤 Diseñadores que necesitan sincronizar el código en Figma ⏱ ~15 min beginner

Cuándo usarlo: El código se publicó primero; diseño necesita ponerse al día en Figma.

Flujo
  1. Generar JSON de Figma
    Usa design-extract en https://tusitio.com con output=figma-variables. Guarda en /design/figma-vars.json.✓ Copiado
    → JSON de variables de Figma importable
  2. Importar
    Explícame cómo importar esto con el plugin Figma Variables Import.✓ Copiado
    → Instrucciones paso a paso del plugin

Resultado: Archivo de Figma sincronizado con el código publicado, sin goteo manual de color.

Errores comunes
  • Los nombres de token colisionan con variables de Figma existentes — Usa el flag --prefix para añadir namespace, p. ej. site/color.bg.primary

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

design-extract-mcp + filesystem

Persiste las salidas de tokens en tu repo para que ejecuciones sucesivas puedan comparar

design-extract-mcp + Figma-Context-MCP

Sincronización bidireccional — extrae del sitio en producción y devuelve a Figma

Herramientas

Lo que expone este MCP

HerramientaEntradasCuándo llamarCoste
extract url, output_format[]: dtcg|swiftui|compose|flutter|tailwind|figma|wordpress|shadcn Punto de entrada principal 1 rastreo con Playwright
audit_css_health url Después o en lugar de extract, cuando el objetivo es salud y no clonación 1 rastreo
wcag_remediate tokens Después de extract, antes de publicar los tokens gratis (post-proceso)
diff_tokens url, source_tokens_path Auditoría de desviaciones en tu propio sitio 1 rastreo

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API
Local — depende de tu máquina
Tokens por llamada
1500–6000 por resumen de extracción
Monetario
Gratis (MIT)
Consejo
No extraigas en cada PR — guarda el resultado en caché y ejecuta solo en cambios

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: Ninguno, a menos que el objetivo requiera autenticación (entonces mediante archivo de cookies)
Salida de datos: Solo a la URL que especifiques. Playwright se ejecuta localmente.

Resolución de problemas

Errores comunes y soluciones

Playwright Chromium no se lanza

Ejecuta npx playwright install chromium una vez

Verificar: `npx playwright --version` muestra una versión
El sitio bloquea el navegador headless

Pasa --headed o proporciona un proxy residencial / archivo de cookies

Los tokens de salida parecen incompletos

El sitio usa CSS-in-JS pesado — prueba --wait-for-selector main para asegurar que la SPA termine de pintarse

Alternativas

Design Extract vs otros

AlternativaCuándo usarlaContrapartida
Figma-Context-MCP (GLips)La fuente de verdad es Figma, no un sitio en producciónFigma MCP necesita un archivo de Figma; design-extract funciona desde cualquier URL
Plugin Tokens StudioYa estás en Figma y quieres una UI de gestión de tokensManual; design-extract automatiza la extracción inicial

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills