From Prompt to Production: A No-Code Next.js SPA in One Evening

Disclaimer

Yes — the website I’ll be talking about is related to my own product - web site for my arbirage bot on Solana.

But this article is not an ad. I’m not trying to sell you anything here. I’m sharing the process of building a website using AI — how I approached it, what challenges I ran into, and what came out of it.

The live site itself is still pretty barebones: mostly placeholder content and some basic pages.

So if you decide to check it out, don’t focus on the texts or the actual product — just pay attention to the UX, UI, and overall design.

This piece is about the process and the tech, not the product.

Intro

Hey folks 👋

In my last few posts I’ve mostly been diving into Web3.

And before that, I used to write a lot more about product management and IT in general:

Today, I want to switch gears and share a real-life case study where I had to solve a problem — and ended up doing it surprisingly fast in a way that might be useful to you.

This is not some “promo piece” — it’s straightforward storytelling with screenshots and examples you can replicate if you ever want to try something similar.

So don’t think of it as marketing — just me sharing an experience: what problem I faced, how I approached it, and what worked.

Of course, this isn’t a silver bullet or a replacement for coding in every situation. In some projects, this approach might replace traditional development entirely. In others — definitely not. That’s exactly what I want to unpack here.

In my case, instead of spending a week coding (or paying someone else), I was able to spin up a full SPA site in a single evening — without writing a single line of code — entirely with AI prompts. And then I deployed it straight to my own domain with no hosting costs.

Here’s the end result, so you can see right away: https://orbion.so

Click around, play with the UX/UI, check how it all works and feels. Then, if you’re curious, come back and keep reading.

For now the content is mostly placeholders and basic elements. But the structure is fully working: components, routing, responsiveness. The site looks clean across desktop and mobile.

Obviously, I’ll eventually need to plug in payments, real content, docs, and a bunch of features. But for now, that’s outside the scope. The main thing is — I now have a solid base to build on.

A Bit of Context: What I Was Working On Before

Back in the winter, I got pulled deep into blockchain again and started building an arbitrage bot for Solana just for personal use.

At first, the plan was simple: one bot, one setup, just me. But as things evolved, a bigger idea came up — why not turn it into a public service?

The vision was clear:

A full online platform
With user authentication
Access tokens for different bots
Stats dashboards
And even payments built in

Basically, a real product instead of a hobby project.

But that’s the long-term plan.

For now, I decided to start small: just an MVP — the arbitrage bot plus a basic online service where users can log in, grab their access token, and that’s it. No stats, no multiple bots, no bells and whistles yet.

Choosing the Frontend Stack

Tech Background

About 4–5 years ago, I used to write frontend with VueJS + TypeScript/JS. In theory, building the client side of a service like this shouldn’t be a big problem. But I’ve always felt that frontend is the hardest part — not because of the code itself, but because of the polish it requires.

I care a lot about smoothness, clean UI, and adaptability across devices. To get that right, you need thoughtful design, careful layouting, and constant tweaking. Honestly? That part drains me. I enjoy writing logic far more than UI with all the back-and-forth changes.

Tech Options and Doubts

With my partner, we went back and forth on the stack: Angular, Vue, or React.

He had solid experience with Angular.
I had past experience with Vue.
Neither of us really worked with React before.

But after weighing the options, the picture became clearer:

Vue felt too limited — smaller community, fewer libraries.
Angular looked powerful but too heavy and rigid.
React offered flexibility and tools, but came with a learning curve.

The Decision

Eventually, we landed on Next.js — a full-fledged framework on top of React. It fit perfectly with what we needed. Even better, the ecosystem around Next.js is massive: countless libraries, tools, and even ready-made solutions tailored for Solana and Web3.

That combination made it the obvious choice for long-term growth.

How I Stumbled Upon an AI Solution

The Unexpected Discovery

For a couple of days, I kept turning over the frontend problem in my head — without really stressing about it — until one random evening I opened the LinkedIn profile of a former colleague. I can’t even remember why. He’s also a product manager with a strong interest in Web3.

To my surprise, I found out that for the past few years he’s been building his own project — a decentralized on-chain escrow service powered by smart contracts. He even secured several grants, and the project was growing at a healthy pace. Naturally, I decided to check it out.

First Impressions

His website instantly stood out: clean design, minimalistic layout, fast and intuitive. No unnecessary flashiness, just a straightforward structure that worked seamlessly across devices.

What impressed me the most was the documentation on GitBook — clear, concise, and practical. Having such a polished reference made me think: it’s much easier to brainstorm and refine your own ideas when you already have a strong working example to draw inspiration from.

Under the Hood

I couldn’t resist reaching out. I messaged him, complimented the site, and asked what stack or template he used. I half-expected him to drop a link to some website builder or ready-made theme.

Instead, his answer floored me:

“The whole site was built with AI — just by writing prompts. No coding.”

That was a genuine surprise. Sure, I had been using GPT to generate snippets of code here and there. But an entire website with adaptive layout, solid design, and smooth responsiveness — all built purely through prompts? That was a whole new level for me.

