I Built a Full Website in 2 Hours Using Only AI — Here's Every Step

Two hours and three minutes. That's how long it took to go from an empty folder to a live website — five pages, a blog system, mobile responsive, deployed on Cloudflare. Total cost: $0.

I'm not a developer. I write content and sell digital products. But I needed a website, and I wanted to see if AI could actually build one from scratch — not a toy demo, but something I'd put my name on.

Here's every step, every prompt, every mistake, and the exact timeline.

Tools I Used

Claude Code — the AI coding agent that runs in your terminal

Next.js 15 — React framework for the site structure
Tailwind CSS — styling (Claude Code chose this automatically)
Cloudflare Pages — free hosting and deployment
Total cost: $0 — Claude Code requires a subscription, but I already had one

The Final Result

Five pages: Home, Products, Blog, About, Contact. A working MDX blog system with 3 starter posts. Dark/light mode toggle. Mobile responsive. Loads in under 1 second. Deployed at a custom domain.

Would a professional designer do better? Yes. Is this site good enough to launch a business on? Also yes. That's the bar I was aiming for.

0:00 — 0:15 | Planning

I started with a single prompt in Claude Code:

I need a website for selling digital products (AI prompt templates and guides).
The site needs: homepage with hero section and product cards,
a products page, a blog with MDX support, an about page, and a contact page.
Tech stack: Next.js with Tailwind CSS.
Design: clean, modern, minimal. Dark mode support.
Give me the project structure first before writing any code.

Claude Code responded with a proposed file structure:

├── app/
│   ├── page.tsx          (homepage)
│   ├── products/page.tsx (product listing)
│   ├── blog/page.tsx     (blog index)
│   ├── blog/[slug]/page.tsx (individual posts)
│   ├── about/page.tsx
│   └── contact/page.tsx
├── components/
│   ├── Header.tsx
│   ├── Footer.tsx
│   ├── ProductCard.tsx
│   ├── BlogCard.tsx
│   └── ThemeToggle.tsx
├── content/
│   └── blog/            (MDX files)
├── lib/
│   ├── products.ts      (product data)
│   └── blog.ts          (MDX utilities)
└── public/
    └── images/

I made two changes. I asked it to add a HeroSection.tsx component instead of putting hero code directly in page.tsx. And I asked it to add a NewsletterSignup.tsx component for the homepage. Everything else looked right.

What I learned early on: Give AI the full picture upfront. The more context in your first prompt, the fewer corrections later. I've seen people prompt one page at a time and end up with inconsistent designs. Start with the whole sitemap.

0:15 — 0:45 | Building the Main Page

I told Claude Code to start building:

Build the homepage. Hero section should have a headline about AI tools for creators,
a subtitle about prompt templates and guides, and a CTA button linking to /products.
Below the hero, show 3 featured product cards in a grid.
Use a clean sans-serif font. Primary color: blue-600. Background: white with dark mode support.

The first version loaded in about 90 seconds. Claude Code created the files, installed dependencies, and set up the Next.js project automatically. The result was... okay. Functional but bland. The hero section was too small. The product cards had no visual hierarchy. The spacing felt cramped.

Round 2:

The hero section needs more vertical padding — at least py-24.
Make the headline text larger, 4xl on mobile and 6xl on desktop.
Add a subtle gradient background to the hero instead of flat white.
The product cards need drop shadows and a hover effect that lifts them slightly.

Better. The gradient was a nice touch — a faint blue-to-purple on the hero background. The card hover effects made the page feel interactive. But the CTA button looked generic.

Round 3:

Replace the CTA button with a larger, rounded-full button.
Add a second ghost button next to it that says "Read the blog."
The button pair should be centered with a gap-4 between them.

Three rounds of revision. That is the reality of building with AI. The first output is a starting point, not a finished product. Each round took about 2 minutes of prompting and 1 minute of Claude Code executing changes. By the end of this phase, the homepage looked professional.

Time check: 45 minutes in. One page done, looking good.

0:45 — 1:15 | Sub-Pages and Blog System

This is where AI shines. Building repetitive page structures is exactly what it's good at.

Build the products page. Show all products in a responsive grid — 1 column mobile,
2 columns tablet, 3 columns desktop. Each card shows: product name, short description,
price, and a "View Details" button. Use the same card style as the homepage.

