【码道案例】我用一句话做了个分期付款计算器：从 Prompt 到可用的单文件网页

在平时使用 AI 做开发的时候，我发现有一类需求特别适合交给 AI：功能简单、逻辑明确、不需要后端的小型 Web 工具。

比如 BMI 计算器、年龄计算器、单位换算器、贷款计算器等。

这次我尝试了一个比较简单的案例：让 AI 帮我制作一个「分期付款计算器」。

我的目标很明确：不搭建项目、不安装依赖，只通过一段 Prompt，让 AI 直接生成一个可以在浏览器打开的 HTML 文件。

最终生成的页面包含本金、期数、年利率输入，可以计算每期还款额、还款总额和支付利息，同时还有输入校验、一键复制和移动端适配。

最终效果如下：

输入 10000 元、12 期、年利率 6%，页面计算出每期还款约 860.66 元。

---

一、为什么想到做这个小工具？

平时遇到一些计算问题时，我觉得专门打开 Excel 或者搜索在线计算器其实都有点麻烦。

如果只是一个简单的计算需求，做一个打开浏览器就能使用的小网页反而更加方便。

所以这次就尝试让 AI 直接做一个：

分期付款计算器。

它不需要账号，也不需要数据库，更不需要服务器。

打开 HTML 文件就可以使用。

这个案例的需求也比较明确：

• 输入分期金额

• 输入分期期数

• 输入年利率

• 自动计算每期还款

• 显示还款总额

• 显示支付利息

• 输入错误时给出提示

• 支持复制计算结果

• 手机端也可以正常使用

---

二、我直接给 AI 的 Prompt

这次我没有让 AI 一步一步开发，而是直接把完整需求写进 Prompt，让它一次性生成整个网页。

使用的 Prompt 是：

请用一个单独的 HTML 文件（包含内联 CSS 和 JS，不需要外部依赖）帮我实现一个"分期付款计算器"网页小应用，要求如下：

**核心功能：**
1. 总金额期数利率输入
2. 每期还款额

**交互细节：**
- 页面加载时展示一个默认示例结果，用户修改输入后自动或点击按钮实时更新计算结果
- 对无效输入（负数、空值、超出合理范围）给出友好的错误提示，不允许计算崩溃
- 结果区域用较大字号突出显示，关键数值可一键复制

**视觉风格：**
- 简洁现代，居中卡片式布局，圆角、柔和阴影
- 配色自定，但整体协调美观
- 移动端也要能正常显示（响应式）

**技术要求：**
- 纯 HTML + CSS + JS，不依赖任何外部库或框架
- 不需要任何数据持久化/后端，全部逻辑在前端完成
- 代码结构清晰，适当加注释

整个过程其实很简单。

我没有另外搭建 Vue、React 或其他项目，也没有安装第三方依赖。

就是把需求告诉 AI，让 AI 直接生成完整 HTML。

---

三、为什么这个 Prompt 效果比较好？

我觉得这里比较值得分享的是：Prompt 里面不只是描述了“我要什么功能”，还把使用场景、异常情况和技术限制一起告诉了 AI。

1. 先告诉 AI 最终要做什么

首先明确：

帮我实现一个“分期付款计算器”网页小应用。

然后列出核心功能。

这样 AI 不需要自己猜测产品方向。

---

2. 把交互要求说清楚

比如我在 Prompt 中写了：

页面加载时展示一个默认示例结果
用户修改输入后自动或点击按钮实时更新计算结果

这样生成出来的页面不是一个静态 Demo，而是打开之后就已经有示例数据。

用户修改数字之后，也可以立即得到新的结果。

---

3. 提前考虑错误输入

这一点我觉得非常实用。

Prompt 中专门写了：

对无效输入（负数、空值、超出合理范围）
给出友好的错误提示，不允许计算崩溃

因为如果只告诉 AI：

“帮我计算每期还款。”

它可能只考虑正常输入。

但实际使用的时候，用户可能输入空值、负数，甚至特别大的数字。

所以直接在 Prompt 里面告诉 AI：

异常情况也要处理。

这样得到的结果会更接近一个真正可以使用的小工具。

---

四、视觉效果也直接交给 AI

这次我没有提供具体的颜色、字体或者 CSS 参数，而是给 AI 一个比较明确的视觉方向：

简洁现代
居中卡片式布局
圆角
柔和阴影
整体协调美观
移动端响应式

最终 AI 根据这些描述生成了一个比较简洁的卡片式页面。

整体结构就是：

分期付款计算器

等额本息 · 输入参数自动计算每期还款

总金额
[ 10000                         元 ]

期数
[ 12                            期 ]

年利率
[ 6                              % ]

[          立即计算              ]

每期还款额（点击数值可复制）

860.66

还款总额：10,327.97 元
支付利息：327.97 元

借款本金：10,000.00 元
期数：12 期 · 年利率：6%

这种布局对于计算器类工具来说比较直观。

用户打开页面后，不需要学习怎么使用，基本一眼就知道应该输入什么。

---

五、AI 生成的计算逻辑

这个工具采用的是等额本息的计算方式。

用户输入三个参数：

本金
期数
年利率

程序先把年利率转换成月利率，然后根据期数计算每期还款额。

例如：

本金：10,000 元
期数：12 期
年利率：6%

对应的月利率是：

6% ÷ 12 = 0.5%

最终计算出来：

每期还款：860.66 元
还款总额：10,327.97 元
支付利息：327.97 元

页面会把这些结果直接展示出来。

这里比较方便的一点是，计算逻辑全部运行在浏览器前端，不需要把用户输入的数据发送到服务器。

---

