AI 是写完了，但你敢上线吗？

## 引子

最近用 AI 编程工具从零生成一个前端项目：7 个文件，10 万字符，8 分 59 秒完成。

代码看起来很像那么回事——模块划分清晰，注释齐全，甚至有主题切换和响应式布局。

但问题来了：**它能跑吗？跑得对吗？**

这正是 AI Coding 时代最容易被忽略的环节：**验收**。

## 我遇到的真实场景

给 AI 一句需求：

```
开发一个学习助手网页应用：
1. 输入学习目标生成学习计划
2. 番茄钟计时
3. 学习记录图表统计
4. 数据本地存储
技术栈：HTML + CSS + JS 单页应用
```

8 分钟后，AI 交付了：

```
/workspace
├── index.html 页面结构
├── styles.css 视觉样式
└── js
├── store.js 本地存储、数据模型
├── planner.js 计划生成算法
├── charts.js Canvas 图表绘制
├── timer.js 番茄钟状态机
└── app.js UI 渲染与事件绑定
```

看起来完整。但**不能直接信**。

## 五层验收法

### 第一层：语法

最基础的一层。AI 有时会生成不完整的代码（括号没闭合、语法错误）。

```bash
# 逐个检查 JS 文件
for f in js/*.js; do
node --check "$f" || echo "SYNTAX ERROR: $f"
done
```

**我这次的结果**：全部通过。

但注意——**语法通过不代表能跑**。

### 第二层：加载

打开浏览器，看控制台有没有报错。

```
打开 index.html → F12 → Console
↓
红色报错？ → 模块加载顺序问题、路径错误、变量未定义
```

**常见问题**：
- script 标签顺序错了（依赖的模块还没加载）
- 路径写错（`js/app.js` 写成了 `./js/app.js` 但实际在别的目录）
- 全局变量名冲突

**我这次的结果**：0 个控制台错误。但这个结果不能靠肉眼扫，要程序化验证。

### 第三层：功能

每个功能点挨个点一遍。

```javascript
// 用 Playwright 自动化
const { chromium } = require('playwright');

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('http://localhost:8080');

// 1. 创建目标
await page.fill('#goal-name', '考研英语');
await page.fill('#goal-date', '2026-12-20');
await page.click('#create-goal');
const taskCount = await page.locator('.task-item').count();
expect(taskCount).toBeGreaterThan(0);

// 2. 番茄钟
await page.click('#timer-start');
await page.waitForTimeout(2000);
const remaining = await page.textContent('#timer-display');
expect(remaining).not.toBe('25:00'); // 应该倒计时了
```

**为什么要自动化**：手点只能覆盖主路径，边界情况（空输入、超长文本、快速连点）容易漏。

### 第四层：数据

**数据能不能持久化？**

```
创建目标 → 刷新页面 → 目标还在吗？
完成番茄 → 刷新页面 → 记录还在吗？
```

**我遇到的坑**：有个版本 `localStorage` 的 key 拼错了（`focusflow.study.v1` vs `focusflow.study`），导致刷新后数据丢失。肉眼看不出来，必须测。

### 第五层：边界

最容易被忽略的一层。

| 场景 | 检查点 |
|---|---|
| 空输入 | 点提交会不会崩？ |
| 超长文本 | 界面会不会错位？ |
| 快速连点 | 会不会重复提交？ |
| 移动端 | 有没有横向溢出？ |
| 深色模式 | 文字对比度够不够？ |
| 刷新时机 | 正在计时时刷新，状态怎么恢复？ |

**我这次的结果**：AI 自己写了 42 项断言，覆盖了这些。但它也是被要求才写的——默认它不会主动做这么细。

## 一个反直觉的结论

**AI 生成的代码，"看起来对"的概率很高，但"真的对"需要验证。**

为什么？因为 AI 训练数据里，代码的"形状"是对的：

- 变量命名规范
- 函数结构清晰
- 注释齐全
- 缩进整齐

但"形状对"不等于"逻辑对"。下面这些错误，从代码表面完全看不出来：

```javascript
// 看起来没问题
const remaining = duration - elapsed;

// 但如果 elapsed 是累加计数（setInterval 有漂移）
// 10 分钟后剩余时间可能差好几秒
// 正确做法：用时间戳相减
const remaining = duration - Math.floor((Date.now() - startTime) / 1000);
```

## 我的验收清单

自动化验收时，我会跑这个清单：

```python
CHECKLIST = [
("语法", "node --check 所有 js 文件"),
("加载", "控制台 0 错误"),
("首屏", "关键元素在 2 秒内可见"),
("主流程", "创建 → 查看 → 编辑 → 删除 全部走通"),
("持久化", "刷新后数据不丢"),
("边界", "空输入/超长/连点 不崩"),
("响应式", "375px 宽度下无横向滚动"),
("主题", "切换后对比度符合 WCAG AA"),
]
```

**八项全过，才算"能用"**。全过之后才考虑"好用"。

## 给 AI 编程工具的建议

既然 AI 能写代码，也应该能验证代码。我期待的验收能力：

1. **自动生成测试**：不只是"我给你代码"，还有"我写了测试证明它行"
2. **主动跑测试**：写完就跑，跑不过就修
3. **报告边界覆盖**：明确说"我测了 A/B/C，没测 D"

我这次用的工具做到了前两点（自主写 Playwright 测试、跑通 42 项断言），这已经是很大的进步。第三点还没有。

## 小结

```
AI 生成代码的三个层次：
能编译 -> 语法检查
能运行 -> 控制台无错
能交付 -> 功能 + 数据 + 边界 全过
```

大部分讨论停在第一、第二层。但真正决定能不能上线的，是第三层。

AI 把"写代码"的成本降到了接近零，那么"验证代码"就成了新的瓶颈。

**下一个竞争点，不是谁能生成更多代码，而是谁能更快证明代码是对的。**