MiroMiro

Convierte cualquier sitio web en vivo en colores de marca, fuentes, tokens de diseño, SVGs, Lottie y código listo para pegar. Servidor remoto con OAuth de un clic (nivel gratuito, sin tarjeta) en https://miromiro.app/mcp, o npx miromiro-mcp localmente.

GitHubPrueba este MCPPatrocinado

Documentación

miromiro-mcp

Servidor MCP para la API de extracción de diseño MiroMiro. Dale a tu agente de IA el diseño real de cualquier sitio web en vivo: colores de marca, tipografías, tokens de diseño, SVGs, imágenes, animaciones Lottie y código de componentes listo para pegar, para que construya a partir de valores reales en lugar de adivinar desde una captura de pantalla.

Funciona con Claude (web, escritorio, Claude Code), ChatGPT, Cursor, Windsurf, Codex y cualquier cliente MCP.

Plugin para Claude Code

Instálalo como plugin para obtener las herramientas más tres habilidades que enseñan a Claude cuándo usar cada una (clone-section, match-brand, extract-assets):

claude plugin marketplace add anthropics/claude-plugins-community
claude plugin install miromiro@claude-community

El plugin usa el servidor remoto, así que no hay nada que instalar ni clave que pegar: en el primer uso abre un inicio de sesión de MiroMiro con un clic que vincula una cuenta gratuita (300 créditos/mes, sin tarjeta).

Inicio rápido: servidor remoto (nada que instalar)

Un servidor alojado está disponible en:

https://miromiro.app/mcp

Pega esa URL en cualquier cliente que acepte un servidor MCP remoto. En el primer uso abre un inicio de sesión de MiroMiro con un clic que vincula una cuenta gratuita (300 créditos/mes, sin tarjeta).

Claude (web o escritorio): Configuración → Conectores → Añadir conector personalizado → pega la URL. O usa la instalación con un clic.
ChatGPT: Configuración → Seguridad e inicio de sesión → habilita el modo Desarrollador, luego añade la URL como conector (autenticación: OAuth).
Cursor (remoto): añade { "mcpServers": { "miromiro": { "url": "https://miromiro.app/mcp" } } } a ~/.cursor/mcp.json.
Clave API cruda en lugar de OAuth: añade ?access_key=mm_live_... a la URL, o envíala como cabecera Authorization: Bearer.

Servidor local (npm)

¿Prefieres un proceso local stdio con la clave en una variable de entorno? Obtén una clave gratuita en miromiro.app/api/dashboard, luego:

Cursor (~/.cursor/mcp.json) / Windsurf (Configuración → MCP):

{
  "mcpServers": {
    "miromiro": {
      "command": "npx",
      "args": ["-y", "miromiro-mcp"],
      "env": { "MIROMIRO_API_KEY": "mm_live_your_key" }
    }
  }
}

Claude Code (ejecuta en tu terminal, no dentro de una sesión de claude):

claude mcp add miromiro -s user \
  --env MIROMIRO_API_KEY=mm_live_your_key \
  -- npx -y miromiro-mcp

Herramientas

Herramienta	Qué devuelve	Créditos
`extract_code`	Una sección de una página en vivo como componente listo para pegar (Tailwind, HTML+CSS, JSX o Vue) más los tokens que usa: empieza aquí para reconstruir UI real	25
`extract_brand`	Roles de color nombrados (primario/acento/fondo/texto), paleta, tipografías divididas por rol, logo, perfiles sociales, una puntuación de confianza de 0-1, y `signals` explicando de dónde vienen los colores (tokens declarados vs inferidos)	15
`extract_design_tokens`	Sistema completo de tokens con conteos de uso; `format: css` o `tailwind` para salida lista para pegar, `dtcg` para un archivo de Design Tokens W3C (Style Dictionary / variables de Figma)	10
`extract_fonts`	Cada archivo de tipografía y familia que carga el sitio, con pesos, formatos y URLs de archivo	5
`extract_videos`	Archivos de video, `og:video`, y embebidos de reproductores (YouTube, Vimeo, Wistia, Loom), etiquetados por fuente	1
`extract_audio`	Archivos de audio, `og:audio`, y enclosures de podcasts, etiquetados por fuente	1
`extract_lottie`	Archivos JSON de animación Lottie declarados en la página	3
`extract_svgs`	Código SVG en línea (sanitizado, listo para pegar) más URLs de archivos SVG externos	1
`extract_assets`	Cada URL de imagen en una página, etiquetada por fuente, con texto alternativo	1

Todas las herramientas son de solo lectura y seguras para reintentos. Las llamadas idénticas dentro de 24 horas se sirven desde caché de forma gratuita, y las llamadas fallidas nunca se facturan.

Solicitar una parte de la página por nombre

extract_code toma section - uno de hero, header, footer, pricing, features, testimonials, faq, cta - para que el agente nunca tenga que inventar un selector CSS para una página que no puede ver. Cada resultado también lista los otros sections de la página con selectores listos para llamadas de seguimiento. Un selector o sección que no coincida con nada cae al hero con un note diciendo qué tiene la página, en lugar de un 404 sin salida.

Prompts (comandos de barra)

