如何為 XENEON EDGE 建立自訂小工具

XENEON EDGE 不僅僅是一台副螢幕。它能成為您最常查看資訊的專屬空間。iCUE 內建了一組小工具，但您也可以自行製作。無論您想要自訂的系統監控器、天氣顯示，還是更專業的功能，製作小工具其實比想像中更簡單。

本指南將說明自訂小工具的運作原理、完整技術參考文件的位置、開始前需準備的事項，以及 AI 程式設計工具如何大幅加快開發流程。

自訂小工具是使用 HTML、CSS 和 JavaScript 建構而成，並在基於 Chromium 的渲染引擎（QtWebEngine）上運行。

從結構層面來看，每個小元件都是一個資料夾，其中必須包含兩個檔案：

• index.html：小工具的入口點（標記、樣式與腳本）。
• manifest.json：描述小工具的元資料，包括名稱、版本、支援的裝置以及所需的外掛程式。

可選檔案包括額外的 CSS 和 JavaScript 檔案、圖片資源，以及用於在地化的 translation.json 檔案。

在此無需重複闡述完整規格，有關清單格式、可由使用者設定的控制元件類型（滑桿、色彩選取器、感測器選擇器等）、感測器與媒體的外掛程式 API，以及用於連線至 iCUE 的執行時掛鉤等完整參考資料，皆收錄於 Elgato 官方文件中。該文件為權威來源，並會隨著框架的演進保持同步更新。

• https://docs.elgato.com/icue/widgets/

CORSAIR 提供了一套 WidgetBuilder 套件，以簡化此流程。該套件包含 WidgetBuilder 命令列介面（CLI）以及供 AI 程式設計代理使用的技能。

WidgetBuilder CLI（icuewidget）是一款命令列工具，可協助建立新的小工具資料夾、驗證您的清單檔與 HTML 檔案，並將結果封裝成 .icuewidget 檔案，以便直接匯入 iCUE。

此技能專為 Claude Code、Codex、Gemini CLI、Augie、OpenCode 及類似工具等程式設計代理而設計。它會向代理提供小工具規格、XENEON EDGE、Pump LCD 及 Keyboard LCD 的裝置尺寸與解析度，以及佈局、清單檔和外掛程式使用的規範。

這些工具共同涵蓋了整個循環：架構、生成、驗證、打包。請在下方找到 WidgetBuilder Kit 的下載連結。

• WidgetBuilder 命令列介面：https://www.corsair.com/s/downloads#more-downloads（請從頁面底部附近的下拉式選單中選擇 iCUE）
• GitHub 技能：https://github.com/Corsair-Labs/icue-widget-builder

在開始開發之前，請務必準備好以下項目：

• XENEON EDGE 已連線
• 已安裝 iCUE 5，版本 5.44 或更高
• 從 WidgetBuilder Kit 安裝的 WidgetBuilder CLI
• 已安裝的編碼工具，例如 Claude Code、Codex、Gemini CLI、Augie、OpenCode，或是您偏好的其他工具

您無需具備網頁開發者的背景，也能建立自訂的 HTML 小工具。像 Claude Code、Codex、Gemini CLI、Augie、OpenCode 或是類似的 AI 編碼工具，都能根據自然語言的描述，生成可運作的小工具程式碼。

將 WidgetBuilder Kit 中的技能上傳至您選擇的程式設計代理程式。該技能會根據小工具規格、XENEON EDGE、Pump LCD 及 Keyboard LCD 的裝置尺寸與解析度，以及佈局、清單檔和外掛程式使用的規範，對模型進行預先設定。

技能載入完成後，請描述您的需求。例如：

• 「為 XENEON EDGE 建立一個小工具，用深色背景顯示我的 CPU 和 GPU 溫度，並採用會根據溫度從綠色漸變至紅色的彩色儀表，同時讓我能在設定面板中自訂警示閾值。」
• AI 程式設計助手將產生 index.html、manifest.json、圖示及其他輔助檔案。此技能會引導模型依循結構化的工作流程：提出釐清問題、設計版面配置、產生程式碼，並協助您測試及打包最終成果。

請具體說明您希望顯示哪些資料，以及資料應以何種形式呈現。請註明您鎖定的裝置（XENEON EDGE、鍵盤 LCD、泵浦 LCD，或三者皆有）。若您希望提供可由使用者自訂的設定，請說明哪些項目應可調整。此外，若您的小工具需要外部資料（例如天氣、股價，或任何從 API 擷取的資料），請事先說明，以便 AI 能引導您選擇資料來源。

當 AI 生成您的檔案後，請透過 WidgetBuilder CLI 處理這些檔案，以驗證輸出結果，並將結果封裝成 .icuewidget 檔案。若發現任何不妥之處，請告知 AI 應如何修改。這是一個迭代循環，讓即使沒有程式設計經驗的人也能輕鬆建立小工具。

儘管大型語言模型（LLM）發展迅速，但這個過程可能需要經過幾輪迭代。要打造一個精緻且獨特的元件，仍需仰賴工藝、測試以及對細節的講究。

將小工具打包完成後，請點擊「小工具」面板中的「+」按鈕並選擇檔案，將其匯入 iCUE。您也可以直接雙擊系統中的 .icuewidget 檔案。iCUE 會驗證該檔案，若一切正常，您的 widget 便會出現在所有受支援裝置的小工具清單中。

無論您是手動編寫程式碼，還是利用人工智慧生成小工具，都有幾點需要注意：

• 確保內容一目瞭然。最優秀的小工具能在幾秒鐘內傳達最重要的資訊。如果使用者必須仔細研究你的小工具才能弄清楚它顯示了什麼，那就表示它太複雜了。請將關鍵資料置於最顯眼的位置。
• 針對多種狀態進行設計。如果您的小工具依賴網路資料或感測器讀數，請思考當這些資料無法取得時會發生什麼情況。在初始化過程中顯示載入狀態；若發生錯誤，則顯示明確的錯誤訊息；理想的情況下，應持續顯示最後已知的有效資料並搭配離線標示，而非讓畫面變為空白。
• 請配合螢幕尺寸進行設計。XENEON EDGE 的小工具插槽尺寸範圍從「小」（水平 840x344）到「特大」（水平 2536x696）。若您的 widget 需支援多種尺寸，請採用響應式佈局。切勿僅將所有元素直接放大。請善用較大尺寸的額外空間，以顯示更多資訊或提升可讀性。
• 請在實際裝置上進行測試。即使在瀏覽器預覽中看起來不錯，在 XENEON EDGE 裝置上呈現的效果也可能有所不同。在宣告完成之前，請先匯入您的小工具並在實際硬體上進行檢查。

一旦您製作出令自己引以為傲的作品，就有幾種方式可以讓其他人看到。最簡單的方法是將其匯出為 .icuewidget 檔案，並直接與朋友或社群成員分享。

一個創作者入口網站即將上線，讓小工具開發者能直接在Elgato Marketplace 上發布作品，並同時支援免費與付費小工具。這為設計師和開發者提供了一條明確的途徑，使其能觸及更廣泛的 XENEON EDGE 社群。