从0到上线：用AI打造了一个多模型Prompt对比工具

这是我参加一个技术实习生筛选项目的过程记录，项目要求 48 小时内做一个能公网访问的小工具。这次小项目的目标其实很明确: 看我能不能把一个东西从 0 做到能上线、能访问、能说明白。我最后做的是一个 Prompt Comparator，一个可以把同一个 prompt 同时发给多个模型、并行展示返回结果的小工具。

我选择这个方向的原因很直接。第一，它不是纯展示页，而是真的有输入、有输出、有真实 API 调用。第二，它和 AI 工具使用场景贴得很近，因为大家平时在写 prompt、比模型效果时，本来就会来回切不同平台。第三，它的范围足够小，能在有限时间里做出一个能上线的版本。

做了什么

技术栈选了 Next.js 16 + React 19 + Tailwind CSS v4 + openai npm SDK，页面本身是单页结构，前端负责维护多个输出面板、输入 prompt、并发发起请求；后端则通过一个 API route 根据模型名分流到不同的 OpenAI-compatible 服务。我接入了 4 个模型选项: gpt-5.4、deepseek-v4-flash、qwen3.7-plus 和 glm-5.1。用户输入 prompt 后，页面会同时向所选模型发起请求，并以流式方式把结果一点点显示出来，这个虽然不复杂，但它明显提升了“这个工具真的能用”的感觉。

踩的坑

搭好项目跑起来第一个页面就 500，AI 排查后发现是 Google Fonts 在国内网络无法加载，换成系统字体后解决

坑最多的是移动端布局。第一次修完之后我拿手机实际测了一下，发现两个 panel 高度明显不对称，电脑上完全看不出来。修了一版还是不对。 后来我用手机输入了一个比较复杂的 prompt，输出内容一长，两个 panel 的文字直接重叠在一起，完全没法看。这个问题在桌面端几乎不会触发，只有手机上内容够长才暴露出来。 让 AI 排查后定位到是 CSS flex 布局里某个 div 缺少 min-h-0，导致内容溢出了 panel 边界。说实话这个原因我现在还没完全理解，我对CSS 布局这块比较陌生。但这次的教训是：UI 改动一定要在真机上测，光看桌面端会漏掉很多问题。

还有一个绕不过去的限制：Vercel 的 vercel.app 域名在国内被墙。尝试绑定自定义域名，但免费 DNS 服务商不支持下划线开头的 TXT 记录，所以 Vercel 所有权验证无法完成。最终只能保留原域名，需要梯子访问。

AI 在哪帮了我，在哪坑了我

帮了我：整个项目的架构、streaming 逻辑、API 路由代码基本都是 AI 生成的，我主要负责决策和验证——选哪个方案、改动合不合理、跑起来对不对。对我来说，Next.js 和 streaming 比较陌生，没有 AI 的话光查文档看教学可能就得花一天。

坑了我：移动端 overflow 问题，AI 前后给了三版方案，前两版都没彻底解决。每次都是我在手机上实际测出来有问题，再把现象描述给 AI 让它重新分析。最后一次才找到真正的根因。教训是 AI 给的方案不能直接信，要自己验证。

下次怎么做更快

最大的收获是：每次改完代码，不管看起来多简单，都要在实际跑一遍验收。这次移动端的 bug 都是手机测出来的，电脑上根本发现不了，这个步骤不能省。

另一个是 AGENTS.md 里有提示要先读 Next.js 的文档，我当时直接跳过了。结果遇到 Google Fonts 报错这种版本变化引起的问题，还是得靠 AI 帮排查。下次应该先把项目说明读完再动手。

总结

我觉得这次项目里最有价值的收获，不是“我会写一个对比工具了”，而是我对“如何和 AI 协作做项目”更具体了。AI 适合帮我快速搭骨架、补全样板代码、解释陌生 API，也适合在我卡住的时候提供第二种思路；但验证、取舍、收尾，还是得自己负责。