Then build the about page with a short bio section and a "Why I built this" section.

Then build the contact page with a simple contact form: name, email, message, submit button.
Style the form with proper spacing and validation states.

Claude Code built all three pages in one pass. About 4 minutes of execution time. The products page matched the homepage card style perfectly. The about page was simple and clean. The contact form had proper HTML validation attributes.

Next, the blog system:

Set up the MDX blog system. I need:
1. A lib/blog.ts file that reads MDX files from content/blog/
2. Frontmatter support for title, date, excerpt, and readTime
3. A blog index page showing all posts sorted by date
4. Individual blog post pages with proper typography
5. Create 3 sample blog posts about AI productivity

This was the most complex single prompt. Claude Code installed next-mdx-remote and gray-matter, created the utility functions, built both blog pages, and wrote three sample posts. It took about 6 minutes.

One problem: the blog post typography was default Tailwind, which strips all heading and paragraph styles. The posts looked like unstyled walls of text.

The blog post content needs prose styling. Add @tailwindcss/typography plugin
and apply prose dark:prose-invert classes to the blog post content wrapper.
Max width prose-lg. Add proper spacing between paragraphs.

Fixed in 30 seconds. The posts now had proper heading sizes, paragraph spacing, and link styling.

AI mistake #1: Claude Code initially set up the MDX parsing to look for .md files instead of .mdx files. The blog index showed zero posts. I checked the code, spotted the file extension mismatch, and told it to fix it. Took one prompt and 15 seconds.

AI mistake #2: The blog date sorting was oldest-first instead of newest-first. Another quick fix prompt.

Both mistakes were minor and fast to fix. But they remind you: always check the output. AI writes code confidently, even when it's wrong about small details.

1:15 — 1:30 | Design Polish

This is where AI is weakest. It can follow design instructions, but it doesn't have taste. It won't tell you that your color combination feels off or that the spacing rhythm is inconsistent.

I spent 15 minutes on visual refinements:

Change the font to Inter for body text and a slightly heavier weight for headings.
Add a subtle border-b to the header for separation.
The footer needs more padding and a muted background — gray-50 in light mode, gray-900 in dark.
Product card prices should be text-2xl font-bold text-blue-600.
Add a thin top border to each blog card for visual rhythm.

Then I opened the site and compared it to 5 websites I admire. I noticed my site lacked visual breathing room. Everything was too close together.

Increase the gap between sections on the homepage from gap-8 to gap-16.
Add py-16 to each major section.
The header should have px-6 on mobile and px-8 on desktop.
Footer links should have more line-height — leading-relaxed.

These small spacing changes made a bigger difference than any other edit. White space is the difference between a site that feels amateur and one that feels professional. AI follows your spacing instructions precisely, but it won't suggest better spacing on its own.

The human element: I chose the final color palette by testing three options Claude Code generated. I picked the one that felt right. That decision — "felt right" — is something AI can't do for you. Not yet.

1:30 — 1:45 | Mobile Responsive

I opened the site on my phone and found three problems immediately.

Problem 1: The hero headline was too large on small screens. It overflowed.

Problem 2: The navigation menu didn't collapse into a hamburger on mobile.

Problem 3: Product cards had fixed widths that broke on narrow screens.

Fix mobile responsiveness:
1. Hero headline: text-3xl on mobile, text-4xl on tablet, text-6xl on desktop
2. Add a mobile hamburger menu — hide nav links behind a menu button on screens below md
3. Product cards: full width on mobile, 2-column on md, 3-column on lg
4. Check all padding — nothing should cause horizontal scroll on 375px width

Claude Code fixed all three issues and added the hamburger menu with a slide-down animation. The menu implementation was clean — a state toggle with a transition. I tested on three screen sizes using Chrome DevTools: 375px (iPhone SE), 390px (iPhone 14), and 768px (iPad).

One more issue appeared: the blog post content was too wide on tablets, making lines too long to read comfortably.

Blog post content should have max-w-prose and mx-auto on all screen sizes.
Line length should never exceed 65-70 characters for readability.

