AI-Native Website Building & Deployment Guide for Solanasis

Purpose: Map out every verified option for building, editing, and deploying client websites using AI — with the goal of making the process as hands-off as possible while looking like a legitimate, polished consulting firm.

Last Verified: March 2026

Verification Notes: Every major claim below has been cross-referenced against primary sources (official docs, press releases, or firsthand developer accounts). Where nuances exist, they’re called out.

TL;DR — The Recommended Stack for Solanasis

For an AI-native agency that wants to build with Claude Code, deploy through GitHub, and keep humans out of the loop, the strongest verified stack right now is:

Claude Code (local CLI or web) → builds the site via natural language
Astro (Static Site Generator / SSG) → the framework Claude builds into
A professional Astro theme (e.g., Looka or Astroplate) → ensures the site looks polished from day one
Cloudflare Workers + Resend + Turnstile → handles contact forms and spam protection at zero cost
GitHub → version control + CI/CD (Continuous Integration / Continuous Deployment) trigger
Cloudflare Workers/Pages → edge hosting, generous free tier, auto-deploys on push
GitHub Actions → automated content pipelines, scheduled tasks
CLAUDE.md + Skills files + design-tokens.md → reusable templates so every client site follows the same playbook and brand standards

This gives you a prompt → build → push → live pipeline where the human’s job is just describing what they want — and the result looks like a real consulting firm, not a side project.

Making It Look Professional — Templates, Themes & Design

One of the biggest risks with AI-generated sites is looking generic or “vibe-coded.” Here’s how to ensure every Solanasis site (yours and clients’) looks like it was built by an actual design firm.

Approach A: Start from a Professional Astro Theme (⭐ RECOMMENDED)

The smartest workflow is to start from a polished, pre-built theme and have Claude Code customize it. This gives you a professional design foundation without reinventing the wheel every time.

Verified Consulting / Corporate Astro Themes

Looka — Purpose-built for consulting, agencies, IT firms, legal, healthcare, and finance
- Source: Listed on both astro.build/themes and getastrothemes.com
- Built with Astro + Tailwind CSS
- 100/100 Google Lighthouse SEO score out of the box
- Includes: multilingual support (i18n), blog, portfolio/case studies, services pages, team pages, testimonials, and contact page
- Built-in analytics support (Google Analytics, Plausible, Umami)
- Auto-generated Open Graph metadata for social sharing
- Config-driven customization via config.toml — no deep code changes needed for branding
- Why this fits Solanasis: It is literally designed for professional services firms. Swap in Solanasis branding, service descriptions, and team bios and you have a production-ready site.
Astroplate — Flexible modern starter with pre-built sections
- Hero, features grid, testimonials, blog/news, newsletter signup
- TypeScript + Tailwind CSS
- 1,300+ GitHub stars — well-maintained and community-supported
- Good for both marketing landing pages and blog-heavy sites
Bigspring — SaaS & marketing website theme
- Tailwind CSS + Astro, clean sections: hero, features, pricing, testimonials, CTA (Call-To-Action)
- Specifically designed for startups and service-oriented businesses
- 161+ GitHub stars
Sendit — Polished marketing template with optional CMS
- Built with optional CloudCannon CMS integration — gives clients a browser-based visual editor
- Modern, clean layout that fits professional services
- Source: astro.build/themes and GitHub (127+ stars)
Cosmic Themes collection — Premium Astro themes (cosmicthemes.com)
- Multiple options designed for freelancers, agencies, and professional services
- Built with Astro + Tailwind CSS
- Worth checking if the free options above don’t fit the exact aesthetic you want

How Claude Code Uses a Theme

Step 1: Clone the theme repo
   → git clone https://github.com/[theme-author]/looka.git solanasis-site

Step 2: Open Claude Code in that directory

