Site Builder Workflow

Automated preview site generation with AI enhancement

Triggers

Positive Reply in #instantly

Ripper monitors #instantly channel. When a lead replies positively ("interested", "tell me more"), workflow starts automatically.

Tyler Says Go

"Build a preview for [website]" - Ripper starts immediately. No approval needed.

Workflow Steps

1
Screenshot & Brand Analysis
AI

Logo-First Analysis: The logo dictates everything.

  • Screenshot homepage and key pages
  • Analyze logo type: Script/Cursive, Bold Sans, Serif, Industrial
  • Extract colors directly from logo
  • Determine brand vibe: Warm/friendly vs Corporate vs Technical
Brand Vibe Detection
  • Script Logo: Warm, personal, pill buttons, soft shadows, cream backgrounds
  • Bold Industrial: Sharp edges, high contrast, structured grids, dark colors
  • Modern Minimal: Lots of whitespace, monochrome, subtle hover states
2
Scrape Content & Extract Images
Auto

Pull everything usable from their existing site:

  • Business name, phone, email, address
  • Services offered (parse from site content)
  • Existing reviews (Google, Yelp, BBB)
  • Logo (high-res)
  • Hero/banner images
  • Team photos, truck photos, project photos
  • Service areas / locations
  • License numbers, certifications
3
Clone & Deep Customize
AI Magic

Not just config - actual code-level transformation:

Deep Customization (5 Levels)
  • L1 Config: business.ts content, colors
  • L2 Components: Button shapes, card styles, input fields
  • L3 Layout: Hero style, section backgrounds, grid vs list
  • L4 Typography: Heading weights, spacing, line heights
  • L5 Polish: Hover effects, transitions, animations

Goal: Would a human say "this looks custom" not "this is a template"?

4
Deploy (Fully Automated)
Auto
  • Push to GitHub → Vercel auto-deploys
  • Cloudflare API: Add CNAME record automatically
  • Vercel API: Add custom domain automatically
  • SSL issued automatically
  • Live at: [slug].21preview.com
Cost: $0
  • Cloudflare DNS: Free
  • Vercel Hobby: Free (50 domains/project)
  • Zero manual steps - all API calls
5
Notify & Update CRM
Auto
  • DM Tyler: "Built preview for [Company] → [link]"
  • Update Zoho lead with preview URL
  • Create follow-up task (send preview to lead)
  • Log to daily notes
Current Status
Template repo ready
Logo-first brand analysis
Deep customization workflow documented
Image extraction step added
Move 21preview.com DNS to Cloudflare
Cloudflare API token
Vercel API token
Auto-deploy pipeline
Test Build: Standard Plumbing OC

Source: standardplumbingoc.com

Logo Type: Script/Cursive → Warm, friendly brand

Status: Local build at client-sites/standard-plumbing-oc/

Changes Applied: