从零到一：我用 AI 写了个复利计算器，顺便治好了我的"公式恐惧症"

起因：一个让我头大的需求

最近在整理个人财务规划时，想算一笔账：如果每月定投 500 块，年化 8%，坚持 20 年，最后能有多少钱？

打开 Excel 准备写公式，发现自己对 FV 函数和复利公式的记忆早已模糊。算了，找个现成的计算器吧------结果要么是网页广告满天飞，要么是下载 App 才能用，要么算出来的结果我根本不敢信。

"算了，我自己写一个吧。"

这个念头一冒出来，我就知道事情不简单。因为我对金融公式的掌握程度，基本停留在"复利 = 利滚利"这个层面。但作为一个开发者，我至少有一样东西可以依赖------AI。

传统方案的痛点

在动手之前，我其实认真评估过几个现成方案：

Excel 公式 ：功能强大，但需要懂 FV(rate, nper, pmt, [pv], [type]) 这种参数顺序，而且做不出好看的增长曲线图，还得再拉数据做图表。

在线计算器网站：大多数只算本金复利，不支持每月追加定投。好不容易找到一个支持定投的，算出来的结果对不上账------后来才发现它把定投按"期初"计算，而我想要的是"期末"入账（工资到账后才定投，很合理吧）。

自己写：最可控，但需要解决两个核心问题------公式怎么推导、图表怎么画。

于是，我打开了我最熟悉的 AI 对话窗口。

和 AI 的第一轮对话：需求描述是关键

我一开始的 prompt 是这样的：

"帮我写一个复利计算器，要支持每月追加投资，输出 HTML 页面。"

结果 AI 给我返回了一个只算本金的简单计算器，定投部分完全没有。这让我意识到一个问题：需求描述不够精确，AI 就给你"差不多"的答案。

我重新组织了一下语言，把需求拆成了几个明确的部分：

"做一个复利计算器，包含以下功能：

输入本金、年化利率、投资年限、复利频率（每年/每季/每月/每日）

支持每月追加定投金额（按期末入账）

输出未来价值、累计投入、利息收益

绘制逐年增长曲线图（SVG格式，不用引入第三方库）

界面要支持中英文切换

纯前端实现，不用后端"

这次 AI 给出的代码框架基本对了，但细节问题不少。

踩坑记录：AI 代码的"坑"与"填"

坑一：公式推导错误

AI 第一次给出的定投终值公式是这样的：

javascript 复制代码

fvContrib = monthlyAdd * 12 * years * Math.pow(1 + i, N);

这个公式把每月的定投都按"全额复利"计算了，但实际上每笔定投的复利时间不同。正确的公式应该是：

javascript 复制代码

// 每期利率 i = r/100 / n，总期数 N = n * years
// 每期供款 PMT = 月追加 * 12/n
// 期末年金终值：PMT * ((1+i)^N - 1) / i
var perPeriodAdd = monthlyAdd * (12 / n);
var fvContrib = perPeriodAdd * ((Math.pow(1 + i, N) - 1) / i);

这个公式来自期末年金终值公式 ，和等额本息还款的推导逻辑一致。我花了大概半小时回忆这个公式，然后发现 AI 第一次写的是错的。这也印证了一个观点：AI 可以帮你写代码，但不能帮你理解业务逻辑。

坑二：边界条件处理

当利率为 0 时，公式 PMT * ((1+i)^N - 1) / i 会出现除零错误。AI 没有处理这个边界情况。

javascript 复制代码

var fvContrib = i > 0 
  ? perPeriodAdd * ((Math.pow(1 + i, N) - 1) / i) 
  : perPeriodAdd * N; // i=0 时退化为 PMT * N

这种边界条件，AI 往往不会主动考虑。我在 review 代码时发现这个问题，加上了上面的判断。教训是：AI 生成的代码，边界条件一定要自己过一遍。

坑三：图表实现方案

AI 最初提议用 Chart.js 或 ECharts，但我明确要求了"不引入第三方库"，因为我想让页面加载更快、更轻量。于是 AI 改用了纯 SVG 绘制折线图。

javascript 复制代码

function drawChart(series, sym) {
  var w = 640, h = 200, pad = 30;
  var max = series[series.length - 1] || 1;
  var min = series[0] || 0;
  var range = (max - min) || 1;
  
  var pts = series.map(function(v, idx) {
    var x = pad + (w - 2 * pad) * (idx / (series.length - 1));
    var y = h - pad - (h - 2 * pad) * ((v - min) / range);
    return x.toFixed(1) + ',' + y.toFixed(1);
  }).join(' ');
  
  return '<svg viewBox="0 0 ' + w + ' ' + h + '" preserveAspectRatio="none">' +
    '<polyline fill="none" stroke="#3b82f6" stroke-width="2" points="' + pts + '"/>' +
    '</svg>';
}

