Why We Are Changing

The old website delivery model was built around human specialists: one person for project management, one for content, one for design, one for development, one for launch. Each handoff between specialists was a potential point of failure — a dropped ball, a miscommunication, a delay. The client experienced this as slow and inconsistent. Internally, it meant no single person owned the outcome.

AI tools have made the specialist model obsolete for the type of websites our trades company clients need. A well-prompted AI agent can produce a complete, high-performing, audit-passing website in hours. The human role shifts from doing the work to directing the AI, reviewing the output, and owning the client relationship.

What We Are Building Toward

A system where one Onboarding Specialist takes a client from signed contract to live website without involving any other internal team member for routine builds. Client Success Quarterbacks handle all ongoing maintenance and content updates using AI tools, without needing a developer. The hosting infrastructure is fully managed — no servers to maintain, no SSL certificates to renew, no caching layers to configure.

The Five Non-Negotiable Outcomes

• Every website we deliver passes four specific audits: W3C validation, WAVE WebAIM accessibility, PageSpeed Insights (100 on both mobile and desktop), and AI Friendliness.
• One Onboarding Specialist runs the full build-to-launch workflow independently.
• Client Success Quarterbacks handle all routine maintenance without developer involvement.
• The hosting infrastructure is zero-maintenance — no servers, no SSL management, no caching fires.
• The monthly cost of hosting and infrastructure per client site is near zero, preserving margin.

How the Stack Connects

The flow is linear and automatic: Manus builds the site files → Onboarding Specialist uploads files to GitHub → GitHub triggers Cloudflare Pages to deploy → Cloudflare Pages serves the site to visitors with automatic SSL. When a Quarterback makes an update, the same flow repeats automatically. No manual deployment step. No server to touch. No SSL to renew.

Why Plain HTML Makes These Achievable

The static HTML + Cloudflare Pages architecture is the only approach that makes all four audits achievable consistently and by default. WordPress makes PageSpeed 100 a constant battle — plugins, themes, and database queries all add weight. React and Vue frameworks render in the browser using JavaScript, which delays content appearance and tanks mobile PageSpeed scores.

On a plain HTML site built by Manus and hosted on Cloudflare Pages, PageSpeed 100 is the starting point, not something to fight for. The HTML is valid by construction. Accessibility is built into the prompt requirements. AI Friendliness files are generated automatically. The architecture works with the audits, not against them.

Business Basics

• Business name — exactly as it should appear on the site
• Primary phone number
• Primary email address
• Physical address (if applicable — some trades companies are service-area-only)
• Service area — cities, counties, or radius
• Business hours — every day of the week
• Year established (if they want to feature it)
• License numbers (if applicable and they want to display them)

Services

• Complete list of services offered — be specific. "HVAC" is not enough; we need "AC installation, AC repair, furnace installation, furnace repair, heat pump installation."
• Primary service — the one they most want to rank for and generate leads from (this goes first in the prompt)
• Any services they do NOT want featured — sometimes companies are phasing out certain work

Brand

• Logo file — PNG or SVG with transparent background preferred
• Brand colors — hex codes if known; if not, describe the colors and we will match from the logo
• Any fonts they use (if known)
• Tone preference: professional and formal, friendly and approachable, bold and confident, etc.

Content

• About the company — 2–3 paragraphs or bullet points: who they are, how long they've been in business, what makes them different
• Owner or team bio (if they want to feature the team)
• Awards, certifications, or affiliations they want to highlight
• Customer testimonials — 3–5 preferred; if they don't have them written, we pull from their Google reviews
• Photos — team photos, truck photos, job site photos, before/after photos — the more the better

Technical

• Current website URL (if they have one — we use it as a reference)
• Google Business Profile URL (if they have one)
• Social media profiles — Facebook, Instagram, etc.
• Any third-party tools that need to be integrated (booking software, review widgets, chat tools)

Goals

• Primary goal of the website — generate phone calls, form submissions, drive foot traffic, etc.
• Any specific pages they want beyond the standard set (standard: Home, Services, About, Contact)
• Anything they specifically like or dislike about their current website

Standard Build Prompt

# WEBSITE BUILD REQUEST — [BUSINESS NAME]