El servidor expone tres prompts MCP, que los clientes muestran antes de la primera llamada: Claude Code como /mcp__miromiro__clone_section, /mcp__miromiro__brand_kit y /mcp__miromiro__design_tokens, VS Code como /miromiro.<name>, Cursor en su menú de prompts:

Prompt	Argumentos	Qué hace
`clone_section`	`url`, `section?`, `framework?`	Reconstruye una sección de un sitio en vivo como código listo para pegar, con sus valores reales, y lista las otras secciones
`brand_kit`	`url`	Los colores de marca, tipografías, logo y redes sociales, explicados (declarados vs inferidos)
`design_tokens`	`url`, `format?`	El sistema completo de tokens como CSS, Tailwind, DTCG o JSON, con un breve resumen

Controlar el tamaño de salida (servidor remoto)

Los resultados remotos se recortan por defecto para que una página grande no inunde el contexto del chat, y cada respuesta recortada dice exactamente qué se eliminó. Dos argumentos opcionales lo aflojan por llamada:

response_format: 'concise' | 'detailed' - el control de una palabra: concise mantiene las listas en 10 entradas para una respuesta de chat, detailed devuelve todo lo que tiene la herramienta
limit (hasta 200) - eleva el límite de elementos: "dame 80 SVGs, no 20"
full_output: true - completa cadenas largas, como el marcado SVG en línea completo

El código generado nunca se recorta. Los resultados se detienen aproximadamente en 20k tokens (25k para extract_code) para que quepan en el límite de resultados de herramientas de Claude Code, Claude Desktop y Cursor, y el truncation_note dice cuántos tokens se cortaron y qué argumento los trae de vuelta.

La API REST y este servidor npm local siempre devuelven todo sin recortar, así que limit y full_output aplican solo al servidor remoto. Cada herramienta en ambos servidores acepta render: true (solo planes API de pago y paquetes de créditos: una cuenta gratuita obtiene 402 render_requires_plan y nada se ejecuta, excepto cuando el sitio mismo rechaza la solicitud: ver Notas), más dos argumentos compartidos adicionales:

fresh: true - omite la caché de 24 horas y re-extrae la página en vivo (se cobra normalmente); úsalo cuando el sitio acaba de cambiar
screenshot: true (requiere render: true) - el resultado gana un campo screenshot: una URL pública de una captura de 1440x900 de la página, activa por 7 días, sin créditos adicionales: muéstrala al usuario para verificar una extracción. Pasa 'full' en lugar de true para la altura completa de la página.

Ejemplos

"Reconstruye la sección de precios de stripe.com en React"

El agente llama a extract_code con la URL, obtiene el marcado real de la sección, colores, tipografías y espaciado, y adapta valores reales en lugar de adivinar.

La extracción devuelve los estilos claros de una página por defecto, así que un sitio que conoces como oscuro vuelve claro a menos que pidas lo contrario:

"Reconstruye la tarjeta de precios de linear.app en su tema oscuro"

El agente pasa theme: "dark" y las reglas prefers-color-scheme: dark y propiedades personalizadas de la página se convierten en el componente mismo. Cada resultado también lleva un campo theme diciendo cuál obtuviste realmente. Los sitios que cambian de tema con un toggle de clase JavaScript no se pueden seleccionar de esta manera: obtienes el valor predeterminado de la página más una pista que lo dice.

"Construye un dashboard en el estilo de linear.app"

El agente llama a extract_brand y extract_design_tokens, obtiene los colores reales de Linear, tipografías y escala de espaciado, y construye para que coincida.

"¿Qué tipografías usa apple.com?"

El agente llama a extract_fonts y devuelve cada familia con sus URLs de archivos de tipografía y pesos.

Notas

La API lee HTML estático y resuelve la cascada CSS completa por defecto, así que una aplicación completamente renderizada en el cliente puede devolver poco para imágenes, video, audio y Lottie (tokens, tipografías, marca y código vienen de CSS y no se ven afectados). Pasa render: true en cualquier herramienta del servidor remoto para ejecutar la página en un navegador real primero para que su JavaScript se ejecute (+5 créditos). El renderizado está incluido en los planes API de pago y paquetes de créditos, no en la cuenta gratuita: una cuenta gratuita obtiene 402 render_requires_plan antes de que algo se ejecute o se cobre.
Una excepción, y no necesita bandera: cuando el SITIO rechaza la solicitud simple de una cuenta gratuita (401, 403 o 406: los editores comúnmente rechazan IPs de centros de datos incluso para una página pública), el servidor reintenta esa llamada en un navegador real automáticamente y gratis, unas pocas veces al mes. El resultado entonces lleva usage.renderRescue (una frase para leer al usuario) y usage.renderRescuesLeft. Así que en una cuenta gratuita, no trates un 401/403/406 como "este sitio no se puede extraer" hasta que se agoten.
Cada resultado lleva usage con los créditos restantes este mes. Si la cuenta tiene un paquete de créditos (créditos únicos que nunca expiran, comprados en https://miromiro.app/api/pricing), usage.packCredits es el saldo restante del paquete; los paquetes se consumen después de los créditos mensuales, así que una cuenta gratuita con un paquete sigue funcionando más allá de sus 300 créditos.
Respeta los sitios de los que extraes: revisa sus términos antes de reutilizar activos comercialmente.

Enlaces

Documentación de API · Playground (sin cuenta) · Precios · Registro de cambios · Página de conexión