Solanasis Docs

ai_native_website_factory_playbook_2026

7 min read

AI‑Native Website Factory Playbook (2026)

Goal: Ship professional consulting-firm sites from a Git repo with AI doing most of the work, while humans only review previews + approve merges.

This playbook assumes you want to avoid clunky editors (e.g., WordPress) and keep everything repo-first.

What “professional” means operationally

A professional site is not just a theme. It’s a repeatable system:

  • Template chosen up front (a real consulting/agency theme, not a “developer portfolio”)
  • Brand tokens (fonts, spacing, color palette, buttons, forms) applied consistently
  • Content architecture (services, industries, case studies, FAQ, contact)
  • Conversion-ready contact flow (spam protection + notifications + data retention)
  • QA checks automated (links, build, performance budget, accessibility baseline)

Recommended default stack (fast + professional)

Stack A (default): Astro + GitHub + Cloudflare Pages

  • Framework: Astro (static-first)
  • Hosting: Cloudflare Pages (Git-based builds + deploys)
  • Contact form: (choose 1)
    • Formspree endpoint (fastest, no backend)
    • Pages Functions / Workers (more control)
  • Preview workflow: PR → preview deployment → merge → production deploy

Cloudflare Pages supports static sites and can add backend capabilities via Pages Functions, which are based on the Workers runtime.
Refs: Cloudflare Pages Functions docs. https://developers.cloudflare.com/pages/functions/
Also Cloudflare provides tutorials for forms + Formspree on Pages. https://developers.cloudflare.com/pages/tutorials/add-an-html-form-with-formspree/

Professional templates that work well with AI

You want templates that are:

  • widely used (battle-tested patterns)
  • component-based (easy refactors)
  • strong defaults (typography, spacing, sections)
  • not “flashy startup” unless that’s the brand

Template sourcing paths (pick one)

  1. Astro official/community templates
  1. Astro theme directory (agency/consulting oriented)
  1. Curated lists / comparison posts (good for finding 2026-ready themes)

“Professional consulting firm” template selection checklist

Use this as the AI’s decision rubric:

  • Has Services pages/sections
  • Has Case studies / testimonials pattern
  • Has “About / Team / Values”
  • Includes blog optionally (nice-to-have)
  • Has contact page with form styling
  • Uses semantic HTML + responsive layout
  • Reasonable Lighthouse defaults (performance/accessibility)
  • License suitable for client work

Contact forms (3 solid approaches)

You have three “confirmed possible” routes in a repo-first setup:

Option 1 (fastest): Formspree (static HTML form endpoint)

Pros

  • Near-zero backend work
  • Easy for AI to wire up consistently

Cons

  • Third-party dependency
  • Pricing/limits may apply depending on volume

Best for: brochure sites, low-volume consulting inquiries.

Option 2 (simple + integrated): Netlify Forms (if you host on Netlify)

Netlify can detect forms at deploy time and accept submissions. Ref: Netlify Forms setup docs. https://docs.netlify.com/manage/forms/setup/

Pros

  • Minimal backend work
  • Built-in spam controls, submission storage

Cons

  • You’re choosing Netlify hosting
  • Some advanced features may be paid

Best for: teams that want the easiest “static + forms” platform.

Option 3 (most control, still serverless): Cloudflare Pages Functions / Workers

You handle form submissions in a Pages Function (Workers runtime) and then:

  • send an email via an email provider, or
  • store in KV/D1/Queue, or
  • forward to a ticketing/CRM system

Cloudflare Pages Functions are designed for handling form submissions and similar backend needs.
Ref: https://developers.cloudflare.com/pages/functions/
Cloudflare form tutorial that collects submitted data in a Worker. https://developers.cloudflare.com/pages/tutorials/forms/

Email sending option (Cloudflare + MailChannels) Cloudflare has a documented partnership flow for sending emails from Workers using MailChannels.
Ref: https://blog.cloudflare.com/sending-email-from-workers-with-mailchannels/

Pros

  • Full control + can log/store submissions
  • Keep everything in your Cloudflare stack

Cons

  • More moving parts than Formspree
  • Need to implement spam protection + validation carefully

Best for: higher volume, compliance-sensitive clients, or deeper integrations.

The “AI does the setup” workflow (your agency operating system)

This is the core: Template repo + PR factory + previews + guardrails.

1) Create a “Consulting Site” template repo

Repo name: site-template-consulting-astro

Include:

  • /content/ (Markdown/MDX pages)
  • /components/ (Hero, ServiceGrid, CaseStudyCard, FAQ, ContactForm)
  • /styles/ or Tailwind config
  • brand.config.json (tokens)
  • CHECKLIST.md (launch checklist)
  • .github/workflows/ci.yml (build + lint + link-check)
  • .github/PULL_REQUEST_TEMPLATE.md (human review prompts)

