The front-end page of Vibe coding has a history of pitfalls After I developed a product prototype using Vibe Coding, I naturally needed a "face" - the front-end page When Gemini3 was launched, I experienced a good effect and mistakenly thought that making a frontend was easy Then, recently I Vibe coded a product for analyzing KOLs. Because now we can use AI to summarize Twitter's information. So we encounter a practical problem, which is to first find a powerful KOL (such as KOL who is good at alpha, KOL who is good at analyzing trends, etc.). And these kaito, xhunt, and cookies are all difficult to find. So I created different data dimensions for KOL. Once the data is ready, I want to start working on the front-end. At first, I was full of confidence, but it took me a full 5 days, and I couldn't miss any of the classes I took With the data, I am confident and ready to work on the front-end. result? It's really 'blind confidence', it took me 5 days and I didn't miss any missed classes. So, I'm here to review the "path to advancement" of this front-end page, which is all about the experience of stepping on pitfalls obtained through blood and tears Level 1 Let the big model do it directly, It is recommended to go directly to Google AI Studio on the web page (note: this is not Gemini's daily chat web version, it is the developer tool). I have Gemini 3 build a front-end page directly. At this stage, I also mixed tools such as Antigravity's Claude Opus, Gemini 3, and Claude Code. And the first lesson here is: be sure to use real data. If you don't have it yet, let AI standardize the data you need. If data is not provided, even the best cost is useless. From the results, the effectiveness of various methods is similar. Probably around 75-80 points. Because I have a lot of data and complex pages. Level 2 Since letting AI do the design directly is not effective, what I have in mind is to find a rendering that I want and let AI imitate the design. I would like to recommend a website rendering for everyone at https://(dribbble. com)/. AI recommended several front-end websites to me, and in reality, this one is the best. If you are lucky, you can find someone very close to you. However, it is also possible for someone like me to find something similar but not completely satisfied. Level 3 When the previous step is unsatisfactory, the approach for the third level is to have the AI draw the effect. To be more specific, hand over a similar feeling image to AI, chat with it, share your thoughts, and ask it for suggestions. The most important experience here is to have AI write a prompt for a drawing software, which can produce multiple prompts in different colors and styles. Anyway, cows and horses are willing to work. Because I use Gemini3 and have it write prompts for drawing banana. And in this step, I spent a lot of time. Make a lot of pictures of banana flowers. After confirming the style, it is recommended to have AI write a prompt for the front-end page based on the image. Practical experience has found that when it comes to Vibe coding, simply providing a picture makes imitation easier. Experience 3: Google AI Studio is the best "trial and error sandbox". After confirming the UI style, have the AI write a detailed front-end prompt based on the generated image. The key point is here: first run the code in Google AI Studio instead of directly entering the IDE. I was too hasty before and started working directly in the cursor, but found that the effect did not meet expectations. I thought it was an issue with Antigravity or the model. Later, it was discovered that the prompt was not written in detail enough. The advantage of AI Studio is its lightweight design: it does not require local installation of dependencies such as Next.js, Supabase, Tailwind, nor does it need to manage Git. You can directly see if the prompt output is correct. This is much faster than changing the code locally. Level 4 After completing the third step, the webpage achieved a satisfaction rate of 80%. The next step is to pay attention to the details. This part of the work involves working with AI on details. The most headache inducing thing is the need to know some professional terms, otherwise AI may not understand. At this point, the biggest headache is no longer logic, but alignment of professional terminology. For example, if I want to adjust a rounded corner or create a frosted glass effect, and I don't understand CSS's' backoff filter 'or Flex layout terminology, AI may not understand where I want to fine tune. Alright, after all the work, we finally have some results.