You are building a complete, production-ready website for a client of Dotcom Design,
a professional web and digital marketing agency. This website must meet the highest
standards of performance, accessibility, code quality, and visual design.
Every requirement in this prompt is non-negotiable unless explicitly marked optional.

---

## SECTION 1: BUSINESS INFORMATION

Business name: [FULL LEGAL OR TRADE NAME AS IT SHOULD APPEAR ON THE SITE]
Business type: [e.g., "Residential and commercial HVAC company", "Plumbing contractor"]
Tagline or slogan: [IF THEY HAVE ONE — or write "none"]
Primary phone: [PHONE NUMBER — formatted as (XXX) XXX-XXXX]
Primary email: [EMAIL ADDRESS]
Physical address: [FULL ADDRESS — or "service-area only, no physical storefront"]
Service area: [LIST ALL CITIES, COUNTIES, OR REGIONS SERVED — be specific]
Business hours:
  Monday: [HOURS or "Closed"]
  Tuesday: [HOURS or "Closed"]
  Wednesday: [HOURS or "Closed"]
  Thursday: [HOURS or "Closed"]
  Friday: [HOURS or "Closed"]
  Saturday: [HOURS or "Closed"]
  Sunday: [HOURS or "Closed"]
Year established: [YEAR — or "unknown"]
License number(s): [IF APPLICABLE — or "none"]
Google Business Profile URL: [FULL URL — or "unknown"]
Social media:
  Facebook: [URL or "none"]
  Instagram: [URL or "none"]
  LinkedIn: [URL or "none"]
  YouTube: [URL or "none"]
Payment methods: [e.g., "Visa, Mastercard, Cash, Check" — or "unknown"]

---

## SECTION 2: SERVICES

Primary service (most important for SEO and lead generation):
[SERVICE NAME]: [2–3 sentence description — who it is for, what makes it notable]

Additional services:
[SERVICE NAME]: [1–2 sentence description]
[SERVICE NAME]: [1–2 sentence description]
[ADD AS MANY AS NEEDED]

Services NOT to feature: [LIST ANY — or "none"]

---

## SECTION 3: BRAND & VISUAL IDENTITY

Logo: [Attach the file — or "no logo, create a text-based wordmark"]
Primary color: [HEX CODE — or describe: "dark navy blue"]
Secondary color: [HEX CODE — or describe]
Accent color: [HEX CODE — or "none"]
Background preference: ["White", "Light gray", "Dark", or describe]
Visual tone: [e.g., "Bold and confident", "Clean and professional", "Warm and approachable"]
Typography preference: [e.g., "Modern sans-serif", "Classic serif", "No preference"]
Reference sites (visual inspiration): [URLs — or "none"]

---

## SECTION 4: PAGES REQUIRED

Build the following pages. Each page must be a separate HTML file.

Home (index.html):
  - Sticky header with logo, navigation, and phone number (tap-to-call on mobile)
  - Hero section: headline, subheadline, primary CTA button, hero image
  - Trust bar: years in business, license number, service area, key differentiator
  - Services grid: cards for each service with icon, name, and 1-sentence description
  - About/Why Choose Us: 2–3 paragraphs + photo
  - Photo gallery: 6–8 images in a responsive grid
  - Testimonials: 3–5 customer reviews with name and star rating
  - Service area section: list of cities/counties served
  - CTA band: bold call-to-action with phone number and form link
  - Contact section: phone, email, address/service area, embedded contact form
  - Footer: logo, nav links, contact info, social links, copyright, Privacy/Terms links

Services page (services.html):
  - Individual section for each service with heading, description, and CTA

About page (about.html):
  - Company story, founding year, mission
  - Team section with photos and bios (if provided)
  - Certifications, awards, affiliations

Contact page (contact.html):
  - Phone number (tap-to-call), email, address/service area
  - Full contact form (Formspree)
  - Google Maps embed (if physical address provided)
  - Business hours

Privacy Policy page (privacy.html): Generate standard privacy policy
Terms of Service page (terms.html): Generate standard terms of service
[ANY ADDITIONAL PAGES]: [DESCRIBE]

---

## SECTION 5: CONTENT

About the company:
[PASTE 2–3 PARAGRAPHS OR BULLET POINTS — or write "generate from business info above"]

Team bios:
[PASTE BIOS — or "none"]

Testimonials:
[PASTE 3–5 REVIEWS WITH CUSTOMER NAME — or "pull from Google reviews if available"]

