如何为 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、键盘液晶屏、泵液晶屏，或三者皆有）。如果您希望设置可由用户自定义，请描述哪些内容应可调整。此外，如果您的控件需要外部数据（如天气、股价或任何通过 API 获取的数据），请提前说明，以便 AI 能指导您选择数据源。

AI 生成文件后，请通过 WidgetBuilder CLI 对其进行验证，并将结果打包为 .icuewidget 文件。如果发现问题，请告知 AI 需要修改的内容。这是一个迭代过程，让即使没有编程经验的人也能轻松创建小部件。

尽管大型语言模型（LLMs）发展迅速，但这一过程可能需要经过几次迭代。要打造一个出色且独具特色的小工具，仍然需要精湛的工艺、反复测试以及对细节的关注。

小部件打包完成后，请点击“小部件”面板中的“+”按钮并选择该文件，将其导入 iCUE。您也可以直接双击系统中的 .icuewidget 文件。iCUE 会验证该文件，如果一切正常，该小部件就会出现在所有受支持设备的“小部件”列表中。

无论您是手动编写代码，还是使用人工智能生成控件，都有几点需要注意：

• 确保信息一目了然。优秀的控件能在几秒钟内传达最重要的信息。如果用户必须仔细研究你的控件才能弄清楚它显示的内容，那就说明它太复杂了。请将关键数据放在最显眼的位置。
• 为多种状态进行设计。如果你的控件依赖于网络数据或传感器读数，请考虑当这些数据不可用时会发生什么情况。在初始化过程中显示加载状态；如果出现问题，则显示清晰的错误信息；理想情况下，应继续显示最后已知的有效数据并配以离线指示符，而不是让界面变空。
• 请尊重屏幕尺寸。XENEON EDGE 的小部件槽尺寸范围从“小”（水平 840x344）到“特大”（水平 2536x696）。如果您的 widget 支持多种尺寸，请采用响应式布局。不要仅仅将所有内容放大。请利用大尺寸屏幕上的额外空间来显示更多信息或提高可读性。
• 请在实际设备上进行测试。在浏览器预览中看起来不错的内容，在 XENEON EDGE 设备上渲染效果可能会有所不同。在宣布完成之前，请先导入小部件并在真实硬件上进行验证。

一旦你制作出了令自己引以为豪的作品，就有几种方法可以将其展示给其他人。最简单的方法是将其导出为 .icuewidget 文件，然后直接与朋友或社区成员分享。

一个创作者门户网站即将上线，该平台将允许小工具开发者直接在Elgato Marketplace上发布作品，并同时支持免费和付费小工具。这为设计师和开发者提供了一条触达更广泛的XENEON EDGE社区的明确途径。