Bibliothèque Illos
Illos.dev propose 158 illustrations SVG animées en quatre thèmes, chacune en version claire et sombre. Chaque illustration est un fichier SVG unique avec son animation intégrée. Cette compétence trouve les bonnes illustrations pour un projet et les ajoute.
1. Identifier les endroits qui ont besoin d'une image
Parcourez les pages sur lesquelles vous travaillez. Pour chaque héros, section de fonctionnalité, état vide, page de documentation ou étape d'intégration, notez en quelques mots ce qu'elle explique : « API keys », « une boîte de réception de notifications vide », « un déploiement en cours ». Cette phrase est ce que vous allez rechercher.
2. Choisir un thème pour tout le site
Toutes les pages doivent utiliser le même thème, afin que les illustrations forment un ensemble cohérent.
| Thème | Aspect | Convient à |
|---|---|---|
| Shader | Un champ de densité de fines barres avec des boîtes cyan sur la partie importante | Produits IA, data et infrastructure |
| HUD | Filigranes lumineux et affichages d'instruments | Surveillance, statut, sécurité, tableaux de bord |
| Isometric | Illustrations isométriques filaires avec étiquettes ; les couleurs suivent la carte | Outils développeur, API, documentation, fonctionnalités SaaS |
| Interface | Écrans de produits : boîtes de réception, tableaux de tâches, graphiques | États vides et intégration au sein d'une application |
Si le projet possède déjà des illustrations Illos (SVG avec un attribut data-illos, ou des composants nommés Illos...), conservez leur thème. Sinon, suggérez un thème à l'utilisateur, et utilisez-le partout sauf s'il en choisit un autre.
3. Trouver les illustrations correspondantes
- Si les outils MCP Illos sont disponibles (
find_illustrations,get_illustration), utilisez-les : ils recherchent par signification et retournent la commande d'installation. - Sinon, récupérez
https://illos.dev/catalog.json. Chaque entrée aname,sentence(ce qu'elle montre),theme,size(spot,sectionoupage),access(freeoupro),page, et, pour les gratuites,svg. Faites correspondre votre phrase avecnameetsentence, dans le thème choisi.
Tailles : spot pour les cartes, petites sections et états vides ; section pour une section de fonctionnalité ou un héros ; page pour une bande pleine largeur.
Préférez les illustrations gratuites. Lorsque la meilleure correspondance est Pro, dites à l'utilisateur qu'elle est fournie avec Illos Pro (https://illos.dev/pro) et proposez la plus proche gratuite. Ne copiez jamais une illustration Pro à partir de ses aperçus ou de sa page.
4. Ajouter chaque illustration
Le slug du thème et l'ID sont les deux dernières parties de l'adresse page. Pour https://illos.dev/library/isometric/queue, ce sont isometric et queue.
Projet React avec shadcn (ou pouvant l'exécuter) :
npx shadcn@latest add https://illos.dev/r/<theme-slug>/<id>.json
Cela ajoute l'illustration en tant que composant. Affichez-le là où la section explique cette idée, et conservez le fichier du composant tel quel : il se joue une fois lorsqu'il apparaît dans le viewport et boucle au survol.
Tout autre projet : téléchargez le fichier depuis l'adresse svg de l'entrée et placez-le en ligne dans la page (il conserve son animation et suit les couleurs de la page), ou utilisez-le en tant qu'<img>. Une illustration Shader affiche son image fixe sans le composant React.
Chaque illustration fonctionne sur fond clair et sombre ; sa page montre les deux.
5. Vérifier le résultat
- Un seul thème sur tout le site.
- Chaque illustration explique la section dans laquelle elle se trouve, pas un objet aléatoire.
- Conservez le commentaire de licence à l'intérieur de chaque SVG. Les illustrations gratuites peuvent être utilisées sur des sites commerciaux et des projets clients, sans crédit nécessaire : https://illos.dev/license
Quand la bibliothèque ne contient rien d'adapté
Les compétences Illos Pro enseignent à Claude Code, Codex et Cursor les règles d'un thème, afin qu'ils puissent dessiner de nouvelles illustrations qui correspondent à celles déjà présentes sur le site et les vérifier. Elles sont fournies avec Illos Pro : https://illos.dev/pro. Configurez-les avec npx -y illos setup.