FAQs:
[PASTE QUESTIONS AND ANSWERS — or "generate 5 relevant FAQs for this business type"]

---

## SECTION 6: PHOTOGRAPHY

Attach all provided photos. For each photo, note what it shows.
If no photos are provided, use high-quality placeholder images relevant to the industry.
All images must be delivered in WebP format, under 200KB each.
Every image must have a descriptive alt attribute.

---

## SECTION 7: CONTACT FORM

Formspree endpoint: [PASTE FORMSPREE FORM ID — or "use placeholder"]
Form fields required:
  - Full Name (required)
  - Phone Number (required)
  - Email Address (required)
  - Service Needed (dropdown: [LIST SERVICES])
  - Message (optional)
  - Preferred Contact Method (radio: Phone / Email)
Success message: "Thank you! We'll be in touch within 1 business day."
Error message: "Something went wrong. Please call us directly at [PHONE]."
All fields must have visible labels and ARIA attributes.

---

## SECTION 8: TECHNICAL REQUIREMENTS (NON-NEGOTIABLE)

CODE ARCHITECTURE:
- Plain HTML5, CSS3, and vanilla JavaScript ONLY
- No frameworks (no React, Vue, Angular, Bootstrap, Tailwind)
- No build tools (no Webpack, Vite, npm)
- All CSS in a single external stylesheet (styles.css)
- All JavaScript in a single external file with defer attribute (main.js)
- No inline styles anywhere in the HTML
- CSS custom properties (variables) for all colors, fonts, and spacing
- 8-point spacing grid: all spacing values must be multiples of 8px

TYPOGRAPHY SCALE (implement as CSS variables):
- --text-xs: 0.75rem
- --text-sm: 0.875rem
- --text-base: 1rem
- --text-lg: 1.125rem
- --text-xl: 1.25rem
- --text-2xl: 1.5rem
- --text-3xl: 1.875rem
- --text-4xl: 2.25rem
- --text-5xl: 3rem

RESPONSIVE BREAKPOINTS:
- Mobile: 0–767px
- Tablet: 768px–1023px
- Desktop: 1024px+
- All layouts must work flawlessly at every breakpoint
- No horizontal scrolling on any device

PERFORMANCE (PageSpeed 100 required — mobile AND desktop):
- All images in WebP format with explicit width and height attributes
- Hero image: loading="eager" fetchpriority="high"
- All other images: loading="lazy"
- No render-blocking scripts or stylesheets
- Fonts loaded with preconnect and display=swap
- Total page weight under 500KB
- No unused CSS
- No console errors

ACCESSIBILITY (WAVE zero errors required):
- Every image has descriptive alt text (decorative images use alt="")
- One h1 per page, logical heading hierarchy (h1 → h2 → h3)
- All form fields have visible label elements
- All color combinations pass WCAG AA contrast ratio (4.5:1 for normal text)
- All interactive elements are keyboard-navigable
- Skip-to-content link at the top of every page
- html lang="en" on every page
- ARIA roles and labels on navigation and interactive components

SEO & AI FRIENDLINESS:
- Unique title tag on every page (under 60 characters)
- Unique meta description on every page (150–160 characters)
- Open Graph tags on every page
- Canonical tag on every page
- JSON-LD LocalBusiness schema on every page with all available business data
- sitemap.xml listing all pages with lastmod dates
- robots.txt allowing all crawlers
- llms.txt in the root with complete business information in plain text

FILES TO DELIVER:
- index.html, services.html, about.html, contact.html, privacy.html, terms.html
- css/styles.css
- js/main.js
- images/ folder with all WebP images
- sitemap.xml
- robots.txt
- llms.txt
- All files in a single ZIP named: [business-name-slug]-website.zip

---

## SECTION 9: REFERENCE

Existing website: [CURRENT URL — or "no existing site"]
Additional notes: [SPECIFIC REQUESTS, THINGS TO AVOID, CLIENT PREFERENCES]

After the First Build: Review Checklist

When Manus delivers the first build, work through this checklist before running the audits:

Content Review

• All business information is accurate — phone, address, hours, services
• The copy sounds like the client's business, not generic
• All testimonials are included and attributed correctly
• The logo is displayed correctly in the header and footer
• Brand colors are applied consistently throughout

Visual Review

