Illos 图库
Illos.dev 提供 158 张动画 SVG 插图，分为四种主题，每种都包含明暗两种配色。每张插图都是一个独立 SVG 文件，动画内嵌其中。本技能负责为项目找到合适的插图并添加。
1. 找到需要配图的位置
阅读你正在处理的页面。对于每个 Hero 区、功能模块、空状态、文档页面或引导步骤，用几个词写下它所说明的内容：例如 "API 密钥"、"空的通知收件箱"、"正在进行的部署"。这些短语就是你的搜索关键词。
2. 为整个站点选择一个主题
所有页面应使用同一主题，使插图看起来协调一致。
| 主题 | 外观 | 适用场景 |
|---|---|---|
| Shader | 密度场般的细条，关键区域配有青色方块 | AI、数据及基础设施产品 |
| HUD | 发光的线框与仪表读数 | 监控、状态、安全、仪表盘 |
| Isometric | 等轴测线稿插图，带标签；颜色随卡片变化 | 开发者工具、API、文档、SaaS 功能 |
| Interface | 产品界面截图：收件箱、任务面板、图表 | 应用内部的空状态与引导流程 |
如果项目中已有 Illos 插图（带有 data-illos 属性的 SVG，或名为 Illos... 的组件），则保持它们所使用的主题。否则，向用户推荐一个主题，并在所有地方统一使用，除非用户选择了其他主题。
3. 找到匹配的插图
- 如果 Illos MCP 工具可用（
find_illustrations、get_illustration），请使用它们：它们能按语义搜索并返回安装命令。 - 否则，请求
https://illos.dev/catalog.json。每个条目包含name（名称）、sentence（展示内容）、theme（主题）、size（尺寸：spot、section或page）、access（访问权限：free或pro）、page（页面地址），以及免费插图的svg地址。将你的短语与所选主题内的name和sentence进行匹配。
尺寸说明：spot 适用于卡片、小模块和空状态；section 适用于功能模块或 Hero 区；page 适用于全宽横幅区域。
优先选择免费插图。当最佳匹配是 Pro 插图时，告知用户该插图属于 Illos Pro（https://illos.dev/pro），并提供最接近的免费插图。切勿从预览图或其页面复制 Pro 插图。
4. 添加每张插图
主题标识和插图 ID 是 page 地址的最后两部分。例如 https://illos.dev/library/isometric/queue 中，主题标识为 isometric，插图 ID 为 queue。
React 项目（使用 shadcn 或可运行 shadcn 的项目）：
npx shadcn@latest add https://illos.dev/r/<theme-slug>/<id>.json
该命令会将插图添加为一个组件。将其渲染在解释该概念的章节中，保持组件文件不变：它会在滚动到视口时播放一次，鼠标悬停时循环播放。
其他任何项目： 从条目的 svg 地址下载文件，将其内联到页面中（它会保留动画并跟随页面颜色），或作为 <img> 使用。Shader 插图在不使用 React 组件的情况下会显示其静态帧。
每张插图都能在浅色和深色背景上正常工作；其页面会展示两种背景下的效果。
5. 检查结果
- 整个站点使用统一主题。
- 每张插图都说明其所在章节的内容，而非随机物件。
- 保留每个 SVG 文件内的许可注释。免费插图可用于商业网站和客户项目，无需署名：https://illos.dev/license
当图库中没有合适的插图时
Illos Pro 技能会教授 Claude Code、Codex 和 Cursor 某个主题的创作规则，使它们能够绘制与现有站点插图风格一致的新插图，并对每张插图进行检查。这些技能随 Illos Pro 提供：https://illos.dev/pro。使用 npx -y illos setup 进行设置。