Cómo usar Inspo MCP: lleva referencias de diseño y capturas a tu desarrollo de UI con Claude Code o Codex

Pedirle a Claude Code o Codex que «cree una landing page limpia, sofisticada y con buen diseño» suele bastar para obtener una página que funciona. Lo difícil es que el resultado muchas veces se limita al conocido fondo degradado, las tarjetas redondeadas y un gran titular, sin reproducir la composición, el ritmo ni la jerarquía visual que querías tomar como referencia.

Inspo resuelve un problema más concreto: antes de que el agente escriba la interfaz, le proporciona un conjunto de referencias de diseño procedentes de sitios reales. El sitio oficial enumera actualmente 832 webs en producción, 2.320 registros de páginas —cada uno con capturas de escritorio y móvil—, 68 componentes de referencia y datos extraídos como paletas de color, tipografías, espaciado, radios de borde, anchos de contenedor y estructura de página. Todo ello se entrega mediante MCP a clientes como Claude Code y Codex.

Sin embargo, instalarlo no demuestra que el agente haya visto las capturas, y mucho menos que la página final las haya incorporado. Un flujo de trabajo más fiable es el siguiente:

1. Conectar Inspo MCP y comprobar que el cliente está realmente conectado.
2. Pedir primero al agente que busque referencias, sin dejar que escriba código de inmediato.
3. Revisar qué registros de páginas y URL de imágenes obtuvo, y si llegó a leer las imágenes.
4. Convertir las referencias elegidas en un «contrato de referencias» explícito.
5. Tras implementar la página, inspeccionar el render real, compararlo punto por punto y corregirlo.

A continuación utilizaremos una tarea hipotética: crear para un proyecto existente una landing page de producto B2B dirigida a desarrolladores. El ejemplo sirve para explicar el método; no significa que este artículo haya ejecutado o probado el proyecto por ti.

Qué ofrece realmente Inspo MCP

Inspo no es solo un buscador de capturas. Según su página oficial de MCP y el repositorio del proyecto, el agente puede obtener tres tipos de material de referencia.

1. Páginas y capturas

search_screens permite buscar páginas reales por descripción en lenguaje natural, estilo, sector, tipo de página, color, modo claro u oscuro y estructura. Los resultados pueden incluir:

• el título de la página, su slug de Inspo y la URL del sitio original;
• las URL de las capturas de escritorio y móvil;
• una miniatura de la página;
• paleta de colores, tipografías, stack tecnológico y etiquetas;
• análisis de las características generales y de la estructura por secciones.

Cuando necesites estudiar un candidato concreto, utiliza get_screen para obtener un registro más completo en lugar de cargar muchos candidatos en el contexto al mismo tiempo.

2. Sistema de diseño estructurado

Cada sitio incluido cuenta con un archivo DESIGN.md derivado de la información de sus páginas. get_design_system puede devolver tipografías, colores semánticos, escala tipográfica, espaciado, radios, variables CSS y anchos de contenedor, entre otros datos.

Esto importa porque «usa este sitio como referencia» es demasiado ambiguo. En cambio, requisitos como «utiliza un hero de dos columnas, limita el contenido con un contenedor, destaca el botón principal con un color de alto contraste y deja un espacio claro entre secciones» son mucho más fáciles de ejecutar de forma consistente para un agente.

3. Componentes de referencia y código

Inspo también ofrece componentes de referencia para navegación, hero, precios, pie de página y otras secciones. El agente puede usar primero find_reference_components para encontrar un componente adecuado y después get_reference_jsx para obtener su JSX.

Eso no significa que debas copiar un sitio entero tal cual. Lo razonable es tomar la composición del componente y su jerarquía de información, y adaptarlas al stack, la marca, el contenido y las interacciones del proyecto actual.

recommend es la mejor herramienta para empezar. Le das una necesidad en lenguaje natural y combina estructura de página, sitios candidatos, componentes de referencia, paletas y sugerencias de layout. En un primer uso, suele ser más eficaz pedir al agente que invoque recommend y después profundice en uno o dos candidatos que buscar una docena de páginas desde el principio.