• The site looks professional and polished on a desktop browser
• The site looks professional and polished on mobile (use browser dev tools to simulate)
• Images are high quality and relevant — no generic stock photos if client provided real photos
• The contact form is visible and prominent on the home page
• The phone number is clickable on mobile (tap-to-call)

Technical Review

• Run W3C validator — must show zero errors, zero warnings
• Run WAVE WebAIM — must show zero errors
• Run PageSpeed Insights — must show 100 on both mobile and desktop
• Run AI Friendliness checker — must pass
• Confirm the llms.txt file exists and contains accurate business information
• Confirm the sitemap.xml exists and lists all pages
• Confirm the robots.txt exists and is correctly configured
• Submit the contact form — confirm it delivers to the correct email address
• Click the phone number on mobile — confirm it initiates a call

Routine Content Updates

When a client requests a content change — a new phone number, updated service area, revised copy, a new photo, a new team member — the Quarterback handles it using Manus:

1. Open Manus and provide the context: "This is the website for [CLIENT NAME]. The client has requested the following change: [DESCRIBE THE CHANGE]. Here are the current site files: [ATTACH OR REFERENCE THE FILES FROM GITHUB]."
2. Manus makes the edit and produces updated files.
3. The Quarterback reviews the change visually — does it look right? Is the information accurate?
4. Upload the updated files to the client's GitHub repository. Cloudflare Pages automatically detects the change and redeploys the live site within about 60 seconds.
5. Confirm the change is live by visiting the site. Notify the client.

Significant Updates

When a client requests a larger change — a new page, a redesigned section, a new service added, a seasonal promotion — the Quarterback follows the same process but with a more detailed prompt to Manus and a more thorough review before deploying. After deploying, re-run the four audits to confirm the update did not introduce any issues.

When to Escalate to the Tech Product Owner

The Quarterback escalates when:

• A site is down and the cause is not immediately obvious (UptimeRobot alert fired)
• A domain is not resolving correctly after a DNS change
• A form is not delivering submissions
• The client requests a feature that requires server-side logic (booking system, member portal, custom API integration)
• Any issue that the Quarterback cannot resolve within 30 minutes of investigation

The Tech Product Owner either resolves the issue directly or deploys the on-call contractor for genuinely complex technical work.

What Quarterbacks Do Not Need to Do

Accounts to Create (One-Time)

Internal Setup Tasks (One-Time)

• GitHub organization: Create a GitHub organization account for the agency. All client repositories will live inside this organization.
• Cloudflare account structure: Create a single Cloudflare account for the agency. Set up team member access so Quarterbacks can deploy updates without needing the account owner's credentials.
• Formspree account: Set up a Formspree agency account. Configure a standard form template that can be applied to each new site at launch.
• UptimeRobot account: Set up UptimeRobot and add all existing client sites as monitors. This is a one-time task the Tech Product Owner completes during initial setup.
• Standard file structure: Define and document the standard file structure for every client site so any Quarterback can pick up any client's files and understand them immediately.
• Onboarding brief template: Add the client brief template to the project management system so every new client onboarding call captures the same information in the same format.

Skills the Team Needs

Monthly Infrastructure Costs: Old vs. New

Per-Client Hosting Revenue

We charge clients a monthly hosting and maintenance fee. The recommended range for trades company clients is $75–$150/month depending on the level of support included. Our cost per site on the new infrastructure is effectively $0 (Cloudflare Pages free tier) plus a small share of the Formspree and UptimeRobot costs — approximately $0.10–$0.50 per site per month.

New Clients Going Forward

All new clients are built on the new stack from day one: Manus + GitHub + Cloudflare Pages. No exceptions for standard trades company websites. The only reason to deviate is if a client has a genuinely complex technical requirement (e-commerce, member portal, custom API integration) that requires a server-side solution.

Migration Priority Order

Track 1 — Sales & Business Development

The sales function exists to bring new clients in the door and introduce them to the right people. In the near term this is primarily the owner, supported by a part-time or fractional BD person as volume grows. Sales ends at the signed contract and the introduction to Onboarding — it does not manage the project, stay on the account, or get pulled into fulfillment problems. Clean separation here protects the owner’s time and keeps the sales motion moving. The referral engine is the most important sales asset: every client who has a great experience with their Quarterback is a potential referral source.

