Community影像github.com

KoBa-beep/ClaudeCode-Skill

為 Fibaro Home Center 3 / Yubii Home 建立裝置圖示 — 以透明背景、小圓形狀態徽章,真實描繪實體裝置,每個狀態一個 128×128 PNG(+SVG),在淺色與深色模式下皆可讀 — 並上傳/套用至 HC3(POST /api/icons, icon0…icon100, deviceIcon)。當使用者需要 QuickApp、Z-Wave 模組、子裝置、窗簾(11 段位)、感應器的圖示,或詢問為何圖示不隨狀態改變時,即使用此技能,即使他們只說「讓它看起來更好看」或「為我的裝置做張圖片」。

ClaudeCode-Skill 是什麼?

此技能專門為 Fibaro Home Center 3(HC3)與 Yubii Home 系統產生與上傳高品質的裝置圖示。其核心是一個 Python 工廠(`scripts/icon_kit.py`),內含風格輔助工具(漸層、柔影、徽章與約 35 種徽章圖形),可讓您專注於繪製真實的裝置外觀。產出的圖示遵循 HC3 原生 UI 風格:真實描繪、透明背景、在右下角放置直徑約 22 像素的圓形狀態徽章(綠色:開啟、灰色:待機/關閉、紅色:警報、橘色:警告、藍色:開啟/等級、紫色:自動等),且繪圖範圍限制在 128×128 viewBox 內,距離邊緣 10–118 像素。它會根據裝置類型自動決定所需的檔案數量(二進位:2 個、多層級:11 個、單一狀態:1 個),並產生預覽影像供使用者驗證。技能也記錄了透過 `/api/icons` 進行上傳與套用的完整流程,包括處理 `deviceTemplate`、在 QuickApp 中使用 `self:updateProperty` 動態切換圖示,以及刪除舊圖示。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/KoBa-beep/ClaudeCode-Skill/tree/HEAD/fibaro-hc3/hc3-icons

Installed? Explore more 影像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

HC3 裝置圖示

以使用者語言回覆。使用 scripts/icon_kit.py(Python,需安裝 pip install cairosvg pillow)產生圖示: 它包含了樣式輔助工具(漸層、柔影、徽章、約 35 種徽章圖形)、一個範例裝置繪圖(附有 11 段位百葉窗的天窗)以及預覽產生器。

風格(讓這些圖示適合 HC3 使用者介面)

  • 真實描繪實際裝置(形狀、顏色、材質、視角)。要求使用者提供確切型號的照片並加以複製;切勿描摹照片或複製製造商標誌/商標(這樣也能保持圖示可分享)。如果使用者明確要求僅供私人使用的品牌標誌,請將該圖示排除在任何公開內容之外。
  • 透明背景,每個狀態一個檔案 — 無淺色/深色變體。為確保在兩種主題下都可讀,請為深色裝置加上淺色邊緣(stroke="#FFFFFF" 1–2 像素或較淺的斜角),且切勿繪製背景底板。
  • 右下角的小圓形徽章(中心點 100,100,半徑約 22,白色外環):顯示狀態(綠色:開啟、灰色:待機/關閉、紅色:警報、橘色:警告、藍色:開啟/等級、紫色:自動…)或測量數值(溫度計、水滴、CO₂、風速…)。裝置繪圖需空出該角落。
  • 128 × 128 viewBox,繪圖範圍約在 10–118 像素內,落地式裝置下方加上柔和的橢圓形陰影。
  • 在交付前檢查預覽(preview.png:每個圖示在淺色/深色對角背景上各顯示一次)。

每個裝置需要多少張圖片(HC3 規則)

裝置類型一個圖示組的圖片數量上傳欄位
二進位(開關、binarySensor、門/窗、動作、煙霧…)2:待機/啟動icon0, icon100
多層級(調光器、百葉窗、閥門高度)11:0, 10 … 100icon0 … icon100
deviceController、大多數 QuickApp 父裝置、multilevelSensor / 溫度…1icon0

單一圖片的類型無法自行改變畫面。對於狀態相關的 QA 圖示(正常/警告/警報,或一種模式),請為每個狀態上傳一組圖示,並透過 Lua 切換:self:updateProperty("deviceIcon", tonumber(self:optionalVariable("iconAlarm"))) (將 ID 貼在變數中;模式請參考 hc3-quickapp 技能的 references/patterns.md §5)。 為每個有用的狀態製作一個圖示,並為 QuickApp 建立的每個裝置(父裝置與子裝置)製作圖示。

工作流程

  1. 列出所有裝置(父裝置、每個子裝置、每個 Z-Wave 子裝置)及其確切的 type(api.get("/devices/<id>"),例如 Fibaro 百葉窗模組為 com.fibaro.FGR224,QA 子裝置為 com.fibaro.rollerShutter)。
  2. 要求提供真實型號的照片;協商狀態與徽章的含義。
  3. 複製 scripts/icon_kit.py,為每個裝置編寫一個繪圖函式(128 方框內的 SVG 片段,請參閱 roof_window(pct)),在 ICONS 中加入 (name, title, body) 列 — 每個狀態一列 — 然後執行 python3 icon_kit.py --out icons/。命名規則:<裝置名稱>-<狀態>(shutter-000…shutter-100、boiler-on、boiler-off),以便 README 表格能說明哪個圖示對應到哪個位置。
  4. 顯示 preview.png;根據使用者的意見反覆修改(形狀、顏色、如表情符號般的徽章清晰度)。
  5. 上傳:在 QA 的 qa.json 中的 icons 區段列出各組圖示,然後讓 build_fqa.py(技能 hc3-packaging) 產生 <qa>-icons.sh,或手動上傳:設定 → 裝置 → 裝置 → 圖示 → 新增。

上傳 API(在 5.2xx 版本中觀察到)

POST /api/icons,multipart/form-data:type=device、deviceTemplate=<精確的裝置類型>、每個狀態一個檔案 (icon0、icon100 或 icon0…icon100)、fileExtension=png(也接受 svg)。回傳 201 {"id": 1055, "iconSetName": "User1055", "fileExtension": "png"}。套用:PUT /api/devices/<id> {"properties": {"deviceIcon": 1055}}(從外部執行 — 切勿從 QA 內部對 QA 自身的 ID 執行,這會導致重啟;請使用 self:updateProperty)。刪除:DELETE /api/icons?id=&type=device&name=&fileExtension=png。使用者圖示 ID 從 約 1000 開始。GET /api/icons 會列出它們(不同韌體中存在兩種回應格式:請都接受)。 房間和場景圖示也存在(type=room / type=scene 可能 [V])。

references/badges.md 列出了該工具包中可用的徽章顏色和圖形。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

相關技能