ModelMeter 开发复盘
这次参加初试，我选了方向 A 的模型价格计算器，交付作品是 ModelMeter。
在线体验：https://modelmeter.vercel.app/
源码仓库：https://github.com/Zenty-Me/modelmeter
最开始构思时，我以为这只是一个把各家 Token 价格相乘再加总的简单工具。只要拿到几家官方数字，拉个表单乘以调用量就能交卷。
但真正动手写数据层时，我发现厂商的计价体系远比想象中杂乱。有的模型只按百万 Token 计费，有的带有上下文长度阈值，超过 128k 后价格整体翻倍；还有的区分了缓存命中、批处理和推理 Token。
如果图省事把价格硬编码在前端组件里，代码确实能跑，但未来官方一旦调整计价策略，维护成本会非常高。所以我放弃了单纯给模型写两个固定数字的做法，改用规则驱动的 Pricing Tier。我写了一个解析器，根据用户输入的单次平均 Prompt 长度，自动选择对应区间的价格阶梯。UI 组件只消费处理后的成本明细，业务规则与界面渲染解耦。
在搭建项目的过程中，AI 帮我省掉了大量机械劳动。初始化 Next.js App Router 架构、搭建 TypeScript 接口类型、编写 Tailwind 响应式样式以及补充 Vitest 基础测试用例，这些工作 AI 都能很快交付。
但 AI 生成的代码必须逐行推敲业务语义。
最明显的一个坑出现在降本比例的计算上。有一版代码运行后，页面赫然写着“切换模型可节省 2,221.4%”。从常识来看，在成本均为正数的前提下，省钱幅度不可能突破 100%。排查后发现，AI 把“A 比 B 贵了多少”与“从 A 换到 B 能省多少”混为一谈，错把最低价格当成了计算百分比的分母。我重新拆分了两个维度的计算逻辑，将分母修正为最高成本，并补充了测试断言。
数据源也是需要人工死守的环节。让 AI 凭记忆填充模型参数很容易，但其中常夹杂过时甚至捏造的数据。在这个项目里，我坚持逐条核对 OpenAI、Anthropic、Google 的官方 Pricing 页面，把一手 URL 和人工验证日期落库，同时在前端展示新鲜度标识。
复盘下来，有几点体会：
- 做产品时先跑通核心闭环，不要一开始就陷进各种分支特性里。
- 向 AI 提需求时，要给出明确的数学边界、输入输出约束和验收条件，模糊的提问只会得到充满隐患的代码。
- 代码是否正确、数据是否真实，最终要由开发者自己负责。
技术栈：Next.js / React / TypeScript / Tailwind CSS / Vitest / Vercel