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

这是一次技术实习生筛选项目的真实记录，要求在48小时内完成一个可公网访问的小工具。项目的核心目标很明确：验证一个人能否把一个想法从零做到可上线、可访问、还能讲清楚。最终交付的是一个叫 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，也适合在卡住的时候提供第二种思路；但验证、取舍、收尾，还是得自己来。