Find the one bottleneck killing your revenue.
30-minute free strategy call with Charles. We diagnose your highest-leverage AI bottleneck, install Charlie OS live on your Mac or Windows in one hour, and map your exact next 30 days, all on the same call.
Google Stitch plus Claude Code plus 21st.dev equals the best AI website stack I’ve found yet.
If you’ve been spinning up sites with Claude Code and every single one comes out looking like the same generic AI template, welcome to the club. That was me too, until I figured out this three-tool combo that actually produces something worth putting your name on.
I’m Charles Dove, and I run Charlie Automates. At my agency CC Strategic, we build these systems for clients every week. This post breaks down the exact stack I used to build my own personal brand website from scratch, including the custom quiz, the lead routing automation, and the GitHub deployment pipeline.
Watch the full walkthrough here:
The Problem With AI-Built Websites
Clause Code is powerful. But hand it a blank prompt and say “build me a website” and you’re going to get the same five components everyone else gets. No personality. No animations. No soul.
The fix isn’t a better prompt. The fix is a better starting point.
Step 1: Google Stitch Gets You a Real Design Base (For Free)
Google Stitch lets you create website mock-ups without burning a single token. It’s completely free.
Here’s how I used it. I went to Pinterest, searched “landing pages UI”, and found a design I actually liked. Right-clicked the image, copied it, pasted it straight into Stitch. Then I gave it my brand kit, my colors, my tone, everything, and it generated multiple page templates for me.
From there I iterated. V1, V2, V3. You can edit individual elements by marking them and typing your change. You can edit text manually without touching the AI at all. The live chat with Gemini is actually sick too. You just talk to it and it edits in real time.
When you’ve got a version you like, click “view code”, copy the HTML, and bring it into Claude Code.
Step 2: Hand That HTML to Claude Code With the Right Prompt
I didn’t just paste raw HTML. I prepped Claude with a PAL file prompt. A PAL file is an orchestration layer that gives your project a state file, a roadmap, and a project file. You don’t have to use it, but it keeps everything unified as you build.
I told Claude to boot the site and open it in my browser. It spun up a localhost, I opened a simple browser inside VS Code, and that’s where the real work started.
No Next.js. No React. Just a flat HTML file to start. If those terms confuse you, just ask Claude Code to explain. Or better yet, paste this entire transcript into Claude and ask it to make sense of everything.
Step 3: 21st.dev Is Where Your Site Gets a Personality
This is the part most people skip, and it’s the difference between a site that looks built and a site that feels built.
21st.dev has a library of animation components you can drop right into your project. I created an account, bookmarked the ones I liked, and used one for my navigation menu. The process is simple: copy the prompt for the component, pick Claude Code as your tool, paste the prompt in with your file path, and Claude handles the rest.
On my personal brand site right now you’ll find:
- Custom cursor animations
- Background grid and floating particles
- An animated loader with a sound effect on refresh (yes, a sound)
- A sticky footer
- A testimonial slider
All of it built by chatting with Claude, giving it screenshots, and pulling components from 21st.dev when I needed something specific.
And here’s the real tip: while it’s building, ask it questions. Don’t just watch it go. If you understand what it’s doing, the next site takes half the time.
The Custom Quiz (The Part I’m Most Proud Of)
I wanted a lead qualifier on the site, not just a contact form. So I built a full quiz, Solo Leveling themed if you know you know, that routes people based on their answers.
If someone qualifies as an agency lead, they get routed to a booking page, fill out the form, and that kicks off an n8n workflow. The webhook fires, upserts the contact into GoHighLevel with their quiz answers and score, and my appointment reminder automations handle the rest. All of it built with Claude Code using the n8n MCP server.
If they’re a better fit for the community, they get routed to my Skool. Logic all lives on the site itself.
If you want to build something like this, GoHighLevel is what I use as my CRM and it connects cleanly with everything here.
Hosting: Railway or Vercel
Once the site is ready, you push it to GitHub. Download the GitHub CLI tool, connect it to Claude, and Claude will push your entire project to the repo automatically.
From there, sign up for Railway or Vercel with your GitHub account. They auto-pull your repos and create instant deployments. Every time I update my site through Claude Code, it pushes to GitHub and Railway redeploys it live.
Vercel is free if you’re just testing. But if the site is for your actual business, pay for a plan. Slow load times kill conversions. That’s the biggest thing people overlook.
For domains, I’ve been using Namecheap for years. Railway makes it simple to point your DNS settings there.
The Meta Layer: This Blog Post Was Automated
Here’s something fun. Every time I post a long-form video on YouTube, an automation on charlieautomates.com grabs the transcript, transcribes it, and writes a blog post in my voice using my own blog rules and SEO rules. It’s built right into the repo. You can see the workflow file, the required secrets, all of it.
Social traffic and SEO traffic from one piece of content. That’s the play.
Key Takeaways
- Google Stitch gives you a real design base for free before you touch Claude Code
- A flat HTML file is the right starting point, don’t overthink the stack
- 21st.dev is where generic becomes custom, copy the prompt, paste into Claude
- Build your lead logic into the site itself, not just a third-party form
- GitHub CLI plus Railway equals a fully automated deployment pipeline
- Ask Claude questions while it builds, learning compounds faster than copying
Want to Go Deeper?
If you got value from this, here’s how to keep building.
if you want hands-on help building your website and automation stack from scratch.
Join CC Strategic AI on Skool for access to my brand kit skill, the full Claude Code course (level 1 through 5), custom skills, templates, and the deep-dive training on lead routing and GitHub automations. And subscribe to the @charlieautomates YouTube channel. I drop one to two videos a week on Claude Code, AI automation, and real systems that work.
FAQ
Do I need to know how to code to use this stack? No. Google Stitch handles the design. Claude Code handles the build. 21st.dev gives you copy-paste animation prompts. The only thing you need is an eye for what looks good and patience to iterate.
What’s the difference between Railway and Vercel for hosting? Both connect to GitHub and auto-deploy your site. Vercel has a free tier that’s solid for testing. Railway handles more complex setups better and I’d recommend paying for a plan on any site you’re actually using for business. Speed matters.
Can I build a quiz with lead routing without knowing how to code automations? You can get surprisingly far just by describing what you want to Claude Code. Tell it you want a quiz that routes leads to different pages, give it your CRM details, and it’ll figure out the logic. For the n8n + GoHighLevel connection I used the n8n MCP server inside Claude Code.
What is 21st.dev and is it free? 21st.dev is a library of animation and UI components with copy-paste prompts for Claude Code. You create a free account, browse the components, bookmark what you like, and copy the prompt directly into your Claude session. The components add the kind of polish that makes a site feel custom instead of generated.
Ready to install Charlie OS?
Stop reading. Start shipping.
The AI Bottleneck Protocol is a 30-minute free call. We pinpoint the one task eating the most hours and the most money in your business right now. We install Charlie OS live on your machine in under an hour. We map your exact path to fix the bottleneck on the same call. If we’re not a fit, you walk away with a clear diagnosis of where your business is leaking time and money. Either way, you win.