After this round, the mobile experience was solid. Not perfect — a designer would adjust 20 more things — but functional and readable on every screen size I tested.

1:45 — 2:00 | Deployment

Time to go live. I chose Cloudflare Pages because it's free, fast, and handles Next.js well.

Step 1: Initialize Git and push to GitHub.

Initialize a git repo, create a .gitignore for Next.js,
and give me the commands to push this to a new GitHub repository.

Claude Code created the .gitignore, initialized the repo, and gave me the exact Git commands. I created a new repo on GitHub and pushed.

Step 2: Connect to Cloudflare Pages.

This part was manual. I logged into Cloudflare, went to Pages, connected my GitHub repo, and set the build settings:

Build command: npx next build

Output directory: .next
Framework preset: Next.js

The first build failed. Cloudflare's default Node version was too old for Next.js 15. I added a NODE_VERSION environment variable set to 20 and redeployed. Build succeeded.

Step 3: Custom domain.

I already owned a domain. In Cloudflare DNS, I added a CNAME record pointing to the Cloudflare Pages URL. SSL certificate was automatic. The site was live in about 3 minutes.

Total time: 2 hours and 3 minutes. From empty folder to live website.

The Full Cost Breakdown

Item	Cost
Claude Code subscription	$20/month (already had it)
Next.js	Free
Cloudflare Pages hosting	Free
Domain	$10/year (already owned)
Marginal cost of this project	$0

If I were paying for everything from scratch: $20 for Claude Code for one month, $10 for a domain. That's $30 to build and launch a complete website.

What Went Well

Speed. Two hours from nothing to a deployed website. Without AI, this would take me 15-20 hours minimum. I know because I tried building a site manually two years ago and gave up after a weekend.

Consistency. Because one AI agent built everything, the code style, component patterns, and naming conventions are uniform throughout the project. No Frankenstein codebase of Stack Overflow snippets.

The boring parts. Setting up the MDX blog system, configuring Tailwind, creating the responsive grid layouts — AI handled the tedious infrastructure work that I would have spent hours Googling.

Iteration speed. Each revision took 1-3 minutes. In a traditional workflow, every small change means finding the right file, understanding the code, making the edit, and checking for side effects. With AI, I described what I wanted and it was done.

What Did Not Go Well

Design decisions. AI built exactly what I asked for, but it never pushed back on bad ideas or suggested better alternatives. When I asked for a blue-600 primary color, it used blue-600. It didn't say, "That blue might be too saturated for large backgrounds — consider blue-500 or a custom shade." A human designer would have that conversation.

Small bugs. The file extension mismatch and sort order issues were minor but required me to notice them. AI doesn't test its own output thoroughly. You need to click through every page and check edge cases yourself.

SEO and performance optimization. The site works, but I didn't prompt for meta tags, Open Graph images, structured data, or performance optimization. A professional developer would include these from the start. I had to go back and add them later in a separate session.

Complex interactions. The hamburger menu animation worked, but it was basic. Any interaction more complex than a toggle — like a search feature, filtering, or dynamic content loading — would require more sophisticated prompting and probably multiple revision rounds.

Who Is This For?

This approach works best for:

Solo creators who need a web presence but can't justify hiring a developer

Small businesses launching a first website or MVP
Content creators who want a blog and product showcase
Anyone who has tried website builders and wanted more control

This approach isn't ideal for:

Complex web applications with user authentication and databases

E-commerce sites with payment processing (you need more setup)
Sites that need pixel-perfect custom design
Projects where performance optimization is critical from day one

My Honest Assessment

Building a website with AI in 2 hours is real. I did it. The site is live and functional. But "functional" isn't "polished." A professional developer would build a better site. A professional designer would make it more visually compelling.

The value isn't in replacing professionals. It's in getting from zero to something real in an afternoon instead of a month. You can always hire a designer later to polish what AI built. Starting from a working site is much cheaper than starting from a blank page.

The most important skill isn't coding. It's knowing what you want. Every time I gave Claude Code a vague instruction, the output was mediocre. Every time I was specific about layout, spacing, typography, and behavior, the output was good. AI is a precise tool that requires precise input.

You don't need to know code. But you need to know what you want.

---

Want more?

Browse our prompt packs, guides, and automation tools.

Browse products →