Key: AI must have one place to edit tokens: brand.config.json

Suggested token keys:

  • brandName, tagline
  • primaryColor, secondaryColor, accentColor
  • fontHeading, fontBody
  • ctaPrimaryLabel, ctaPrimaryLink
  • contactEmail, calendlyLink (optional)
  • services[], industries[], testimonials[]

2) “New client site” creation (90 seconds)

Human creates repo from template:

  • clientname-site from site-template-consulting-astro

AI task list (automated via Claude Code / Codex):

  • Replace tokens in brand.config.json
  • Generate pages:
    • Home
    • Services (overview + 1 page per service)
    • How We Work
    • Results / Case Studies
    • FAQ
    • Contact
  • Add SEO metadata + OpenGraph
  • Add sitemap + robots.txt
  • Wire contact form (choose option 1/2/3)
  • Ensure consistent CTA placement

3) Preview deployments and approval gates

Non-negotiable: every change ships via PR with preview URL.

  • PR opened by AI
  • Preview deployed (Cloudflare Pages / Netlify / Vercel all support this model)
  • Human checks:
    • typography / spacing
    • mobile nav
    • contact form end-to-end
    • performance budget
  • Human approves → merge → production deploy

Making the site look “real” (professional polish checklist)

This is where most “AI-generated sites” fail. Bake these into your checklist and prompts.

Visual system

  • 2 fonts max (1 heading + 1 body)
  • consistent section spacing (e.g., 72px desktop / 40px mobile)
  • max 3 button styles (primary, secondary, text)
  • one icon style set (outline OR solid, not mixed)
  • consistent border radius + shadows

Content system (consulting sites)

  • Hero: “Outcome + who it’s for” (not generic)
  • Social proof above the fold (logos optional; testimonials okay)
  • Services: outcome-oriented, not feature lists
  • Process: 3–5 steps, with deliverables
  • FAQ: price anchoring + objections
  • Contact: short form + scheduling link (optional)

Professional imagery (avoid “AI slop”)

  • Use either:
    • a consistent icon set + subtle abstract illustrations, or
    • documentary-style brand photography
  • Avoid mixing 6 different visual styles.

Contact form requirements (minimum viable “professional”)

Regardless of option, enforce:

  • server-side validation (if you control backend)
  • spam protection (honeypot + rate limit + captcha optional)
  • clear success + error states
  • email notification + an internal archive (even if just Formspree inbox)

Suggested fields

  • Name
  • Email
  • Company (optional)
  • Message
  • “What do you need help with?” (dropdown)
  • Honeypot hidden field

“AI prompt contract” (give this to Claude Code / Codex)

Use this as the default instruction block for the agent:

Agent rules

  1. Do not change the build system unless asked.
  2. All edits must keep design consistent with the template.
  3. Prefer modifying brand.config.json and content files over rewriting components.
  4. Contact form must be implemented using the selected method and tested locally.
  5. No broken links, no placeholder lorem ipsum.
  6. Run the repo checks (build + lint + link check) before opening the PR.

Deliverable

  • A PR with:
    • finished pages
    • form working
    • updated README describing deploy + form setup
    • screenshots (optional)

Hosting decision: Cloudflare Pages vs Netlify vs AWS

Cloudflare Pages

Best for: simple infra + global edge + easy Git deploy; add Functions when needed.
Refs: Pages Functions docs and form tutorials above.

Netlify

Best for: easiest integrated forms workflow.
Ref: Netlify Forms setup docs above.

AWS (S3 + CloudFront)

Best for: you want maximum control + enterprise alignment.
Static hosting is confirmed possible on S3.
Ref: Amazon S3 static website hosting docs. https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteHosting.html

Implementation blueprint (what you do next)

  1. Pick your base template (Astro consulting/agency theme).
  2. Create site-template-consulting-astro repo with brand tokens + components.
  3. Decide contact form default:
    • Default A: Formspree (fast)
    • Default B: Pages Functions + MailChannels (control)
  4. Add CI checks (build, lint, link-check).
  5. Standardize your PR review checklist.
  6. Start shipping client sites by cloning the template repo.

Launch checklist (copy/paste per client)

  • DNS points to hosting (Cloudflare/Netlify/AWS)
  • SSL enabled
  • Analytics installed
  • SEO: title/description set per page
  • Sitemap + robots.txt
  • Contact form tested end-to-end
  • Email notifications confirmed
  • 404 page exists
  • Performance pass (basic Lighthouse run)
  • Backup/rollback: tags or releases in Git

Notes for Solanasis-style sites

Your brand vibe (“authentic/raw but professional”) works best when you:

  • keep visuals restrained (1 accent color)
  • use sharp, specific copy (outcomes + proof)
  • show deliverables (audit reports, DR test results, migration plans)
  • avoid overly “SaaS-y” gradients and stock-corporate photos

Graph View

Backlinks