Separa la conexión del modelo de Inspo MCP

Claude Code o Codex necesita una conexión funcional con un modelo para analizar, modificar y razonar sobre el código. Inspo MCP se encarga de aportar material de diseño externo. Son dos rutas distintas, con endpoints, autenticación y causas de fallo diferentes.

Si ya utilizas Claude Code o Codex mediante BetterToken, completa primero la configuración del modelo con la documentación correspondiente:

• Documentación de conexión de Claude Code
• Documentación de conexión de Codex

Después configura Inspo por separado. No uses https://inspomcp.dev/api/mcp como Base URL del modelo ni entregues tu API Key de BetterToken a Inspo. El endpoint alojado de Inspo no exige actualmente una cuenta ni una API Key. BetterToken tampoco aloja Inspo, concede licencias sobre material de diseño de terceros ni garantiza que el agente vaya a leer imágenes o producir un resultado visual concreto.

Antes de conectarlo, solo necesitas confirmar que:

• Claude Code o Codex está instalado y puede completar tareas de programación normales;
• el cliente puede acceder al endpoint alojado de Inspo;
• Node.js y npx están disponibles si vas a utilizar el instalador o el modo stdio local.

Conectar Inspo MCP

Inspo ofrece un instalador automático, aunque también puedes utilizar los comandos MCP del propio cliente. En un equipo con varias herramientas de programación con IA, conviene ejecutar primero --dry-run para ver qué clientes y archivos de configuración se modificarán.

Método 1: usar el instalador de Inspo

Comprobar Claude Code sin escribir la configuración:

npx -y inspo-mcp install --dry-run --client claude-code

Instalar después de revisar el plan:

npx -y inspo-mcp install --client claude-code

Comprobar solo Codex:

npx -y inspo-mcp install --dry-run --client codex

Instalar después de revisar el plan:

npx -y inspo-mcp install --client codex

Si omites --client, el instalador detecta las instalaciones existentes de Claude Code, Codex, Cursor, VS Code, Windsurf, Claude Desktop y Zed. La documentación oficial de Inspo MCP indica que primero muestra el plan y pide confirmación; --dry-run imprime el plan sin escribir archivos, mientras que -y omite la confirmación.

Método 2: añadir directamente el MCP alojado

El endpoint alojado recomendado por Inspo es:

https://inspomcp.dev/api/mcp

El repositorio oficial describe Inspo como un servicio de solo lectura, pero sigue siendo un MCP externo de un tercero. En un entorno de equipo, revisa el repositorio, el alcance de los datos y la política de red antes de conectarlo. Que sea «de solo lectura» no elimina la necesidad de evaluar la confianza.

Según la documentación oficial de MCP para Claude Code, los servicios remotos deben añadirse mediante HTTP. Para que Inspo esté disponible en todos tus proyectos locales, ejecuta:

claude mcp add --scope user --transport http inspo https://inspomcp.dev/api/mcp

Después comprueba la configuración:

claude mcp get inspo
claude mcp list

También puedes introducir lo siguiente dentro de una sesión de Claude Code:

/mcp

Un mensaje Added solo confirma que se escribió la configuración. Para conocer el estado real, revisa claude mcp list: Connected significa que existe conexión. Antes de continuar, resuelve estados como Failed to connect, Pending approval o servicio deshabilitado.

La documentación de OpenAI sobre MCP en Codex indica que Codex admite servicios Streamable HTTP y STDIO. Añade el MCP remoto con:

codex mcp add inspo --url https://inspomcp.dev/api/mcp

Consulta los servicios configurados:

codex mcp list

En la interfaz interactiva de Codex también puedes usar:

/mcp

La documentación actual de OpenAI señala que Codex CLI, la extensión del IDE y la aplicación de escritorio de ChatGPT comparten la configuración MCP cuando se ejecutan en el mismo host de Codex. Después de añadir o modificar el servicio, reinicia el cliente actual o abre una sesión nueva y comprueba si Inspo aparece.

stdio es solo un transporte alternativo

