Illos 圖庫
Illos.dev 提供 158 張動畫 SVG 插圖，涵蓋四種主題，每種主題皆有淺色與深色版本。每張插圖都是單一 SVG 檔案，動畫效果內建其中。此技能會為您的專案找到合適的插圖並將其加入。
1. 找出需要圖片的位置
閱讀您正在處理的頁面。針對每個英雄區塊、功能區塊、空狀態、文件頁面或入門引導步驟，用幾個字寫下它說明的內容，例如：「API 金鑰」、「空的通知收件匣」、「正在進行的部署」。這個短語就是您搜尋的依據。
2. 為整個網站挑選一個主題
每個頁面應使用相同的主題，這樣插圖看起來才像一整套。
| 主題 | 看起來像 | 適合用於 |
|---|---|---|
| Shader | 由細長條組成的密度場，在關鍵部分加上青色方塊 | 人工智慧、數據與基礎設施產品 |
| 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 適用於功能區塊或英雄區塊；page 適用於全寬橫幅。
優先選擇免費插圖。當最佳匹配是 Pro 插圖時，請告知使用者該插圖來自 Illos Pro (https://illos.dev/pro)，並提供最接近的免費插圖。切勿從其預覽圖片或頁面複製 Pro 插圖。
4. 加入每張插圖
主題代號與 ID 是 page 位址的最後兩個部分。以 https://illos.dev/library/isometric/queue 為例，它們分別是 isometric 和 queue。
使用 shadcn 的 React 專案（或可以執行 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 進行設定。