小編精選 - 技術文章翻譯 · 04月18日

邪修！讓顯示器支援 AI、遠端、手勢三種控制方式

大家好，我是石小石~

解鎖 BenQ RD270Q 的新玩法

前不久，BenQ 發布了最新款的程式設計系列顯示器 RD270Q，很榮幸我獲得了優先體驗資格。剛開箱，我就被它出眾的顏值所吸引。

這款顯示器保留了 RD 系列最核心、也是我最喜歡的「程式設計模式」，而且它還升級到 144Hz 高更新率 並增加了 彩紙模式。這使得在長時間編碼下，它能大幅緩解眼部疲勞，體驗感非常舒適。

接下來，我會分享借助 RD270Q 配套的 DisplayPilot 2 軟體，結合 AI 與編碼，如何玩轉顯示器的特色功能：

用 Claude Code 切換顯示器程式設計模式

用手機遠端操控顯示器鎖定畫面

用手勢實現顯示器亮度調節 （動圖幀率問題，圖片效果不是很明顯）

同時，我會結合長時間的編碼體驗，驗證它是否能成為工程師必備的專業顯示器。

顯示器控制的核心——Display Pilot 2

無論是透過 AI、手機遠端還是手勢來控制顯示器，核心本質都是依靠電腦上執行的「腳本」去操控顯示器硬體。借助一些鍵鼠模擬腳本（如 Node 的 robotjs、nut-js，或 Python 的 keyboard），我們可以透過模擬滑鼠事件來間接操控軟體實現功能，如透過 Node.js 腳本實現自動移動滑鼠，並雙擊啟動軟體的自動化操作：

對應核心程式碼如下：

<div><div><div></div><span>js</span></div><div><div> <span>體驗 AI 程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span><span>const</span> { mouse,straightTo,<span>Point</span>,<span>Button</span>} = <span>require</span>(<span>"@nut-tree-fork/nut-js"</span>);</span>
<span>(<span>async</span> () => {</span>
<span>  <span>// 移動滑鼠到指定位置</span></span>
<span>  <span>await</span> mouse.<span>move</span>(<span>straightTo</span>(<span>new</span> <span>Point</span>(<span>10</span>, <span>10</span>)));</span>
<span>  <span>console</span>.<span>log</span>(<span>"滑鼠移動完成！"</span>);</span>
<span>  <span>// 點擊滑鼠</span></span>
<span>  <span>await</span> mouse.<span>doubleClick</span>(<span>Button</span>.<span>LEFT</span>);</span>
<span>  <span>console</span>.<span>log</span>(<span>"執行完成！"</span>);</span>
<span>})();</span>


可以看出，一些複雜的軟體操作，透過模擬滑鼠實現還是非常麻煩的，最重要的是腳本幾乎無法控制硬體。

幸運的是，BenQ `RD270Q` 自帶了配套軟體 `Display Pilot 2`，它可以直接透過軟體快速呼叫顯示器的硬體級操作能力，以滿足我們編程中的個性化控制需求。參考軟體截圖，它擁有非常多的顯示器操作功能，且基本都支援透過快捷鍵操作。