Si al cliente no le resulta práctico conectarse a una URL remota, puede iniciar el servicio stdio mediante npx:

claude mcp add --scope user inspo -- npx -y inspo-mcp

codex mcp add inspo -- npx -y inspo-mcp

También puedes añadir --local al comando de instalación automática. Aun así, este modo sigue obteniendo el catálogo de Inspo desde una CDN; no equivale a trabajar sin conexión ni a un autoalojamiento completo.

En el primer uso, busca referencias antes de pedir código

Un error frecuente es unir «buscar referencias» e «implementar la página» en una sola frase:

Usa Inspo para hacerme una landing page atractiva.

Así el agente elige por su cuenta las referencias, decide qué tomar de ellas y se pone a programar inmediatamente. Si la página sale mal, será difícil saber si los resultados de búsqueda no eran adecuados, si las capturas nunca entraron en el contexto o si la implementación se alejó del referente.

Una primera instrucción más segura sería:

Todavía no modifiques el código ni empieces a diseñar la página.

Utiliza Inspo MCP para encontrar 4 referencias candidatas para una «landing page de un producto B2B de API de IA dirigido a desarrolladores».

Requisitos:
- aspecto sobrio y profesional, sin grandes superficies de degradados de colores intensos;
- el hero debe comunicar claramente el valor del producto e incluir un CTA principal;
- puede mostrar la interfaz del producto o un flujo de llamadas, pero no debe parecer una web corporativa tradicional;
- revisa referencias tanto de escritorio como de móvil;
- empieza por recommend y utiliza search_screens, get_screen o get_design_system solo si hace falta.

Para cada candidato, devuelve:
1. título de la página, Inspo slug y sourceUrl;
2. URL de la captura de escritorio y de móvil, si aparecen en el resultado de la herramienta;
3. macrostructure, paleta principal y tipografías;
4. 3 decisiones de diseño concretas que merezca la pena adoptar;
5. elementos de marca, textos o adornos que no se deban copiar.

Al final, recomienda solo una referencia principal y como máximo dos auxiliares, y explica qué debe controlar cada una. Todavía no escribas código.

El objetivo no es obtener más adjetivos, sino identificadores de página y pruebas que se puedan rastrear. Deberías ver un slug concreto, la URL del sitio original, las URL de las capturas y datos de diseño, no solo un resumen como «moderno, limpio y profesional».

Cómo comprobar que el agente recibió de verdad las referencias

Puedes dividir la comprobación en cuatro niveles. Superar uno no demuestra automáticamente el siguiente.

Nivel	Evidencia observable	Qué demuestra
MCP configurado	Claude Code muestra Connected o Inspo aparece en la lista MCP de Codex	Connected confirma la conexión de Claude Code; la entrada de Codex confirma la configuración, y una llamada exitosa a una herramienta debe confirmar el acceso al servicio
La herramienta devolvió datos	La respuesta contiene un slug real, sourceUrl, colores, tipografías, estructura de página y URL de capturas	El agente llamó a Inspo y obtuvo un registro estructurado
Las imágenes fueron leídas	El agente abre las URL con una herramienta capaz de leer imágenes o usa un visor disponible y describe detalles visuales concretos	El agente no se limitó a descripciones o enlaces; la mera presencia de miniaturas no demuestra que las haya leído
La página refleja el referente	En el render real existe una correspondencia explicable con la estructura, la jerarquía, el ritmo y el comportamiento responsive elegidos	La referencia influyó realmente en la implementación

Esta distinción es importante. El formato de respuesta de Inspo siempre contiene texto estructurado y puede incluir las URL originales de las imágenes. En las rutas compatibles, también puede insertar miniaturas como bloques de imagen nativos en el resultado de la herramienta. Sin embargo, la implementación del formato de respuesta contempla expresamente otros dos casos: si falla la obtención de la imagen, se puede omitir el bloque de imagen mientras se conservan el texto y las URL; y una configuración que priorice el texto puede devolver solo texto.

Por tanto, que el agente proporcione una URL de captura no demuestra que el modelo haya leído sus píxeles. Puedes enviarle esta instrucción de comprobación:

Primero demuestra que has recibido la referencia principal. No empieces a escribir código.

Devuelve:
- los nombres de las herramientas de Inspo utilizadas realmente en esta sesión;
- el slug, sourceUrl, URL de la captura de escritorio y URL de la captura móvil de la referencia principal;
- 3 hechos visuales concretos observados en la captura de escritorio y 3 en la móvil, como composición del hero, posición de la navegación, alineación del CTA, recorte de la imagen, disposición de las tarjetas o comportamiento al colapsar;
- qué conclusiones proceden de las capturas y cuáles proceden únicamente de los campos de texto de Inspo.

Si el cliente actual solo recibió texto o URL y no leyó los píxeles de las imágenes, escribe explícitamente «no se leyeron los píxeles de las imágenes». No deduzcas detalles visuales a partir de la descripción.

El resultado ideal no es una crítica de diseño larga, sino una separación clara entre los elementos realmente visibles en la imagen y las conclusiones aportadas por los datos estructurados.

Si el agente solo puede repetir la paleta, las tipografías y la descripción northstar, pídele que abra las URL de las capturas mediante el navegador o la herramienta de lectura de imágenes disponible en el cliente. Si el cliente y el modelo actuales admiten entrada visual, descarga las capturas y adjúntalas como imágenes. Si el modelo o la ruta del proveedor no procesa imágenes, adjuntar un archivo no lo resolverá: utiliza Inspo para analizar estructura, color y texto, o cambia a una configuración compatible con entrada visual. Que MCP pueda devolver imágenes no significa que todas las combinaciones de cliente y modelo vayan a consumirlas.

Convierte las referencias en un «contrato de referencias»

Una vez elegidos los candidatos, no te limites a decir «usa el estilo de la referencia A». Fija qué responsabilidad tiene cada referencia y deja claro qué no se puede copiar.

Puedes pedir al agente que redacte este contrato:

A partir de la referencia principal y las referencias auxiliares ya confirmadas, prepara primero un «contrato de referencias». Todavía no modifiques el código.

Incluye:

1. Referencia principal
- slug / sourceUrl:
- Responsable solo de: estructura general de la página, composición del hero, ritmo entre secciones

2. Referencia auxiliar A
- slug / sourceUrl:
- Responsable solo de: jerarquía tipográfica, ancho del texto, espacio en blanco

3. Referencia auxiliar B (solo si es realmente necesaria)
- slug / sourceUrl:
- Responsable solo de: un componente concreto o el comportamiento de reorganización en móvil

4. El proyecto actual debe conservar
- el stack tecnológico, el routing y las convenciones de componentes existentes
- los textos reales del producto, sus límites funcionales y los colores de marca
- las interacciones, la accesibilidad y los requisitos de rendimiento ya existentes

5. Prohibiciones explícitas
- no copiar el logotipo, el nombre de marca, las ilustraciones, las fotos ni el texto original del sitio de referencia
- no reproducir todo el sitio píxel por píxel
- no inventar funciones que el producto actual no tiene para acercarse al referente

6. Criterios de aceptación
- en un viewport de escritorio habitual, el hero comunica por completo el título, la explicación, el CTA y el elemento visual principal
- la jerarquía de información sigue la referencia principal, pero el contenido pertenece al producto actual
- la versión móvil tiene una estrategia de reorganización deliberada, no solo una versión reducida del layout de escritorio
- el espacio entre secciones, el ancho del contenedor, la jerarquía tipográfica y la prioridad de los botones siguen reglas verificables

El contrato convierte la inspiración en restricciones. La referencia principal controla la estructura global y las auxiliares resuelven problemas locales. Más referencias no implica necesariamente un mejor resultado: si cinco sitios controlan a la vez colores, tipografías, tarjetas y hero, lo habitual es volver a una página genérica de IA sin prioridades claras.

Deja que Claude Code o Codex implemente la página

