🧩 O problema
Você construiu um site lindo num framework (React, Next, Vue, Svelte). Aí o cliente diz: "eu uso GoHighLevel" (ou WordPress). Problema: esses construtores são "arrastar e soltar" e não aceitam um codebase de framework direto. É um descompasso de linguagem.
✓ O que você tem
- ✓Site em React / Next / Vue / Svelte
- ✓Vários arquivos, componentes, build
- ✓Roda lindo no localhost
✗ O que o construtor aceita
- ✗Blocos visuais "arrastar e soltar"
- ✗Não entende componentes nem build
- ✗Cola o framework cru → quebra
💡 A ideia
O caminho não é desistir do framework — é traduzir o resultado para um formato que o construtor entenda. É disso que trata o resto do módulo.
React/Next/Vue
GHL / WordPress
linguagens diferentes
traduzir, não desistir
🔄 A Transformer Skill
A tradução é feita por uma Transformer Skill: uma skill que pega o codebase inteiro e o converte num único arquivo HTML self-contained — tudo num só lugar (HTML + CSS + JS), compatível com o bloco "Custom HTML/JS" do GHL.
💡 Dica prática
A Transformer Skill também está na Biblioteca (Trilha 5). Use-a como ponto de partida e teste o HTML antes de entregar ao cliente.
codebase inteiro
converte
1 HTML único
Custom HTML/JS
🚫 Restrições do bloco Custom HTML
O bloco "Custom HTML/JS" é poderoso, mas tem regras claras. Conhecê-las é o que faz a conversão funcionar de primeira. Em resumo: nada de ferramentas de framework, só o básico da web.
✗ Não pode
- ✗JSX / Babel
- ✗ES modules (import / export)
- ✗Build tools (Vite / Webpack)
- ✗APIs de Node (process.env)
- ✗Tags html / head / body (o GHL injeta o shell)
✓ Pode
- ✓HTML + style + script vanilla
- ✓SVG inline
- ✓CDN (scripts externos por URL)
- ✓Tailwind via CDN
- ✓Prefixar as classes CSS pra não conflitar
⚠️ Armadilha comum
Esquecer de prefixar as classes. O construtor tem CSS próprio; se suas classes têm nomes genéricos, elas colidem e o layout quebra. Prefixe (ex.: vf-) e fique seguro.
nem export
vanilla só
Tailwind via CDN
classes próprias
🎬 Build "design-first" no AI Studio
Um fluxo que dá um resultado mais bonito: construa primeiro numa plataforma focada em design (um AI Studio de design), baixe o arquivo, e depois clone no AntiGravity e converta. Esse caminho cobre ~99% dos sites — só animações muito específicas podem não passar.
Construa no AI Studio (design-first)
Foque no visual numa plataforma de design — é onde o site fica bonito mais rápido.
Baixe e clone no AntiGravity
Traga o arquivo para o ambiente local, onde você tem controle total.
Converta para 1 HTML
Rode a Transformer Skill e gere o arquivo self-contained. Cobre ~99% dos casos.
💡 Por que design-first
Começar pelo design entrega um site mais bonito antes da parte técnica. A conversão vem depois, sobre uma base que já agrada o cliente.
primeiro
levar p/ local
1 HTML
cobre quase tudo
✂️ HTML Sniping
Nem sempre você quer migrar a página inteira. Às vezes o cliente já tem uma página no GHL/WordPress e só quer uma seção mais bonita. Aí entra o HTML Sniping: em vez de migrar tudo, você injeta blocos premium pontuais de HTML de alta qualidade dentro da página existente.
Migração completa
A página inteira vira 1 HTML self-contained.
Quando: o site é novo ou todo refeito.
HTML Sniping
Um bloco premium pontual entra numa página que já existe.
Quando: só uma seção precisa de upgrade.
💡 Dica prática
Sniping é cirúrgico: gera valor visual sem mexer no resto. Ideal para "deixar essa dobra mais bonita" sem refazer a página toda.
só um bloco
alta qualidade
na página existente
sem refazer tudo
📋 Colar no GHL e ajustar
Com o HTML em mãos, o passo final é mecânico. No editor do GHL: adicione um bloco "Custom Code" → cole o HTML → salve/publique → teste. Se quebrar no mobile, volte ao agente, peça o conserto, recopie e recole.
Adicione "Custom Code"
No editor, arraste o bloco de código personalizado para onde a seção deve aparecer.
Cole, salve e publique
Cole o HTML self-contained, salve e publique a página.
Teste — inclusive no mobile
Veja no desktop e no celular. Quebrou no mobile? Vá para o passo 4.
Conserte e recole
Diga ao agente "no mobile faz X, corrija". Pegue o novo HTML, recopie e recole.
⚠️ O loop de ajuste
Mobile é onde mais quebra. Trate como um ciclo curto: descreva o problema → corrige → recopie → recole → teste. Repita até ficar redondo nos dois tamanhos.
o bloco certo
salvar + publicar
desktop + mobile
volte ao agente
🔬 Exemplo prático
Você tem um site em React de uma oficina mecânica e o cliente usa GoHighLevel. O caminho:
- Rode a Transformer Skill: o codebase React vira 1 HTML self-contained (sem import/export, sem build, classes prefixadas).
- No GHL, adicione um bloco Custom Code, cole o HTML, salve e publique.
- Abra no celular: a seção de preços está estourando a largura.
- Volte ao agente: "no mobile a tabela de preços vaza; corrija mantendo o HTML único". Recopie e recole.
Resultado: o site React do cliente roda dentro do GoHighLevel, redondo no desktop e no mobile.
🏋️ Exercício
Converta um site (feito antes) para 1 HTML self-contained e cole num bloco Custom Code do GHL ou WordPress:
- Pegue um site seu da Trilha 2 (ou um clone da Trilha 3.1).
- Rode a Transformer Skill e gere o HTML único — respeitando todas as restrições.
- Cole num bloco Custom Code do GHL ou do WordPress, salve e publique.
- Teste no mobile e rode o loop de ajuste até ficar redondo.
Meta: um site de framework rodando dentro de um construtor visual, sem quebrar.
⚡ Prompts prontos
Copie, cole no seu assistente de IA e adapte ao seu caso.
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.
✅ Resumo do módulo
Próxima trilha:
Trilha 4 — Profissionalizar