Inspo

Descripción

Inspo is a curated archive of about 800 shipped websites, with screenshots, extracted palettes, fonts, detected tech, named macrostructures and desktop and mobile captures. An assistant can search by style, industry, color or page type, compare sites, pull a full DESIGN.md for one site, and fetch reference component source.

It runs as a hosted streamable HTTP endpoint that needs no sign-in or API key. The same tools are available locally through the npm package inspo-mcp over stdio. An optional TOGETHER_API_KEY enables semantic query search in the local package.

Qué puedes hacer

• Get a design brief recommendation with example sites and palette
• Search real website screens by style, industry, color or page type
• Fetch the full DESIGN.md for a site
• Compare two to four sites side by side
• Find sites near a given hex color
• Browse examples of named layout macrostructures
• Fetch reference component JSX for heroes, pricing, nav and more

Herramientas 15

• search_screensSolo lectura

  Search archived website screenshots, returning palette, fonts, components and image URLs.

• get_screenSolo lectura

  Fetch the full record for one screen, including viewport variants and tech stack.

• get_design_systemSolo lectura

  Get the DESIGN.md for a screen: fonts, palette, CSS variables, type ramp.

• find_similarSolo lectura

  Find a screen's nearest design neighbours.

• compareSolo lectura

  Compare 2-4 sites across palette, typefaces, structure and scales.

• find_by_colorSolo lectura

  Find sites whose palette is near a hex color.

• find_examples_for_macrostructureSolo lectura

  Return real sites exemplifying one of 19 named macrostructures.

• list_collectionsSolo lectura

  List editor-curated collections of screens.

• get_filtersSolo lectura

  List every accepted filter value.

• get_site_pagesSolo lectura

  Show a site's captured pages as an ordered flow.

• find_componentsSolo lectura

  Find sites featuring a UI component such as hero, pricing or footer.

• get_collectionSolo lectura

  Fetch one collection with its blurb and ordered screens.

Leídas del servidor en funcionamiento el 7 oct 2026. Solo lectura, Escritura y Puede borrar son indicaciones que declara el servidor; tu cliente decide si te pregunta antes de ejecutar una herramienta.

Prompts de ejemplo

• Find design references for a dark SaaS landing page

• Show sites with a palette close to #1F6FEB

• Compare the design systems of three editorial portfolio sites

• Get reference JSX for a bento grid hero

Configuración

Todos los clientes se conectan a inspomcp.dev. Elige el tuyo; la página recuerda tu elección.

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

https://inspomcp.dev/api/mcp

{
  "mcpServers": {
    "inspo": {
      "url": "https://inspomcp.dev/api/mcp"
    }
  }
}

code --add-mcp '{"name":"inspo","type":"http","url":"https://inspomcp.dev/api/mcp"}'

{
  "servers": {
    "inspo": {
      "type": "http",
      "url": "https://inspomcp.dev/api/mcp"
    }
  }
}

{
  "mcpServers": {
    "inspo": {
      "serverUrl": "https://inspomcp.dev/api/mcp"
    }
  }
}

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

[mcp_servers.inspo]
url = "https://inspomcp.dev/api/mcp"

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

{
  "mcpServers": {
    "inspo": {
      "type": "http",
      "url": "https://inspomcp.dev/api/mcp"
    }
  }
}

Insertar

Muestra Inspo en un README o en tu web. Cada inserción enlaza a esta página, usa la URL propia del servidor y no instala cookies. Cómo funcionan las inserciones

La tarjeta, el iframe y el JSON están en inglés. Añade ?lang=it, fr, de o es a su dirección para otro idioma.

Insignia para README Tarjeta para web iframe JSON Prompt para la IA

Insignia para README

Markdown

[![Inspo on mcp.tc](https://mcp.tc/i/inspo/badge.svg)](https://mcp.tc/i/inspo)

HTML

<a href="https://mcp.tc/i/inspo"><img src="https://mcp.tc/i/inspo/badge.svg" alt="Inspo on mcp.tc" height="20"></a>

Sigue el modo claro u oscuro de quien lee. Añade ?theme=light o ?theme=dark para fijarlo, o ?style=compact para mostrar el símbolo sin la palabra.

Tarjeta para web

HTML

<script src="https://mcp.tc/w/inspo.js" async></script>

La tarjeta aparece donde esté la etiqueta. Añade data-theme="dark" o data-size="compact" a la etiqueta para cambiarla. El archivo contiene todo lo que necesita, así que no hace otras solicitudes ni instala cookies.

iframe

HTML

<iframe src="https://mcp.tc/embed/inspo" title="Inspo on mcp.tc" width="420" height="200" loading="lazy" allow="clipboard-write" style="border:0;border-radius:8px;max-width:100%"></iframe>

Úsalo en páginas que no permiten scripts. Añade ?theme=light o ?theme=dark a la dirección para fijar los colores.

JSON

La ficha como datos para tus propias páginas y herramientas: nombre, descripción corta, la URL propia del servidor, herramientas y los enlaces «Add to». Cualquier web puede leerla (CORS abierto).

https://mcp.tc/i/inspo.json

Qué significa cada campo

Prompt para la IA

Pégalo en un asistente de programación con IA, como Claude Code o Cursor, y añadirá la tarjeta de Inspo a tu web.

Markdown

Añade a mi web la tarjeta de mcp.tc de Inspo, un servidor MCP. Es un solo script estático: sin paso de build, sin paquetes que instalar, sin cookies.

Pon esta etiqueta donde deba aparecer la tarjeta. La tarjeta se muestra justo antes de ella:

```html
<script src="https://mcp.tc/w/inspo.js" async></script>
```

Para mostrarla en otro sitio, pon allí este marcador y carga el mismo script una sola vez, por ejemplo antes de `</body>`. Deja el enlace dentro: lo ven los visitantes sin JavaScript.

```html
<div data-mcptc="inspo"><a href="https://mcp.tc/i/inspo">Inspo on mcp.tc</a></div>
```

Opciones:
- `data-theme="light"` o `"dark"` en la etiqueta o el marcador fija los colores. Sin él, la tarjeta sigue el modo claro u oscuro del visitante.
- `data-size="compact"` da una tarjeta más pequeña, sin el eslogan.
- La variable CSS `--mcptc-max-width` en el marcador o en un elemento padre fija el ancho (por defecto `520px`).
- `?lang=` en la URL del script fija el idioma de la tarjeta: `en`, `it`, `fr`, `de` o `es`.

Si el sitio tiene una Content Security Policy, permite `script-src https://mcp.tc` e `img-src data:` (el icono va incrustado).

Para un README u otra documentación en Markdown, usa la insignia:

```markdown
[![Inspo on mcp.tc](https://mcp.tc/i/inspo/badge.svg)](https://mcp.tc/i/inspo)
```

Referencia: https://mcp.tc/es/embed

Historial de cambios

Leemos la lista de herramientas de este servidor cada 3 horas y registramos lo que cambia. Última lectura: 8 oct 2026, 10:35 UTC.

1. 7 oct 2026, 04:20 UTC, Comprobación automática

   Inicio del seguimiento: 15 herramientas.

Preguntas frecuentes