Una vez confirmadas las referencias y los criterios de aceptación, deja que el agente inspeccione el repositorio y modifique el código. La instrucción siguiente no fija npm run dev, un directorio de framework ni un comando de pruebas, porque deben deducirse del proyecto actual y no inventarse.

Empieza ahora la implementación.

Primero revisa el stack tecnológico del repositorio actual, los puntos de entrada de las páginas, las variables de diseño, los componentes reutilizables y los scripts disponibles. Después modifica la página según el «contrato de referencias» confirmado.

Requisitos de implementación:
- utiliza el framework, el sistema de componentes y las dependencias existentes; no añadas un framework de UI nuevo salvo que sea realmente necesario;
- conserva el contenido y las funciones reales del producto, y no copies recursos de marca ni textos de los sitios de referencia;
- transforma las referencias en el layout, las variables CSS y los componentes propios de este proyecto;
- implementa deliberadamente las versiones de escritorio y móvil; no dejes la versión móvil para el final confiando en el escalado automático;
- corrige primero la estructura general, la jerarquía de información y el espaciado, y después detalles decorativos como sombras y radios;
- no sobrescribas componentes existentes del proyecto solo porque Inspo proporcione JSX.

Antes de modificar los archivos, explica brevemente:
1. qué archivos vas a cambiar;
2. a qué componente o regla de estilo se aplicará cada punto de referencia;
3. qué contenido existente debe permanecer sin cambios.

Al terminar:
- ejecuta el formateador, la comprobación de tipos o las pruebas que ya existan en el repositorio;
- inicia la vista previa local disponible;
- enumera los archivos modificados realmente;
- muestra una correspondencia «punto de referencia → lugar de implementación»;
- no evalúes el resultado solo con frases como «más moderno» o «más premium».

Si el proyecto ya utiliza design tokens, pide al agente que modifique primero los tokens o las variables semánticas, en lugar de repartir colores y dimensiones codificados directamente entre varios componentes. Así será mucho más fácil corregir el ritmo global de la página en la siguiente iteración.

La evaluación final debe basarse en el render real, no en el diff de código

Que la página compile solo demuestra que el código funciona. Para saber si refleja la referencia, hay que inspeccionar la página real.

Las páginas de Inspo suelen incluir capturas de escritorio y móvil. Su Colophon oficial indica que el archivo utiliza anchos de 1440 y 375 píxeles. No es necesario igualar exactamente la altura, pero revisar la implementación con anchos similares facilita la comparación de la estructura general y de la reorganización móvil.

Si Claude Code o Codex ya tiene configurado un navegador, Playwright u otra herramienta de capturas, pide al agente que abra la página local. De lo contrario, abre tú mismo la vista previa en el navegador, captura las versiones de escritorio y móvil y entrega las imágenes al agente.

Pídele que las revise con este formato:

Compara:
- las capturas de escritorio y móvil ya confirmadas de la referencia principal;
- capturas reales de la página actual con anchos aproximados de 1440px y 375px.

Todavía no rediseñes ni cambies código. Primero muestra una tabla de diferencias:

| Punto de revisión | Evidencia observable en la referencia | Implementación actual | Diferencia | Cambio recomendado |
| --- | --- | --- | --- | --- |
| Estructura del hero |  |  |  |  |
| Jerarquía del título y el CTA |  |  |  |  |
| Contenedor y espacio en blanco |  |  |  |  |
| Jerarquía tipográfica |  |  |  |  |
| Color y contraste |  |  |  |  |
| Disposición de componentes |  |  |  |  |
| Reorganización móvil |  |  |  |  |

Después selecciona solo las 3 diferencias con mayor impacto y corrígelas. Vuelve a renderizar y revisar tras los cambios. No introduzcas una nueva dirección de diseño en la misma iteración.

Una buena observación debe poder verse y convertirse en una acción. Por ejemplo:

• No digas: «Al hero todavía le falta un aspecto premium».
• Di: «La referencia principal muestra el titular, el CTA y la interfaz del producto dentro del primer viewport. La página actual tiene demasiado espacio vertical, por lo que la interfaz queda por debajo del primer pliegue. Reduce el espaciado vertical del hero, limita el ancho del titular y haz que el elemento visual principal aparezca en una altura de escritorio habitual».

