Repolode
Enviar
Nutlope

Nutlope/inspo

Servidor MCP que ofrece a los agentes de programación referencias de diseño de sitios web reales en producción, con capturas, paletas, tipografías y archivos DESIGN.md.

Ver en GitHubSitio web
Estrellas
910
Forks
58
Issues abiertos
1
Último commit
hace 20 días

¿Qué es?

Inspo es un archivo consultable de sitios web reales en producción, disponible para los agentes de programación mediante el Model Context Protocol (MCP). Antes de escribir la interfaz, un agente puede consultar el archivo para encontrar referencias, en lugar de depender únicamente de su propio criterio de diseño. El catálogo incluye actualmente 2.320 páginas de 832 sitios, capturadas tanto en escritorio como en móvil, con paletas, tipografías, tecnologías detectadas y un desglose sección por sección.

Además de las capturas de página completa, el archivo incluye 68 componentes de referencia canónicos, como secciones principales, secciones de precios, pies de página y barras de navegación, cada uno con JSX listo para copiar y pegar. También se genera un DESIGN.md para cada sitio a partir de su DOM, con roles semánticos de color, escala tipográfica, espaciado, variables CSS y ancho del contenedor. Hay 15 herramientas para buscar y consultar información, además de una herramienta `recommend(brief)` que combina varias en una sola llamada.

El servidor funciona mediante stdio a través de npm o mediante Streamable HTTP en inspomcp.dev. Un comando de instalación configura clientes habituales como Claude Code, Cursor, Codex, VS Code y Zed. El repositorio también incluye una galería Next.js para explorar el archivo y un worker de captura basado en Playwright.

Funciones clave

  • 01Busca entre 2.320 páginas capturadas de 832 sitios web reales, tanto en escritorio como en móvil
  • 02Ofrece 68 componentes de referencia con JSX listo para copiar y pegar
  • 03Genera un DESIGN.md por sitio con roles de color de la paleta, escala tipográfica y variables CSS
  • 04Ofrece 15 herramientas MCP, incluida una herramienta recommend que combina varias consultas
  • 05Funciona mediante stdio a través de npm o como endpoint alojado de Streamable HTTP

Casos de uso

  • Proporcionar referencias de diseño a un agente de programación antes de que construya una landing page
  • Encontrar ejemplos reales de secciones de precios, secciones principales o pies de página para adaptar
  • Consultar la paleta de colores, la escala tipográfica y el espaciado de un sitio para inspirarse
  • Explorar ejemplos seleccionados de diseño web en la galería incluida

Inicio rápido

  1. 1

    Ejecuta el instalador de un solo comando para tu cliente MCP

    npx -y inspo-mcp install
  2. 2

    O añade el endpoint alojado a Claude Code

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

    O clona el repositorio e instala las dependencias

    git clone https://github.com/Nutlope/inspo.git && cd inspo && pnpm install

Antes de usarlo

  • El archivo es una semilla estática, por lo que solo incluye los sitios y las páginas recopilados hasta ahora.
  • Las capturas de pantalla pertenecen a sus diseñadores originales y están sujetas a sus derechos de autor y a solicitudes de retirada.

Temas

#mcp#design-system#ui-design#ai-agents#screenshots#css#typescript#nextjs

Preguntas frecuentes

¿Qué es inspo?
Servidor MCP que ofrece a los agentes de programación referencias de diseño de sitios web reales en producción, con capturas, paletas, tipografías y archivos DESIGN.md. Inspo es un archivo consultable de sitios web reales en producción, disponible para los agentes de programación mediante el Model Context Protocol (MCP). Antes de escribir la interfaz, un agente puede consultar el archivo para encontrar referencias, en lugar de depender únicamente de su propio criterio de diseño. El catálogo incluye actualmente 2.320 páginas de 832 sitios, capturadas tanto en escritorio como en móvil, con paletas, tipografías, tecnologías detectadas y un desglose sección por sección.
¿inspo es gratuito? ¿Qué licencia tiene?
inspo es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿inspo sigue mantenido?
Mantenimiento activo. El último commit de inspo fue el 1 oct 2026.
¿Para qué puedo usar inspo?
Proporcionar referencias de diseño a un agente de programación antes de que construya una landing page Encontrar ejemplos reales de secciones de precios, secciones principales o pies de página para adaptar Consultar la paleta de colores, la escala tipográfica y el espaciado de un sitio para inspirarse Explorar ejemplos seleccionados de diseño web en la galería incluida
¿Cómo se instala inspo?
Ejecuta el instalador de un solo comando para tu cliente MCP: npx -y inspo-mcp install O añade el endpoint alojado a Claude Code: claude mcp add --transport http inspo https://inspomcp.dev/api/mcp O clona el repositorio e instala las dependencias: git clone https://github.com/Nutlope/inspo.git && cd inspo && pnpm install
¿Dónde consigo inspo?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/Nutlope/inspo

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados