Vibe Coding Client Sites — Agency Guide

Call Summary from a 7FA Coaching Call

1. WordPress to Vibe-Coded Sites — The Full Migration

The main event of the call was a live demo where someone exported a WordPress site and rebuilt it with Claude Code + Astro in real time. They'd been spending days trying to get their site right using template kits. A simpler approach was walked through:

• Export the WordPress site — Tools, Export, All Content
• Drop the export file into a local project folder
• Tell Claude Code: "Keep all the link structure. Turn this into an Astro site."
• Grab a design screenshot from Dribbble (or any site you like) and paste it in as a reference for colors, layout, and style
• Pop it open on localhost and iterate from there

The result? A clean, working site in minutes — after spending over a week trying to do it another way.

Tip: Use the Full Page Screenshot Chrome extension to capture full-page designs as reference images. Claude Code can extract colors, layout patterns, and structure from a single screenshot.

2. CLAUDE.md Files — Your Working Agreement with AI

CLAUDE.md files were explained to the group:

• Think of it as a programmatic README that Claude Code loads into memory on first run
• It's your SOPs for how you want to work within a repository
• Every repository should have one
• It remembers your preferences, conventions, and instructions across sessions

CLAUDE.md is one half of a bigger pattern. Instructions that need flexibility and judgment live in CLAUDE.md. But anything that needs to happen the exact same way every time — data gathering, API calls, file operations — belongs in a script. That two-layer split between deterministic scripts and non-deterministic AI is what makes the whole system reliable.

3. Connecting Vibe-Coded Sites to HighLevel

The big question came up: how do you connect a vibe-coded site back to HighLevel? Two approaches were laid out:

Option A: Embed a HighLevel form (simplest)

Just give Claude Code the embed code and drop it in. The form looks like a HighLevel form and triggers automations normally.

Option B: Private Integration Tokens (native-looking forms)

• Go to Settings, then Private Integrations in HighLevel
• Create a Private Integration Token (PIT) — it's basically an API key
• Give Claude Code your location ID and PIT token
• Now you can build native-looking forms that submit to HighLevel via API

Gotcha: If you go the PIT route, your custom form won't automatically trigger HighLevel automations (because HighLevel doesn't "see" it as its own form). Workaround: have the form submission also add a tag to HighLevel via API, and trigger your automation off that tag instead.

4. Site-Wide Edits — The Paradigm Shift

The concept of site-wide edits was demoed — instead of editing one page at a time, you describe a change and Claude Code updates everything across the site at once:

• "Add a new city (Sioux City) and a new service (lawn care)"
• Claude Code creates city hub pages, service pages, updates navigation, cross-links everything — touching 8+ files simultaneously
• This is the thing agencies struggle with: devs forget to update the main service page link when they create a new sub-page. Claude Code doesn't forget.

5. Hosting — Cloudflare Pages

For hosting vibe-coded sites, the setup shared was:

• Cloudflare Pages — lightweight, free tier, great for static Astro sites
• Wrangler — the CLI tool for deploying to Cloudflare
• Domains can be managed right in Cloudflare
• Each site gets its own GitHub repository
• No database needed for static sites — all the files just live on the hosting

Other options mentioned: Vercel (good for apps with databases like Supabase), but Cloudflare Pages is the go-to for simple client sites.

6. Client Handoff — The Big Question

A critical concern came up: "I don't want to become the bottleneck. When a client leaves, I want to give them something usable."

Options discussed:

• Give them the GitHub repo — they connect their own Claude Code to it
• Give them the local files — "Here's your site, good luck"
• Set up a change request form — clients submit changes through a form, and a pipeline (with AI) processes them behind the scenes

7. The WordPress Debate

The group had a candid conversation about WordPress:

• One member builds custom Gutenberg templates — avoids Elementor because when it breaks, you're stuck waiting on support
• Another member is paying $1,000/month for one-click website templates and wants to replace it
• Multiple people on the call have moved sites off WordPress entirely and are "much happier"
• The general sentiment: "done with WordPress"

8. Quick Hits

• One member is building a schema generator plugin with Claude Code for WordPress SEO clients — automates what used to take 5-10 minutes per page
• Another member has 20+ clients in the fence niche, each using a different CRM — one uses a literal filing cabinet as their CRM
• Screaming Frog was mentioned as a tool for crawling sites when you don't have WordPress admin access
• Prediction: HighLevel will announce some sort of "bring your own site" / vibe coding hosting feature soon

Aha Moments

Tools and Resources Mentioned

• Claude Code — AI coding assistant (the star of the call)
• Astro — lightweight static site framework, great for SEO
• Cloudflare Pages — free hosting for static sites
• Wrangler — CLI for deploying to Cloudflare
• VS Code — code editor that lets you see files alongside the terminal
• Full Page Screenshot — Chrome extension for capturing full-page designs
• Screaming Frog — website crawler for extracting site structure
• HighLevel Private Integration Tokens (PITs) — API keys for connecting custom forms
• CLAUDE.md — instruction file that Claude Code reads on startup
• Dribbble — design inspiration for site screenshots

This summary was generated from a transcription of the live 7FA coaching call audio.