Illos-Bibliothek
Illos.dev bietet 158 animierte SVG-Illustrationen in vier Themen, jeweils in Hell und Dunkel. Jede ist eine einzelne SVG-Datei mit integrierter Animation. Dieser Skill findet die passenden für ein Projekt und fügt sie hinzu.
1. Finde die Stellen, die ein Bild brauchen
Lies die Seiten, an denen du arbeitest. Notiere für jeden Heldenbereich, jede Feature-Sektion, jeden leeren Zustand, jede Dokumentationsseite oder jeden Onboarding-Schritt in wenigen Worten, was er erklärt: "API-Schlüssel", "ein leeres Benachrichtigungspostfach", "ein Deployment, das ausgerollt wird". Dieser Satz ist das, wonach du suchst.
2. Wähle ein Thema für die gesamte Website
Jede Seite sollte dasselbe Thema verwenden, damit die Illustrationen wie ein Set wirken.
| Thema | Sieht aus wie | Geeignet für |
|---|---|---|
| Shader | Ein Dichtefeld aus dünnen Balken mit blaugrünen Kästchen auf dem relevanten Teil | KI-, Daten- und Infrastrukturprodukte |
| HUD | Leuchtendes Drahtgitter und Instrumentenanzeigen | Monitoring, Status, Sicherheit, Dashboards |
| Isometrisch | Isometrische Strichillustrationen mit Beschriftungen; Farben folgen der Karte | Entwicklertools, APIs, Docs, SaaS-Features |
| Interface | Produktbildschirme: Postfächer, Aufgabenboards, Diagramme | Leere Zustände und Onboarding innerhalb einer App |
Wenn das Projekt bereits Illos-Illustrationen enthält (SVGs mit einem data-illos-Attribut oder Komponenten namens Illos...), behalte deren Thema bei. Andernfalls schlage dem Benutzer ein Thema vor und verwende es überall, es sei denn, er wählt ein anderes.
3. Finde passende Illustrationen
- Wenn die Illos-MCP-Tools verfügbar sind (
find_illustrations,get_illustration), verwende sie: Sie suchen nach Bedeutung und geben den Installationsbefehl zurück. - Andernfalls rufe
https://illos.dev/catalog.jsonab. Jeder Eintrag hatname,sentence(was es zeigt),theme,size(spot,sectionoderpage),access(freeoderpro),pageund, für kostenlose,svg. Gleiche deinen Suchbegriff mitnameundsentenceim gewählten Thema ab.
Größen: spot für Karten, kleine Abschnitte und leere Zustände; section für eine Feature-Sektion oder einen Heldenbereich; page für ein vollflächiges Band.
Bevorzuge kostenlose Illustrationen. Wenn die beste Übereinstimmung Pro ist, teile dem Benutzer mit, dass sie mit Illos Pro (https://illos.dev/pro) kommt, und biete die nächstbeste kostenlose an. Kopiere niemals eine Pro-Illustration aus ihren Vorschaubildern oder der Seite.
4. Füge jede hinzu
Der Themen-Slug und die ID sind die letzten beiden Teile der page-Adresse. Für https://illos.dev/library/isometric/queue sind sie isometric und queue.
React-Projekt mit shadcn (oder eines, das es ausführen kann):
npx shadcn@latest add https://illos.dev/r/<theme-slug>/<id>.json
Das fügt die Illustration als Komponente hinzu. Rendere sie dort, wo der Abschnitt diese Idee erklärt, und behalte die Komponentendatei so, wie sie ist: Sie wird einmal abgespielt, wenn sie in den sichtbaren Bereich gescrollt wird, und wiederholt sich, während sie gehovered wird.
Jedes andere Projekt: Lade die Datei von der svg-Adresse des Eintrags herunter und füge sie inline in die Seite ein (sie behält ihre Animation und folgt den Farben der Seite) oder verwende sie als <img>. Eine Shader-Illustration zeigt ohne die React-Komponente nur ihren Standbild-Rahmen.
Jede Illustration funktioniert auf hellem und dunklem Hintergrund; ihre Seite zeigt beide.
5. Überprüfe das Ergebnis
- Ein Thema auf der gesamten Website.
- Jede Illustration erklärt den Abschnitt, in dem sie sitzt, nicht ein zufälliges Objekt.
- Behalte den Lizenzkommentar innerhalb jeder SVG. Kostenlose Illustrationen können auf kommerziellen Websites und für Kundenprojekte verwendet werden, ohne Quellenangabe: https://illos.dev/license
Wenn die Bibliothek nichts Passendes hat
Die Illos-Pro-Skills bringen Claude Code, Codex und Cursor die Regeln eines Themas bei, so dass sie neue Illustrationen zeichnen können, die zu den bereits auf der Website vorhandenen passen, und jede einzelne überprüfen. Sie sind in Illos Pro enthalten: https://illos.dev/pro. Richte sie mit npx -y illos setup ein.