给客户报价，很多人还在复制一份 Excel，改数量、改单价，再担心公式被自己改坏。Episode 009 用 Claude 从零做了一个轻量网页报价工具 XichuQuoteLite：录入报价行，自动计算金额、折扣、税额和合计，草稿保存在浏览器里，还能打印成 PDF。整个过程从缩小需求开始，到测试、构建和浏览器实际操作结束。
本期资料：GitHub 源码与运行说明 ↗ · 在线 Demo ↗ · 视频中的示例表格（虚构数据）↗
画面说明：视频画面录制于 Claude 的隔离 Linux 工作区，浏览器、终端和表格中的操作由 Claude 自动执行；示例表格用 LibreOffice 打开，演示数据均为虚构。
它是什么，不是什么
XichuQuoteLite 是一个打开浏览器就能用的小工具：填写报价抬头和报价行，自动合计，再打印一张给客户看的报价单。它不需要登录，也没有后端。
它不是财务或税务系统，不处理付款，也不导入 Excel。页面里的税率只是示例计算规则，不构成任何地区的税务建议。你可以把它当作一个起点，改成维修报价、设计报价，或者你自己行业的服务清单。
第一步：先减需求
做 AI 项目，我会先把需求缩小。登录、数据库、多人协作，第一版全部不要，只解决一件事：让一个人快速做出一份准确的报价。需求越清楚，后面让 AI 反复返工的次数就越少。
给 Claude 的第一条指令也不是“帮我做个好看的报价网站”，而是写清楚要有哪些字段、金额怎么算、数据存在哪里、哪些功能这次不做，并要求它先交回需求表、计算规则、边界测试和计划，确认以后才开始改文件。
Claude 交回的需求清单里，每一条都写了验收方法。我重点核对了三条规则：数量和单价都能修改；先打折，再按折后金额计算税额；草稿只保存在浏览器里。
第二步：拆模块写代码
计划确认后，项目拆成四块，分别放在不同文件里：
src/money.ts：金额计算，使用 decimal.js 做十进制运算。src/App.tsx：报价界面、输入校验和汇总显示。src/storage.ts：用浏览器 localStorage 保存和恢复草稿。src/styles.css：页面、手机卡片布局和打印样式。
哪一块出问题就只改哪一块，不需要让 AI 把整个项目推倒重来。
金额精度：为什么不用普通小数
在浏览器控制台里计算 0.1 + 0.2，结果是 0.30000000000000004，这是二进制浮点数的正常现象。报价金额不能这样算，所以项目约定用十进制计算，每一步保留两位小数、四舍五入。代码可以交给 AI 写，但“怎样才算算对”必须由我们自己先定好。
用一组固定数字验收
下面这组数字，你可以用计算器自己核对：
| 项目 | 计算 | 结果 |
|---|---|---|
| 报价行 1 | 3 × 128.50 | 385.50 |
| 报价行 2 | 2 × 399.00 | 798.00 |
| 报价行 3 | 5 × 24.90 | 124.50 |
| 小计 | 三行相加 | 1308.00 |
| 折扣 5% | 1308.00 × 5% | −65.40 |
| 折后税基 | 1308.00 − 65.40 | 1242.60 |
| 示例税率 13% | 1242.60 × 13% = 161.538 | 161.54 |
| 合计 | 1242.60 + 161.54 | 1404.14 |
浏览器里逐个字段键入这组样例，页面显示的合计也是 1404.14。
边界情况、本地草稿和打印 PDF
能用的工具，不能只在示例数据刚好正确时才正常。删掉一行，小计和合计马上跟着变；数量填负数、单价留空、填非数字、数量为 0、项目名超过 80 个字、折扣率或税率超过 100%，都会给出提示，出错的行暂不计入合计。
每次修改会自动保存到当前浏览器，刷新后内容还在。限制也要说清楚：草稿不会云同步，也不加密，换一台设备看不到，清除浏览器数据后会丢失，所以它不能当作备份。
点击“打印 / 保存 PDF”会打开浏览器的打印窗口，目标打印机选择“另存为 PDF”，再点保存。生成的 A4 报价单中文正常、金额没有被截断，只有一页。
把窗口缩到手机宽度，报价行会变成一张张卡片，没有横向滚动，很长的项目名也会自动换行。
测试、构建，以及开发中真实修掉的问题
单元测试 21 项全部通过，浏览器端到端测试 7 项通过、1 项跳过（PDF 只在桌面视口生成），类型检查和构建通过；从一份全新克隆的代码开始，按 README 安装、测试、构建也能一次跑通。测试通过只说明这些检查过了，真正能不能用，还要回到浏览器里亲手操作一遍。
开发和录制过程中，实际发现并修复了 6 个问题：
- 手机宽度下，很长的项目名只显示一行，文字被裁切在输入框里；改为输入框随内容自动增高。
- 打印出的 PDF 里日期旁还有日历图标，金额列贴着边；打印样式隐藏图标并补上右侧留白。
- 折扣率为 0 时，折扣金额显示成“−0.00”；改为显示 0.00。
- 备注框被拉到汇总区底部，留下一大块空白；调整了对齐方式。
- 单元测试命令把浏览器端到端测试文件也当成单元测试执行而报错；单独限定了单元测试范围。
- 没填日期时，打印出来是“年/月/日”占位字；打印时改为显示纯文本，空值显示短横线。
源码、在线 Demo 与运行方法
- GitHub 源码：xichugeek/XichuQuoteLite ↗（MIT 许可证）。本期对应的固定版本是 1.0.0 · e85f1a8 ↗。
- 在线 Demo ↗：纯前端页面，数据只保存在你自己的浏览器里，请不要填写真实客户资料。
- 示例报价表（虚构数据）↗：可以拿来和网页计算结果对照。
在自己电脑上运行，需要 Node.js 22.12 或更高版本：
git clone https://github.com/xichugeek/XichuQuoteLite.git
cd XichuQuoteLite
npm install
npm run dev # 打开 http://localhost:5173
npm test # 单元测试
npm run build # 构建 dist/
npm run preview # 打开 http://localhost:4173 预览构建结果更完整的说明，包括浏览器端到端测试和另存 PDF 的步骤，见仓库里的 README。
方法比工具更值得带走
你完全可以照这套方法做自己的工具：先把需求缩到最小，把计算规则写成能核对的数字，再让 AI 分步完成，每完成一步就实际操作、实际验证。报价工具只是例子，真正值得带走的是这套做法。
你手上有哪张 Excel 表，最想做成网页工具？欢迎到本期视频评论区告诉我。
