Learning path map
Detailed content
🧬 Cloning system
A beautiful template becomes the source for all clones. Change 6 elements, organize by client, and scale from 1 to 1,000 sites at almost zero marginal cost.
A beautiful website template hosted on GitHub that becomes the source for all clones. Clone the repo and rebrand it for each client.
Building it well once and reusing it is what makes production at scale possible.
Master template · single source · clone repo · rebrand.
A “skill” (reusable structured prompt) that walks through the elements to change, asks questions, requests assets in the right dimensions, and then implements them.
Turns cloning into a guided, repeatable process that’s hard to forget steps in.
Skill · structured prompt · guided questions · Library (Track 5).
Logo · Copy · Trusted brands · Prices · Reviews · Color scheme. Change these 6, and the site becomes a different client's.
Knowing exactly what changes helps you avoid touching what shouldn't change.
Logo · copy · trusted brands · prices · reviews · colors.
70% of one dominant color, 20% and 10% of accents. “If everything stands out, nothing stands out” — that’s why the template is designed so AI knows where to make changes.
A clear ratio makes the clone look professional by changing only the dominant color.
70-20-10 · dominant color · accents · visual hierarchy.
Organize each client in its own folder on your computer. This prevents you from changing the wrong site when you manage many.
Lean file management reduces confusion and silly mistakes at scale.
Folder per client · organization · avoid changing the wrong site.
A custom form (logo + the 6 questions + asset upload) that saves to Supabase via MCP; then the AI “clones the latest submission.”
Gets you out of the loop: the client fills it out, the AI clones it, without you even looking at the responses.
Form · Supabase · MCP · latest submission.
From 1 site to 100, 1,000; near-zero marginal cost per clone. Refine the skill with each round: run it once, adjust what it didn’t replace, repeat.
It’s what separates “building a website” from “having a website factory.”
Marginal cost · iterative refinement · scale.
🧩 Move sites to GoHighLevel/WordPress
Sites built with frameworks don't fit directly into page builders. A skill converts the codebase into a single self-contained HTML file that you can paste into GHL's or WordPress's "Custom HTML/JS" block.
Sites built with frameworks (React/Next/Vue/Svelte) don't fit directly into "drag-and-drop" builders like GoHighLevel (GHL) or WordPress.
Understanding the mismatch helps you avoid the frustration of “I pasted it and it broke.”
Framework · visual builder · language mismatch.
A skill that converts the entire codebase into a single self-contained HTML file compatible with GHL’s “Custom HTML/JS” block.
It's the bridge between what you built in the framework and what the builder accepts.
Transformer Skill · self-contained · Custom HTML/JS · Library (Track 5).
No JSX/Babel, no ES modules, no build tools, no Node APIs, no html/head/body tags. Just HTML + style + vanilla script, inline SVG, CDN.
Knowing the limits is what makes the conversion work on the first try.
No import/export · no build · vanilla · Tailwind via CDN · prefix classes.
Build first on a design-focused platform, download the file, then clone it in AntiGravity and convert it. Covers ~99% of sites.
Starting with the design delivers a more polished result before the technical conversion.
Design-first · AI Studio · download → clone → convert · ~99%.
Instead of migrating the entire page, inject select premium blocks of high-quality HTML into an existing GHL/WordPress page.
Gives it a precise visual upgrade without rebuilding the whole page.
Sniping · premium block · targeted injection · existing page.
In the editor: add a "Custom Code" block → paste the HTML → save/publish → test. If it breaks on mobile, go back to the agent, copy it again, and paste it again.
It's the final step that puts the site live inside the client's builder.
Custom Code · paste · publish · test · fix the mobile layout.