Vibecoding Revolution: How to Build Better AI Apps Faster

Last week, over 4 days I vibecoded a functioning prototype and landing page for it. It taught me several valuable lessons I will share now.

Use Multiple Models to Generate Several Design Options

What makes these GenAI models so powerful is that you can create different designs rapidly and then take the best elements from each design and combine them into one design.

Gemini 2.5 Pro

GPT-4.1

o3

Claude Sonnet 3.5 (non-thinking)

Claude Sonnet 3.7 (non-thinking)

The best overall design came from Gemini 2.5 Pro. After reviewing all of these versions, I took the best elements and combined them into the 2.5 Pro version to get this best of the best version. I then made additional polish tweaks to get to this combined final version.

Final Combined Version

The combined version

• uses Gemini 2.5 Pro as the base
• adds GPT-4.1's "What Our Users Are Saying" section
• adds Claude Sonnet 3.7's recipe card ratings and reactions emojis
• adds my own ideas to polish, like the top level hero section, and the text on the email signup button is randomly chosen to provide some dynamic surprise for repeat visitors

You can see it live here.

I did not take anything from the designs from o3, and Sonnet 3.5.

You'll notice that a couple of the designs have poor contrast, white text on white backgrounds.

In rapid prototyping, things are going to look ugly and it's not worth your time to fix everything. I selected the text it to see what it was, decided it wasn't useful, and didn't bother fixing the colors.

The goal of rapid prototyping apps isn't to make something perfect, it's to explore, experiment, and test what's possible to save time and money.

Giving multiple models the same prompt to produce variations of the same page is a huge time saver, and you get different ideas that will make your prototype better. It's no different than when you solicit a variety of ideas from the people you work with.

I hope agentic coding systems build this kind of exploration workflow into their IDEs. Let users type one prompt that gets fed to multiple models and each one generates a separate page for the user to review. Users then select which elements they want combined into the final version.

Use Template Repositories

Before starting this project, I set up a project in Windsurf to create a skeleton of a project with the full techstack I like to use for most of my projects, such as Next.js, MongoDB, Firebase, Stripe, Tailwind, Material UI, etc.

Then I uploaded this project to GitHub as a new repository.

Next I edited its settings and checked the box for Template repository.

To create a new project/repo out of this you go to your template repo and click the button Use this template.

Then download the repo to your computer and start coding inside of it.

This makes starting new projects quick and easy by taking away the friction from setting up all the packages and dependencies.

Quick Prototypes Enable Faster Learning

Rapid prototyping enables you to learn at an accelerated rate which is key in this fast-paced industry.

Test model outputs

When I started developing the recipe generation portion of the app Gemini 2.5 Pro 06-05 had just been released. I was very impressed with its humor, which was the only reason I kept developing the app to include a landing page for it. Anca Dragan, who heads post training co-lead at Google DeepMind also remarked that the model is very funny in a recent stream chat on X.

The humor of each variation of the 2.5 family is different. For each recipe generated 2.5 Pro (06-05) made one or two subtle absurdist jokes. In contrast, Gemini 2.5 Flash (05-20) wrote jokes for each individual line of the instructions. It was a bit too much and I decided to edit some its outputs in the final landing page copy. You can see the difference in the final landing page design. The Cardiac Carnival Burrito's instructions were written by 2.5 Flash and the other two were written by 2.5 Pro.

It's important to test and evaluate different models in their responses against the same system prompt, and also adjust system prompts as needed. But only change one variable at a time, not both.

Reasoning is expensive and you might not need it

I also discovered that using the reasoning capabilities from the Gemini 2.5 models can get expensive quickly. When vibecoding an app that uses the Gemini models that are capable of reasoning, make sure to turn the thinkingBudget to 0 so you don't waste money testing something you may not need.

// Disable thinking by setting thinkingBudget: 0 (allowed for 2.5 Flash)
    const textRes = await ai.models.generateContent({
      model: textModelName,
      contents: requestContents,
      config: {
        thinkingConfig: { thinkingBudget: 0 },
      },
    });

Structured data is an untapped use case

The final thing I learned is that I believe there is an untapped potential in allowing the models to generate structured data rather than chat with users. This app instructs the AI to generate recipes in a structured response, and uses a function to package that structured output into a JSON, which then is rendered on the page to the user.

This presents information directly to users, rather than having to parse out recipe instructions from a long chat response.

It also makes the content generated much easier to share with others.

Windsurf

This prototype was vibecoded with Windsurf, which you can try out with my referral link. Windsurf's planning mode is a breeze to use and building everything was so smooth. One tip is to leave planning mode on. It will update the plan.md files as the project progresses. Very handy.

Close

Hope you found this helpful. What have you learned from vibecoding quick prototypes?