Guía · 10 pasos

inspo: de tu idea a la página hecha con Claude Code

Instala inspo en Claude Code: junta 50 referencias por sección, te dibuja tu página en varios estilos, votas en un tablero y Claude la construye contigo.

Deja de describir tu página: vota

inspo es un plugin gratis y open source que hice para Claude Code. Le cuentas tu idea y en unos minutos tienes unas 50 referencias reales por cada sección de tu página (el navbar, el hero, el catálogo, el footer…), tu landing dibujada en varios estilos con fotos de verdad y un laboratorio de efectos 3D y animaciones.

Tú solo votas 👍, 👎 o ★ en un tablero. Claude lee tus votos, ve las imágenes que te gustaron y construye la página. Luego la comentas sección por sección hasta que quede.

Sirve para páginas web, sistemas web (dashboards, paneles, SaaS) y apps móviles. Te enseño a instalarlo y a usarlo de principio a fin.

Paso 1: Qué es inspo

Son dos piezas que se instalan juntas: una skill, que le enseña a Claude cómo llevar la conversación, y un servidor MCP, que hace el trabajo pesado en tu computadora con tu propio Chrome. Visita galerías como Awwwards, Dribbble y Siteinspire, entra a sitios premiados, cierra los banners de cookies y recorta solo la sección que te interesa. Así comparas footers con footers y heros con heros.

De cada 50 referencias, unas 40 son de tu giro y unas 10 vienen de cualquier lado, para ideas que no habrías buscado.

Pégalo en Claude Code

/plugin marketplace add brunovareliuu/inspo
/plugin install inspo@inspo

¿No tienes Chrome? Corre npx playwright install chromium en la Terminal y inspo usa ese navegador. inspo es gratis: no usa API keys propias, solo el uso normal de tu Claude Code.

Ejemplos para empezar

/inspo suscripción de café mexicano de especialidad, tostado cada semana
/inspo portafolio para un despacho de arquitectura en Monterrey, muy minimalista
/inspo rediseña esta app, parece plantilla
/inspo landing para mi app de notas con IA, me encantan linear.app y stripe.com

Paso 4: Vota en el tablero

Se abre un tablero en tu navegador (localhost:4777) que se va llenando en vivo: unas 250 referencias en 5 secciones tardan como 6 minutos.

En cada referencia das 👍, 👎 o ★ y marcas el porqué: layout, tipografía, color, animación… Eso le dice a Claude qué tomar de cada imagen y qué ignorar. Cuando termines, dale Enviar.

Usa ⚡ Votar rápido: te enseña una referencia a la vez y votas con el teclado. 1 = me gusta, 2 = no me gusta, S = estrella y X = no es de esta sección (la quita para siempre). Todo se guarda solo.

Paso 5: Elige un estilo

inspo dibuja tu propia landing, con tu texto, en 4 a 6 direcciones distintas. Cada una trae su paleta, sus fuentes, su layout y fotos reales con licencia libre. Hay 16 estilos de base (Swiss Minimal, Editorial Serif, Neo-Brutalist, Dark Luxury, Organic Soft y más) y Claude los ajusta o inventa otros para tu idea.

Votas igual que con las referencias.

Paso 6: Agrega efectos del Lab

El Lab tiene 18 componentes que corren en vivo: shaders, un globo de puntos, un nudo de vidrio, galaxias de partículas, tarjetas que se apilan con el scroll, botones magnéticos, texto que se revela… y Claude escribe nuevos para tu idea.

Puedes repintarlos todos con el estilo que te gustó. Cuando eliges uno, Claude lo pasa al código de tu proyecto.

Paso 7: Revisa el plan

Después de votar, Claude analiza tus favoritos y escribe el plan de cada sección: la referencia principal, alternativas y qué se toma de cada una (layout, tipografía, color, imágenes, animación).

Puedes cambiar la referencia por cualquiera de tus likes, cambiar el estilo y dejar notas. Cuando lo apruebas, Claude construye con ese plan.

Paso 8: Comenta la página hasta que quede

Claude publica la página en la pestaña Página, con vista de escritorio, tablet y celular. Votas y comentas cada sección, o activas Comentar y das clic en cualquier parte de la página para dejar una nota justo ahí.

Cada comentario puede llevar una imagen de referencia y una acción: ajustar, reemplazar la sección por la referencia, agregar una sección arriba o agregar una abajo. Le das Enviar y Claude publica la v2, la v3… todo en el mismo tablero.

Sé específico con tu giro. «Distribuidor de llantas B2B en Monterrey» da referencias mucho mejores que «página para un negocio». Pásale también sitios de tu industria que admires y quita con la X todo lo genérico.

Paso 9: Llévate el reporte en PDF

Al terminar la ronda de votos, inspo exporta un reporte con acabado de estudio: portada, dirección, las referencias ganadoras de cada sección con tus notas, los estilos, los componentes y la página actual. Sirve para presentárselo a un cliente o para guardar la decisión.

Si lo quieres otra vez, pídeselo a Claude: «expórtame el PDF de inspo».

Paso 10: También para sistemas y apps

Si lo que haces es un dashboard, un panel o una app, inspo investiga pantallas en lugar de secciones: login, onboarding, dashboard, tablas, formularios, configuración, perfil, checkout… Los estilos se dibujan como un dashboard con tus datos o como tres pantallas de teléfono, y Claude construye un prototipo navegable.

Las pantallas salen de productos reales (SaaS Interface), de Dribbble filtrado por plataforma y de Mobbin si inicias sesión con tu cuenta.

Comandos útiles (en la Terminal, dentro de la carpeta de inspo)

node bin/inspo.js serve      # abre el tablero de la última sesión
node bin/inspo.js sessions   # lista tus sesiones
node bin/inspo.js doctor     # revisa Chrome, la red y cada galería
node bin/inspo.js login mobbin   # inicia sesión en Mobbin una vez

Si una galería deja de dar resultados, corre doctor: te dice cuál falla. Todo lo de cada proyecto se guarda en la carpeta .inspo dentro de tu proyecto (referencias, votos, versiones y DESIGN.md) y nada sale de tu computadora salvo las visitas para investigar. Toma principios, no pixeles: inspo es para inspirarte, no para clonar sitios.

Recurso — El código, la instalación para Cursor y Claude Desktop, y la lista completa de herramientas.

¿Quieres tu página hecha así? Investigamos, la diseñamos contigo y la construimos. Mándame mensaje.