🧩 The problem
You built a beautiful website in a framework (React, Next, Vue, Svelte). Then the client says: "I use GoHighLevel" (or WordPress). The problem: these builders are "drag and drop" e don’t accept a framework codebase directly. It's a mismatch in terminology.
✓ What you have
- ✓React / Next / Vue / Svelte site
- ✓Several files, components, build
- ✓Runs beautifully on localhost
✗ What the builder accepts
- ✗Drag-and-drop visual blocks
- ✗Doesn’t understand components or builds
- ✗Paste the raw framework → it breaks
💡 The idea
The path isn’t to give up on the framework — it’s to translate the result in a format the builder understands. That’s what the rest of the module is about.
React/Next/Vue
GHL / WordPress
different languages
translate, don’t give up
🔄 The Transformer Skill
The translation is done by a Transformer Skill: a skill that takes the entire codebase and converts it into a single self-contained HTML file — everything in one place (HTML + CSS + JS), compatible with GHL’s “Custom HTML/JS” block.
💡 Practical tip
The Transformer Skill is also in the Library (Track 5). Use it as a starting point and test the HTML before delivering it to the client.
entire codebase
converts
1 single HTML file
Custom HTML/JS
🚫 Custom HTML block restrictions
The "Custom HTML/JS" block is powerful, but has clear rules. Knowing them is what makes the conversion work on the first try. In short: no framework tools, just the basics of the web.
✗ You can’t
- ✗JSX / Babel
- ✗ES modules (import / export)
- ✗Build tools (Vite / Webpack)
- ✗Node APIs (process.env)
- ✗HTML / head / body tags (GHL injects the shell)
✓ You can
- ✓HTML + vanilla style + script
- ✓Inline SVG
- ✓CDN (external scripts via URL)
- ✓Tailwind via CDN
- ✓Prefix CSS classes to avoid conflicts
⚠️ Common pitfall
Forget to prefix the classes. The builder has its own CSS; if your classes have generic names, they collide and the layout breaks. Add a prefix (e.g., vf-) and stay safe.
nor export
vanilla only
Tailwind via CDN
custom classes
🎬 Build "design-first" in AI Studio
A workflow that produces a better-looking result: build first on a design-focused platform (a design AI Studio), download the file, and later clone in AntiGravity and convert it. This approach covers ~99% of websites — only very specific animations may not work.
Build in AI Studio (design-first)
Focus on visuals in a design platform — that’s where the site looks good fastest.
Download and clone in AntiGravity
Bring the file into your local environment, where you have full control.
Convert to 1 HTML
Run the Transformer Skill and generate the self-contained file. Covers ~99% of cases.
💡 Why design-first
Starting with the design delivers a more polished site before on the technical side. The conversion comes later, on a foundation the client already likes.
first
move to local
1 HTML
covers almost everything
✂️ HTML Sniping
You don't always want to migrate the entire page. Sometimes the client already has a page in GHL/WordPress and just wants a more polished section. That's where the HTML Sniping: instead of migrating everything, you inject occasional premium blocks high-quality HTML within the existing page.
Complete migration
The entire page becomes 1 self-contained HTML file.
When: the site is new or completely rebuilt.
HTML Sniping
A one-off premium block goes into an existing page.
When: only one section needs an upgrade.
💡 Practical tip
Sniping is surgical: adds visual polish without changing the rest. Ideal for “making this section look better” without rebuilding the whole page.
just one block
high quality
on the existing page
without redoing everything
📋 Paste into GHL and Adjust
With the HTML in hand, the final step is mechanical. In the GHL editor: add a block "Custom Code" → paste the HTML → save/publish → test. If it breaks on mobile, go back to the agent, ask it to fix the issue, then copy and paste it again.
Add "Custom Code"
In the editor, drag the custom code block to where the section should appear.
Paste, save, and publish
Paste the self-contained HTML, save, and publish the page.
Test — including on mobile
Check it on desktop and mobile. Broken on mobile? Go to step 4.
Fix and paste again
Tell the agent, "on mobile, do X; fix it." Get the new HTML, then copy and paste it again.
⚠️ The adjustment loop
Mobile is where things break most. Treat it as a short cycle: describe the problem → fix it → copy it again → paste it again → test. Repeat until it looks right at both sizes.
the right block
save + publish
desktop + mobile
go back to the agent
🔬 Practical example
You have a site at React of a repair shop, and the client uses GoHighLevel. The path:
- Run the Transformer Skill: the React codebase becomes 1 self-contained HTML (no imports/exports, no build, prefixed classes).
- In GHL, add a block Custom Code, paste the HTML, save it, and publish.
- Open it on your phone: the pricing section is overflowing the width.
- Return to the agent: "the pricing table overflows on mobile; fix it while keeping the HTML as a single file". Copy and paste it again.
Result: the client’s React site runs inside GoHighLevel, working smoothly on desktop and mobile.
🏋️ Exercise
Convert an existing website to 1 self-contained HTML and paste it into a Custom Code block in GHL or WordPress:
- Get one of your sites from Track 2 (or a clone from Track 3.1).
- Run the Transformer Skill and generate the single HTML file — respecting all constraints.
- Paste it into a Custom Code block in GHL or WordPress, save, and publish.
- Test on mobile and run the adjustment loop until it’s polished.
Goal: a framework site running inside a visual builder without breaking.
⚡ Ready-made prompts
Copy, paste into your AI assistant, and adapt to your use case.
Clone este repositório e adicione à esquerda: [URL].
Converta este codebase inteiro num único arquivo HTML self-contained, compatível com bloco Custom HTML (sem import/export, sem JSX, sem build, classes CSS prefixadas).
No mobile, esta seção faz [X]. Corrija mantendo o HTML único.
✅ Module summary
Next track:
Track 4 — Professionalize