用 AI 规划并验收一个小工具

难度
进阶
预计时间
2—4 小时
输出成果
可运行工具、使用说明和验收记录
最后核验
2026-07-25

这节课会真正交付一个能使用的小工具。你将从一句需求开始,先写验收用例,再完成最小版本、复现错误、修复并整理交付记录。

练习项目:文本行数统计器

用户粘贴一段文本后,页面立即返回总行数、非空行数和字符数。文本只在浏览器本地处理。

第一版必须完成

  • 粘贴或输入纯文本
  • 统计总行数和非空行数
  • 统计 Unicode 字符
  • 清楚说明统计口径
  • 支持手机和键盘操作

现在明确不做

  • 账号、登录和云同步
  • 上传文件和保存历史
  • 富文本、PDF 和复杂导出
  • 主题系统和后台配置
  • 没有真实需求证明的扩展

要解决的问题:快速统计一段文本的行数和字符数。
使用者:需要清理文稿、字幕或名单的普通用户。
运行位置:浏览器本地。

输入:任意纯文本。
输出:总行数、非空行数、字符数。
隐私:不上传、不保存输入内容。
空状态:三个结果均为 0。
不做:账号、上传、云保存、富文本、PDF、主题配置。

完成条件:
1. 三个验收用例全部实际运行;
2. 320px 手机页面不横向溢出;
3. 键盘可以访问输入框和按钮;
4. 页面说明统计口径和隐私边界。

第一步:先写能够判定成败的用例

“看起来能用”无法验收。每条用例必须有明确输入和预期结果。

用例 1:包含空行

输入:
第一行

第三行

预期:
总行数 3
非空行数 2
用例 2:完全空白

输入:空字符串

预期:
总行数 0
非空行数 0
字符数 0
用例 3:中文和 emoji

输入:
你好 😀

预期:
页面正常显示
统计口径明确
不出现乱码

用例名称:
准备条件:
输入:
操作步骤:
预期输出:
实际输出:
结果:通过/失败
失败证据:
修复后复测:

第二步:只让 AI 实现当前用例需要的功能

请实现一个浏览器本地运行的文本统计器。

必须功能:
- 一个带明确标签的多行文本输入框;
- 实时显示总行数、非空行数和字符数;
- 完全空白时三个结果均为 0;
- 统一处理 Windows 和 Unix 换行符;
- 提供“载入测试样例”和“清空”按钮;
- 说明内容不上传,以及字符统计口径。

统计规则:
- 总行数包含空白行;
- 只含空格的行不计入非空行;
- 字符数按 Unicode 码点计算,换行符计入;
- 不使用外部服务,不增加账号、保存和上传。

先运行我提供的三个验收用例,再报告结果。不要只回复代码。

可运行成果:文本行数统计器

粘贴任意非敏感文本。内容只在当前浏览器中统计,不上传、不保存。

0总行数
0非空行数
0字符数
统计口径
  • 完全空白时,总行数、非空行数和字符数均为 0。
  • 总行数包含空白行;非空行会忽略只含空格的行。
  • 换行符计入字符数;emoji 按 Unicode 码点统计,组合 emoji 可能计为多个字符。

第三步:复现一个常见的“空文本等于 1 行”错误

错误实现

text.split("n").length

JavaScript 中,空字符串拆分后会得到一个元素,所以结果是 1。代码没有报错,但违反了空状态用例。

正确判断

text === "" ? 0 : text.split("n").length

先处理业务定义中的空状态,再执行一般统计规则。

验收用例“完全空白”失败:当前总行数返回 1,预期为 0。

请先解释根因,再做最小修改:
1. 空字符串时总行数、非空行数和字符数均返回 0;
2. 非空文本仍按换行符拆分;
3. 不重构无关代码,不增加新功能;
4. 修复后重新运行全部三个用例,报告修改前后结果。

第四步:交付的不只是代码

用户应该不用阅读源码,就知道工具解决什么、如何操作、数据去哪里、统计规则是什么,以及出现问题如何复测。

可运行页面直接打开即可使用
使用说明输入、输出和口径
验收记录三个用例的实际结果
限制说明明确不支持的范围

工具名称:
解决的问题:
运行地址或打开方式:

□ 三个验收用例已实际运行并记录结果
□ 首次使用者不看源码也知道如何操作
□ 空状态、空行、中文和 emoji 均已测试
□ 页面说明统计口径和隐私处理方式
□ 320px 手机页面无横向溢出
□ 键盘可访问输入框和所有按钮
□ 没有密钥、测试数据或本地绝对路径进入交付包
□ 临时测试文件和无用产物已处理
□ 未增加规格之外的账号、上传和云保存

已知限制:
失败用例:
修复记录:
验收人:
验收日期:

完成本课的标准

  1. 先手工运行三个用例,确认当前页面结果。
  2. 理解空字符串为什么可能被错误计算为 1 行。
  3. 复制开发任务,为自己的小工具重写输入、输出和验收条件。
  4. 只有实际使用出现重复问题时,才进入下一轮功能扩展。
为什么这个小工具足够作为第一课

它包含了真实开发中最重要的部分:范围控制、边界条件、可重复测试、隐私说明、响应式界面和交付记录。项目虽小,但方法可以迁移到查询器、转换器和个人工作工具。


你的本机学习记录

留下成果证据,再标记完成

生成过一次内容不等于完成。写下你实际留下的成果和验收证据,记录只保存在当前浏览器。



请填写成果和验收证据。


未完成

查看完整学习路线