六、我特别让 AI 处理了几个容易出现问题的场景

虽然整个项目很简单，但如果只是让 AI “做一个计算器”，还是容易遗漏一些细节。

所以这些内容我直接放进了 Prompt。

1. 空值

例如用户把本金输入框清空：

本金：[                    ]

这时候不能继续计算，而应该提示用户输入有效数据。

---

2. 负数

例如：

本金：-10000

这种数据虽然 JavaScript 可以正常读取，但显然不符合这个计算器的使用场景。

因此需要进行限制。

---

3. 期数必须合理

比如：

12.5 期

显然不是一个合理的分期期数。

所以期数需要按照整数处理，同时设置合理的范围。

---

4. 利率为 0

这个也是一个容易被忽略的情况。

如果用户输入：

年利率：0%

实际上应该可以正常计算。

这种情况下，每期还款就是：

本金 ÷ 期数

而不是让程序因为计算公式中的除法出现异常。

这些边界情况，我直接要求 AI 在生成代码的时候考虑。

---

七、为什么我选择“单个 HTML 文件”？

这是这次案例里我比较喜欢的一点。

Prompt 中明确要求：

请用一个单独的 HTML 文件
包含内联 CSS 和 JS
不需要外部依赖

这样 AI 最终生成的就是一个完整的文件。

例如：

installment-calculator.html

不需要：

npm install
npm run dev

也不需要：

node_modules
package.json
src/
components/

甚至不需要服务器。

直接用浏览器打开 HTML 文件，就可以看到完整的计算器。

对于这种小工具来说，我觉得这种方式非常合适。

---

八、最终效果

最终页面就是一个比较简洁的分期付款计算器。

 

---

九、这个案例最让我觉得方便的地方

以前如果自己从头做这样一个网页，大概需要考虑：

HTML 页面结构
↓
CSS 样式
↓
输入框
↓
按钮
↓
JavaScript 计算逻辑
↓
异常处理
↓
结果展示
↓
复制功能
↓
移动端适配

现在这些内容都可以直接在 Prompt 中告诉 AI。

最后得到的是一个完整的 HTML 文件。

所以这种场景下，AI 更像是一个快速实现想法的开发助手。

我只需要把：

“我想做一个什么东西，它需要具备什么功能”

描述清楚，剩下的页面结构、CSS 和 JavaScript 都可以让 AI 完成。

---

十、我觉得最值得复用的是这个 Prompt 思路

这次做完之后，我发现以后如果想做其他类似的小工具，其实可以直接复用这个 Prompt 模板。

比如以后想做：

• BMI 计算器

• 年龄计算器

• 单位换算器

• 汇率计算器

• 个税计算器

• 房贷计算器

• 存款利息计算器

都可以采用类似的写法。

基本结构就是：

请用一个单独的 HTML 文件
帮我实现一个 XXX 网页小应用。

核心功能：
1. XXX
2. XXX
3. XXX

交互细节：
- 页面加载时展示默认示例结果
- 用户修改输入后实时更新
- 对无效输入给出友好的错误提示
- 关键结果支持一键复制

视觉风格：
- 简洁现代
- 居中卡片式布局
- 圆角
- 柔和阴影
- 移动端响应式

技术要求：
- 纯 HTML + CSS + JS
- 不依赖任何外部库或框架
- 不需要后端
- 不需要数据持久化
- 所有逻辑在前端完成
- 代码结构清晰
- 适当添加注释

相比只说一句：

“帮我做一个 XXX 计算器。”

这种结构化 Prompt 给 AI 的信息明显更多，也更容易一次生成符合预期的结果。

---

十一、这个案例给我的启发

我觉得 AI 编程有一个很适合普通开发者甚至非专业开发者的场景：

先不要考虑项目要不要用框架，而是先看需求本身有多复杂。

像这次的分期付款计算器：

• 不需要用户登录

• 不需要数据库

• 不需要后端

• 不需要保存数据

• 不需要复杂页面跳转

• 不需要第三方 API

本质上就是：

输入数据
↓
计算
↓
展示结果

这种需求完全可以先尝试让 AI 用原生 HTML + CSS + JavaScript 实现。

最终一个文件就可以完成。

---

十二、总结

这次的案例从头到尾其实非常简单：

确定想做一个分期付款计算器
          ↓
整理功能和交互需求
          ↓
写一个完整的 Prompt
          ↓
交给 AI 生成代码
          ↓
得到一个单文件 HTML 网页
          ↓
浏览器直接打开使用

最终实现了：

• ✅ 总金额输入

• ✅ 期数输入

• ✅ 年利率输入

• ✅ 等额本息计算

• ✅ 每期还款额

• ✅ 还款总额

• ✅ 支付利息

• ✅ 默认示例结果

• ✅ 输入后实时计算

• ✅ 异常输入提示

• ✅ 0 利率处理

• ✅ 结果一键复制

• ✅ 响应式移动端布局

• ✅ 纯 HTML + CSS + JavaScript

• ✅ 无外部依赖

• ✅ 无需后端

• ✅ 单个 HTML 文件即可运行

这个案例虽然不算复杂，但我觉得它比较适合用来说明一种很实用的 AI 编程方式：

对于需求明确的小工具，不一定需要先搭建复杂的开发环境。把需求、交互、异常情况和技术限制描述清楚，AI 就可以直接把一个想法快速变成能够运行的网页。

以后再遇到类似的需求，我会优先考虑这种方式：先写清楚 Prompt，让 AI 直接生成一个可以运行的最小版本，再根据实际需要继续扩展。

这可能就是 AI 编程最适合我的地方——把“从想法到能用”这一步的成本降得非常低。