Vibe Coding for Solopreneurs: How to Build Your Own Website

You know that you need a website for your business. But a fancy website can cost a lot of money… more than most solopreneurs can afford when they’re just getting started. So instead, you feel stuck with two options: boring templates from whatever website builder you choose, or spending hours trying to customize your website with skills you don’t have.

But a very viable third option has emerged for solopreneurs: vibe coding a website using AI.

I struggled with my website for years. I’m not in a place where I want to pay a website developer, so I’d make small tweaks or get frustrated with my site’s limitations.

With vibe coding, I was able to create a new, custom website using Claude. No coding skills required. Here’s how I did it, and what you need to know before you try it yourself.

What is vibe coding?

Vibe coding is the practice of using AI tools like Claude to write code by describing what you want in plain language.

Instead of learning HTML, CSS, or JavaScript, you tell an AI chatbot: "I want a purple navigation bar with a button that says 'Contact'" and it generates the code for you. You paste that code into your website builder, test it. If you don’t like something, you describe the change using natural language again, such as, “Move that contact button to the center of the page.”

The barrier to entry? Almost zero. All you need is access to an AI tool and a basic understanding of where to paste the code in your website builder.

I don’t think vibe coding replaces website designers and developers. At some point, I’ll pay someone to design the website of my dreams. But vibe coding is a middle ground for someone who wants to move beyond basic website templates and doesn’t want to pay a web developer yet.

How I vibe coded my website in a weekend

I spent about 15 hours total vibe coding my website. However, a lot of that time was spent tweaking, testing, and making changes. It was me being really finicky about what I wanted, and changing my mind a bunch of times. The actual working prototype took about 15 minutes to spin up. Now, I can build a new page in about 30 minutes.

Here's how I approached it.

Step 1: Gather inspiration

Start by collecting visual references. Your coding tool (Claude, for me) needs to understand what you want. You can try describing it in full, but it’s a lot easier to provide a URL and describe the particular elements you like.

I spent time looking at other websites and saving screenshots of designs I liked. I was building a visual vocabulary for what I wanted: clean, simple, professional.

I also looked specifically at websites I knew were vibe coded, like this one from Casey Newton and this one from Katie Parrott. Even though I wanted mine to look different, these sites helped me understand what was possible.

Look at colors, typography, layout, and button styles. Save at least 10-15 screenshots and note what stands out to you.

Step 2: Prepare your brand assets

Before asking AI to generate code, gather your brand information in one place:

• Your colors (in hex codes like #1A1A1A)
• Fonts you want to use
• Your logo
• Any brand guidelines you've created

This prep work saves time later. When you're iterating with AI, you can just say "use the purple from my brand guide" instead of hunting for the hex code again.

Don’t have brand guidelines yet? Now’s the time to create them! Whatever you choose, make sure you’re consistent across other tools like social media graphics and client proposals.

Step 3: Start with the essentials

Don't build your entire website at once. Start with the pages every website needs: a Homepage, About, Services, and Contact. Get these four pages working and looking good before you think about blog sections, case studies, or portfolio pages.

If you want to get really basic and just publish something, design only a Homepage and a Contact page. Add the About and Services once these two pages are published.

Each page is a chance to build your confidence and learn how to communicate what you want to the AI. By the time you get to additional pages, you'll know exactly how to describe a layout or style.

Now, when I spin up new pages, I start with, “We’re going to match the style of XYZ page, but here’s what’s different about this page.”

Step 4: Choose how to host your website

You have options here. I chose to host my website on Carrd [affiliate link], which costs less than $20 a year and allows you to embed custom HTML. Basically, my website is “blank” Carrd pages, instead of using a Carrd template, with an HTML container. I paste my code into the container, and it works seamlessly.

Other options include Vercel (free tier available), Cloudflare Pages, or Netlify. Your choice depends on how much customization you want and whether you're comfortable with a bit of technical setup. You can always have Claude tell you step-by-step what you need to do.

Step 5: Test, test, test

This is the part most people skip, and it's the difference between a website that looks professional and one that has broken links and buttons.

Test your site on mobile, tablet, and desktop. Make sure it looks as you expect across different devices. Click every link. Submit the contact form.

Here's the thing: AI-generated code often needs tweaks. A button might be slightly misaligned on mobile, or the font overlaps in a way it shouldn’t. These are easy fixes once you spot them, but you won't spot them if you don't test.

When I’d spot something wrong, I’d take a screenshot of what I saw. I dropped the screenshot into Claude and then described the problem. Claude would then fix the code. I had to paste the new code into Carrd, and test everything again.

How to test when your website is already live

You can only do real tests on a live, working website. A “sandbox” (non-live) website or relying on Claude’s preview aren’t the same thing. So you’re caught in a loop: you’re not ready to publish your new website to your domain yet, but you still need to test it.

Here’s what I did:

• Spun up a new website on Carrd, with a temporary domain (Carrd provided)
• Put my code on this website, tested until it was perfect (back and forth)
• Copied the final code over to my real website

Step 6: Store your code somewhere safe

Treat your code like you'd treat any important business file. You’ve got to have it stored somewhere in case something happens.

Use GitHub (free) or another version control system to store your code. This gives you a backup and makes it easy to restore a previous version if something breaks. Make sure your repository is set to private so your code isn't publicly visible.

If you’ve never used GitHub before, watch a YouTube tutorial about setting it up for the first time.

Using GitHub has a lot of advantages:

1. If you use Claude Code, you can connect Claude Code to GitHub. That allows Claude to publish code changes directly to GitHub (you’d still need to add them to your site)
2. You can connect GitHub directly to pages like Cloudflare Pages or Netlify. This allows you to seamlessly push from Claude Code to GitHub to your live site.

But both of these are a bit more technical to set up. I started in regular Claude (not Claude Code), and just pasted my code into GitHub.

Yes, you can vibe code a website

Vibe coding is a real, viable option for solopreneurs who want a custom website without hiring a developer or dropping thousands of dollars on a custom build. You don't need to understand code — you just need to be willing to describe what you want and test the result.

Start small. Once you get into the rhythm, you'll find that spinning up new pages or making updates becomes faster and more intuitive. You can even spin up tools for clients to use or pages to help your business, like surveys or other resources.

Your only limits are your imagination and the amount of time you want to devote to vibe coding.

Thinking about vibe coding your own site or tool?
Grab this free checklist so you're ready for your first session.

Download

Common mistakes when vibe coding your first website

• Trying to build everything at once. Start with your core pages (Homepage, About, Services, Contact) and expand from there.
• Expecting AI to get it right on the first try. Vibe coding is an iterative process. You'll give feedback, the AI will adjust, and you'll refine. This is normal.
• Skipping the prep work. Gathering inspiration and brand assets upfront saves hours of back-and-forth with the AI.
• Not testing on mobile or different browsers. AI-generated code can behave differently across devices. Always test everywhere before considering your site "done."
• Not storing code somewhere safe. If something breaks and you don't have a backup, you're starting from scratch.

FAQs