GHL Site Builder Template

A Claude Code workspace for building production-ready client websites and funnel pages for GoHighLevel (GHL). This template generates clean HTML/CSS/JS code blocks that paste directly into GHL's custom code elements -- no external build tools, no dependencies, no deployment pipeline.

---

Features

• Client profile system -- Per-client brand, assets, and GHL resource IDs stored in structured JSON files
• Per-offer builds -- Each client can have multiple campaigns. Each offer has its own brief and blueprint
• Agent-driven workflow -- Coordinator, code-reviewer, QA, research, and explorer agents work together on every build
• Skills library -- Specialized tools for brand extraction, SEO metadata, emoji auditing, mobile review, and copy conversion
• Design system -- Built-in standards for warm darks, opacity text, 3-tier shadows, fluid typography, and responsive layout
• Embed reliability -- Best-practice patterns for GHL forms, calendars, and webhook-firing widgets that actually work
• Error capture -- /0-log-error captures build failures. Recurring patterns get promoted to active rules.

---

Quick Start

1. Clone the repo

git clone https://github.com/your-org/site-builder-template.git my-ghl-builder
cd my-ghl-builder

2. Create a client profile

cp -r clients/_template clients/your-client-slug

Fill in brand.json, ghl-resources.json, and assets.md for your client. See clients/_template/ for the full schema.

3. Connect your GHL MCP server

cp .mcp.json.example .mcp.json

Edit .mcp.json with your GHL MCP server URL. This gives Claude access to your GHL forms, calendars, and media.

4. Start Claude Code and build

claude

Then in the chat:

Build a landing page for [Client Name] for their [Offer Name] campaign.

Output lands in output/{client-slug}/{offer-slug}/ as a ready-to-paste code block.

---

File Structure

site-builder-template/
+-- CLAUDE.md                    # Detailed instructions for Claude Code
+-- README.md                    # This file
+-- .mcp.json.example            # Template MCP config
+-- .claude/
|   +-- commands/                # Slash commands (/build-page, /0-log-error, etc.)
|   +-- agents/                  # Sub-agent definitions
|   +-- skills/                  # Project-specific skills
|   +-- errors/                  # Error log and pattern rules
+-- clients/
|   +-- _template/               # Copy this to add a new client
|   +-- {client-slug}/
|       +-- brand.json           # Colors, fonts, logo URLs, voice
|       +-- ghl-resources.json   # Form IDs, calendar IDs, webhook URLs
|       +-- assets.md            # Image library with CDN URLs
|       +-- offers/              # Per-campaign briefs and blueprints
+-- templates/                   # Reusable page section templates
|   +-- hero/
|   +-- form-section/
|   +-- calendar-section/
|   +-- social-proof/
|   +-- faq/
|   +-- cta/
|   +-- footer/
+-- output/                      # Generated code (gitignored)
+-- tasks/
    +-- todo.md
    +-- lessons.md

---

How to Add a New Client

1. Copy the template directory:

   cp -r clients/_template clients/acme-wellness

2. Fill in clients/acme-wellness/brand.json with brand colors, fonts, logo URLs, and GHL location ID.

3. Fill in clients/acme-wellness/ghl-resources.json with form IDs, calendar IDs, and webhook URLs from the GHL account.

4. Fill in clients/acme-wellness/assets.md with available image URLs and descriptions.

5. Create an offer brief under clients/acme-wellness/offers/your-offer/brief.md.

---

How to Build a Page

From a brief (Claude generates the blueprint):

/build-page

Claude will ask for the client and offer, read the brief, generate a blueprint for approval, then build the full page.

From a pre-approved blueprint:

/build-page-from-blueprint

Claude skips straight to building using the blueprint you already wrote.

---

Available Commands

Command	Purpose
/build-page	Build a full landing page from a client brief
/build-page-from-blueprint	Build from a pre-approved blueprint
/1-brainstorm	Brainstorm page structure and copy angles
/2-research	Research client, competitors, or GHL behaviors
/3-build	Build mode -- generate and write code
/4-test	Test embeds, mobile layout, and page behavior
/5-review	Code review with severity ratings
/6-debug	Debug a failing embed or broken layout
/7-scrub	Remove dead code, unused styles, redundancies
/8-harden	Final hardening pass before client delivery
/9-list	List all in-progress and completed builds
/0-log-error	Capture a build error to the error log
/0-error-review	Review error patterns and promote to rules

---

Available Skills

Skill	Purpose
brand-extract	Extracts brand colors, fonts, and voice from a client website URL
gatena-cookbook	Applies conversion copywriting frameworks to page copy
taste-skill	UI/UX design decisions and premium visual polish
emoji-audit	Scans generated code for emoji characters and removes them
ghl-sanitize	Strips full-document tags (DOCTYPE, html, head, body) from output
mobile-audit	Audits pages for mobile responsiveness issues
page-reskin	Applies new brand colors/fonts to an existing page template
seo-meta	Generates complete SEO metadata block (title, description, OG, schema.org)
ghl-popup-relay	Workaround for triggering GHL popup forms from custom code buttons

---

Design System

All generated pages follow a consistent design standard defined in CLAUDE.md:

• Background: warm dark #0a0a0f (not pure black)
• Text opacity: rgba(255,255,255,0.70) body, rgba(255,255,255,0.45) secondary
• Buttons: 8px border radius
• Cards/containers: 8-12px border radius
• Shadows: 3-tier system (subtle lift, card depth, modal/hero)
• Typography: fluid sizing with clamp(), 18px body minimum, 1.6 line height
• Mobile: fully responsive, 44px touch targets, no horizontal scroll at 375px

For full design token reference, see clients/_template/brand.json and the design standards section in CLAUDE.md.

---

License

MIT License. Copyright 2026. See LICENSE for details.