Biblioteca Illos
Illos.dev tiene 158 ilustraciones SVG animadas en cuatro temas, cada una en versión clara y oscura. Cada una es un único archivo SVG con su animación incorporada. Esta habilidad encuentra las adecuadas para un proyecto y las agrega.
1. Encuentra los lugares que necesitan una imagen
Lee las páginas en las que estás trabajando. Para cada héroe, sección de características, estado vacío, página de documentación o paso de incorporación, anota en pocas palabras lo que explica: "claves API", "una bandeja de entrada de notificaciones vacía", "un despliegue en marcha". Esa frase es lo que buscarás.
2. Elige un tema para todo el sitio
Todas las páginas deben usar el mismo tema para que las ilustraciones parezcan un conjunto cohesionado.
| Tema | Apariencia | Adecuado para |
|---|---|---|
| Shader | Un campo de densidad de barras finas con cajas verde azuladas en la parte relevante | Productos de IA, datos e infraestructura |
| HUD | Wireframe brillante y lecturas de instrumentos | Monitoreo, estado, seguridad, paneles de control |
| Isométrico | Ilustraciones de líneas isométricas con etiquetas; los colores siguen la tarjeta | Herramientas para desarrolladores, APIs, documentación, funciones SaaS |
| Interfaz | Pantallas de producto: bandejas de entrada, tableros de tareas, gráficos | Estados vacíos e incorporación dentro de una aplicación |
Si el proyecto ya tiene ilustraciones Illos (SVG con un atributo data-illos, o componentes llamados Illos...), mantén su tema. De lo contrario, sugiere un tema al usuario y utilízalo en todas partes a menos que elija otro.
3. Encuentra ilustraciones que coincidan
- Si las herramientas MCP de Illos están disponibles (
find_illustrations,get_illustration), úsalas: buscan por significado y devuelven el comando de instalación. - De lo contrario, obtén
https://illos.dev/catalog.json. Cada entrada tienename,sentence(lo que muestra),theme,size(spot,sectionopage),access(freeopro),page, y, para las gratuitas,svg. Compara tu frase connameysentence, dentro del tema elegido.
Tamaños: spot para tarjetas, secciones pequeñas y estados vacíos; section para una sección de características o un héroe; page para una banda de ancho completo.
Prefiere las ilustraciones gratuitas. Cuando la mejor coincidencia sea Pro, informa al usuario que viene con Illos Pro (https://illos.dev/pro) y ofrécele la gratuita más cercana. Nunca copies una ilustración Pro de sus imágenes de vista previa o página.
4. Agrega cada una
El slug del tema y el id son las dos últimas partes de la dirección de la page. Para https://illos.dev/library/isometric/queue, son isometric y queue.
Proyecto React con shadcn (o uno que pueda ejecutarlo):
npx shadcn@latest add https://illos.dev/r/<theme-slug>/<id>.json
Esto agrega la ilustración como un componente. Renderízalo donde la sección explique esa idea y mantén el archivo del componente tal cual: se reproduce una vez cuando se desplaza a la vista y se repite mientras se pasa el ratón por encima.
Cualquier otro proyecto: descarga el archivo desde la dirección svg de la entrada y colócalo en línea en la página (mantiene su animación y sigue los colores de la página), o úsalo como un <img>. Una ilustración Shader muestra su fotograma fijo sin el componente React.
Cada ilustración funciona en fondos claros y oscuros; su página muestra ambos.
5. Verifica el resultado
- Un mismo tema en todo el sitio.
- Cada ilustración explica la sección en la que se encuentra, no un objeto aleatorio.
- Mantén el comentario de licencia dentro de cada SVG. Las ilustraciones gratuitas se pueden usar en sitios comerciales y trabajos de clientes, sin necesidad de crédito: https://illos.dev/license
Cuando la biblioteca no tiene nada que se ajuste
Las habilidades Illos Pro enseñan a Claude Code, Codex y Cursor las reglas de un tema, para que puedan dibujar nuevas ilustraciones que coincidan con las que ya están en el sitio y verificar cada una. Vienen con Illos Pro: https://illos.dev/pro. Configúralas con npx -y illos setup.