Website Build Directive

Value: $7,500 Timeline: 5-7 days Tools: Google Antigravity, React/Tailwind, Vercel/Netlify

Purpose

Build a complete, conversion-optimized website using the StoryBrand framework and AI-assisted development in Antigravity. Every website follows the same proven structure but is customized to the client's brand and services.

Inputs

Input	Source	Required
CLIENT.md	Client folder	Yes
Brand visuals	`assets/visuals/`	Yes
Logo files	Client	Yes
Domain access	Client	Yes
Hosting decision	Client	Yes

Deliverables

Page	Purpose
Homepage	StoryBrand structure, primary conversion
About	Guide positioning, authority building
Services (5+)	Individual service pages, SEO-optimized
Contact	Booking/inquiry, location info
Blog	Content hub (infrastructure)
Legal	Privacy policy, terms

Technical Deliverables

Mobile-responsive design
Page speed <3 seconds
Schema markup (LocalBusiness, FAQ, Service)
Analytics integration
Form integration (GHL)
Booking widget integration

Homepage Structure (StoryBrand)

Above the Fold (Hero)

┌─────────────────────────────────────────────┐
│  HEADER: Logo | Nav | Phone | CTA Button    │
├─────────────────────────────────────────────┤
│                                             │
│  HEADLINE: Clear value proposition          │
│  (What they get + Who it's for)             │
│                                             │
│  SUBHEAD: Elaborate on the benefit          │
│                                             │
│  [PRIMARY CTA]    [SECONDARY CTA]           │
│                                             │
│  HERO IMAGE: Aspirational outcome           │
│                                             │
└─────────────────────────────────────────────┘

Copy Formula:

Headline: "Get [Result] Without [Pain Point]"
Subhead: "We help [target customer] achieve [outcome] through [method]"
Primary CTA: Direct action ("Schedule Consultation")
Secondary CTA: Transitional ("Learn More" or lead magnet)

Section 2: Problem/Stakes

┌─────────────────────────────────────────────┐
│  "Are you experiencing..."                  │
│                                             │
│  [Problem 1]  [Problem 2]  [Problem 3]      │
│                                             │
│  Short paragraph on internal problem        │
│  (How it makes them FEEL)                   │
│                                             │
└─────────────────────────────────────────────┘

Section 3: Guide Introduction

┌─────────────────────────────────────────────┐
│  "We understand..."                         │
│                                             │
│  Empathy statement                          │
│                                             │
│  IMAGE          AUTHORITY CREDENTIALS       │
│  (Team/Founder) - Years experience          │
│                 - Certifications            │
│                 - Results delivered         │
│                                             │
└─────────────────────────────────────────────┘

Section 4: The Plan (3 Steps)

┌─────────────────────────────────────────────┐
│  "How It Works"                             │
│                                             │
│  ┌──────┐    ┌──────┐    ┌──────┐          │
│  │  1   │    │  2   │    │  3   │          │
│  │ Step │    │ Step │    │ Step │          │
│  │ Name │    │ Name │    │ Name │          │
│  └──────┘    └──────┘    └──────┘          │
│                                             │
│  [CTA BUTTON]                               │
│                                             │
└─────────────────────────────────────────────┘

Section 5: Services Overview

┌─────────────────────────────────────────────┐
│  "Our Services"                             │
│                                             │
│  ┌─────────┐ ┌─────────┐ ┌─────────┐       │
│  │ Service │ │ Service │ │ Service │       │
│  │  Image  │ │  Image  │ │  Image  │       │
│  │  Name   │ │  Name   │ │  Name   │       │
│  │  Brief  │ │  Brief  │ │  Brief  │       │
│  │ [More]  │ │ [More]  │ │ [More]  │       │
│  └─────────┘ └─────────┘ └─────────┘       │
│                                             │
└─────────────────────────────────────────────┘

Section 6: Success (Transformation)

┌─────────────────────────────────────────────┐
│  "Imagine..."                               │
│                                             │
│  Success story / transformation narrative   │
│                                             │
│  TESTIMONIALS                               │
│  ┌─────────────────────────────────────┐   │
│  │ "Quote from happy customer..."       │   │
│  │  - Name, Title                       │   │
│  └─────────────────────────────────────┘   │
│                                             │
│  ★★★★★  Google Rating | XX Reviews         │
│                                             │
└─────────────────────────────────────────────┘

Section 7: Failure (Stakes)

┌─────────────────────────────────────────────┐
│  "Don't let [problem] continue..."          │
│                                             │
│  Brief paragraph on what happens if they    │
│  don't act (subtle, not fear-mongering)     │
│                                             │
└─────────────────────────────────────────────┘

Section 8: Final CTA

┌─────────────────────────────────────────────┐
│  "Ready to [get result]?"                   │
│                                             │
│  [LARGE PRIMARY CTA BUTTON]                 │
│                                             │
│  "Or call us: (XXX) XXX-XXXX"              │
│                                             │
└─────────────────────────────────────────────┘

┌─────────────────────────────────────────────┐
│  Logo                                       │
│                                             │
│  NAP (Name, Address, Phone)                 │
│  Hours of Operation                         │
│                                             │
│  Quick Links | Services | Legal             │
│                                             │
│  Social Icons                               │
│                                             │
│  © 2025 Business Name. All rights reserved. │
└─────────────────────────────────────────────┘

Service Page Structure

Each service page follows this template:

1. HERO
   - H1: [Service Name] in [Location]
   - Subhead: Key benefit
   - CTA button
   - Hero image (service-specific)

2. WHAT IT IS
   - Clear explanation of the service
   - Who it's for
   - What to expect

3. BENEFITS (not features)
   - Benefit 1 with icon
   - Benefit 2 with icon
   - Benefit 3 with icon

4. PROCESS
   - Step-by-step what happens
   - Timeline expectations
   - Before/after (if applicable)

5. PRICING (if applicable)
   - Starting at pricing
   - What's included
   - Financing options

6. FAQ SECTION
   - 5-7 questions (use FAQ schema)
   - Address common objections
   - Include pricing questions

7. RELATED SERVICES
   - Cross-link to complementary services

8. CTA
   - Strong call to action
   - Multiple contact methods

Technical Specifications

Performance

Lighthouse score: 90+ on all metrics
First Contentful Paint: <1.5s
Largest Contentful Paint: <2.5s
Cumulative Layout Shift: <0.1

SEO

Unique title tag per page (60 chars)
Unique meta description per page (155 chars)
H1 on every page (keyword-optimized)
Image alt text on all images
Internal linking structure
XML sitemap
robots.txt configured

Schema Markup

{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "[Business Name]",
  "image": "[Logo URL]",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "[Street]",
    "addressLocality": "[City]",
    "addressRegion": "[State]",
    "postalCode": "[ZIP]"
  },
  "telephone": "[Phone]",
  "openingHours": "[Hours]",
  "priceRange": "$$"
}

