年關將至，又到了線上面試、遠程述職的高峯期。大家都有過這種尷尬體驗：
線上面試時，想偷看一眼準備好的“八股文”或項目難點，結果眼神一飄忽，立馬被面試官發現你在讀稿；
或者把記事本放在屏幕旁邊，全程側臉對着攝像頭，顯得極不自信。
作為一個追求極致體驗的開發者，我想做一個“線上面試神器”：
1.隱形懸浮：它要像幽靈一樣，半透明覆蓋在面試官的視頻窗口上。
2.眼神矯正：我看着面試官的眼睛（其實在看懸浮文字），實現完美的“眼神交流”。
3.鼠標穿透：面試過程中，我得能隨時操作背後的 IDE 或瀏覽器展示代碼，提詞器不能擋鼠標。
4.隱蔽操控：手不離鍵盤，全程用快捷鍵控制翻頁，神不知鬼不覺。
為了在最短時間內搞定這個工具，我沒有自己悶頭寫，而是使用了 文心快碼（Comate） 最新的 Spec 模式。
什麼是 Spec 模式？
傳統開發是“寫需求 -> 寫代碼 -> 改 Bug”。
Spec 模式是 “AI寫需求 -> 人工完善 -> AI 一把生成高質量代碼”。
它的核心在於：人多投入精力在 Doc（文檔）和 Task（任務）的確認上，把錯誤攔截在寫代碼之前。
這種“先想清楚再動手”的機制，能把絕大多數邏輯錯誤攔截在編碼之前。
所以，這次我不是寫代碼的，我是來“定義產品”的。 整個過程，我只負責在關鍵節點確認，剩下的髒活累活全交給 Comate🤩
01 Doc——生成技術方案
啓動 Spec 模式，我沒有直接讓它“寫個提詞器”，而是像跟架構師聊天一樣，輸入了我的自然語言需求。
文心快碼 迅速生成了 Doc 視圖。讓我驚喜的是，它不僅理解了我的“作弊”需求，還敏鋭地幫我規避了幾個邏輯深坑：
- 定義“幽靈模式”與“編輯模式”：AI 意識到，如果窗口一直鼠標穿透，用户就沒法修改文字了。所以它在文檔裏明確了兩種狀態的切換邏輯。
- 設計“後悔藥”機制：文檔中特別指出，必須註冊全局快捷鍵（GlobalShortcut）。否則一旦開啓穿透，用户點不到窗口，程序就關不掉了。
- 技術選型：它直接鎖定了 Electron + Node.js + 本地 JSON 存儲的方案，確保數據都在本地，不用擔心面試資料泄露。
在仔細 Review 這份技術規格書時，我發現了一個邏輯漏洞，並立即進行了人機對齊：
- 數據安全：AI 默認可能沒有詳細定義存儲。我立刻指出：“面試資料很敏感，必須強制要求本地化存儲，嚴禁上傳雲端。”Comate 迅速在架構設計中補充了 本地存儲層。
- 交互死鎖：我看了一眼邏輯，發現如果開啓“鼠標穿透”，我就點不到窗口了。於是我要求：“Doc 必須明確一個“後悔藥”機制，需要有全局快捷鍵來切換穿透狀態，防止程序‘鎖死’。”
不過，我也犯了個懶。在 Doc 的 4.3 滾動控制邏輯 中，AI 寫的是 document.addEventListener（本地監聽）。我當時覺得沒問題就通過了——這為後來的一個小插曲埋下了伏筆。
Comate 迅速修正了 Doc，明確了“智能穿透邏輯”：默認穿透，但鼠標懸停在按鈕上時自動恢復交互。
這一步至關重要：如果在寫代碼時才發現這個問題，我可能要推翻重構；但在 Doc 階段，只是一句話的事。
⬇️ 幽靈提詞器需求文檔
# Ghost Teleprompter（幽靈提詞器）需求文檔
## 1. 需求場景與處理邏輯
### 1.1 核心使用場景
- 用户在進行線上彙報、演講、錄屏等場景時，需要查看提詞內容
- 傳統提詞器會遮擋屏幕內容，影響對PPT、演示文稿等背景內容的操作
- 用户需要提詞器懸浮顯示，但鼠標能夠穿透操作背景應用
### 1.2 核心處理邏輯
- 應用窗口始終置頂顯示，確保提詞內容可見
- 窗口背景完全透明，文字清晰可見
- 實現鼠標事件穿透，允許用户操作背景應用
- 支持提詞內容的實時編輯和滾動顯示
## 2. 架構技術方案
### 2.1 技術棧選擇
- **主框架**: Electron + Node.js
- 跨平台桌面應用開發
- 豐富的窗口管理API
- 支持透明窗口和鼠標穿透設置
- **前端**: HTML5 + CSS3 + JavaScript
- 輕量級UI實現
- CSS透明度控制
- **數據存儲**: 本地JSON文件
- 簡單配置存儲
- 提詞內容持久化
### 2.2 架構設計
```
┌─────────────────────────────────────┐
│ 主進程 (Main Process) │
│ - 應用生命週期管理 │
│ - 窗口創建與配置 │
│ - 系統托盤集成 │
└─────────────────────────────────────┘
↕
┌─────────────────────────────────────┐
│ 渲染進程 (Renderer Process) │
│ - 提詞內容顯示 │
│ - 用户交互處理 │
│ - 實時編輯功能 │
└─────────────────────────────────────┘
↕
┌─────────────────────────────────────┐
│ 本地存儲層 │
│ - 配置文件管理 │
│ - 提詞內容存儲 │
└─────────────────────────────────────┘
```
## 3. 影響文件分析
### 3.1 核心文件結構
```
ghost-teleprompter/
├── package.json # 項目配置與依賴
├── main.js # Electron主進程入口
├── preload.js # 預加載腳本
├── renderer/
│ ├── index.html # 主界面
│ ├── styles.css # 樣式文件
│ └── renderer.js # 渲染進程邏輯
├── assets/
│ └── icons/ # 應用圖標
├── config/
│ └── settings.json # 用户配置
└── scripts/
└── build.js # 構建腳本
```
### 3.2 關鍵修改點
- **main.js**: 實現透明窗口和鼠標穿透
- **renderer/index.html**: 提詞內容展示區域
- **renderer/styles.css**: 透明背景樣式
- **renderer/renderer.js**: 滾動控制和編輯功能
## 4. 實現細節
### 4.1 透明窗口實現
```javascript
// main.js 窗口配置
const mainWindow = new BrowserWindow({
width: 800,
height: 200,
transparent: true,
frame: false,
alwaysOnTop: true,
skipTaskbar: true,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
});
// 設置鼠標穿透
mainWindow.setIgnoreMouseEvents(true, { forward: true });
```
### 4.2 CSS透明樣式
```css
/* styles.css */
body {
background: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-app-region: drag;
}
.teleprompter-content {
color: #ffffff;
font-size: 24px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
-webkit-app-region: no-drag;
}
```
### 4.3 滾動控制邏輯
```javascript
// renderer.js
let scrollPosition = 0;
let scrollSpeed = 1;
function startScrolling(){
setInterval(() => {
scrollPosition += scrollSpeed;
document.getElementById('content').scrollTop = scrollPosition;
}, 50);
}
// 鍵盤控制
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowUp') scrollSpeed = Math.max(0, scrollSpeed - 0.5);
if (e.key === 'ArrowDown') scrollSpeed = Math.min(5, scrollSpeed + 0.5);
if (e.key === ' ') scrollSpeed = scrollSpeed > 0 ? 0 : 1;
});
```
### 4.4 內容編輯功能
```javascript
// 編輯模式切換
function toggleEditMode(){
const content = document.getElementById('content');
const isEditable = content.contentEditable === 'true';
content.contentEditable = !isEditable;
if (!isEditable) {
content.focus();
} else {
// 保存內容到本地
saveContent(content.innerText);
}
}
```
## 5. 邊界條件與異常處理
### 5.1 窗口管理異常
- **窗口意外關閉**: 實現自動重啓機制
- **多顯示器支持**: 記住上次關閉時的顯示器位置
- **系統兼容性**: 檢測操作系統是否支持透明窗口
### 5.2 數據異常處理
- **配置文件損壞**: 提供默認配置恢復
- **內容丟失**: 自動保存和版本回滾
- **編碼問題**: 統一使用UTF-8編碼
### 5.3 性能優化
- **大文件處理**: 分塊加載長文本內容
- **內存泄漏**: 定期清理事件監聽器
- **CPU佔用**: 優化滾動動畫性能
## 6. 數據流動路徑
### 6.1 應用啓動流程
```
啓動應用 → 讀取配置 → 創建透明窗口 → 加載提詞內容 → 開始滾動顯示
```
### 6.2 內容編輯流程
```
進入編輯模式 → 修改內容 → 自動保存 → 更新顯示 → 退出編輯模式
```
### 6.3 配置更新流程
```
用户操作 → 更新配置 → 保存到本地 → 實時應用新配置
```
## 7. 預期成果
### 7.1 核心功能
- ✅ 透明懸浮窗口，不遮擋背景內容
- ✅ 鼠標穿透功能，可操作背景應用
- ✅ 提詞內容實時滾動顯示
- ✅ 滾動速度和方向控制
- ✅ 內容實時編輯和保存
### 7.2 用户體驗
- 簡潔直觀的操作界面
- 流暢的滾動效果
- 快捷鍵支持
- 系統托盤集成
- 跨平台兼容性
### 7.3 技術指標
- 內存佔用 < 50MB
- CPU佔用 < 5%
- 啓動時間 < 3秒
- 支持10MB以內的文本文件02 Tasks——拆解開發計劃
確認 Doc 無誤後，Comate 自動進入 Tasks 視圖。它把這個“面試神器”拆解成了 10 個顆粒度極細的任務：
⬇️ 幽靈提詞器任務計劃
# Ghost Teleprompter（幽靈提詞器）任務計劃
- [ ] 任務 1：項目初始化與基礎架構搭建
- 1.1: 創建 package.json，配置 Electron 項目依賴
- 1.2: 創建基礎目錄結構（main、renderer、config、assets）
- 1.3: 設置開發環境和構建腳本
- 1.4: 配置應用圖標和基礎元數據
- [ ] 任務 2：主進程窗口管理核心邏輯
- 2.1: 實現透明窗口創建和基礎配置
- 2.2: 實現 Ghost Mode 和 Edit Mode 狀態管理
- 2.3: 建立 Main Process 到 Renderer Process 的 IPC 通信
- 2.4: 實現窗口位置記憶和多顯示器支持
- [ ] 任務 3：全局快捷鍵和系統托盤實現
- 3.1: 註冊全局快捷鍵（Command/Ctrl + Shift + X）用於模式切換
- 3.2: 實現系統托盤圖標和右鍵菜單
- 3.3: 通過托盤菜單提供狀態切換和退出功能
- 3.4: 確保"後悔藥"機制，防止用户無法控制應用
- [ ] 任務 4：渲染進程UI界面搭建
- 4.1: 創建基礎 HTML 結構和佈局
- 4.2: 實現透明背景和模糊效果樣式
- 4.3: 設置可拖拽區域和內容編輯區域
- 4.4: 實現響應式設計和基礎動畫效果
- [ ] 任務 5：鼠標穿透核心功能實現
- 5.1: 實現 Renderer Process 到 Main Process 的狀態同步
- 5.2: 在 Ghost Mode 下啓用鼠標穿透
- 5.3: 在 Edit Mode 下禁用鼠標穿透
- 5.4: 實現狀態切換時的視覺反饋
- [ ] 任務 6：提詞內容顯示和滾動功能
- 6.1: 實現內容顯示區域的文本渲染
- 6.2: 實現自動滾動功能和速度控制
- 6.3: 添加鍵盤控制（上下箭頭調速、空格暫停）
- 6.4: 實現滾動位置記憶和恢復
- [ ] 任務 7：內容編輯和管理功能
- 7.1: 實現編輯模式的進入和退出
- 7.2: 添加內容實時編輯功能
- 7.3: 實現內容的自動保存機制
- 7.4: 添加字體大小、顏色等樣式設置
- [ ] 任務 8：數據持久化和配置管理
- 8.1: 創建配置文件結構和讀寫邏輯
- 8.2: 實現提詞內容的本地存儲
- 8.3: 添加用户偏好設置保存
- 8.4: 實現配置文件損壞時的恢復機制
- [ ] 任務 9：應用打包和分發準備
- 9.1: 配置 Electron Builder 打包設置
- 9.2: 創建安裝程序和簽名配置
- 9.3: 測試跨平台兼容性
- 9.4: 優化應用性能和資源佔用
- [ ] 任務 10：測試和優化
- 10.1: 測試核心功能完整性
- 10.2: 驗證"後悔藥"機制的可靠性
- 10.3: 性能測試和內存泄漏檢查
- 10.4: 用户體驗優化和細節完善
在審核這個列表時，有幾個“懂行”的細節讓我印象深刻：在審核這個列表時，有幾個“懂行”的細節讓我印象深刻：
- 預設“後悔藥”機制：在 Task 3.4 中，AI 專門規劃了“確保‘後悔藥’機制，防止用户無法控制應用”。這説明它預判了“穿透即失控”的風險，把容錯方案寫進了計劃裏。
- 鎖定系統級入口：在 Task 3.1 中，它沒有選擇普通的按鍵事件，而是直接規劃了“註冊全局快捷鍵（Command/Ctrl + Shift + X）”。這意味着它從一開始就確定了這是一個不依賴焦點的系統級工具。
- 性能兜底：Electron 應用最怕內存泄漏。Comate 在 Task 10.3 中直接列出了“性能測試和內存泄漏檢查”，確保面試過程中軟件不會卡頓崩潰。
當然，這份Tasks也並不是十全十美。Comate不知道我的快捷鍵Command/Ctrl + Shift + X已經被佔用，於是我手動進行了修改。
有了spec模式，每一條任務都能夠經過我的“審批”，這種“人來決策，AI 執行”的模式，讓我對項目進度充滿了掌控感。
03 Changes——代碼修改與產品迭代
進入 Changes 視圖，真正的魔法開始了。我看着左側的文件樹瞬間生成，右側的代碼實時寫入。
第一版代碼生成後，應用成功跑起來了。Comate 生成的核心“穿透”代碼極其優雅：
運行程序，一個半透明的窗口懸浮在桌面上。我試着點擊它背後的 Chrome 圖標——成功了！鼠標真的“穿”過去了！
交互修復：看得見，摸不着？
在測試“編輯模式”時，我發現一個詭異的現象：在編輯模式下，我想點擊頂部的“設置”按鈕，但怎麼點都沒反應，鼠標直接穿透了按鈕，變成了拖拽窗口。
我也沒多想，直接把控制枱的報錯信息複製發給了 Comate。
💡 小 Tips： 在 Comate 交互時，如果遇到問題，直接把 Console（控制枱） 裏的紅色報錯 甩給它。有了上下文，它解決問題的速度會快N倍。
Comate 結合報錯和代碼，秒回了原因：
“這是一個經典的 CSS 陷阱。你在 body 上設置了 -webkit-app-region: drag 用來拖動窗口。在 Electron 中，拖拽區域會攔截所有的點擊事件。”
隨後，它迅速在 Spec 中更新了 CSS 任務，給按鈕加上了“金鐘罩”：
甚至不需要我懂 CSS，它直接幫我把這段代碼插到了 styles.css 裏，問題瞬間解決。這種冷門知識點，如果我自己查可能要耗一下午。
極限優化：解決衝突與全鍵盤流
在模擬Pre場合時，我發現另一個問題：當我切到其它界面時，按方向鍵，提詞器不動了！
這時候我才意識到，Doc 階段漏看的 document.addEventListener 是本地監聽，只有焦點在提詞器上才有效。
我立刻在對話框中提出變更：“現在的滾動只能在窗口激活時用。我要改成系統級離線控制，無論焦點在哪，按 ↑ ↓ 都能控制滾動。”
Comate 沒有廢話，直接重構了 main.js，引入了 globalShortcut 模塊：
配合前端的 IPC 監聽，現在的體驗簡直絲滑：我一邊全屏放映 PPT，一邊盲按方向鍵控制語速，整個過程行雲流水。
相比過去使用Zulu自動化開發，Spec模式需要De的Bug顯著減少。之前需要5輪以上的對話，現在鋭減至2輪。
總之，我現在已經是Spec的鐵粉了😍
04 Summary——項目驗收
當所有功能開發完畢，Comate 自動生成了一份項目總結。
看着這份總結，我有一種“當老闆”的爽感——機器給我打了工，最後還給我交了一份漂亮的彙報文檔。
- 技術亮點：清楚地列出了它是如何通過 CPU 渲染優先策略解決文字重影問題的。
- 功能清單：列出了從“幽靈模式”到“智能拖拽”的所有已實現功能。
- 項目狀態：已完成核心功能開發和優化。
最後，讓我們一起來看看最終效果視頻吧：https://mp.weixin.qq.com/s/AdAkbK1eHGHaNsjH1mevYQ
共享屏幕時，不要共享整個桌面，請直接點擊你需要共享的那個特定程序（如 IDE、瀏覽器或 PPT）。
這樣，懸浮在桌面最頂層的“幽靈提詞器”對觀眾來説就是隱形的，只有天知地知你知😉
05 結語——從“寫代碼”到“定義代碼”
這次開發給我的最大觸動，不是 文心快碼 寫得有多快，而是 Spec 模式 帶來的思維轉變。
以前我是 Coder，我要關心 API 怎麼調用、CSS 怎麼覆蓋。
現在我是 Product Manager，我只需要在 Doc 裏定義清楚“我要什麼”，在 Tasks 裏確認“先做什麼”，在 Changes 裏驗收“做得對不對”，把繁瑣的編碼交給 Agent，把核心的創意留給自己。
如果你也想在接下來的年終述職中“開掛”，或者想體驗這種“定義即實現”的開發快感，強烈建議你去試試文心快碼（Comate） 的 Spec 模式！
（注：工具僅供輔助，實力才是硬道理。祝大家 Offer 多多！）
👇 別光心動，現在就上手開造！
一鍵下載 Comate，把你的腦洞變成現實
方式一： 點擊文章末尾閲讀原文下載Comate AI IDE，享受絲滑開發過程
方式二： 在 VS Code 或 Jetbrains IDE 中搜索“文心快碼”插件，安裝即用
如果你也有一個想實現的點子
不妨下載文心快碼
讓它成為你的「專屬工程師」！
誰知道呢，下一個爆款應用
也許就誕生在你的一次嘗試中～