Otro ejemplo:

• No digas: «La versión móvil no se parece lo suficiente al referente».
• Di: «En móvil, el referente muestra primero el titular y el CTA, seguidos de una tarjeta de producto en una sola columna. La implementación actual conserva el layout de dos columnas del escritorio, lo que estrecha tanto el texto como la imagen. Cambia a una sola columna en móvil y mantén el CTA antes del elemento visual principal».

Corregir en cada ronda solo unas pocas diferencias de gran impacto suele converger más rápido que pedir repetidamente «hazlo más bonito».

Problemas frecuentes

El comando de configuración funcionó, pero el agente no encuentra Inspo

Comprueba el estado del cliente antes de reinstalar.

Claude Code:

claude mcp get inspo
claude mcp list

Codex:

codex mcp list

Confirma que el endpoint no contiene caracteres adicionales y reinicia el cliente. Si Claude Code utiliza un .mcp.json a nivel de proyecto, quizá también tengas que aprobar el servicio dentro de un espacio de trabajo de confianza.

MCP está conectado, pero el agente nunca llama a Inspo

Separa la fase de búsqueda de la fase de programación. Exige explícitamente: «llama primero a Inspo, devuelve el slug, sourceUrl y las URL de capturas, y no modifiques el código hasta que se confirmen las referencias». Comprueba también en /mcp que el servicio esté habilitado.

El agente devuelve una descripción de la página, pero no aparece ninguna imagen

Puede que la llamada solo haya devuelto texto, que haya fallado la obtención de miniaturas, que el cliente no muestre los bloques de imagen de MCP o que la ruta del modelo no procese imágenes. Comprueba si aún aparecen las URL de las capturas de escritorio y móvil, y pide al agente que indique claramente si leyó los píxeles. Si el cliente y el modelo actuales admiten entrada visual, abre las URL con una herramienta de navegador o adjunta las capturas. Con un modelo solo de texto, utiliza los datos estructurados o cambia a una configuración que admita imágenes.

La página sigue pareciendo una plantilla genérica

La solución no suele ser buscar diez referencias más, sino restringir el encargo: una referencia principal controla la macroestructura, otra auxiliar controla tipografía y espacio en blanco, y una tercera como máximo controla un componente concreto. Registra esas funciones en el contrato y exige una correspondencia entre cada punto de referencia y su ubicación en el código.

El contexto es demasiado grande y el agente empieza a mezclar referencias

Utiliza recommend para obtener candidatos y llama a get_screen o get_design_system solo para uno o dos de los elegidos. No cargues al mismo tiempo muchos registros completos de páginas y código de componentes. Llama a get_reference_jsx únicamente cuando necesites un componente concreto.

El sitio original ya no coincide con la captura de Inspo

Inspo conserva el material de la página en el momento de la captura, mientras que el sitio original puede haber cambiado después. Compara con la captura y el registro seleccionados en Inspo. sourceUrl sirve para rastrear el origen; no debe asumirse que el sitio seguirá siendo visualmente idéntico al archivo para siempre.

Lo importante no es solo «instalar un MCP», sino construir una cadena de evidencias

El valor de Inspo MCP no consiste en decidir automáticamente qué es buen diseño. Convierte «quiero una sensación como esta» en páginas, capturas, datos de diseño y componentes de referencia que se pueden rastrear.

Una iteración fiable de desarrollo de UI debería dejar cuatro tipos de evidencia:

1. el cliente confirma que Inspo está conectado;
2. el agente devuelve páginas concretas y material de diseño;
3. puedes confirmar que leyó las capturas, o bien declara honestamente que solo recibió texto;
4. el render final permite explicar punto por punto qué reglas de estructura, jerarquía y comportamiento responsive proceden de las referencias.

Cuando separas búsqueda, confirmación, implementación y verificación, Claude Code o Codex deja de «hacer una página bonita por intuición». Trabaja dentro de un contexto de diseño que puedes inspeccionar, corregir y reutilizar.