Integrations

Google Analytics 4
Google Tag Manager
Facebook Pixel
GHL forms (webhook)
Booking widget
Live chat (if applicable)

Antigravity Development Workflow

GEMINI.md Rules for Website Builds

# Website Build Rules

## Stack
- React 18+
- Tailwind CSS
- Framer Motion (animations)
- React Hook Form (forms)
- Vercel/Netlify deployment

## Component Structure
- Use functional components
- Keep components small and focused
- Separate concerns (UI, logic, data)

## Styling
- Use Tailwind utility classes
- Follow mobile-first approach
- Create consistent spacing scale
- Use CSS variables for brand colors

## Performance
- Lazy load images below fold
- Use next/image or optimized images
- Minimize JavaScript bundle
- Implement proper caching

## Accessibility
- Semantic HTML
- ARIA labels where needed
- Keyboard navigation
- Color contrast compliance

Copy Templates by Industry

Medical Spa Headlines

"Look as Vibrant as You Feel—Without Surgery"
"Subtle Enhancement, Natural Results"
"Expert Care. Personalized Plans. Real Results."

Cleaning Service Headlines

"Come Home to Clean"
"Your Weekend, Returned"
"A Spotless Home Without Lifting a Finger"

HVAC/Duct Cleaning Headlines

"Breathe Easier. Save Money. Stay Safe."
"See What's Hiding in Your Ducts"
"Clean Air for Your Family"

Restoration Headlines

"When Disaster Strikes, We Take Control"
"From Crisis to Normal—Fast"
"24/7 Emergency Response. 25 Years of Trust."

Carpet Cleaning Headlines

"Carpets So Clean You'll Walk Barefoot"
"The Clean You Can Feel"
"Fresh From the Fibers Up"

Process

Step 1: Planning (Day 1)

Review CLIENT.md and BrandScript
Gather all assets (visuals, logo, copy)
Create sitemap and page list
Write homepage copy
Client approval on wireframe

Step 2: Build Foundation (Day 2-3)

Set up project in Antigravity
Configure GEMINI.md rules
Build component library
Create homepage structure
Implement navigation

Step 3: Build Pages (Day 3-5)

Homepage complete
About page
Service pages (1 per day)
Contact page
Blog infrastructure

Step 4: Polish (Day 5-6)

Add all imagery
Implement animations
Mobile optimization
Speed optimization
Form testing

Step 5: SEO & Launch (Day 6-7)

Schema markup
Meta tags
Analytics setup
Final testing
Deploy
Submit to Search Console

Quality Checklist

Content

All BrandScript elements present on homepage
Clear CTA above the fold
Contact info in header and footer
All services have dedicated pages
FAQ sections with schema

Design

Technical

SEO

Learnings

Update as you discover what works.

Changelog

Date	Change	Author
2025-12-04	Created directive	Claude

Purpose​

Inputs​

Deliverables​

Technical Deliverables​

Homepage Structure (StoryBrand)​

Above the Fold (Hero)​

Section 2: Problem/Stakes​

Section 3: Guide Introduction​

Section 4: The Plan (3 Steps)​

Section 5: Services Overview​

Section 6: Success (Transformation)​

Section 7: Failure (Stakes)​

Section 8: Final CTA​

Footer​

Service Page Structure​

Technical Specifications​

Performance​

SEO​

Schema Markup​

Integrations​

Antigravity Development Workflow​

GEMINI.md Rules for Website Builds​

Copy Templates by Industry​

Medical Spa Headlines​

Cleaning Service Headlines​

HVAC/Duct Cleaning Headlines​

Restoration Headlines​

Carpet Cleaning Headlines​

Process​

Step 1: Planning (Day 1)​

Step 2: Build Foundation (Day 2-3)​

Step 3: Build Pages (Day 3-5)​

Step 4: Polish (Day 5-6)​

Step 5: SEO & Launch (Day 6-7)​

Quality Checklist​

Content​

Design​

Technical​