Step 3: Give Claude Code this kind of prompt:
   "Customize this site for Solanasis, a cybersecurity and operational 
   resilience consulting firm based in Boulder, CO. Replace all placeholder 
   content with our services: Security Assessment, Disaster Recovery 
   Verification, Data Migrations, CRM Setup, Systems Integration, and 
   Responsible AI Implementation. Use a professional color palette — 
   navy blue (#1B2A4A) primary, slate gray (#64748B) secondary, white 
   backgrounds. Update the hero section with a headline like 'Operational 
   Resilience for Growing Organizations.' Update the services grid, 
   testimonials, team page, and about section."

Step 4: Claude Code modifies all the Astro components, markdown content, 
   and Tailwind config to match

Step 5: Push to GitHub → Cloudflare auto-deploys → site is live

Time estimate: 1–2 hours from clone to live, including content writing.

Approach B: Generate from Scratch with a Design Reference

If you don’t want to start from an existing theme, give Claude Code a design reference — a screenshot of a site you admire, a URL, or a detailed style description.

Example prompt for Claude Code:

Build a professional consulting firm website using Astro + Tailwind CSS. 
Style it like McKinsey.com meets a modern cybersecurity firm:
- Clean, minimal design with lots of white space
- Navy (#1B2A4A) as primary, slate gray (#64748B) as secondary
- Inter or DM Sans as the font family (load from Google Fonts)
- Hero section with a strong headline and a subtle background pattern
- Services grid with icons (use Lucide icons via astro-icon)
- Client trust bar ("Trusted by 50+ organizations" with placeholder logos)
- Team section with professional headshots (use placeholder images for now)
- Testimonial carousel or grid
- Blog/insights section pulling from markdown files in src/content/
- Contact page with a working form (we'll add the backend next)
- Footer with links, social icons, and a newsletter signup
- Mobile-responsive throughout — test at 375px, 768px, and 1440px widths
Deploy to Cloudflare Workers via GitHub.

Approach C: Use v0 for the Design, Then Claude Code for the Build

This is the hybrid smartcut — use one tool’s strength (design) and another’s strength (building):

Go to v0.dev (Vercel’s AI UI generator, free tier available) and describe the UI you want
v0 generates a polished React + Tailwind component preview
Screenshot the v0 output or copy the design patterns you like
Feed that to Claude Code: “Build an Astro site that looks like this design” and attach the screenshot
Claude Code replicates the design in Astro (static, fast, no React runtime needed)
Deploy to Cloudflare

This gives you v0’s design quality without being locked into Vercel’s hosting ecosystem.

The Design System Approach (How to Stay Consistent Across All Sites)

The key to consistently professional-looking output isn’t the framework — it’s design tokens (a set of reusable style values that define your brand). Create this once, reuse everywhere:

Create a design-tokens.md file in every repo that defines:

Brand colors — primary, secondary, accent, backgrounds, text colors (with exact hex codes)
Typography — font families, heading sizes, body text size, line height, font weights
Spacing scale — consistent padding/margin values (e.g., 4px, 8px, 16px, 24px, 32px, 48px, 64px)
Border radius — how rounded corners should be (e.g., 8px for cards, 4px for buttons)
Shadows — consistent box-shadow values for cards and elevated elements
Component patterns — how buttons, cards, forms, nav bars should look

Then reference it in your CLAUDE.md:

# CLAUDE.md
When modifying this site, always follow the design tokens defined 
in design-tokens.md. Do not introduce new colors, fonts, or spacing 
values that aren't in the design system. All components should use 
Tailwind utility classes that map to our design tokens.

🔥 Pro Tip: This design-tokens.md + CLAUDE.md pattern is how real design systems work at scale in companies like Stripe and Linear — they just cost those companies hundreds of thousands of dollars to build. You’re getting the same consistency for zero cost by codifying it in markdown and letting AI enforce it. Your 1099 contractors don’t need to understand design; they just prompt Claude Code, and the CLAUDE.md ensures the output is always on-brand.

Solving the Contact Form Problem

Static sites can’t process form submissions by themselves — there’s no backend server to receive the data. But this is a well-solved problem with multiple proven approaches, and Claude Code can set up any of them automatically.

Approach A: Cloudflare Workers + Resend + Turnstile (⭐ RECOMMENDED — Zero Additional Cost)

Since you’re already on Cloudflare, this is the cleanest approach. Your site remains mostly static, but you add a single server-rendered endpoint that Cloudflare Workers handles for free.

How It Works

Install the @astrojs/cloudflare adapter in your Astro project
- This is the official adapter maintained by the Astro team (now at Cloudflare)
- It allows specific pages or API endpoints to run as Cloudflare Workers (server-side) while everything else stays static
- Source: Official Astro deployment docs for Cloudflare
Create an API endpoint (e.g., src/pages/api/sendEmail.json.ts) that receives form data via POST
Use Resend (email delivery API) to forward the form submission to your inbox
- Resend free tier: 100 emails/day, 3,000 emails/month — more than enough for contact forms
- Clean developer API, official tutorial on Cloudflare’s Developer Spotlight docs
Add Cloudflare Turnstile for spam protection
- Cloudflare’s free CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) alternative
- Invisible to most users — no annoying image puzzles
- Free and unlimited, built into Cloudflare’s ecosystem
- Source: GitHub repo isNan909/astro-cloudflare-turnstile demonstrates the full integration
The form page gets export const prerender = false — this tells Astro to server-render just that one page while everything else stays fully static (zero performance impact on the rest of the site)

What to Prompt Claude Code

"Add a contact form to the site's /contact page. Use the @astrojs/cloudflare 
adapter for the form endpoint only. The form should collect:
- Full name (required)
- Email (required)
- Company name (optional)
- Phone (optional)
- Service interest (dropdown): Security Assessment, Disaster Recovery 
  Verification, Data Migration, CRM Setup, Systems Integration, 
  Responsible AI Implementation
- Message (required, textarea)

Use Resend to email submissions to info@solanasis.com. Add Cloudflare 
Turnstile for spam protection. After submission, redirect to a custom 
/thank-you page that says 'Thanks for reaching out — we'll be in touch 
within one business day.' Style the form to match the rest of the site's 
Tailwind design. Also send an auto-reply email to the submitter confirming 
receipt."

Claude Code will:

Install @astrojs/cloudflare and configure the adapter
Create a styled form component with Tailwind classes matching your design tokens
Create the API endpoint at src/pages/api/sendEmail.json.ts with Resend integration
Add Turnstile CAPTCHA to the form
Set export const prerender = false on the contact page only
Create the /thank-you page
Set up the auto-reply email template

Cost

Component	Cost	Capacity
Cloudflare Workers (form endpoint)	Free	100K requests/day (a contact form uses maybe 5–50/day)
Resend (email delivery)	Free tier	3,000 emails/month
Cloudflare Turnstile (spam protection)	Free	Unlimited
Total	$0/month

⚠️ Setup Requirements

Verify your domain with Resend (add DNS records in Cloudflare — 5 minutes)
Store the Resend API key as a Cloudflare Worker secret (not in code): run npx wrangler secret put RESEND_API_KEY
Store Turnstile site key and secret key the same way

Approach B: Third-Party Form Backend (Simplest — No SSR Required)

If you want to keep the site 100% static with zero server-side rendering, use a hosted form backend. You just point your HTML form’s action attribute at their URL endpoint.

Best Options Compared

Service	Free Tier	Paid Tier	Spam Protection	Best For
Formspree	50 submissions/mo	$10/mo (1,000 subs)	Honeypot + reCAPTCHA	Simplest possible setup — just set the form action URL
Static Forms	500 submissions/mo	$9/mo (25,000 subs)	reCAPTCHA + Altcha (privacy-first)	Best free tier volume, AI auto-reply feature, GDPR compliant
Formcarry	100 submissions/mo	$6/mo (unlimited forms)	Built-in spam filter	Cheapest paid tier, custom thank-you pages, Zapier on all plans
Basin	100 submissions/mo	$5/mo	reCAPTCHA + AI filter	Form analytics dashboard, cheapest paid option

How It Works (Formspree Example)

This is literally all the code needed — no backend, no server, no adapter:

<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
  <input type="text" name="name" placeholder="Your Name" required />
  <input type="email" name="email" placeholder="Email" required />
  <input type="text" name="company" placeholder="Company" />
  <select name="service">
    <option value="">Select a service...</option>
    <option>Security Assessment</option>
    <option>Disaster Recovery Verification</option>
    <option>Data Migration</option>
    <option>CRM Setup</option>
    <option>Systems Integration</option>
    <option>Responsible AI Implementation</option>
  </select>
  <textarea name="message" placeholder="Tell us about your needs" required></textarea>
  <input type="hidden" name="_next" value="https://solanasis.com/thanks" />
  <input type="text" name="_gotcha" style="display:none" />
  <button type="submit">Get Started</button>
</form>

What Claude Code does: Tell it “add a contact form using Formspree, my form ID is xwkgpqnj” and it builds the styled component and integrates it. Takes about 2 minutes of prompting.

Approach C: Cloudflare Workers + Airtable / Google Sheets (CRM-Lite)

For a more sophisticated setup where form submissions go into a searchable, sortable database:

Cloudflare Worker receives the form POST request
Worker writes the data to Airtable (via REST API) or Google Sheets (via Apps Script webhook)
Worker simultaneously sends an email notification via Resend
You get a lightweight CRM — every lead logged with timestamps, service interest, company info
Source: Full tutorial by John Dalesandro (johndalesandro.com) with Cloudflare Workers + Airtable

Why this matters for Solanasis: Natural stepping stone before setting clients up with a full CRM — which is one of your service offerings. Show clients how lead tracking works on the lightweight version, then upsell to the real thing.

Which Contact Form Approach to Use

Scenario	Recommended Approach	Why
Solanasis’s own site	Approach A (Workers + Resend + Turnstile)	Maximum control, zero cost, auto-reply built in
Simple client marketing site	Approach B (Formspree or Static Forms)	Fastest setup, zero SSR complexity
Client who needs lead tracking	Approach C (Workers + Airtable)	Acts as a mini-CRM
Client with existing CRM	Approach A, but POST to their CRM API (HubSpot, Salesforce)	Goes directly into their workflow
Client on a theme that already has a form page	Drop in Formspree (Approach B)	Minimal code changes

🔥 Pro Tip: Whichever approach you use, always add these three things to every contact form:

A honeypot field — a hidden form field that bots fill in but humans never see. If the field has data, silently discard the submission.

A custom thank-you page — not the generic default, but your own branded page with “we’ll be in touch within 24 hours” messaging and links to your blog/resources. This is a trust signal.

Auto-reply email to the submitter — an immediate “Thanks for reaching out, here’s what to expect next” email makes you look responsive and professional from the very first interaction.

Include all three in your CLAUDE.md as standard requirements so they’re never forgotten on any client site.

Option 1: Claude Code + Astro + Cloudflare (⭐ RECOMMENDED)

What It Is

You describe the website in natural language to Claude Code
Claude Code generates an Astro project (static HTML/CSS/JS)
Code pushes to GitHub
Cloudflare Workers (or Pages) auto-deploys on every push
Entire site loads in milliseconds from the edge — no server needed

Why This Is the Move

Cloudflare acquired the Astro Technology Company on January 16, 2026
- Source: Official Cloudflare press release and Astro blog post
- Astro remains open-source and MIT-licensed under Cloudflare’s stewardship
- Astro 6 beta is already available with a redesigned Vite-powered dev server
- Used by brands like Porsche, IKEA, Visa, OpenAI, and platforms like Webflow Cloud and Wix Vibe
Cloudflare Pages/Workers free tier is extremely generous for static sites
- Requests to static assets are free and unlimited on both free and paid plans (confirmed via Cloudflare’s official pricing docs)
- Unlimited bandwidth, unlimited sites, no credit card required
- 500 builds/month on the free plan
- Only Functions (serverless code) count against the 100K daily Workers request limit
Claude Code is exceptionally good at building Astro sites — multiple developers have confirmed building production sites in days, not weeks
Zero JavaScript by default — Astro renders pure HTML, meaning blazing fast load times and great SEO (Search Engine Optimization) — critical for your SMB (Small and Medium-Sized Business) clients
Content lives in Markdown files — you already prefer .md, so editing content = editing .md files that Claude Code can generate or modify
Claude Code Agent Teams (released with Opus 4.6 on February 5, 2026) can spin up multiple agents for different parts of the site simultaneously
- Source: Confirmed via TechCrunch, The Register, and Anthropic’s official release
- Currently in Research Preview — enable via environment variable

The Workflow

You describe the site → Claude Code generates Astro project
                       → Pushes to GitHub repo
                       → Cloudflare auto-deploys from the repo
                       → Site is live at client's custom domain

Verified Real-World Examples

Leon Furze (Feb 2026): Built 5 production websites in 2 weeks using this exact stack (Claude Code + Astro + Cloudflare Pages). Created a reusable Claude Code Skill file to automate the setup.
Stark Insider / Atelier Stark (Feb 2026): Migrated from WordPress to Astro + Claude Code + Cloudflare. Reported that web design became “fun” again and that zero CSS was written by hand.
Simon Willison (ongoing): Documented using Claude Code web + GitHub Pages for live previews during iteration. Deploys from his phone via Claude Code web sessions.

How to Edit Sites Later

Open Claude Code, point it at the repo, describe changes in natural language
Claude Code modifies the Astro files, commits, pushes → Cloudflare auto-deploys
No CMS (Content Management System) login, no WordPress dashboard, no manual editing

Cost

Component	Cost
Claude Code	Included in your Pro ( $20/ m o) or M a x ($ 100-200/mo) subscription
Cloudflare Workers/Pages	Free tier handles most SMB sites
GitHub	Free for private repos
Custom domains	Managed through Cloudflare (DNS is free)
Contact form (Workers + Resend)	Free (see Contact Form section above)

⚠️ Limitation — No Traditional CMS Dashboard

Non-technical clients can’t self-edit content through a browser dashboard
Workaround A: Client sends text/images, you prompt Claude Code, site updates in minutes
Workaround B: Add a headless CMS like Tina CMS or Decap CMS that writes to the same markdown files — adds complexity but gives clients a browser-based editor
Workaround C: Use Astro’s Content Collections with a simple form-based editing layer
Workaround D: Use the Sendit theme (listed in the Design section above) which has built-in CloudCannon CMS support — gives clients a visual editor out of the box

🔥 Pro Tip: Create a Claude Code Skill file (a .md file with reusable instructions) for your agency’s website template. Leon Furze documented this exact approach — he created a skill that handles the entire Astro + Cloudflare setup process automatically. You say “build a site for [client name] using the website skill” and Claude Code follows the playbook. This is the key to making this scalable for your 1099 contractors — they don’t need to be developers, they just need to know how to prompt.

Option 2: Claude Code + GitHub Actions (Automated Content Pipelines)

What It Is

Same as Option 1, but you add GitHub Actions to automate content generation, scheduled updates, or data pulls — all hands-free
GitHub Actions provides free minutes for automation:
- Public repos: Free and unlimited for standard GitHub-hosted runners
- Private repos: 2,000 minutes/month on the GitHub Free plan
- ⚠️ Note (March 2026 change): GitHub introduced a $0.002/minute platform charge for self-hosted runners starting March 1, 2026. Standard hosted runners on public repos remain free. For your use case (scheduled cron jobs on standard runners), the free tier is more than sufficient.

Verified Real-World Example

HowDoIUseAI.com (Jan 2026, documented by NoCodeLife): Built in one afternoon with Claude Code. Every day at 6 AM UTC, GitHub Actions automatically scrapes YouTube transcripts via Apify, uses the Claude API to write SEO-optimized blog posts, commits them to the repo, and Vercel auto-deploys. The creator doesn’t touch it. Monthly cost: ~$10–20 (mostly Apify and Claude API usage).

Why This Matters for Solanasis

You could build automated content engines for clients
- Example: A client’s blog that auto-publishes AI-generated industry updates weekly
- Example: A dashboard that pulls fresh data from APIs and regenerates pages nightly
No server required — GitHub Actions spins up a VM, runs the scripts, commits changes, shuts down
Pairs perfectly with the Astro + Cloudflare stack

The Workflow

GitHub Actions (cron schedule) → Runs Claude API script
                               → Generates new .md content files
                               → Commits to repo
                               → Cloudflare auto-deploys updated site

🔥 Pro Tip: This is a massive value-add differentiator for Solanasis. Most SMB clients would pay a premium for a website that “updates itself.” Position this as your AI Content Engine offering — it’s a natural upsell from your initial cybersecurity assessment wedge into a recurring revenue engagement. You maintain the pipeline, client gets fresh content automatically.

Option 3: Claude Code Web + GitHub Pages (Quick Previews & Iteration)

What It Is

Use Claude Code on the web (from claude.ai or the Claude mobile app) instead of the local CLI
Claude Code clones your GitHub repo in a cloud sandbox, makes changes, pushes a branch
You point GitHub Pages at that branch for instant live previews
Iterate from your phone, laptop, anywhere — no terminal needed

Why This Is Useful

Mobile-first iteration: Review and request changes to client sites from your phone while in meetings or on the go
Share previews with clients via the GitHub Pages URL before going live
No local dev environment needed — everything runs in Anthropic’s cloud
Sessions persist — you can keep iterating on the same branch for weeks (no confirmed limit on session duration)

Verified Details

Source: Simon Willison’s TIL (Today I Learned) blog, plus Anthropic’s official Claude Code web docs
Claude Code web currently requires a Pro or Max plan on claude.ai
Claude Code web only supports GitHub-hosted repos — no GitLab or Bitbucket support yet
The preview URL format is https://your-username.github.io/your-repo/index.html
When you land the PR (Pull Request), remember to update GitHub Pages settings to point back to the main branch

Best Workflow

Create a private GitHub repo with your Astro boilerplate
Start a Claude Code web session against that repo from your phone or browser
Tell Claude what to build — it creates a branch and pushes code
Go to repo Settings → Pages → select the claude/... branch
Wait ~1 minute for deploy — preview is live at the secret GitHub Pages URL
Share preview with client, request changes via Claude Code web
When approved, merge the PR and update Pages to point to main

🔥 Pro Tip: Simon Willison’s approach of using self-contained HTML with vanilla JavaScript and no build step is the fastest path for simple landing pages. Tell Claude Code: “self-contained HTML file, vanilla JavaScript, no build step, load dependencies from CDN.” For more complex multi-page sites, use Astro.

Option 4: Claudable (Open-Source AI Web Builder)

What It Is

Claudable is an open-source web builder (Next.js-based) that wraps around Claude Code to give you a Lovable-like visual experience — but free and self-hosted
You describe your app/site in natural language, get a live hot-reload preview, and deploy to Vercel with one click
Originally released August 2025 by OPACTOR on GitHub
Supports multiple AI agents: Claude Code (recommended), Cursor CLI, Codex, Gemini CLI, Qwen Code

Technical Stack It Generates

Next.js 14 with App Router
Tailwind CSS + shadcn/ui for styling
Supabase (PostgreSQL) for database + auth (optional)
tRPC for type-safe API routes
ESLint + Prettier + Husky pre-commit hooks generated automatically

Best For

When you want a visual builder experience without paying for Lovable/Bolt
When building dynamic Next.js apps (not just static sites) — dashboards, client portals, tools
When you want Supabase database integration out of the box

⚠️ Honest Caveats

Still early-stage open source — expect some rough edges
Deploys to Vercel (not directly to Cloudflare or AWS)
More complexity than the Astro stack for simple marketing sites

🔥 Pro Tip: Claudable is essentially your own self-hosted version of Lovable — free. If you want to offer clients interactive web apps (dashboards, operational portals, CRM frontends) in addition to marketing sites, this gives you a free platform to build on.

Option 5: Lovable / Bolt.new / v0 (SaaS AI Website Builders)

What They Are

Lovable (~$25/mo Pro): Chat-based full-stack app builder. Generates React + Supabase apps. Two-way GitHub sync. SOC 2 Type 2 and ISO 27001:2022 certified.
Bolt.new (~$20/mo): AI-first dev environment in the browser. Supports the most frameworks (React, Vue, Svelte, Angular, Astro, Remix, Expo). Deploys to Netlify.
v0 by Vercel (~$20/mo): AI UI generator. Production-quality React + Tailwind CSS components. Deploys to Vercel. Primarily frontend only.

Honest Assessment for Solanasis

Factor	Lovable	Bolt.new	v0
Speed to prototype	Fast for MVPs	Fastest for iteration	Fast for UI only
Full-stack	Yes (React + Supabase only)	Yes (multi-framework)	Limited
GitHub sync	Two-way sync ✅	Export to GitHub	Export to GitHub
Deploy to your AWS/Cloudflare?	❌ Lovable Cloud only	❌ Netlify only	❌ Vercel only
Token/credit burn risk	High — 150+ messages for complex layouts	High — $1,000+ reported	Moderate
Contact forms built in?	Yes (Supabase backend)	Yes (framework-dependent)	No (frontend only)

Why These Probably Aren’t Your Primary Tool

They lock you into their hosting — can’t deploy to your own infrastructure
Credit/token burn is real — developers report hundreds of dollars debugging complex projects
Context degradation — projects with 15-20+ components cause the AI to lose track and create duplicates
No advantage over Claude Code — these are a more expensive, locked-in version of what you already have

When They Make Sense

v0 for design previews — generate a polished mockup, screenshot it, feed it to Claude Code (see Design section Approach C)
Lovable for quick sales demos — spin up a clickable prototype in 30 minutes to close a deal
Non-technical contractors — Lovable’s chat UI is more accessible than a CLI

🔥 Pro Tip: Behind the scenes, most of these tools use Claude Sonnet as their AI backbone. You’re paying a middleman for a UI wrapper around the same model you already have access to.

Option 6: AWS Hosting (Your Existing Infrastructure)

Option 6A: AWS Amplify Hosting (Recommended AWS Path)

AWS Amplify Hosting auto-deploys from GitHub, handles SSL certificates, and serves via CloudFront CDN
Supports Astro, React, Vue, Next.js, Angular, and static HTML
Provides preview URLs for branches, atomic deploys, and password protection
Source: Official AWS Amplify documentation

Cost

Free tier: 1,000 build minutes/month, 15 GB served/month, 5 GB storage
After free tier: Pay-as-you-go (more expensive than Cloudflare for most SMB sites)

Option 6B: S3 + CloudFront (Manual AWS Path)

More setup: S3 bucket policies, CloudFront distributions, SSL via ACM (AWS Certificate Manager), DNS via Route 53
Full control but significantly more work than Amplify or Cloudflare

Honest Take

Amplify is viable if you need everything in AWS for compliance
But Cloudflare is dramatically simpler and cheaper for static sites
Recommendation: Use Cloudflare for client websites. Keep AWS for backend infrastructure.

🔥 Pro Tip: If a client specifically requires AWS hosting (common in regulated industries your cybersecurity consulting touches), use Amplify. For everyone else, Cloudflare wins.

Option 7: Azure Static Web Apps

What It Is

Azure Static Web Apps connects to GitHub, auto-deploys on push, has a free tier
Supports Astro, React, Vue, Next.js, Angular, Blazor (relevant given your .NET background)
Built-in auth with Azure Entra ID (formerly Active Directory)

When It Makes Sense

Azure-first organizations with Entra ID
Clients requiring Azure compliance certifications
When you need Blazor support

Honest Take

Developer experience worse than Cloudflare — more config, slower deploys
Only use for specific Azure requirements

The Full AI-Native Agency Playbook for Solanasis

For the Solanasis Website Itself

Looka theme + Claude Code customization + design-tokens.md
+ Cloudflare Workers + Resend contact form + Turnstile spam protection
+ GitHub + Cloudflare auto-deploy

Build time: 2–4 hours (clone theme → customize branding/content → set up contact form → deploy)
Monthly cost: $0
Design quality: Professional consulting firm look out of the box
Contact form: Fully functional with auto-reply, spam protection, email delivery

For Client Marketing Sites

Professional Astro theme + Claude Code customization
+ Formspree or Static Forms contact form
+ GitHub + Cloudflare Workers auto-deploy

Build time: 1–3 hours per site
Monthly cost: ~$0 (Cloudflare free tier + Formspree free tier)
Contact form: Working within 5 minutes via Formspree

For Client Web Apps (dashboards, portals, tools)

Claude Code + Next.js (or Claudable) + GitHub + Vercel or Cloudflare

Build time: 1–2 days for an MVP (Minimum Viable Product)
Add Supabase for database/auth if needed
Contact forms handled natively by the framework

For Automated Content Sites

Claude Code + Astro + GitHub Actions + Claude API + Cloudflare

Build time: 1 day for the pipeline
Runs itself after that — ~$10–20/month in API costs

For Quick Sales Demos

v0 for design preview → screenshot → Claude Code builds it in Astro
— OR —
Lovable for a 30-minute clickable prototype → close the deal
→ build production site with Claude Code

For Client Site Edits After Launch

Claude Code (local or web) → opens repo → describes changes → pushes → auto-deploys

Total human time per edit: 2–5 minutes of prompting
Can do it from your phone via Claude Code web

What’s on the Horizon (Watch These)

Claude Code Agent Teams — Already available in Opus 4.6 (Research Preview). Spins up multiple agents working in parallel. One developer used 16 agents to build a 100,000-line C compiler in two weeks.
GitHub + Claude Agent Integration — Assign website updates to Claude from a GitHub Issue using @claude. Available to Copilot Pro+ and Enterprise subscribers.
Astro 6 — Beta is out now. Redesigned dev server powered by Vite, faster builds, deeper Cloudflare integration.
Auto-Claude — Open-source autonomous multi-session AI coding tool. Define a spec, and Claude autonomously builds and validates across multiple sessions. Early stage.
Claudable Clink — Web-based version of Claudable (no local install) currently in development.

Quick Comparison Matrix

Approach	Build Speed	Monthly Cost	Professional Look	Contact Form	Best For
Claude Code + Astro Theme + Cloudflare	⭐⭐⭐⭐⭐	$0	⭐⭐⭐⭐⭐	Workers + Resend (free)	Marketing sites
+ GitHub Actions automation	⭐⭐⭐⭐⭐	$10–20	⭐⭐⭐⭐⭐	Same as above	Auto-updating content
Claude Code Web + GitHub Pages	⭐⭐⭐⭐	$0	⭐⭐⭐⭐	Formspree (free)	Mobile iteration
Claudable (self-hosted)	⭐⭐⭐⭐	$0	⭐⭐⭐⭐	Built into Next.js	Dynamic web apps
Lovable / Bolt / v0	⭐⭐⭐⭐	$20–50/mo	⭐⭐⭐⭐	Built-in	Sales demos
AWS Amplify	⭐⭐⭐	$0–15/mo	⭐⭐⭐⭐	Lambda function	AWS-required clients
Azure Static Web Apps	⭐⭐⭐	$0–9/mo	⭐⭐⭐⭐	Azure Function	Azure clients

Next Steps for Solanasis

Pick the Looka Astro theme (or Astroplate) and clone it into a private GitHub repo
Create your design-tokens.md — define Solanasis colors, fonts, spacing, and component patterns. This becomes the single source of truth for your brand across all sites.
Create your CLAUDE.md — reference the design tokens file, define code conventions, include standard requirements (contact form with honeypot + thank-you page + auto-reply, SEO metadata, Cloudflare deployment config)
Set up the contact form using Workers + Resend + Turnstile. Verify your domain with Resend, store API keys as Cloudflare Worker secrets, test end-to-end.
Build the Solanasis site with Claude Code using theme + design tokens + CLAUDE.md — this is your proof-of-concept and production site simultaneously
Create a Claude Code Skill file that automates the “new client site” workflow — clone theme, apply design tokens, set up contact form, configure Cloudflare, push to GitHub
Write the SOP (Standard Operating Procedure) so your 1099 contractors can follow it — they just need to prompt Claude Code and review output
Set up a GitHub Actions template for automated content updates — this is your recurring revenue upsell
Consider a v0 account purely for generating design previews to screenshot and feed to Claude Code

Key Acronyms Referenced

Acronym	Full Name
SSG	Static Site Generator
SSR	Server-Side Rendering
CMS	Content Management System
CDN	Content Delivery Network
CI/CD	Continuous Integration / Continuous Deployment
SEO	Search Engine Optimization
SMB	Small and Medium-Sized Business
MVP	Minimum Viable Product
CLI	Command Line Interface
PR	Pull Request
PWA	Progressive Web App
ARR	Annual Recurring Revenue
ACM	AWS Certificate Manager
SOP	Standard Operating Procedure
MCP	Model Context Protocol
CTA	Call-To-Action
i18n	Internationalization (multilingual support)
CAPTCHA	Completely Automated Public Turing test to tell Computers and Humans Apart
GDPR	General Data Protection Regulation (EU privacy law)

This guide reflects verified, production-tested approaches as of March 2026. The AI tooling space moves fast — revisit quarterly.

Solanasis Docs

Explorer

ai-native-website-building-guide-v2

AI-Native Website Building & Deployment Guide for Solanasis

TL;DR — The Recommended Stack for Solanasis

Making It Look Professional — Templates, Themes & Design

Approach A: Start from a Professional Astro Theme (⭐ RECOMMENDED)

Verified Consulting / Corporate Astro Themes

How Claude Code Uses a Theme

Approach B: Generate from Scratch with a Design Reference

Approach C: Use v0 for the Design, Then Claude Code for the Build

The Design System Approach (How to Stay Consistent Across All Sites)

Solving the Contact Form Problem

Approach A: Cloudflare Workers + Resend + Turnstile (⭐ RECOMMENDED — Zero Additional Cost)

How It Works

What to Prompt Claude Code

Cost

⚠️ Setup Requirements

Approach B: Third-Party Form Backend (Simplest — No SSR Required)

Best Options Compared

How It Works (Formspree Example)

Approach C: Cloudflare Workers + Airtable / Google Sheets (CRM-Lite)

Which Contact Form Approach to Use

Option 1: Claude Code + Astro + Cloudflare (⭐ RECOMMENDED)

What It Is

Why This Is the Move

The Workflow

Verified Real-World Examples

How to Edit Sites Later

Cost

⚠️ Limitation — No Traditional CMS Dashboard

Option 2: Claude Code + GitHub Actions (Automated Content Pipelines)

What It Is

Verified Real-World Example

Why This Matters for Solanasis

The Workflow

Option 3: Claude Code Web + GitHub Pages (Quick Previews & Iteration)

What It Is

Why This Is Useful

Verified Details

Best Workflow

Option 4: Claudable (Open-Source AI Web Builder)

What It Is

Technical Stack It Generates

Best For

⚠️ Honest Caveats

Option 5: Lovable / Bolt.new / v0 (SaaS AI Website Builders)

What They Are

Honest Assessment for Solanasis

Why These Probably Aren’t Your Primary Tool

When They Make Sense

Option 6: AWS Hosting (Your Existing Infrastructure)

Option 6A: AWS Amplify Hosting (Recommended AWS Path)

Cost

Option 6B: S3 + CloudFront (Manual AWS Path)

Honest Take

Option 7: Azure Static Web Apps

What It Is

When It Makes Sense

Honest Take

The Full AI-Native Agency Playbook for Solanasis

For the Solanasis Website Itself

For Client Marketing Sites

For Client Web Apps (dashboards, portals, tools)

For Automated Content Sites

For Quick Sales Demos

For Client Site Edits After Launch

What’s on the Horizon (Watch These)

Quick Comparison Matrix

Next Steps for Solanasis

Key Acronyms Referenced

Graph View

Table of Contents

Backlinks