年关将至，又到了线上面试、远程述职的高峰期。大家都有过这种尴尬体验：
线上面试时，想偷看一眼准备好的“八股文”或项目难点，结果眼神一飘忽，立马被面试官发现你在读稿；
或者把记事本放在屏幕旁边，全程侧脸对着摄像头，显得极不自信。
作为一个追求极致体验的开发者，我想做一个“线上面试神器”：
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 这份技术规格书时，我发现了一个逻辑漏洞，并立即进行了人机对齐：
不过，我也犯了个懒。在 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.jslet 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 自动生成了一份项目总结。
看着这份总结，我有一种“当老板”的爽感——机器给我打了工，最后还给我交了一份漂亮的汇报文档。
最后，让我们一起来看看最终效果视频吧：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 中搜索“文心快码”插件，安装即用
如果你也有一个想实现的点子
不妨下载文心快码
让它成为你的「专属工程师」！
谁知道呢，下一个爆款应用
也许就诞生在你的一次尝试中～
评论