Lately, I've been thinking a lot about "vibe coding" — moving fast, staying in flow, and using AI to accelerate idea exploration rather than getting bogged down in setup.

"Vibe coding," a term popularized by AI researcher Andrej Karpathy, refers to leveraging AI tools to rapidly prototype and build applications, prioritizing flow and creativity over traditional setups.

Recently, I decided to put it to the test on a real project: building ai-prompt.carl-topham.com, a site designed to quickly customize and generate AI prompts without having to manually tweak templates every time.

This wasn’t just a toy experiment — it was an honest attempt to see if I could use AI to go from idea to live app without sacrificing too much control or quality.

Here’s how it went.

🎯 Why Vibe Code This?

The project started with a simple itch:
AI prompt templates — especially for visual trends like "Ghibli-style" or "3D toy" renders — are exploding, but personalizing them manually every time is tedious.

I wanted a quick way to fill in a form, tweak the specifics, and generate a clean prompt instantly.

Normally, setting up Next.js, Tailwind, Shadcn components, project scaffolding — it all takes time.
Time I didn’t want to spend.
Time I don’t have much of these days.

The real goal was simple:
Could I use AI to turn a quick idea into a working project before the vibe cooled off?

⚙️ The Stack (and Why)

• Next.js — my home base, familiar and flexible
• Tailwind CSS — via Shadcn UI for fast, clean components
• Vercel V0 — to instantly scaffold the initial UI
• Cursor IDE — the current leader in AI-enhanced coding (better than Copilot, in my experience)

The stack was a deliberate choice.
I wanted tools I trusted enough to evaluate AI output quickly, but that also wouldn't slow me down with boilerplate.

I wasn’t aiming for “no-code.”
I was aiming for low-friction code.

💻 How I Used AI to Build

Using Vercel V0 (an AI UI/Code generator), I outlined a sidebar with categorized presets and a main panel for inputs and outputs. V0 quickly scaffolded a functional UI based on these requirements, saving hours of setup work.

“We're creating a prompt generator/helper website. It should be a menu down the left with the prompts and a main panel with the inputs/output prompt that can be copied into AI agents like ChatGPT.
The side bar will be split into sections. There will be a short section at the top with current trends "vibes", then the full list of presets. eg:

## Vibes
- Ghiblify
- 3D toy
- Homekit background

## Presets
- Anime style
- Social poster
- Casette futurism
- Disney-fy
- ... etc

The main panel will consist of the title of the preset. A brief descrciption of what will be generated should be shown optionally, and also an example image of what the results could look like , also optional. It should have a form where any customisations can be configured. Then if configuration is valid/complete/not-required it should display the output panel. This should have the full prompt and a copy text button. There should also be a Notes section that displays if the prompt requires extra steps or data for example, if it requires a photo or file uploaded.”

Experience taught me that the more detail you give AI upfront, the better the results — and it absolutely nailed the structure on the first attempt.

Meanwhile, in Cursor, I scaffolded a fresh Next.js app.
Minor Tailwind config tweaks aside (inevitable when two different AIs are involved), the generated components slotted in cleanly.

From there, I kept iterating:

• Asked Cursor to create the presets schema and inject it
• Evolved the app to store state in the URL for easy sharing
• Later refactored to full URL-based routing and param-driven state

While AI tools like Cursor significantly sped up development, some manual intervention was needed. For example, replacing replace with replaceAll ensured consistent behavior across all cases.

Overall, the flow was simple:
Prompt. Scaffold. Tweak. Iterate. Vibe.

🚀 Where AI Saved Me Hours

There were two huge timesavers:

• Generally scaffolding the site — This part is insanely fast. Building the components, app router and handling the config for most of the UX saved a massive amount of time.
• Refactoring URL state and routing — what would normally eat an evening was done in minutes
• Adding new presets — I’d start typing a new vibe name and Cursor would generate a full schema on the spot

By offloading repetitive setup tasks to AI tools, I could focus entirely on building features. This approach made the experience more creative, fluid, and rewarding. The whole site took about 2-3 hours to get up and running, with another hour of tweaks and then mostly just content (more presets and creating the images for the previews)

That’s the dream, right?

🛠️ Where AI Struggled

AI can scaffold, but it still can’t see.

Without tools like MCP servers that let AIs browse live dev sites or see Figma designs, debugging is still a lot of describing the issue and iterating manually. It can handle terminal output and debug it, and code errors in the IDE, but anything that requires more input needs the context.

Minor bugs popped up.

Tailwind quirks needed fixing.

Autocomplete sometimes hallucinated weird, repetitive code.

It felt a lot like mentoring a very junior developer:
You get raw productivity — but you also need to review and guide carefully.

🧹 The Cleanup Phase

Cleanup wasn’t brutal, but it was essential.
I polished:

• UI details AI didn’t catch
• Minor logic fixes
• Cleaning up infinite-loop autocomplete bugs

Blindly accepting every suggestion would have been a disaster.
But staying hands-on kept quality high without sacrificing speed.

🔄 Would I Vibe Code Again?

Absolutely.
But with one big lesson learned:

Take small, deliberate steps.

Keeping changes tight and context intact made the AI's job (and mine) way easier.
When things sprawl, iteration slows down fast.

It’s not about moving recklessly.
It’s about moving nimbly — close enough to feel mistakes before they grow.

Final Thoughts: Directing the Flow

This experiment highlights the transformative potential of AI in software development. Vibe coding offers new possibilities for faster, more creative workflows—but maintaining code quality and oversight remains crucial as these tools evolve.

AI isn't replacing developers — it's changing how we work.

It’s less about grinding through boilerplate, more about directing creativity.

Cursor wasn’t my replacement coder - It was my junior dev.

V0 wasn’t my architect -It was my rough-drafter.

Used right, AI can turn a napkin idea into a working project in a weekend.
And honestly? That’s a vibe I’m happy to ride.

🛠 Check out the live site here →

Other posts

Tagged with