Track 2 — Onboarding & Fulfillment

The current chain — PM coordinates with content writer, who coordinates with designer, who coordinates with dev team, who coordinates with head developer for go-live — is a relay race where the baton gets dropped at every exchange. The new model collapses this entire chain into a single role: the Onboarding & Fulfillment Specialist. This person takes a client from signed contract to go-live, handling every step of the build process using AI tools as their execution engine.

The Onboarding Specialist’s job ends at go-live. Once the site is live, forms are working, SSL is confirmed, and the domain is resolving correctly, the account is handed off to the appropriate Client Success Quarterback. This handoff should be a formal, documented moment — a structured transition call or email that introduces the client to their Quarterback and sets expectations for the ongoing relationship.

Track 3 — Client Success Quarterbacks

This is the heart of the ongoing client relationship. Not all clients need the same quarterback. There are two tiers — see the Quarterbacks page for full detail on each tier, the graduation model, and the quarterback identity concept.

Track 4 — Product Owners (Internal Centers of Excellence)

Product Owners are not client-facing roles. They do not manage accounts or attend client calls. What they own is the quality and methodology of a specific service across every client in the business. This is the structural answer to the problem of nobody owning on-page SEO, nobody holding the offshore team accountable, and quality being inconsistent because there is no single standard.

Track 5 — Technical Infrastructure & Hosting

This track is currently causing the most operational pain. The root cause: approximately 286 client sites across three different technology stacks (Duda, WordPress, Next.js + Payload) on self-managed VPS infrastructure. Self-managed VPS hosting requires a dedicated systems administrator to be maintained safely at scale. The goal is to get out of the infrastructure management business while keeping the hosting revenue. The platform strategy in the Tech Stack section resolves this entirely.

Tier A — The Foundation Quarterback

Tier A Quarterbacks manage clients who are not doing active marketing — website-only clients, AI services clients, automation clients, and clients simply maintaining their digital presence. Their core competencies are relationship management, account health, basic website support, and AI tool fluency.

When something breaks on a client’s website, the Tier A Quarterback is the first responder. Because the platform strategy is designed to minimize infrastructure chaos, most issues they encounter will be content changes, form updates, page additions, or minor design tweaks — all of which an AI-fluent generalist can handle using Manus. For anything genuinely technical, they escalate to the Tech Product Owner.

The Tier A Quarterback does not need a marketing background. They need to be organized, warm, responsive, and genuinely good at making clients feel taken care of. Each Tier A Quarterback manages a pod of roughly 20–30 clients, depending on service complexity.

Tier B — The Marketing Pedigree Quarterback

Tier B Quarterbacks manage clients who are actively investing in marketing — SEO, paid media, content, or some combination. These clients have more at stake, more questions, and more need for strategic guidance. The Tier B Quarterback is not a middleman — they are the strategist, the executor, and the relationship owner all in one. They are on calls directly with the client and carry the strategy personally.

Their core competencies are paid media management (primarily Google Ads, Meta as secondary), SEO strategy and on-page execution, performance reporting, and client communication. They use AI tools to handle execution-heavy work — AI-assisted keyword research, AI-generated content drafts, automated reporting dashboards — so their time is spent on strategy and relationship rather than manual task execution. Each Tier B Quarterback manages a smaller pod of roughly 10–15 clients.

The Graduation Model

Clients do not stay in one tier forever. A website-only client who decides to invest in SEO and Google Ads graduates from a Tier A to a Tier B Quarterback. This transition is framed to the client not as a handoff but as a promotion — they are moving to a specialist who is specifically equipped to help them grow. Done well, this graduation moment is also a natural upsell conversation. The Tier A Quarterback becomes a feeder for Tier B revenue without any additional sales effort.

The Quarterback Identity Concept

Trades business owners are relationship-driven buyers. They want to know who they are working with, what that person is good at, and why they should trust them. Consider giving each Quarterback a visible identity: a specialty label, a short bio, and optionally a CliftonStrengths or similar profile. A Quarterback who has a name, a face, and a stated specialty (“I work specifically with HVAC and plumbing companies on their Google presence”) is not just a vendor — they are a person. That distinction matters enormously in client retention.

This could manifest as a simple profile on your website, a personal introduction video sent at onboarding, or a physical card mailed to new clients. The investment is small; the relationship signal is large.