How to Build a Website with Claude

The Big Picture

You can build a real, professional website using Claude without writing a single line of code. No developer. No Squarespace. Just Claude.

The workflow has two phases. Phase 1 is creating your brand identity (colours, fonts, voice) in Claude Cowork. Phase 2 is building the actual site in Claude Code.

Why two phases? Cowork is great for conversations and planning. It's where you brainstorm, answer questions, and get your ideas organised. Code is great for building files and running things on your computer. It's where the website actually gets made.

What You Need

• 1A Claude subscription ($20/month Pro or higher). This gives you access to both Cowork and Claude Code. Go to claude.ai/pricing if you don't have one yet.
• 2Claude Desktop app for Phase 1. Download it at claude.com/download. This is where you'll use Cowork to plan your brand and site structure.
• 3VS Code with Claude Code installed for Phase 2. If you haven't set this up yet, follow my free guide: How to Set Up Claude Code on Mac and PC at reallyusefulai.co/guides.
• 4An idea of what your website should look like. Even vague is fine. "Something clean and professional" or "warm and friendly" is enough to start.

Phase 1: Create Your Brand Kit in Cowork

This is where you define the look and feel of your website. Cowork is a feature in the Claude Desktop app that lets you have a conversation and create documents at the same time.

Open Claude Desktop and click the Cowork tab. Start a new conversation and paste this prompt:

Claude will ask you a series of questions. Don't overthink the answers. Just say what feels right. Here's the kind of thing Claude will ask about:

• 1Colours. What colours do you like? Or paste a hex code from a site you admire. You can also just say "warm tones" or "dark and minimal" and Claude will suggest options.
• 2Feeling. What vibe do you want? Warm? Professional? Playful? Minimal? Bold?
• 3Audience. Who is the website for? What kind of people will visit it?
• 4Tone of voice. Casual? Formal? Friendly? Authoritative? Think about how you'd talk to your audience in person.
• 5Example websites. Any sites you like the look of? Even a vague description helps.

When Claude has enough, it creates a brand-kit.md file with your colour palette (hex codes), font choices, tone guidelines, and CSS variables ready to use.

Phase 1: Plan Your Website

Stay in Cowork. Now that you have a brand kit, plan the structure of your site before building anything.

Paste this prompt and fill in the pages you want:

Claude will come back with a detailed plan for each page. It might suggest sections like a hero banner, an about blurb, a services grid, testimonials, and a footer. Review it and give feedback:

• 1"I don't need a services page. Replace it with a guides page."
• 2"Add a testimonials section to the homepage."
• 3"The about page should feel personal, not corporate."
• 4"I want a clear call to action on every page."

Go back and forth until you're happy with the plan. Then ask Claude to save it:

Phase 1: Find Inspiration (Optional but Powerful)

This step is optional, but it makes a huge difference. If you show Claude Code a screenshot of a website you like, it can match the general style and layout.

• 1Go to websites you admire. Browse sites that have a look you like. It doesn't have to be in your industry. You're looking for layout, spacing, and overall feel.
• 2Take a full-page screenshot. In Chrome, press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows). Type "capture full size screenshot" and press Enter. Chrome saves the entire page as a single image.
• 3Save the screenshot. Put it somewhere easy to find. You'll copy it into your project folder in the next section.

You'll use this screenshot in Phase 2. When you tell Claude Code to build your site, you can say "match the general layout style of this screenshot, but use my brand colours and fonts." Claude looks at the image and picks up on the structure, spacing, and design patterns.

Phase 2: Set Up Your Project in VS Code

Now you're switching from Cowork to Code. This is where the building happens.

• 1Open VS Code.
• 2Create a new folder for your website (e.g., "my-website"). Put it somewhere easy to find, like your Desktop or Documents.
• 3Open that folder in VS Code. Click File > Open Folder and select the folder you just created.
• 4Copy your files in. Move your brand-kit.md and website-plan.md into this folder. If you have inspiration screenshots, put them in the folder too.
• 5Open the terminal. Click Terminal > New Terminal in the menu bar.
• 6Start Claude Code. Type claude in the terminal and press Enter.

Phase 2: Install the Design Skill

Before building, install the frontend-design skill. This is the secret to making your website look good instead of generic.

Without this skill, Claude Code builds websites that all look the same. Functional, but bland. The frontend-design skill teaches Claude bold, distinctive design: proper spacing, typography, colour theory, and animations. It's the difference between a website that looks AI-generated and one that looks professionally designed.

In the Claude Code terminal, type this prompt:

Or run this command directly in your terminal:

277,000+ people have installed this skill. It's the most popular Claude skill for a reason.

Phase 2: Build Your Website

This is the moment. You've got your brand kit, your plan, and the design skill installed. Time to build.

Give Claude Code everything it needs in one prompt:

If you have an inspiration screenshot, add this:

Claude starts building. You'll see files appearing in the left sidebar of VS Code: HTML files, CSS files, maybe some JavaScript. Don't worry about what they are. Claude is handling all of that.

To see what it looks like: Ask Claude to "open the website in my browser" or just find the index.html file in the sidebar, right-click it, and select "Open with Live Server" (if you have that extension) or simply double-click to open it in your browser.

Phase 2: Refine and Iterate

The first version won't be perfect. That's fine. This is where you talk to Claude and shape it into exactly what you want.

Just describe what you want to change in plain English. Here are some examples:

• 1"Make the hero section bigger with more whitespace."
• 2"The text is too small on mobile, fix it."
• 3"Change the button colour to match my accent colour."
• 4"Add a smooth scroll animation when you click the nav links."
• 5"The about page feels too wordy. Make it punchier."

You can keep going as long as you want. There's no limit to how many times you can refine. Each change takes seconds.

Here's a powerful trick. Ask Claude to review its own work:

Claude will go through every page, find visual issues (text overlapping, things misaligned, buttons too small on mobile), and fix them without you having to spot each problem.

Phase 2: Deploy It (Make It Live)

Your website is built. Now let's put it on the internet so anyone can visit it. This is easier than you think.

You have two free options. Both give you a live URL instantly and support custom domains.

Want to use your own domain? (like yourname.com) Follow the platform's domain setup guide. Claude can walk you through it step by step if you ask. You'll need to buy a domain first from a registrar like Namecheap or Google Domains.

Tips and What to Do Next

You've built and deployed a website. Here's how to keep it looking great and growing.

• 1Start with one page. Get the homepage right before building others. Once the homepage style is locked in, Claude will carry that same look across every page it builds.
• 2Mobile first. Always check how it looks on your phone. More than half of all web traffic comes from mobile devices. If it looks good on your phone, it'll look great on desktop.
• 3The brand kit is the foundation. Every time you build something new, Claude uses the same colours and fonts from your brand kit. Your site stays consistent without you having to think about it.
• 4Updating is easy. You can update the site anytime by opening the project folder in VS Code, starting Claude Code, and describing the change. "Add a new page for my latest project." "Update the pricing section." "Change the hero image." Claude makes the change and you redeploy.
• 5Claude can debug its own work. If something breaks or looks wrong, just describe the problem. "The contact form isn't sending emails." "The menu doesn't work on mobile." Claude will find the issue and fix it.