![](https://i.imgur.com/UeZuFsc.jpeg)

思路到這裡就很清晰了：**我們完全可以編寫腳本，模擬鍵盤事件觸發** `Display Pilot 2` **的快捷操作，從而間接實現對顯示器的控制。**

使用 Claude Code + Skills 控制顯示器
------------------------

### 程式設計模式切換效果示範

程式設計模式是 BenQ RD 系列顯示器的特色功能，在**深色模式下**，顯示器會透過硬體級演算法強化語法高亮效果，以提升長期編程的舒適度；RD270Q 新增的**彩紙模式**，則能讓介面產生類紙感的細膩色彩，滿足深度護眼需求。如下圖，在深色模式下，BenQ 對程式碼的顯示最佳化非常明顯，程式碼對比更加鮮明，不刺眼。

![](https://i.imgur.com/ykMzstw.jpeg)

> 它還搭載了萊茵認證的抗反射面板，即便在強光環境下使用，螢幕也不會刺眼、不產生明顯眩光，長時間觀看依舊舒適。
> 
> ![](https://i.imgur.com/AlVnS4D.jpeg)

在配套軟體的基礎上，我們能否借助 AI 實現這些顯示模式的一鍵自動切換呢？答案是完全可以。 比如，直接透過 AI 對話下達指令，讓顯示器自動切換至**電子書模式**：

![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/69b7e16eda04452eb60e4555905ae0db~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-z5bCP55-zT3J6:q75.awebp?rk3s=f64ab15b&x-expires=1776906519&x-signature=SbXYbkz8TQxhkR1SysrNL6CPPMA%3D)

或是透過指令讓 AI 精準調節螢幕亮度、音量等參數

![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8bfee4157749455c84f9bd1dc0124283~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-z5bCP55-zT3J6:q75.awebp?rk3s=f64ab15b&x-expires=1776906519&x-signature=xJxkuceuNkW6dzF9kuqlSaGEKhY%3D)

### 原理分析——RD270Q-Opera-skills

以 `Claude Code` 為例，我們來實現這一效果。需要明確的是：AI 本身並不能直接操控顯示器硬體，即便它能生成腳本，也不知道如何與顯示器互動。因此，我們可以透過**自訂技能（Skills）**——比如建立一個 `RD270Q-operation-skills`，來為 AI 擴展控制顯示器的能力。

> 如果你不了解 Skills，請自行搜尋。

該技能的專案結構如下：

<div><div><div></div>js</div><div><div> 體驗 AI 程式碼助手</div><div> 程式碼解讀</div><div>複製程式碼</div></div></div>```
RD270Q-operation-skills/
├── SKILL.md # 中繼資料與指令定義
├── index.js # 主入口：命令解析與分發
├── package.json # 專案依賴設定
├── test.js # 功能測試腳本
├── scripts/ # 底層操作模組
│ ├── keyboard.js # 鍵盤快捷鍵封裝
│ └── mouse.js # 滑鼠操作封裝
└── references/ # 參考文件
 └── 快捷鍵表.md # Display Pilot 2 完整快捷鍵

整個技能的核心邏輯非常簡單：將 Display Pilot 2 的快捷鍵功能在程式碼中做對應，讓 AI 可以透過函式呼叫觸發。

範例核心程式碼（scripts/keyboard.js）：

<div><div><div></div><span>js</span></div><div><div> <span>體驗 AI 程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span><span>// 鍵盤快捷鍵模組 - 封裝 Display Pilot 2 所有控制功能</span></span>
<span><span>const</span> { keyboard, <span>Key</span> } = <span>require</span>(<span>"@computer-use/nut-js"</span>);</span>
<span></span>
<span><span>// 執行快捷鍵組合</span></span>
<span><span>async</span> <span>function</span> <span>executeShortcut</span>(<span>...keys</span>) {</span>
<span>  <span>await</span> keyboard.<span>pressKey</span>(...keys);</span>
<span>  <span>await</span> <span>new</span> <span>Promise</span>(<span><span>resolve</span> =></span> <span>setTimeout</span>(resolve, <span>100</span>));</span>
<span>  <span>await</span> keyboard.<span>releaseKey</span>(...keys);</span>
<span>}</span>
<span></span>
<span><span>// ==================== 色彩模式 ====================</span></span>
<span><span>// 循環切換色彩模式 Ctrl+Alt+C</span></span>
<span><span>async</span> <span>function</span> <span>cycleColorModes</span>(<span></span>) {</span>
<span>  <span>await</span> <span>executeShortcut</span>(<span>Key</span>.<span>LeftControl</span>, <span>Key</span>.<span>LeftAlt</span>, <span>Key</span>.<span>C</span>);</span>
<span>}</span>
<span><span>// 程式設計亮模式 Ctrl+Alt+1</span></span>
<span><span>async</span> <span>function</span> <span>setCodingLight</span>(<span></span>) {</span>
<span>  <span>await</span> <span>executeShortcut</span>(<span>Key</span>.<span>LeftControl</span>, <span>Key</span>.<span>LeftAlt</span>, <span>Key</span>.<span>Num1</span>);</span>
<span>}</span>
<span><span>// 程式設計暗模式 Ctrl+Alt+2</span></span>
<span><span>async</span> <span>function</span> <span>setCodingDark</span>(<span></span>) {</span>
<span>  <span>await</span> <span>executeShortcut</span>(<span>Key</span>.<span>LeftControl</span>, <span>Key</span>.<span>LeftAlt</span>, <span>Key</span>.<span>Num2</span>);</span>
<span>}</span>
<span><span>// 程式設計紙張模式 Ctrl+Alt+0</span></span>
<span><span>async</span> <span>function</span> <span>setCodingPaper</span>(<span></span>) {</span>
<span>  <span>await</span> <span>executeShortcut</span>(<span>Key</span>.<span>LeftControl</span>, <span>Key</span>.<span>LeftAlt</span>, <span>Key</span>.<span>Num0</span>);</span>
<span>}</span>
<span><span>// ..... 其他快捷操作</span></span>
<span></span>
<span></span>
<span><span>// 匯出所有方法</span></span>
<span><span>module</span>.<span>exports</span> = {</span>
<span>  executeShortcut,</span>
<span>  cycleColorModes,</span>
<span>  setCodingLight,</span>
<span>  setCodingDark,</span>
<span>  setMBook,</span>
<span>  <span>// ...</span></span>
<span>};</span>


我們只需要在 `SKILL.md` 中規範好 AI 的呼叫方式與指令規則，完成整套技能開發後，Claude Code 就擁有了直接操控顯示器模式的能力，使用體驗直接拉滿。

![](https://i.imgur.com/sxVIrZ5.jpeg)

除了程式設計模式的切換，凡是 `Display Pilot 2` 能透過快捷鍵實現的顯示器操控功能，這個 skills 都能完美勝任，甚至像 `Display Pilot 2` 螢幕分割這樣的進階功能，也能透過控制滑鼠來模擬實現。

![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b5077408cb9e41dc9e6dd89658e6df41~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-z5bCP55-zT3J6:q75.awebp?rk3s=f64ab15b&x-expires=1776906519&x-signature=vzhDP3Qs4jVHKeMAdPEpdlzk9do%3D)

使用手機遠端控制顯示器
-----------

很多時候，我們可能臨時有事需要離開座位，如果我們突然想鎖定畫面，或者想遠端控制一下滑鼠執行某個簡單操作，就必須立刻回到座位才行。基於這種場景，實現手機遠端控制顯示器就非常有意義。

如下圖，就是根據 BenQ `RD270Q` 支援的快捷鍵開發的一個行動端操作介面，並增加了滑鼠觸控移動控制功能。

![](https://i.imgur.com/NEG2Ibk.jpeg)

### 遠端鎖定畫面、滑鼠控制示範

如果外出忘記鎖定畫面，透過手機實現這個功能非常方便實用。

![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/22daf46c02ff4ff1bb452a4bff1b9b82~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-z5bCP55-zT3J6:q75.awebp?rk3s=f64ab15b&x-expires=1776906519&x-signature=tTd8vmjbpn4yvj8qVQrXjlysldc%3D)

此外，透過行動端介面的觸控區域，我們還能遠端操控滑鼠移動、直接打開 VSCode 等軟體。是不是有點 Todesk 青春版的感覺？

![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b9729f98507b4bdfbcf457bdade27102~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-z5bCP55-zT3J6:q75.awebp?rk3s=f64ab15b&x-expires=1776906519&x-signature=kFMNgvOlAMkG4kqM17QtK4PsZeA%3D)

除此之外，其他快捷操作，如程式設計模式、亮度調節、夜間護眼調節等功能都是支援的，這裡也就不一一展示了。

### 原理分析——WebSocket + Node 控制快捷鍵

遠端控制的方案其實非常簡單：核心就是跑在本地的一個 Node 腳本，用來模擬鍵盤、滑鼠操作，間接透過 `Display Pilot 2` 控制顯示器。同時啟動一個 Web 服務提供行動端操作介面，借助 WebSocket 實現手機與 Node 服務即時通訊，最終完成遠端控制。簡單來說，就是**Web 端透過 WebSocket 控制本地端 Node 服務模擬系統快捷鍵操作**。

前端就是一個普通的 Vue 專案，頁面上放幾個控制按鈕，點擊時透過 WebSocket 向 Node 服務發送對應指令：

<div><div><div></div>js</div><div><div> 體驗 AI 程式碼助手</div><div> 程式碼解讀</div><div>複製程式碼</div></div></div>```
function createWebSocketServer(server) {
 const wss = new WebSocket.Server({ server, path: "/ws" });
 wss.on("connection", (ws) => {
 console.log("行動端已連線");
 ws.on("message", async (msg) => {
 const { type, action, params } = JSON.parse(msg);
 // 滑鼠操作
 if (type === "mouse") {
 if (action === "move") {
 // 滑鼠移動
 await mouse.move(params.x, params.y);
 } else if (action === "click") {
 // 滑鼠點擊
 await mouse.click(params.button);
 }
 }
 // 鍵盤操作
 if (type === "keyboard"){
 
 }
 });
 });
}

Node 端主要搭建 WebSocket 服務，接收行動端指令並執行系統操作。

<div><div><div></div><span>js</span></div><div><div> <span>體驗 AI 程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span><span>const</span> app = <span>express</span>();</span>
<span><span>const</span> server = http.<span>createServer</span>(app);</span>
<span></span>
<span><span>// 初始化 WebSocket 服務</span></span>
<span><span>createWebSocketServer</span>(server);</span>
<span></span>
<span>server.<span>listen</span>(<span>PORT</span>, <span>() =></span> {</span>
<span>  <span>console</span>.<span>log</span>(<span>`WS 服務已啟動：ws://localhost:<span>${PORT}</span>/ws`</span>);</span>
<span>});;</span>



具體的滑鼠移動、鍵盤快捷鍵等邏輯，統一封裝在 `mouse.js` 和 `keyboard.js` 中，底層依賴 Node 第三方函式庫 `nut-js` 實現滑鼠和快捷鍵控制。

![](https://i.imgur.com/zuFuZsX.jpeg)

使用手勢控制顯示器
---------

RD270Q 還有個我覺得特別實用的功能——Visual Optimizer 視覺優化。它透過內建光感測器，能根據環境光智慧同步調節螢幕亮度與色溫，降低螢幕與環境的明暗反差，配合編碼深色模式，長時間看程式碼也更柔和護眼。

不僅如此，我們還可以透過 `Display Pilot 2` 進一步調整螢幕亮度，實現個人化需求。基於 `Display Pilot 2`，我們還能實現透過**手勢控制**進行顯示器的隔空操作，作為技術創意嚐鮮、趣味互動玩具，還是得研究和嘗試的。

桌面版的手勢辨識存在一定技術難度，剛好之前我有寫過類似的技術文章：[油猴 + 手勢辨識：我實現了任意網頁隔空控制！](https://juejin.cn/post/7521250468267360307)索性偷個懶，在網頁上實現手勢辨識用來控制顯示器。先看看 Demo 效果：

- 左手張開 + 右手滑動，即可調低螢幕亮度（左手握拳 + 右手滑動，即可調高螢幕亮度）

![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/dd6005a9d76c4227994e05d52c299a83~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-z5bCP55-zT3J6:q75.awebp?rk3s=f64ab15b&x-expires=1776906519&x-signature=l0tP2NNwFdyiiVJ553HEiWYV89A%3D)

- 右手握拳，可以實現一鍵鎖定畫面功能

![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/35e95978f230450590fd300d2a87f25c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-z5bCP55-zT3J6:q75.awebp?rk3s=f64ab15b&x-expires=1776906519&x-signature=Ntch2m7CeX1w%2F02gostZJYok8tA%3D)

它的核心實現是基於 MediaPipe，這是一個由 Google 開源的跨平台、即時、輕量級多媒體機器學習框架，支援 Python、JS 等多種程式語言，借助它能輕鬆實現桌面級的手勢辨識功能。

> 如果你對相關技術感興趣，可以看看這個實作
> 
> Demo：[油猴 + 手勢辨識：我實現了任意網頁隔空控制！](https://juejin.cn/post/7521250468267360307)
> 
> 程式碼：[《有趣的手勢辨識、人臉辨識腳本》](https://link.juejin.cn?target=https%3A%2F%2Fwww.yuque.com%2Fpersagy%2Faeg25i%2Frds44sb657u7y1dt%3FsingleDoc%23%2520)

Flow 智慧工作流
----------

本來我還在琢磨，能不能透過 AI 指令或遠端控制，自己搭一套編碼時的專屬顯示方案，比如打開 VS Code 就自動切換到我習慣的亮度、護眼參數等。結果發現 RD270Q 早已自帶了 **Flow 智慧工作流**，在 `Display Pilot 2` 裡提前預設好程式設計、文件、設計等場景後，打開對應軟體就能自動切換顯示參數，省去反覆調整的麻煩，真正實現了「打開即用」的智慧個人化體驗。

![](https://i.imgur.com/sCCoFUo.jpeg)

結語
--

從借助 AI 指令、行動端遠端控制顯示器，到創意十足的手勢隔空控制，這篇文章我透過三種個人化玩法，把 `RD270Q` 顯示器的自訂操控能力發揮到了極致。這些功能實現的核心，離不開 `Display Pilot 2` 對顯示器本身的穩定操控能力。

**當然，即便不借助這款軟體，文中的思路也可以延伸到電腦本身的快捷操作、系統級功能呼叫上，大家不妨順著這個方向自行嘗試拓展。**

寫完這篇文章已是凌晨，144Hz 高更新率螢幕搭配顯示器的深色編碼模式，長時間使用眼部依然舒適，沒有出現乾澀、疲勞感。實際體驗下來，RD270Q 的護眼技術確實做得不錯，整體感受很好。

> 總而言之，新款 RD270Q 不僅保留了核心優勢，價格也很有誠意，三千出頭，上市期間會更優惠！兄弟們，不用猶豫，這次可以放心衝了。當然，要是追求極致程式設計體驗，`RD280U`、`RD280UG`、`RD320U` 也都是非常不錯的選擇。

最後，附上一張深夜 coding 的圖，希望這篇分享能為大家帶來一些實用參考。

![](https://i.imgur.com/G3aYweA.jpeg)

---

原文出處：https://juejin.cn/post/7628861022926782490