Building a site used to be a massive headache involving broken CSS floats or paying a developer five grand for something that looked like a template. Now? People are just talking to chatbots. Specifically, they’re asking how to make website with Claude, and honestly, the results are getting a bit weird—in a good way.
Claude, particularly the 3.5 Sonnet and 3.6 Opus models from Anthropic, has basically become the "cheat code" for front-end development. Unlike earlier versions of AI that would hallucinate weird libraries or give you code that crashed your browser, Claude has this weirdly specific knack for understanding UI/UX. It doesn't just write code; it seems to understand where a button should go so it doesn't look like garbage.
But here is the thing. Most people are doing it wrong. They treat it like a search engine instead of a pair programmer. If you just ask it to "make a website," you're going to get a generic Bootstrap-looking mess that will never see the light of day on Google Discover.
📖 Related: BlackBerry Slide Phone With Keyboard: Why We Still Miss the Click
The Artifacts Revolution and Why It Changed Everything
Remember when you had to copy-paste code into VS Code every five seconds just to see if a color change worked? Anthropic solved that with "Artifacts."
When you’re learning how to make website with Claude, Artifacts is your best friend. It’s a dedicated window on the side of your chat that renders the code in real-time. You see the site as you build it. It’s live. It’s interactive. It’s basically like having a developer sitting next to you with a live preview server running. This feature is why Claude has currently overtaken GPT-4o for many web designers. It creates a tight feedback loop.
Setting Up Your "Claude Workspace" for Success
Don't just jump in. You need a plan.
First, you’ve gotta decide on the stack. Claude is incredible at React, Tailwind CSS, and HTML/JavaScript. If you want something that ranks on Google, I’d suggest sticking to Next.js or just clean HTML5 with Tailwind. Tailwind is huge here because Claude can write those utility classes faster than you can think of them.
Step 1: The Prompting Strategy
Stop using one-sentence prompts. They don't work. To make a high-quality site, you need to act like a Product Manager. Tell Claude:
💡 You might also like: The Soviet N1 Rocket Explosion: What Really Happened to Russia’s Moon Shot
- The Vibe: Is it "brutalist," "minimalist," or "enterprise SaaS"?
- The Goal: Is this a landing page to collect emails or a blog?
- The Tech: Explicitly tell it to use Tailwind CSS for styling. It makes the code much cleaner and easier for you to edit later.
"Claude, build me a landing page" is a 2/10 prompt.
"Claude, I need a high-conversion landing page for a boutique coffee roaster using Next.js and Tailwind. Use a dark theme, include a hero section with a floating image, a pricing table, and a responsive navigation bar," is an 8/10.
Step 2: Iterative Refinement
You won't get it right the first time. The site will look okay, but the margins might be wonky. This is where most people quit. Instead, use the Artifacts window. Point out what's wrong. "The header is too tall on mobile" or "Can we make that CTA button pulse gently?" Claude is shockingly good at these micro-adjustments.
✨ Don't miss: Apple Customer Service: Why It Sorta Works and Why It Sometimes Doesn't
Making Your Claude-Generated Site Rank on Google
Building the site is only half the battle. If you want to appear in Google Discover or rank in the SERPs, you have to move beyond the code. Google doesn't rank "AI code." It ranks "User Experience" and "Authority."
Technical SEO: The Stuff the AI Might Miss
Claude is a genius at design, but sometimes it forgets the boring stuff that Google bots crave. You need to manually ensure your site has:
- Semantic HTML: Make sure it's using `