手搓了一个AI比价神器，新手开发者自建站避坑指南

最近折腾AI产品的时候，发现一个很头疼的问题：市面上模型太多了，GPT-4、Claude 3.5、Gemini，各种型号（Opus、Sonnet、Haiku），还有国产那一堆Kimi、DeepSeek、通义千问。最绝的是它们的计费单位还不统一，有的按Token算，有的按字符算，有的甚至把输入输出分开定价。每次想算算“跑这个脚本到底要花多少钱”，都得打开好几个网页，掏出计算器按半天。

实在受不了了，作为一个前端半吊子，我决定自己动手，写一个AI价格查询小网页。做出来后效果还不错，不仅自己用得爽，顺带给几个朋友试用了下，反馈也比较积极。今天主要想和大家聊聊做这个小工具的思路，以及如果你也做出来了，想分享出去的时候，有哪些规则和“潜规则”需要注意。

为什么需要造这个轮子？

虽然有一些现成的平台在做价格对比，但很多要么数据更新慢，要么界面太极客，对非技术人员不友好。我想要的是那种极简风格：打开即用，选模型、输Token数，立马告诉我折合人民币多少钱。

核心需求其实就三点：

聚合数据：把主流大模型的API价格集中在一起，最好是实时或者能手动维护更新的。
汇率换算：美元直接转人民币，不用再脑内汇率计算。
直观对比：能不能直接把A模型和B模型放在一起，看同样的输入输出谁更省钱？

技术实现的“傻瓜式”复盘

这个项目非常轻量，不需要数据库，也不需要复杂的后端。

前端框架：直接用的原生HTML+JS，为了省事引入了Vue.js（CDN引入），处理数据绑定和计算逻辑非常快。
数据存储：既然数据是公开的，没必要搞数据库。我直接把价格数据写在一个JSON文件里。每次要更新新模型的价格，或者哪天OpenAI又降价了，我只需要改改这个JSON文件重新部署即可。
部署方式：选了Vercel或者Netlify这种静态托管。这有个巨大的好处：免费、快、自带HTTPS。对于这种小工具来说，简直不要太香。把代码推上去，两分钟网站就能访问。

搞定了工具，怎么分享才安全？

工具做出来只是第一步，很多朋友在做完东西后，最兴奋的就是去技术社区或者相关论坛“显摆”一下，顺便求Star或者求反馈。这里有个大坑要注意：外链和推广尺度。

我在分享之前，特意去研究了一下各大主流社区的规则（这也是为什么我这篇文章不直接放链接的原因，怕被当成广告）。大家如果在类似的社区分享自己的项目，建议遵循以下几个原则，能极大降低被封号或删帖的风险：

1. 内容为王，链接为辅

千万不要一上来就扔个链接说“这是我的网站，牛逼吧”。这种帖子大概率会被当作垃圾广告处理。正确的姿势是复盘你的开发过程、遇到的坑以及解决问题的思路。比如你可以讲：“在处理汇率换算时，我发现JS的浮点数运算有精度问题，最后用了toPrecision解决了。”这种干满满的内容，大家看了不仅不烦，还会觉得你技术扎实。

2. 关于个人网址的处理

很多社区允许在签名档或者个人主页留下网站信息，但在正文帖子中通常会有严格限制。

求助帖类：如果你是去问技术问题的，顺便提一句“我在这篇文章里详细写了”，有时候是可以的，但最好是作为补充说明，而不是主题。
分享类：如果是Show一下你的作品，直接放链接通常是允许的，但最好放在帖子的后半部分，或者作为“Demo演示”的一部分。
避免诱导点击：文案里不要出现“点击领取xx”、“绝密网址”等这种像营销号的词汇。

3. 代码开源是最佳通行证

如果你真的想让别人放心试用你的工具，最好的方式是把代码开源（比如扔到GitHub）。然后在帖子里放上GitHub链接，而不是直接的商业网址。技术圈对开源项目的包容度通常比直接推一个不知名的网页要高得多。这能证明你这个工具没有恶意代码，也没有乱七八糟的追踪器。

给想动手朋友的一点小建议

如果你也想做类似的“生产力小工具”，我有几个踩坑后的感想：

移动端适配：刚开始我只在PC上调试，后来手机上一看，排版全乱了。 Responsive design（响应式设计）真的很重要，很多人现在只在手机上看这些东西。
数据维护：AI价格变动很快，记得设计好你的数据结构，方便日后维护。别把价格写死在代码逻辑里，到时候改价格得改半天代码，容易出Bug。
隐私安全：虽然这只是个查询工具，不涉及用户登录，但如果你以后加了“保存历史记录”之类的功能，千万别把用户数据存在localStorage之外的地方，免得有合规风险。

写在最后

从有想法到把东西做出来，再到现在能流畅地使用它解决实际问题，这个过程带来的满足感远超过工具本身。如果你也觉得现在的某些工具不好用，别忍着，试着自己写一个。哪怕只是个简单的HTML页面，也是极好的练习。

至于我做的这个小网页，为了遵守这里的分享原则，我就在这里卖个关子，不直接贴链接了。感兴趣的可以在评论区或者私信聊聊技术细节，或者问问我是怎么搞定那个汇率接口的。玩技术的嘛，多交流思路，少点硬广，圈子才会更干净。