氛围编程（Vibe Coding）实战：把一句想法磨成可实现的产品规格
第一篇讲完架构拆分后，我发现“不写代码”并不轻松。
以前我盯的是怎么实现：组件怎么拆、Rust 怎么处理错误、状态怎么刷新。现在这些交给 AI，我反而要更早回答另一个问题：这个功能到底该怎么定义？
这一篇不讲概念，只讲我怎么把一句“我想看 Codex 额度”，磨成 Codex LED Widget 的产品规格。
先砍掉伪需求
需求刚丢给 AI，它很容易开始扩写：历史记录、趋势图、多账号、统计报表、完整 Codex 客户端。听起来都合理，但都不是这个项目的核心。
我的痛点很具体：不想每次打开 Codex、官网，或者敲命令行查额度。我只想在桌面边缘扫一眼，就知道还能不能继续用。
所以定位必须收紧：
Codex LED Widget 不是客户端，而是一个 Windows 桌面上的 Codex 额度状态灯。
状态灯的要求很简单：
- 常驻桌面
- 足够轻
- 一眼能看懂
- 不打断当前工作
- 快没额度时有明显提醒
- 不要求用户再输入 Token
这句话定下来后，很多东西就可以删了。
| 功能 | 取舍 | 原因 |
|---|---|---|
| 历史记录 | 暂不做 | 当前只看实时状态 |
| 趋势图 | 暂不做 | 会把小组件做成仪表盘 |
| 多账号 | 暂不做 | 复杂度过高 |
| 云端同步 | 不做 | 没必要，也有隐私负担 |
| 完整客户端 | 不做 | 偏离定位 |
| 桌面状态灯 | 保留 | 正中痛点 |
AI 的问题不是不会做，而是太愿意做。你不给边界，它能把一个小工具做成平台。
用户关心的是两个窗口
“看 Codex 额度”还不够精确。用户实际关心的是两个时间窗口：
- 5 小时额度
- 7 天额度
5 小时额度像短跑体力，决定现在还能不能继续高频使用。7 天额度像本周预算，决定接下来几天能不能放心开工。
最后我和 AI 定下来的交互是：
- 默认展示主额度窗口
- 液态球显示当前窗口的
remainingPercent - 点击液态球，在 5 小时 / 7 天之间切换
- 显示当前窗口的恢复时间
- 自动刷新时同步更新两个窗口
为什么不是两个液态球？因为小组件最怕焦点分裂。一个主视觉，一个切换动作，够了。
功能边界要写死
前端交互我只保留必要部分。
视觉核心是液态球。它不是装饰，而是额度百分比的可视化：水位越高，额度越多；水位越低，就该收手。
remainingPercent: number
这个字段必须来自后端清洗后的数据。前端不猜、不算、不兜底原始协议。
状态也必须统一驱动 UI：
| 状态 | 含义 |
|---|---|
green | 额度充足 |
yellow | 额度较低 |
red | 额度危险或耗尽 |
error | 读取失败 |
loading | 正在读取 |
这里我特意把 error 和 red 分开。连接失败不是额度耗尽，不能都用红色糊过去。小工具最怕误导用户，尤其是它一直挂在桌面上。
桌面能力则交给系统层：
- 窗口置顶
- 隐藏和恢复
- 系统托盘（Tray）
- 手动刷新
- 后端事件触发刷新
- 中英文切换
Vue 只表达意图，真正的窗口、托盘和系统调用交给 Tauri/Rust。
和 AI 交流：把横版小组件改成竖版
我和 AI 争得最多的其实是界面形态。
原项目早期更接近横版小组件：信息横向铺开，主额度、辅助信息和控制按钮都挤在一块。这个形态不是不能用，但放在桌面上会有两个问题。
第一，它更占横向空间。开发者的桌面通常已经被编辑器、浏览器、终端塞满了，横向区域很宝贵。
第二，它不像“状态灯”，更像一张缩小后的仪表卡。信息都有，但扫一眼的识别速度不够快。
所以我给 AI 的要求很明确：把它从横版改成竖版。
竖版不是单纯换个方向，而是产品定位的变化。它要像贴在桌面边缘的一枚小灯：
- 宽度尽量窄
- 主视觉集中在液态球
- 控制按钮收进顶部
- 状态信息往下排列
- 适合贴在屏幕右侧常驻
- 不抢编辑器和浏览器的空间
这一步其实是在提升产品力。横版更像“把数据展示出来”，竖版更像“把状态挂在桌面上”。
我和 AI 反复确认了几个约束：
| 设计点 | 决策 |
|---|---|
| 主视觉 | 保留一个液态球，不做多个仪表 |
| 窗口方向 | 从横版改为竖版 |
| 使用场景 | 贴在桌面边缘常驻 |
| 控制区 | 放在顶部，尽量压缩 |
| 信息层级 | 百分比优先，恢复时间其次 |
| 交互 | 点击液态球切换 5 小时 / 7 天窗口 |
这也是我对氛围编程（Vibe Coding）的一个新认识：你不能只让 AI “改成竖版”，那样它可能只是机械地重排 CSS。你要告诉它为什么改，改完要服务什么场景，哪些信息必须突出，哪些东西可以降级。
最后的目标不是“横版变竖版”，而是让这个工具更像一个真正的桌面状态灯。
结语
这一阶段我没写 TypeScript，也没写 Rust。但产品骨架已经定下来了。
Codex LED Widget 不是膨胀版 Codex 客户端，而是一个轻量状态灯。它有明确的视觉核心、交互规则、五色状态和系统能力。
这时候再让 AI 写代码，就不是“你随便实现一下”，而是：按这个规格来，别自由发挥。
下一篇进入：最难的不是界面，是和本机环境打交道。
