【vibe coding 之前端页面踩坑记录】在我Vibe Coding出一个产品雏形后

【vibe coding 之前端页面踩坑记录】

在我Vibe Coding出一个产品雏形后，自然而然就需要一张“脸面”——前端页面

当时gemini3上线的时候，我体验了一把效果还不错，错误的以为做个前端很easy

然后，最近我vibe coding了一个分析kol的产品。因为现在可以弄了ai来总结推特的信息。那么就遇到一个现实的问题，就是先找到牛逼的kol(比如擅长alpha，擅长分析趋势的kol等)。而这种kaito、xhunt、cookie都很难找到。所以我做了kol的不同的数据维度。

数据做好了，就想开始做前端。开始是自信满满的，结果花了足足5天的时间，改补的课一个也少不了

数据有了，我就自信满满地准备搞前端。结果？真的是“盲目自信”，足足花了 5 天时间，该补的课一个也没少。

所以，我就来复盘一下这个前端页面的“进阶之路”，全是血泪换来的踩坑经验

Level 1

直接让大模型做，

网页端建议直接上 **Google AI Studio**（注意：这里不是 Gemini 的日常聊天网页版，是那个开发者工具）。我让 Gemini 3 直接 Build 一个前端页面。在这个阶段，我也混用了 Antigravity 的 Claude Opus、Gemini 3 和 Claude Code 等工具。

而这里的第一个经验是：一定要用真实的数据。如果你还没有，就让ai标准你需要的数据。如果不给数据，再好的成本也没用。

从结果来看，各种方法的效果都差不多。大概在75~80分吧。因为我的数据比较多，页面比较复杂。

Level 2

既然直接让ai做效果不佳，那么我想到的是，找一张我想要的效果图，让ai仿照着设计。这个给大家推荐一个网站效果图的https://dribbble.com/。 ai给我推荐了几个前端页面网站，我实际看下来，这个最好。

如果你运气好，能找到给你非常接近的。但是，也可能像我一样，找到相近的，但是又不能完全满足。

Level 3

当上一步不能满意，那么第三Level的做法是，让ai画出效果。

具体一点，将到找的类似感觉的图片交给ai，然后跟它聊天，说你的想法，让它出建议。这里最重要的一个经验是让ai写一份画图软件的prompt，可以让它多出几份，不同颜色，风格的。反正牛马愿意干活。

因为我使用gemini3，然后让它写 banana画图的prompt。而在这一步，我花了不少时间。让香蕉花了很多的图片。

在确认样式后，建议让ai根据图片写一份前端页面的prompt。实际经验发现，比vibe coding的时候直接给一张图，让模仿来简单。

踩坑经验 3：Google AI Studio 是最佳的“试错沙盒”。在确认 UI 样式后，让 AI 根据生成的图片写一份**详细的前端 Prompt。关键点来了：先在 Google AI Studio 里跑一遍代码，而不是直接进 IDE。我之前太急，直接在 Cursor 里开搞，结果发现效果达不到预期，还以为是 Antigravity 或者模型的问题。后来发现，纯粹是 Prompt 写得不够细。 AI Studio 的优势是轻量化：不需要本地装 Next.js、Supabase、Tailwind 那些依赖，也不用管 Git，直接看 Prompt 出来的效果对不对。这比在本地改代码快太多了。

Level 4

完成了第三步之后，网页基本达到了80%的满意度。接下来就是扣细节了。这个部分的工作是跟ai对细节。而最头疼的就是需要知道一些专业的名词，要不然ai可能不理解。

这个时候，最头疼的不再是逻辑，而是专业术语的对齐。比如我要调整一个圆角，或者做一个毛玻璃效果，如果我不懂 CSS 的 `backdrop-filter` 或者 Flex 布局的术语，AI 可能完全不理解我想微调哪里。

好了，忙活了这么就，终于有点成果了。