年关将至，又到了线上面试、远程述职的高峰期。大家都有过这种尴尬体验：

线上面试时，想偷看一眼准备好的“八股文”或项目难点，结果眼神一飘忽，立马被面试官发现你在读稿；

或者把记事本放在屏幕旁边，全程侧脸对着摄像头，显得极不自信。

作为一个追求极致体验的开发者，我想做一个“线上面试神器”：

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 中搜索“文心快码”插件，安装即用

如果你也有一个想实现的点子

不妨下载文心快码

让它成为你的「专属工程师」！

谁知道呢，下一个爆款应用

也许就诞生在你的一次尝试中～