这个实现其实挺巧妙的：用 viewBox 做响应式缩放，preserveAspectRatio="none" 让图表自适应宽度。但 AI 第一次生成的版本没有处理 max === min 的情况（比如本金为 0 且利率为 0），导致除零。我加了一个 || 1 的兜底。

和 AI 的协作模式：我的心得

经过这个项目，我总结出和 AI 协作写代码的三个阶段：

第一阶段：框架搭建

这个阶段 AI 表现最好。给它一个清晰的需求描述，它能快速搭出 HTML 结构、CSS 样式和基本交互逻辑。我大概花了 10 分钟就得到了一个能跑的页面。

第二阶段：逻辑修正

这是最需要人力的阶段。AI 生成的业务逻辑（尤其是金融公式）经常有误，需要我用领域知识去校验和修正。AI 不是数学计算器，它是语言模型，擅长的是把需求翻译成代码，而不是推导公式。

第三阶段：体验打磨

这个阶段 AI 能帮上忙，但需要我明确指令。比如：

"把输入框加上 focus 时的蓝色边框和阴影效果" "输入无效值时显示红色错误提示，而不是直接报错" "计算按钮点击后，结果区域要平滑滚动到可视区域"

这些细节 AI 都能很好地执行，但需要你先想到这些需求。AI 不会主动帮你做用户体验优化。

最终效果

经过大约 2 小时的迭代（其中 1 小时在调公式），最终实现的功能：

支持本金、年化利率、期限、复利频率（年/季/月/日）输入
支持每月追加定投（期末入账）
输出未来价值、累计投入、利息收益
绘制逐年增长曲线（纯 SVG，无第三方依赖）
中英文自动切换（根据浏览器语言）
深色模式自适应（CSS 变量实现）
响应式布局（移动端单列显示）

核心计算逻辑就一个函数：

javascript 复制代码

function compute(p, rPct, years, n, monthlyAdd, sym) {
  var r = rPct / 100, i = r / n, N = n * years;
  var fvPrincipal = i > 0 ? p * Math.pow(1 + i, N) : p;
  var perPeriodAdd = monthlyAdd * (12 / n);
  var fvContrib = i > 0 
    ? perPeriodAdd * ((Math.pow(1 + i, N) - 1) / i) 
    : perPeriodAdd * N;
  var fv = fvPrincipal + fvContrib;
  var invested = p + monthlyAdd * 12 * years;
  
  // 逐年数据，用于图表
  var series = [];
  for (var y = 0; y <= years; y++) {
    var Ny = n * y;
    var fp = i > 0 ? p * Math.pow(1 + i, Ny) : p;
    var fc = i > 0 
      ? perPeriodAdd * ((Math.pow(1 + i, Ny) - 1) / i) 
      : perPeriodAdd * Ny;
    series.push(fp + fc);
  }
  
  return { fv: fv, invested: invested, interest: fv - invested, series: series };
}

整个页面就是一个 HTML 文件，没有构建工具，没有依赖，打开即用。

一些感悟

这个项目让我对 AI 辅助编程有了更清晰的认识：

AI 擅长的是"翻译" ------把你的需求翻译成代码。它知道 input 标签怎么写，知道 flexbox 怎么布局，知道 addEventListener 怎么用。这些"语言层面的翻译"它做得又快又好。

AI 不擅长的是"理解"------它不理解复利公式的经济学含义，不理解为什么期末年金和期初年金的结果不同，不理解为什么利率为 0 时公式会崩溃。这些需要你作为开发者的领域知识去补充。

所以，我的工作流变成了：需求分析自己做，架构设计一起讨论，代码生成交给 AI，逻辑校验自己来。这样既发挥了 AI 的效率优势，又保证了代码的正确性。

适用场景

这个工具适合以下场景：

理财规划：算一算每月定投多少，20 年后能攒够养老钱
教育储蓄：孩子出生时开始定投，到他上大学时能有多少
贷款对比：虽然不能直接算贷款，但可以通过调整利率和期限来估算
教学演示：给学生演示复利的力量，直观看到曲线增长

如果你也有类似的财务计算需求，或者想看看这个计算器的实际效果，可以在线体验：复利计算器 - 在线复利与定投收益测算工具

最后

这次用 AI 写工具的经历，让我想到一句圈内梗："AI 不会取代程序员，但会用 AI 的程序员会取代不用 AI 的程序员。"虽然有点夸张，但方向是对的。关键在于，你得知道 AI 哪些地方能帮你，哪些地方得自己来。

公式推导、业务逻辑、边界条件------这些还是得靠自己。但布局、样式、交互逻辑、国际化这些琐碎但耗时的部分，AI 确实能省下不少时间。

这不比从零手写香多了？