Build a complete, deployed website using Claude Code without writing a single line of code yourself. This workflow covers the full process: preparing your brand materials, prompting Claude Code for a first draft, refining the design through screenshot-based feedback, connecting email capture to your newsletter platform, and deploying the finished site. We built the Two girls, one Claude website in about 20 minutes using this exact process.
Workflow Description
This workflow produces a fully functional website from a folder of brand materials and a plain-language description of what you want. Claude Code generates all the HTML, CSS, and JavaScript. You review each version in your browser and give feedback by screenshotting specific sections and describing what needs to change.
The output is a set of static files you own completely. No platform lock-in, no monthly subscription, no dependency on a visual builder. You can deploy the files anywhere: GitHub Pages, Netlify, Vercel, or a traditional web host.
This same approach works for side projects, client websites, landing pages, and portfolio sites. Bojana used a similar process with Lovable to build a website for a mentorship side project she had been trying to start for four years. She had the site live in about an hour.
Before You Begin
Tools you'll need
- Claude Code installed on your machine (terminal-based, not the browser version)
- A code editor or file browser to view generated files (VS Code, Finder, or similar)
- A modern web browser for previewing the site as you build
- A GitHub account (for deployment)
What to prepare before opening Claude Code
- A preparation folder containing everything Claude Code needs to understand your brand. This is the single most important part of the process. Include: mood board images or screenshots of sites you like, brand colors as hex codes, font choices, photos you want on the site, logos, and any previous marketing materials (flyers, social graphics, pitch decks) that show your visual identity.
- A reference site for layout that you want to use as structural inspiration. We used startupgrowth.ai for ours. You are not copying the design. You are giving Claude Code a concrete example of the layout structure, spacing, and section organization you like.
- A list of pages and sections you need. Write out what each page should contain in plain sentences. Home page with hero section, about section, team bios, contact form. The more specific you are about content, the less back-and-forth you will need.
- All copy and text content ready to paste or reference. Headlines, descriptions, bios, CTAs. If you have this prepared, Claude Code drops it directly into the generated site. If you leave it vague, you will spend time rewriting placeholder text later.
How It Works
The build follows a tight feedback loop. You describe what you want, Claude Code generates the files, you open them in a browser, screenshot anything that looks wrong, and describe the fix. Each round takes 2 to 5 minutes. Most sites reach a publishable state in 4 to 8 rounds.
Preparation folder → Initial prompt with references → First draft review → Screenshot-based feedback rounds → Email capture integration → Deployment
Build Instructions
Create a folder on your machine with all brand materials. Include mood board screenshots, hex color codes, font names, photos, logos, and any previous promo materials that represent your brand. Add a reference site URL or screenshots of layouts you like. The folder should give Claude Code enough visual and textual context to understand your brand without any further explanation. This step takes 20 to 30 minutes and saves hours of revision later.
Open Claude Code in the folder where you want the site files to live. Reference your preparation materials directly: "Build me a website. Use the brand colors, fonts, and photos from this folder. Use [reference site] as layout inspiration. I need a home page with a hero section, an about section, team bios, and an email signup form." Point Claude Code to specific files in your folder. The more concrete you are about structure and content, the better the first draft.
Open the generated HTML file in your browser. The first version will have things that need fixing. Common issues on a first pass: sections that look too much like a SaaS template, colors pulled from the reference site instead of your brand colors, placeholder text where real copy should go, and bios or names mixed up if you have multiple team members. All of this is normal. Do not try to fix everything at once. Identify the biggest issues first.
Screenshot the specific section that needs work. Paste it into the Claude Code conversation and describe what is wrong. "This section has a black background from the reference site. Change it to our cream background color." "The team bios are swapped. Barbara's photo has Bojana's description." "This hero section looks too SaaS. Make it simpler with just the headline, a one-line description, and the signup form." Screenshots are dramatically more effective than trying to describe layout problems in words alone. Expect 4 to 8 feedback rounds for a complete site.
Tell Claude Code to connect the signup form to your email platform. We connected ours to Substack using their API endpoint for free subscriptions. Claude Code wrote all the JavaScript: the form submission handler, success and error messages, and a fallback that opens the Substack subscribe page in a new tab if the API call fails. If Claude Code gives you instructions to do this manually, push back and say "do it for me." It can write and execute the integration code directly.
Push the generated files to a GitHub repository and connect it to your hosting platform. Claude Code can create the repository, add files, and push the initial commit for you. For GitHub Pages, Netlify, or Vercel, the deployment process takes under 5 minutes once the files are in a repo. Ask Claude Code to walk you through each step, or tell it to handle the git commands directly.
Quality Checklist
Before deploying
- Does the site load correctly on mobile? (Resize your browser window to check)
- Are all brand colors matching your hex codes, not pulled from the reference site?
- Do all links point to the correct destinations?
- Is the email signup form working? (Test with your own email)
- Are all photos loading and properly sized?
- Is the text content final, with no placeholder copy remaining?
Design quality
- Does the site look like your brand, not like the reference site?
- Is spacing consistent between sections?
- Do fonts render correctly across browsers?
- Are team bios and names matched to the correct photos?
Technical checks
- Does the form submission handle errors gracefully?
- Is there a fallback if the API call fails?
- Are images optimized for web (not 5MB raw photos)?
- Does the page title and meta description match your content?
Common Mistakes to Avoid
- Starting without a preparation folder. Opening Claude Code and typing "build me a website" with no references, no colors, no photos, and no layout inspiration produces a generic template. The 30 minutes you spend preparing materials saves 2 hours of revisions.
- Describing layout problems instead of screenshotting them. Trying to explain "the spacing between the hero section and the about section feels off" in words takes 3 rounds to fix. Screenshotting the section and saying "reduce the gap between these two sections by half" fixes it in one round.
- Accepting manual instructions from Claude Code. When Claude Code says "run this command in your terminal" or "open this file and change line 42," tell it to do it for you. Claude Code can execute commands and edit files directly. The default behavior is sometimes to instruct, but a direct request changes that.
- Trying to fix everything in one feedback round. Address the biggest structural issues first (wrong layout, missing sections, wrong background colors). Then handle detail work (spacing, font sizes, button styles) in subsequent rounds. Mixing structural and detail feedback in one prompt produces inconsistent results.
- Using the reference site's actual design instead of just its layout. If you point Claude Code to a dark-themed SaaS site as layout inspiration, expect the first draft to have dark backgrounds and SaaS-style elements. Be explicit about what you are borrowing (section structure, navigation layout) and what you are not (color scheme, visual style).
- Skipping the email capture integration. A website without a way to collect visitor emails is a brochure. Build the signup form into the first version, not as an afterthought. The integration takes 10 minutes with Claude Code.
Handling Special Situations
When you need a logo designed
Claude Code can work with the Claude-Figma integration for logo creation and iteration. For a project with many logo variants (Barbara worked on one with over 400), this integration handles batch generation and refinement. For simpler needs, provide a text description of what you want and let Claude Code generate SVG or basic graphic options directly.
When your side project has been stalled for years
Bojana had a mentorship side project she wanted to launch for four years. She built the website in about an hour using Lovable after watching the process with Claude Code. The barrier was never the idea or the content. The barrier was the perceived difficulty of building a website. AI tools remove that barrier entirely. If you have a project folder sitting on your desktop, this workflow gets it live today.
When the first draft looks like a SaaS landing page
This happens when your reference site has SaaS-style elements and you did not explicitly exclude them. Screenshot the sections that feel too corporate or template-like and describe what you want instead. "This section has feature cards with icons that look like a B2B product page. Replace it with a simple text section that describes what we do." Be specific about the vibe you want. Claude Code responds well to concrete descriptions.
When you want to build a more complex app-like site
Lovable is a better fit for sites that need interactive components, user authentication, or database connections. Claude Code produces static sites well. For anything that requires a backend or dynamic functionality, consider a tool designed for full-stack generation. You can always start with Claude Code for the initial design and migrate to a more complex tool later.
When Claude Code and you need to build a relationship
The first session will not be as smooth as the tenth. Spending time with the tool and learning how it interprets your feedback is part of the process. There is no magic prompt that produces a perfect website on the first try. What works is iteration: give feedback, see what changes, adjust your communication style based on what Claude Code responds to best. The skill is in the feedback loop, not in crafting one perfect instruction.
Measuring Success
Build time benchmarks
- Preparation: 20 to 30 minutes gathering brand materials and references
- First working draft: 15 to 30 minutes from initial prompt to a viewable page
- Design refinement: 30 to 60 minutes of screenshot-based feedback rounds
- Email capture integration: 10 to 15 minutes
- Deployment: 5 to 10 minutes
- Total for a complete site: Under 2 hours with preparation included
Output quality indicators
- The site looks like your brand, not like a generic template
- A visitor cannot tell it was built with AI
- The email signup form works and delivers subscribers to your newsletter platform
- The site loads fast on mobile and desktop
- You can add new pages and sections by opening a new Claude Code session in the same folder
Comparison to traditional approaches
- Hiring a developer: 2 to 4 weeks and $2,000 to $10,000 for a comparable site
- Using a website builder (Squarespace, Wix): 1 to 3 days plus an ongoing monthly subscription
- Building it yourself with HTML/CSS: 1 to 2 weeks if you are learning as you go
- This workflow: Under 2 hours, no ongoing costs, full ownership of all files
The Prompts
Prompt 1: Initial build
Prompt 2: Screenshot-based design feedback
Prompt 3: Email capture integration
Prompt 4: Pushing back on manual instructions
Expected Results
- A complete, deployed website with your brand colors, fonts, photos, and copy
- A working email capture form connected to your newsletter platform
- Static HTML, CSS, and JavaScript files that you own with no platform dependency
- A project folder you can reopen in Claude Code anytime to add pages, update content, or change the design
- The confidence to build websites for other projects using the same process
Resources
- Claude Code (terminal-based AI coding tool from Anthropic)
- Lovable (visual AI website builder, good for app-like sites)
- Riverside (recording platform we use for our live sessions)
- Startup Growth AI (the site we used as layout inspiration)
Frequently Asked Questions
Do I need coding experience to build a website with Claude Code?
No. Claude Code writes all the HTML, CSS, and JavaScript for you. You describe what you want in plain language, review the output in your browser, and give feedback using screenshots and descriptions. Both of us have zero developer background and built production websites this way.
How long does it take to build a website with AI using Claude Code?
The initial working version takes 15 to 30 minutes if your preparation materials are ready. Expect another 30 to 60 minutes of design refinement through screenshot-based feedback. A complete, deployed website with email capture and custom styling can be done in under two hours total. We built the Two girls, one Claude website in about 20 minutes for the first working draft.
What is the difference between Claude Code and Lovable for building websites?
Claude Code runs in your terminal and generates raw HTML, CSS, and JavaScript files that you own completely. Lovable is a browser-based tool with a visual interface that generates and hosts the site for you. Claude Code gives you more control and no platform dependency. Lovable is faster for people who want a visual builder with less technical setup. Bojana built her mentorship site with Lovable in about an hour after watching the Claude Code process.
What preparation materials do I need before starting?
At minimum: a reference site for layout inspiration, your brand colors as hex codes, font choices, any photos or logos you want on the site, and previous marketing materials that show your brand aesthetic. The more you give Claude Code, the closer the first draft will be to your vision. Barbara prepared a full folder with mood board images, brand colors, fonts, photos, and previous promo materials before the live session.
Can I connect forms and email capture to my website built with Claude Code?
Yes. You can connect to any email platform that has an API. We connected ours to Substack using their API endpoint. Claude Code wrote all the JavaScript for form submission, error handling, and a fallback that opens the subscribe page in a new tab if the API call fails. The same approach works with Mailchimp, ConvertKit, Beehiiv, or any platform with a public API.
What if Claude Code generates something that looks wrong?
Take a screenshot of the specific section that looks wrong and describe what needs to change. This is the most effective feedback method. Instead of trying to describe layout issues in words, show Claude Code exactly what you see and say what is off. Our first draft had a black background pulled from the reference site and swapped team bios. Both were fixed in a single feedback round using screenshots.
Can I use Claude Code to build a website for a client project?
Yes. The workflow is the same. Gather the client's brand materials, reference sites, and content into a preparation folder before starting. Client projects typically take more feedback rounds to match their expectations, but the build process is identical. Having all client brand assets in one folder before you start is especially important for client work.
How do I deploy a website built with Claude Code?
Claude Code generates static HTML, CSS, and JavaScript files. Push them to a GitHub repository and connect it to GitHub Pages, Netlify, or Vercel for hosting. Claude Code can handle the git commands for you if you ask. Deployment takes under 10 minutes once the files are in a repository.
What if Claude Code suggests I do something manually instead of doing it?
Push back. Say "do it for me." Claude Code can execute commands, create files, and configure settings directly. The default behavior sometimes leans toward instructing you, but a direct request changes the mode. This applies to git commands, file edits, API integrations, and deployment steps. If Claude Code can do it through the terminal, it should do it for you.
Does this workflow work with tools other than Claude Code?
The preparation and feedback principles apply to any AI website builder. Lovable, Bolt, and similar tools all benefit from thorough context materials and specific feedback. Claude Code is our preferred tool because it produces files you own with no platform lock-in, but the workflow structure transfers to other tools.
How do I add new pages or features to my site after the initial build?
Open a new Claude Code session in the same project folder. Claude Code reads your existing files and understands the current site structure, styles, and conventions. Describe what you want to add, and it builds new pages that match the existing design automatically. We add new workflow pages to our site this way every week using the exact structure and styling from the original build.
Want more like this?
One email per week. Recaps, prompts, and lessons from every live session.