He sent me the link to the service — something I had never even heard of before. And since I had long shifted into product management and wasn’t following dev tools as closely anymore, this felt like stumbling into an entirely new world.

Discovering Vercel V0

The tool in question is Vercel V0, built by the same team behind Next.js — and it’s honestly one of the most powerful platforms I’ve seen for spinning up websites fast. With just a handful of text prompts (on the free plan, no less), I managed to put together a site with multiple pages and different components. The best part? It was responsive out of the box. For me, that’s huge, since handling responsiveness manually has always been the part of frontend work I dreaded the most.

Key Features That Stood Out

Every prompt creates a new version history, much like Git. You can roll back or switch between versions seamlessly.
Deployment is a single click — the site goes live on a dev-domain instantly. Connecting your own domain is just as easy, and you can host directly on Vercel without worrying about external hosting.
I hooked up Google Analytics, set up email subscriptions, and even added Hotjar — all literally in just a few prompts, and everything worked right away.
The design is powered by Tailwind components, which makes the UI look clean and professional without much tweaking.
I also experimented with localization and theme switching (light/dark). It wasn’t perfect, but for an MVP it was more than enough.

Cost and Effort

The free version hit its limits pretty quickly, so I upgraded: $20 for a subscription, plus another $10 in credits. All in all, about $30 total and 8 hours of work — just typing prompts — to get a functional, responsive website online.

At this stage, the site runs as a frontend-only project with basic analytics and email subscriptions — no backend, no database. And honestly, for early MVP purposes, that’s ideal. Sure, once I add a proper backend, I’ll likely need a different hosting setup. But right now, the focus is on having a working skeleton in place.

The Flexibility Factor

One thing I really liked: you can edit the project structure or code directly online, and future prompts build on top of those changes. You can also upload images straight into the project folder, download the whole site as a zip, or push it to a repo for collaboration. That mix of AI-driven generation plus manual control makes it surprisingly powerful.

And this is just the baseline functionality — V0 already feels like a strong tool for quickly turning ideas into live, working prototypes, all without touching a traditional IDE.

Working with Vercel V0

When I first started writing this article, I wanted to share screenshots of the early site versions and even link to the test builds I had deployed on temporary dev-domains. But I ended up scrapping that idea — by the time I was done, I had deleted everything except the final project folder, which now holds just 36 commits (or “prompt history” entries).

There’s a quirk with the platform: sometimes the AI just gets stuck and keeps spitting out a broken version of the site on every new prompt. And once that happens, it can’t really recover. My workaround was to download the project as a zip, spin up a new chat, and essentially reboot the project from scratch. I had to do that about five or six times while building the site.

Eventually, once the project was polished and running smoothly, I cleared out all the earlier folders and kept only the final one with the clean history. So from here on out, all the screenshots and examples I’ll be sharing are based on that last working version — plus one fresh test project I spun up for this article.

Here’s what the Vercel V0 workspace looks like in practice:

At the top of the interface, you’ve got a simple navigation bar with folders and chats.

Left panel — this is the chat itself. It’s where you type in your prompts, get responses, and see a detailed log of the conversation.
Center — here you see the live preview of your site. Each new prompt instantly updates the preview, so you can track changes and progress in real time.
Top right corner — this shows the version history. For example, if you see v31, it means there have been 31 prompts (edits or clarifications) in this chat.
Download icon — right next to the version number, you can export the full project as a zip or generate a repo linkto share the code via an online hub.

One of my favorite features is the CODE tab above the preview. Open it, and you’ll see the full project structure and all the source code. You can view it or even edit it manually — right inside the workspace.

I won’t dump my own project’s structure here (it would just clutter the article), but let me show you how it works with a fresh example.

Here’s a simple prompt:

Make me a website SPA with 3 pages (Main, About, Contacts) about a crypto staking platform, with all the necessary blocks of information and sections.

And just like that, V0 generates a full project. While it’s building, the interface looks something like this:

On the left: a list of components being created
In the center: the live progress of the code being written

At this point, you can already see that the service has generated quite a few components from just a single prompt — and honestly, everything looks pretty solid.

This is the code structure it came up with — not perfect, of course, but as I mentioned earlier, you can adjust it with prompts. The key thing to keep in mind is that the service quickly generates a working frontend, but if you want a more polished and well-organized structure, you’ll need to put in a bit of manual work.

Here’s what I got after the very first prompt.

Demo (link + screenshot for reference): https://v0-test-rust-psi.vercel.app

Next, you take each section and page and polish them with targeted prompts.

For example, open the Contacts page and scroll down — on the second fold you’ll see a form like this.

Note: the live link above already shows an updated version, so use the screenshots here as your reference

On the left — a B2B form, on the right — a B2C form.

Here’s the kind of prompt you’d use:

I want you to make changes to the contact form.
Please create two separate forms in the second scroll section on this page.
On the left side, make a B2B form with the following fields:

- Contacts
- Title
- Company name
- File attachment
- Free text field
- Submit button.

On the right side, make a B2C form with the following fields:
- Name
- Email
- Dropdown for problem category
- Free text field
- Submit button.

Design the two forms with slightly different styles to highlight their differences.
Add titles above each form to clearly indicate their purpose.

