How to Build an Entire Website With Claude in Under an Hour (Vibe Coding, Step by Step)
Claude Design generates every screen, Claude Code turns them into a real Next.js + Supabase site, and Netlify puts it live — here's the exact 9-step process to build and ship a working website in about an hour, no coding experience needed.
You don't need to know how to code to ship a real, live website anymore. This is the exact 9-step process — using Claude Chat, Claude Design, and Claude Code together — to go from a rough idea to a deployed, working site in about an hour. No design tool, no code editor experience, no separate hosting setup to figure out.
What "Vibe Coding" Actually Means
Vibe coding is describing what you want in plain language and letting Claude handle the design and the code — instead of you designing screens by hand or writing the site yourself. You stay in charge of the idea and the feedback; Claude Design produces the screens, and Claude Code turns those screens into a real, running website.
The 9-Step Process, Start to Finish
Follow these in order — a few steps run in parallel while designs are generating, so nothing sits idle.
Turn your website idea into a design prompt, in Claude Chat
Open Claude Chat and describe your website idea in plain language — what it's for, who it's for, the vibe you're going for. Ask it to convert that brief into a detailed design prompt for Claude Design. This turns a rough idea into a structured brief Claude Design can actually work from.
Paste that prompt into Claude Design and generate every screen
Go to Claude Design, paste the prompt from Step 1, and ask it to create all the screens your website needs. From one prompt, Claude Design produces the full set of visual designs for the whole site.
While the designs are generating, create your GitHub account
Designs take a few minutes — use that time instead of waiting on it. Go to GitHub and create an account. You'll need it to host your code, and to sign in to the next tool in this list.
Sign up for Supabase using that same GitHub account
Go to Supabase and sign up with the GitHub account you just created. Supabase becomes the database behind your site — sign-ins, user data, anything your site needs to store. Using the same GitHub account keeps both under one login.
Once the designs are ready, export them into a folder on your desktop
Create a new folder on your desktop and export every finished screen from Claude Design into it. This folder becomes the single source of truth Claude Code will build the actual website from.
Open Claude Code and point it at that same folder
Open Claude Code and point it directly at the folder holding your exported designs. Claude Code reads through everything in the folder before it writes a single line of code.
Give Claude Code this exact build prompt
Paste this: "Build a full end-to-end website from the designs in this folder. Use Next.js with Supabase as the database. Run it on localhost:3000 so I can preview it." One prompt hands Claude Code the framework, the database, and where to run it — so it builds a real, working site instead of a static mockup.
Preview it on localhost:3000 and ask for changes
Once Claude Code finishes, your site is running locally at localhost:3000. Click through it like a real visitor would, then ask Claude Code directly for any changes — copy edits, layout tweaks, an added page — the same way you'd ask for a revision in chat.
Ask Claude Code to deploy it to Netlify
Once you're happy with the preview, ask Claude Code to deploy the site to Netlify. Netlify hosting is free and gives you a live URL instantly. If you already own a domain, connect it inside Netlify right after.
What You End Up With, at Each Stage
| Stage | Tool Used | What It Produces |
|---|---|---|
| Idea → prompt | Claude Chat | A structured design brief, ready for Claude Design |
| Design | Claude Design | Every screen your site needs, fully designed |
| Accounts | GitHub + Supabase | Hosting and database logins ready, under one account |
| Build | Claude Code | A real Next.js + Supabase codebase, not a mockup |
| Preview | localhost:3000 | A working site you can click through and revise |
| Deploy | Netlify | A live, public URL — free, instant |
Why this order matters: Steps 3 and 4 (GitHub, Supabase) are deliberately placed while the designs are still generating — by the time your screens are ready in Step 5, your accounts are too, and there's no dead waiting time anywhere in the process.
Key Takeaways
Claude Chat turns a rough idea into a structured brief that Claude Design can actually build screens from.
Claude Design generates every screen from one prompt — no design software or design skills needed.
Set up GitHub and Supabase while designs are generating, so there's zero idle time in the process.
Claude Code needs three things in its prompt: the source folder, the framework (Next.js), and the database (Supabase).
Preview and revise on localhost:3000 before deploying — it's the same conversational back-and-forth as any other Claude Code session.
Netlify deployment is free and instant, and a custom domain can be connected right after.
Frequently Asked Questions
Do I need to know how to code to do this?
No. Claude Design produces the screens and Claude Code writes the actual codebase. Your job is to describe the idea, review the designs, and ask for changes in plain language — the same way you'd talk to Claude in a chat.
What is Claude Design?
Claude Design is where you generate the visual screens for your website from a text prompt. You paste in a design brief and it produces every screen your site needs, ready to export.
Why Next.js and Supabase specifically?
Next.js is a widely supported framework Claude Code can build and deploy reliably, and Supabase gives the site a real database for sign-ins and data without setting up separate backend infrastructure. Naming both in the Step 7 prompt tells Claude Code exactly what to build with.
Is Netlify hosting really free?
Netlify's free tier covers hosting a site like this and gives you a live URL immediately after deployment. If you already own a domain, you can connect it inside Netlify afterward at no extra cost from Netlify's side.
Can I make changes after the site is deployed?
Yes. Go back to Claude Code, describe the change you want, and ask it to redeploy once you're happy with the update — the same loop you used before deploying the first time.
Want the Full Documented Process?
Follow @onlygrowthtalks on Instagram and comment "VIBECODING" on the post — I'll send you the entire documented process, step by step.
Follow @onlygrowthtalks on Instagram →