One Prompt, One Weekend: How to Build a Professional Website with AI
I Built Two Websites in a Weekend. No Code. No Agency. No Monthly Fees.
Both solanasis.com and mrsunshine.me were built using the same approach: one AI tool, one hosting provider, one weekend. Both score 90+ on Google’s performance tests. Both cost $0 per month to host.
The workflow has gotten even better since then. It now starts by researching your competitors so the site is sharper than theirs from the start, and it uses a browser extension to handle the hosting setup so you never have to figure out Cloudflare’s dashboard yourself.
Here is the exact prompt. Anyone can use it.
What You Need Before Starting
Five things, all free, about 10 minutes of setup:
- Claude Code. The AI that builds the site. Sign up at claude.ai and install the desktop app or CLI (command line interface, a text-based way to give your computer instructions). The free tier works.
- The Claude Code Chrome extension. This lets Claude interact with websites on your behalf, including navigating the Cloudflare dashboard to set up hosting. Install it from the Chrome Web Store.
- A GitHub account. This is where your website’s code lives. Free at github.com. Think of it as Google Drive for code.
- A Cloudflare account. This hosts your site for free. Sign up at cloudflare.com.
- Stay logged into GitHub and Cloudflare in Chrome. Claude needs access to these dashboards through the browser extension.
That is the only manual part. Everything below, Claude handles.
The Prompt
Fill in the blanks in the “About My Business” section. Paste the entire thing into Claude Code.
ABOUT MY BUSINESS:
- Business name: [e.g., Acme Consulting]
- What I do in one sentence: [e.g., I help startups with
fractional CFO services]
- My location: [e.g., Denver, CO]
- My email: [e.g., hello@acme.com]
- My current website (if I have one): [URL or "none"]
- 2-3 competitor websites I respect: [URLs]
- Anything else about my brand, personality, or style:
[optional; e.g., "professional but warm, navy blue
and gold colors, I want to come across as approachable
not corporate"]
---
Now build me a professional website. Here is the full
workflow I need you to follow:
PHASE 1 — RESEARCH
Before you write a single line of code, do deep research:
- Visit each of my competitor URLs and analyze: their
positioning, what they lead with on the homepage, how
they describe their services, what trust signals they
use (testimonials, certifications, logos, case studies),
their color schemes, and what feels generic or weak.
- Search the web for the top 5-10 websites in my specific
niche. Study what the best ones do differently.
- Based on this research, identify gaps and opportunities.
What can my site say more honestly or more specifically
than my competitors? What do they all miss?
- Write a brief competitive analysis (just for me to
review) before you start building.
PHASE 2 — BUILD
1. Clone the Astroplate theme from GitHub and set it up as
a new project called my-website. Install all dependencies
and confirm it runs locally.
2. Based on your competitive research, customize everything:
- Pick a professional color palette that fits my industry
and stands out from my competitors
- Write a compelling hero headline and subheading that
positions me sharply against the competition
- Write a services/offerings section with clear
descriptions
- Write a professional about section
- Write any other sections that my competitors have and
I should too (testimonials placeholder, case studies,
FAQ, etc.)
- Make sure the copy is specific and confident, not
generic consulting-speak
- Make it look polished on both desktop and mobile
3. Add a working contact form with Cloudflare Turnstile
for spam protection. Collect name, email, and message.
Show a thank-you page. Style it to match the site.
4. Create a CLAUDE.md file in the project root with my
brand colors, voice guidelines, and site rules so any
future Claude Code session keeps everything consistent.
5. Create a design-tokens.md file that defines my exact
colors, fonts, and spacing so the design stays locked in.
PHASE 3 — SET UP HOSTING (use Chrome browser)
6. Initialize a git repository and create a GitHub repo
called my-website. Push all the code.
7. Now use the Chrome browser to handle Cloudflare setup:
- Go to the Cloudflare dashboard
- If I want a custom domain: help me search for and buy
one directly through Cloudflare Registrar (they sell
domains at cost, no markup). If I'm not ready for a
domain, set up a free .pages.dev subdomain instead.
- Set up a Cloudflare Pages project connected to my
GitHub repo so it auto-deploys when I push changes
- Go to Turnstile in the Cloudflare dashboard, create
a widget for my site, and grab the site key and
secret key. Update my project's environment variables
with these keys.
- Configure DNS if I'm using a custom domain
- Deploy the site and verify it's live
PHASE 4 — QUALITY CHECK
8. Run a Google Lighthouse audit on the live site. Fix
anything scoring below 90 in performance, accessibility,
best practices, or SEO.
9. Test the contact form to make sure submissions work.
10. Do a final visual review on mobile and desktop.
What Each Phase Does
Phase 1: Competitor Research
This is the part that makes this different from every website builder on the market. Before Claude writes a single line of code, it visits your competitors’ sites and studies what they are doing: how they position themselves, what they lead with, what trust signals they use, and where they are being generic.
It also searches the web for the best sites in your niche, not just the ones you listed. You get a competitive analysis to review before building starts. If Claude missed something, you course-correct now, not after the site is built.
Phase 2: Building the Site
Claude starts from Astroplate, a professional open-source theme with 1,300+ stars on GitHub. Other good options include Bigspring (built for service businesses), Looka (designed for consulting firms), and Sendit (polished marketing template with an optional visual editor).
From there, Claude customizes everything based on the competitive research: colors, headlines, services, about section, and any other sections your competitors have that you should too. The copy is written to be specific, not the generic “we provide innovative solutions” language that plagues most small business sites.
Two important files get created:
- CLAUDE.md is an instructions file that Claude reads every session. Your brand colors, voice guidelines, and site rules live here. You never have to repeat yourself when making future updates.
- design-tokens.md locks in your exact colors, fonts, and spacing. This is how professional design systems work.
Phase 3: Hosting via Chrome Extension
Instead of you navigating Cloudflare’s dashboard, copying API keys, and figuring out DNS settings, Claude does it through the Chrome extension. It creates the resources, grabs the keys, and wires everything together while you watch.
Pro tip on domains: Cloudflare sells domains at cost through their Registrar. No markup, no inflated renewal prices. A .com domain that costs $10.11 per year at Cloudflare might run $15 to $20 per year at GoDaddy, and GoDaddy’s renewal price is almost always higher than the first year. Cloudflare charges the same price every year.
Not ready for a domain? Cloudflare gives you a free subdomain like my-website.pages.dev. You can add a custom domain later without rebuilding anything.
Phase 4: Quality Check
Claude runs a Google Lighthouse audit and fixes anything scoring below 90. It tests the contact form and does a final visual review on mobile and desktop.
What This Costs
| What | Cost |
|---|---|
| Claude Code (free tier) | $0 |
| GitHub (free tier) | $0 |
| Cloudflare Pages hosting | $0 |
| Cloudflare Turnstile spam protection | $0 |
| Custom domain via Cloudflare (optional) | ~$10/year at cost |
| Total | $0 to $10/year |
For context: Squarespace or Wix runs $16 to $45 per month ($192 to $540 per year). A custom agency-built site can run $5,000 to $20,000 upfront. None of them research your competitors before building.
Tips for Getting the Most Out of It
- Be specific in the “About My Business” fields. The more detail you give Claude about what you do and who you serve, the sharper the copy will be. “I help startups” is okay. “I help Series A SaaS startups manage burn rate and prepare for their next raise” is much better.
- List competitors you actually respect. Claude will study them, so pick ones whose sites you think are well-done. It will find weaknesses anyway.
- Review the competitive analysis before Phase 2. This is your steering moment. If you have a positioning angle Claude missed, say so now.
- Iterate after launch. Your first version does not have to be perfect. Open Claude Code anytime and say “update the hero headline to say X” or “add a testimonials section.” Because CLAUDE.md exists, Claude keeps everything consistent automatically.
This is the same workflow we use at Solanasis when helping organizations get their technology infrastructure in order. If you want help with the strategy behind your site, your positioning, or making your technology work together instead of against you, let’s have a conversation.