The result? The form became larger and more structured, though still a bit rough around the edges — clearly showing where extra polish is needed.

To make the forms fit neatly on one screen without losing any fields, I used this prompt:

Make the forms on contact form smaller to fit on 1 screen but keep all fields

The result: both forms became more compact while still keeping every required field. Now they look balanced and easier to view at a glance.

Right — it’s not perfect yet, but for three prompts and ~five minutes of work, it’s a solid baseline. If you want a more premium, modern look, the trick is a single, well‑crafted styling prompt that only touches visuals.

Here’s the exact prompt I used:

Please enhance the current contact forms by making them look more beautiful, smooth, and stylish. The design should be cleaner, more modern, and less typical. Consider adding subtle shadows and maybe gradients in a Web3 style to give the forms a polished and elegant appearance. Do not change anything else except the visual styling of these forms.

Exactly — and that’s the beauty of it.

With just one extra styling prompt, the forms went from raw to something that already looks modern and polished.

The workflow here is clear:

Draft quickly → get the structure with minimal prompts.
Refine visually → layer in style improvements step by step.
Iterate lightly → one or two focused prompts per round bring big changes.

So even without being a designer, you can get from “MVP-ugly” to “decently stylish” in under ten minutes.

Pro tip: how to avoid unwanted changes

Sometimes Vercel V0 decides to “get creative.” I once asked it to add margins on the sides — and it also restyled a block on the homepage, replacing a neat white border with a random shadow. To keep that from happening, always end your prompt with something like:

Do not make any other changes to the rest of the pages and components besides the component I requested changed.

This small addition saves a lot of nerves.

Speeding things up with GPT and Midjourney

Another hack is pairing Vercel V0 with GPT. You just explain your concept, ask GPT to generate a detailed prompt with all the conditions, copy it over — and in a few minutes you’ve got a new version. Then you repeat the loop until it looks the way you want.

And don’t forget about visuals. Sure, GPT can handle basic image generation, but Midjourney is way more powerful here. For $10–20 a month you get around 800 images — more than enough for any website. The trick is writing the right prompts. GPT can help here too: let it refine the wording, and Midjourney will deliver polished, on-point visuals.

Example Prompt for Midjourney

Let’s try it out. First, I asked GPT to generate a Midjourney prompt, and here’s what it came up with:

Imagine Minimalistic vector illustration of a Solana staking server, futuristic data center with sleek server racks, glowing accents, dark color palette with shades of deep blue, purple, and black, clean lines, modern tech style, suitable as a background for a website section, cyberpunk vibe, high contrast, subtle glowing lights

Next, I took the generated image — without spending too much time fine-tuning details, just as an example — and uploaded it to the site using this prompt:

Put this image on the section of Choose Your Staking Strategy (main page) on the background

As a result, the main page section now has a dynamic and stylish background.

Before That:

After:

Integrating Additional Features

By now, the principle should be clear: once you get comfortable with prompt writing and juggling all three tools, you can build out a complete frontend in just a couple of hours — as long as the concept is well thought out and doesn’t constantly change mid-process.

Through prompts, you can also add things like a sitemap.xml for better SEO, connect Google Analytics, and much more.

It’s even possible to integrate third-party animation scripts. For example, I came across a neat animation library — Vanta.js: Globe effect. I decided to place it in the first section of the homepage. The process was simple: I just dropped the script into the chat with the instruction to integrate it.

Here’s the result:

And here’s how the different versions of the site looked during development:

And this is what the deployment process looks like:

Connecting a Domain & Final Thoughts

Through a simple menu in the admin panel, you can easily attach your own custom domain — no need to mess with external hosting or extra setup.

Overall, I think the core idea is clear: the tool is designed to make frontend development fast and straightforward.

In my case, it took around 100 prompts to get the site where I wanted it. Along the way, I experimented with different approaches: testing localization in 7 languages (including RTL Arabic), switching themes and styles, tweaking components, and adding animations. Some of these are still a bit rough around the edges — the tool has its limitations, and a few advanced features don’t always work perfectly yet.

In the end, I settled on a basic set of pages and a couple of articles, focusing on polishing the details: making sure small things like “back” buttons worked consistently across the site, and carefully selecting images so the visuals felt cohesive.

I’ll drop the link to the finished project below — would love to hear your feedback.

The Future of AI in Development

To be honest, I don’t think AI will fully replace developers anytime soon. Layout and visual design are still tricky for these tools — capturing complex design concepts or a unique brand identity through text prompts alone is far from easy.

AI tends to write code its own way, and influencing that output isn’t always straightforward. Edits can be clunky, and consistency sometimes breaks. For simple frontends and straightforward designs, it’s a fantastic time-saver. But for more advanced tasks, you’ll still need to think things through and often step in manually.

That said, I’m optimistic. As models improve, they’ll likely get much better at handling structure, design systems, and clean implementation. At that point, AI could dramatically simplify and accelerate frontend development.

If you know other AI tools for different languages or frameworks that already work well today — drop them in the comments, I’d love to compare notes.

My socials.

Follow if you’re curious 🗿