cerebro-vip INEMA.CLUB
início › INEMA.GOOGLE

Masterclass sobre como converter sites modernos (React/Next.js/JS)…

INEMA.GOOGLE · 2026-02-13 · ~11 min · ver no Telegram ↗

INEMA

otimizado e leve - Sem backend

Gere apenas o HTML final pronto para colar.

---

## 🧠 EXTRA — Prompt para “modo avançado”

Se quiser algo ainda mais profissional:

Refatore este projeto para manter 100% do design original, mas adaptando a arquitetura para funcionar como HTML estático puro.

Priorize: - Fidelidade visual - Performance - Compatibilidade com construtores de página - Código organizado

Depois gere o HTML final completo.

Vou te entregar todos os prompts organizados por etapa, prontos para copiar e colar no AntiGravity.

Vou estruturar na ordem exata do processo:

🔹 ETAPA 1 — ORGANIZAR O PROJETO⌗

✅ Prompt para validar o projeto antes da conversão⌗

```Analise todo o projeto atual e me diga:

  1. Qual framework está sendo usado (React, Next.js, Vite etc.)
  2. Se existem dependências externas que podem quebrar em HTML puro
  3. Se existem animações muito complexas
  4. Se o projeto está pronto para ser convertido em um único HTML

Não altere nada ainda. Apenas analise.```

🔹 ETAPA 2 — LIMPAR DEPENDÊNCIAS PROBLEMÁTICAS⌗

✅ Prompt para preparar o projeto para conversão⌗

```Otimize este projeto para conversão em HTML único.

  • Remova dependências externas desnecessárias
  • Substitua imports complexos por alternativas simples
  • Simplifique animações muito pesadas
  • Garanta que tudo possa funcionar sem backend

Prepare o projeto para exportação HTML.```

🔹 ETAPA 3 — CONVERSÃO PARA HTML (GOHIGHLEVEL)⌗

✅ Prompt principal de conversão⌗

```Converta todo este projeto (React/Next/JavaScript) em um único arquivo HTML autocontido.

Regras: - Todo CSS deve estar dentro do próprio HTML - Todo JavaScript deve estar embutido - Não usar dependências externas - Não usar imports - Compatível com bloco Custom Code do GoHighLevel - Garantir responsividade (mobile)

Gere apenas o HTML final pronto para colar.```

🔹 ETAPA 4 — CONVERSÃO PARA WORDPRESS⌗

✅ Prompt específico para WordPress⌗

```Converta este projeto em um único HTML compatível com:

  • Bloco HTML personalizado do WordPress (Gutenberg)
  • Elementor (widget HTML)
  • Sem dependências externas

Inclua: - CSS embutido - JS embutido - Código limpo e otimizado

Gere apenas o HTML final.```

🔹 ETAPA 5 — SE QUISER APENAS UMA SEÇÃO (HTML SNIPE)⌗

✅ Prompt para converter apenas uma seção⌗

```Converta apenas a seção [nome da seção] em um bloco HTML autocontido.

  • CSS embutido
  • JS embutido
  • Compatível com GoHighLevel
  • Não gerar página completa

Entregue apenas o código dessa seção.```

🔹 ETAPA 6 — CORRIGIR ERROS MOBILE⌗

✅ Prompt para ajuste responsivo⌗

```O HTML gerado apresenta problemas no mobile.

Ajuste: - Espaçamentos - Quebra de layout - Tamanho de fontes - Menu responsivo

Mantenha o visual original. Gere o HTML atualizado completo.```

🔹 ETAPA 7 — CORRIGIR ANIMAÇÕES QUE NÃO FUNCIONAM⌗

✅ Prompt para simplificar animações⌗

```Algumas animações não estão funcionando no GoHighLevel.

Simplifique as animações mantendo o mesmo efeito visual. Substitua qualquer biblioteca externa por JavaScript puro. Gere o HTML final atualizado.```

🔹 ETAPA 8 — OTIMIZAÇÃO DE PERFORMANCE⌗

✅ Prompt para deixar leve⌗

```Otimize este HTML para:

  • Carregar mais rápido
  • Reduzir tamanho do código
  • Melhorar performance mobile
  • Remover código redundante

Sem alterar o design.```

🔹 ETAPA 9 — TRANSFORMAR EM PÁGINA COMPLETA 100% HTML⌗

✅ Prompt página inteira⌗

```Reestruture o HTML para que ele funcione como uma página completa independente.

Inclua: - Head completo - Meta tags - Responsividade total - Estrutura limpa

Compatível com GoHighLevel.```

🔹 ETAPA 10 — INSERIR TRACKING (PIXEL / TAGS)⌗

✅ Prompt para adicionar pixel⌗

```Adicione suporte para:

  • Meta Pixel
  • Google Tag Manager
  • Google Analytics

Sem quebrar o layout. Mantenha o HTML compatível com GoHighLevel.```

🔹 ETAPA 11 — GERAR VERSÃO SUPER SEGURA⌗

✅ Prompt para evitar bloqueios⌗

```Garanta que este HTML:

  • Não use scripts bloqueáveis
  • Não dependa de CDN externa
  • Não tenha chamadas de API externas

Tudo deve funcionar dentro de um bloco Custom Code.```

🔥 PROMPT MASTER (VERSÃO COMPLETA PROFISSIONAL)⌗

Se quiser fazer tudo em uma tacada só:

Converta este projeto completo em um único arquivo HTML autocontido, compatível com:

  • GoHighLevel (Custom Code Block)
  • WordPress (HTML personalizado)

Regras: - CSS embutido - JS embutido - Sem dependências externas - Responsivo (mobile-first) - Animações compatíveis - Código

Você tem o texto anexo, da Skill, olhe e melhore ela

Vou te explicar exatamente como ativar e usar uma Skill no AntiGravity, passo a passo, mesmo que você nunca tenha feito isso antes.

A lógica é: carregar o projeto → selecionar a skill → executar com o comando correto.

✅ PASSO A PASSO PARA ATIVAR A SKILL NO ANTIGRAVITY⌗

🔹 1️⃣ Abrir o AntiGravity⌗

  1. Acesse o AntiGravity
  2. Abra seu workspace
  3. Certifique-se que seu projeto já está carregado (repo clonado ou arquivos enviados)

Você deve ver os arquivos na lateral esquerda.

🔹 2️⃣ Verificar se a Skill já está instalada⌗

No AntiGravity normalmente existe uma área chamada:

  • Skills
  • ou painel lateral de ferramentas
  • ou menu de automações

Procure por algo como:

  • GoHighLevel Conversion Skill
  • WordPress Conversion Skill
  • HTML Conversion Skill

Se ela aparecer na lista → já está disponível ✅

🔹 3️⃣ Se a Skill NÃO estiver criada⌗

Você precisa criar uma nova skill manualmente.

Como criar:⌗

  1. Vá até a seção Skills

  2. Clique em Create New Skill

  3. Dê um nome, por exemplo:

GoHighLevel HTML Converter

  1. No campo de instruções da skill, cole algo como:

```Converta todo o projeto atual (React, Next.js, JavaScript etc.) em um único arquivo HTML autocontido, compatível com bloco de código personalizado do GoHighLevel e WordPress.

  • Inclua CSS inline ou embutido
  • Inclua JavaScript embutido
  • Não use dependências externas que quebrem no GHL
  • Gere apenas um arquivo final pronto para colar```
  1. Salve a skill.

Agora ela está criada ✅

🔹 4️⃣ Como “ativar” a Skill⌗

No AntiGravity você ativa uma skill simplesmente usando ela no prompt.

Exemplo de comando:

@GoHighLevel HTML Converter Converta este projeto em um único HTML pronto para usar no GoHighLevel.

Ou dependendo da interface:

  • Selecionar a skill no menu
  • Clicar em “Run Skill”
  • Executar sobre o projeto atual

🔹 5️⃣ Executar a conversão⌗

Depois de ativar:

  1. Aguarde o processamento

  2. Ele vai gerar:

  • Um arquivo HTML completo
  • Ou um bloco grande de código
  1. Copie o HTML final

🔹 6️⃣ Confirmar que funcionou⌗

Você saberá que deu certo se:

  • Ele gerar um único arquivo
  • Não depender de múltiplas pastas
  • Estiver pronto para colar direto no bloco de código

🧠 DICA IMPORTANTE⌗

Se quiser compatibilidade máxima com GoHighLevel, use sempre essa instrução extra no prompt:

Garanta que o HTML funcione dentro de um bloco Custom Code do GoHighLevel sem dependências externas.

Isso evita erro de script.

🚀 Resumo Rápido⌗

  1. Carrega projeto
  2. Vai em Skills
  3. Cria ou seleciona a skill
  4. Executa com @NomeDaSkill
  5. Copia HTML gerado
  6. Cola no GoHighLevel

nativos do GHL.

Estratégia 2 — HTML “Snipe” (blocos estratégicos)⌗

  • Você monta a página normal no GHL
  • E adiciona apenas trechos em HTML onde precisa de algo mais “uau”
  • Vantagem: flexível e rápido pra manter
  • Desvantagem: exige decidir quais seções serão HTML

✅ Resultado: você escolhe o melhor modo pro seu projeto.

8) Publicar, abrir e testar⌗

Objetivo⌗

Ver se ficou perfeito e se está responsivo.

Passo a passo⌗

  1. Clique em Save.
  2. Clique em Publish.
  3. Use o botão de visualização (no vídeo: “visibility button”) para abrir em nova janela.
  4. Teste:
  • Desktop (scroll, animações, botões)
  • Mobile (menu, espaçamento, fontes)
  • Velocidade e carregamento

✅ Resultado: site publicado e validado.

9) Ajustar o que faltar (loop de melhoria)⌗

Objetivo⌗

Se tiver algum problema, pedir para o AntiGravity ajustar e gerar novo HTML.

Passo a passo⌗

  1. Identifique o problema (ex: “no mobile ficou quebrado”, “faltou animação X”, “botão não funciona”).
  2. Volte ao AntiGravity e dê um prompt claro, tipo:
  • “Está faltando a seção X”
  • “No celular o padding está errado”
  • “A animação Y não está rodando; simplifique mantendo o visual” 3. Ele gera um novo HTML corrigido. 4. Copie e substitua o código no bloco do GoHighLevel. 5. Publique de novo e teste.

✅ Resultado: melhoria contínua até ficar 100% aceitável.

Variação: WordPress (bem direto)⌗

O processo é o mesmo, mas em vez do GoHighLevel:

  1. Abra a página/post no WordPress
  2. Use:
  • um bloco HTML personalizado (Gutenberg)
  • ou um plugin/page builder que aceite HTML/JS 3. Cole o HTML gerado 4. Atualize/Publicar 5. Teste e ajuste no AntiGravity se necessário

Observações importantes⌗

  • Alguns efeitos “fora da curva” podem não converter 100% (linguagens/implementações específicas).
  • Mas para 99% dos sites comuns, o resultado fica excelente.

Abaixo vai um passo a passo bem detalhado, do zero até publicar no GoHighLevel (e no final deixo a variação para WordPress). Vou seguir exatamente a lógica do conteúdo que você mandou: pegar um site lindo (React/Next/JS) → converter em 1 HTML → colar no construtor.

1) Preparar o “site bonito” (o design)⌗

Objetivo⌗

Ter um projeto pronto (geralmente feito em AI Studio ou outro lugar) que seja um site moderno (React/Next/JS) e que você quer “levar” para GoHighLevel/WordPress.

Passo a passo⌗

  1. Crie o layout no AI Studio (ou ferramenta equivalente).
  2. Finalize a versão 1 (não precisa perfeito; pode ser “one shot”).
  3. Faça o download/exportação do projeto (pasta do projeto com arquivos).
  4. Garanta que você tem:
  • páginas/sections prontas
  • imagens e fontes disponíveis
  • animações (sabendo que algumas muito avançadas podem não migrar 100%)

✅ Resultado: você tem um projeto de site pronto para converter.

2) Colocar o projeto em um repositório (GitHub) ou “subir” para o AntiGravity⌗

Objetivo⌗

Dar acesso para o AntiGravity “ler” o código do site.

Opção A — GitHub (mais comum)⌗

  1. Crie um repositório no GitHub (privado ou público).
  2. Faça upload do projeto (commit).
  3. Copie a URL do repositório.

Opção B — Upload direto (se o AntiGravity permitir)⌗

  1. Compacte o projeto em .zip (se necessário).
  2. Faça upload no AntiGravity.

✅ Resultado: você tem uma forma de o AntiGravity acessar seu projeto.

3) Abrir o AntiGravity e clonar o repositório⌗

Objetivo⌗

Trazer o projeto para o ambiente do AntiGravity e ver os arquivos do lado esquerdo.

Passo a passo (clonando)⌗

  1. Abra o AntiGravity.
  2. Abra uma nova página/aba dentro dele (no vídeo ele usa “Command + L”).
  3. Encontre a opção de clonar repo.
  4. Cole a URL do repositório.
  5. Confirme para ele adicionar o projeto na lateral esquerda (árvore de arquivos).

✅ Resultado: o projeto aparece carregado no AntiGravity, com os arquivos disponíveis.

4) Ativar/usar a “Skill” de conversão (GoHighLevel / WordPress)⌗

Objetivo⌗

Rodar a skill que transforma o projeto todo em um único HTML (autocontido).

O que a skill faz (em termos práticos)⌗

  • Pega um projeto (React/Next/JS etc.)
  • “HTML-fica” (converte) tudo
  • Gera um único arquivo HTML, com o necessário para funcionar como bloco de código

Passo a passo⌗

  1. No AntiGravity, localize a skill:
  • “GoHighLevel conversion skill”

  • ou “WordPress conversion skill” 2. Se tiver apenas uma, você pode pedir pra skill gerar compatível com ambos. 3. Execute a skill com um prompt do tipo:

  • “Converta este projeto em um HTML único e autocontido, compatível com bloco de código do GoHighLevel.” 4. Aguarde ela processar e entregar o HTML final.

✅ Resultado: você recebe um arquivo HTML completo (ou um bloco enorme de HTML/CSS/JS pronto pra colar).

5) Criar a página no GoHighLevel⌗

Objetivo⌗

Ter uma página “onde você vai colar” o HTML.

Passo a passo⌗

  1. Entre no GoHighLevel.
  2. Vá em Sites / Websites (ou Funis, dependendo do seu uso).
  3. Crie uma nova página (ou edite uma existente).
  4. Abra o Website Builder / Editor.

✅ Resultado: página aberta no editor, pronta para receber o bloco.

6) Inserir o HTML no GoHighLevel (Custom Code Block)⌗

Objetivo⌗

Colocar o HTML convertido dentro da página.

Passo a passo⌗

  1. No editor, clique para adicionar um novo elemento/bloco.
  2. Pesquise por “Code”.
  3. Selecione Custom Code / Custom HTML (o nome pode variar).
  4. Clique em Open Code Editor.
  5. Volte ao AntiGravity e copie todo o HTML gerado.
  6. Cole no editor do GoHighLevel.
  7. Salve as mudanças do bloco.

✅ Resultado: o site (ou seção) já deve aparecer renderizado.

7) Escolher estratégia: página inteira ou “blocos estratégicos”⌗

Estratégia 1 — Página 100% HTML⌗

  • A página inteira é o HTML convertido.
  • Vantagem: fica “igualzinho” ao original na maioria dos casos.
  • Desvantagem: você mexe menos com componentes

🎯 Problema Principal⌗

  • Muitas pessoas querem pegar sites bonitos e altamente interativos (com animações, efeitos, etc.)
  • Mas não sabem como colocar isso no GoHighLevel ou WordPress

  • O problema acontece porque:

  • Não sabem criar apps/customizações

  • Existem diferenças de linguagens de código
  • Sites modernos (React, Next.js, JS avançado) não são compatíveis diretamente com construtores como GoHighLevel

💡 A Solução⌗

Usar o Anti-Gravity com uma skill de conversão que:

  • Converte qualquer site (React, Next.js, JavaScript etc.)
  • Transforma tudo em um único arquivo HTML

  • Compatível com:

  • GoHighLevel (bloco de código customizado)

  • WordPress
  • Outros construtores

🛠 Processo Passo a Passo⌗

1️⃣ Criar o Design⌗

  • Construir primeiro no AI Studio (plataforma focada em design)
  • Baixar/exportar o projeto

2️⃣ Clonar o Repositório⌗

  • Hospedar no GitHub (ou outro local)
  • Copiar a URL do repositório
  • Importar/clonar no Anti-Gravity

3️⃣ Usar a Skill de Conversão⌗

A skill:

  • Analisa todo o projeto
  • Converte tudo para HTML puro
  • Gera um arquivo único pronto para uso

4️⃣ Inserir no GoHighLevel⌗

  • Abrir o editor do site
  • Adicionar um Custom Code Block
  • Abrir o editor de código
  • Colar o HTML gerado
  • Salvar e publicar

Pronto 🚀

🔄 Ajustes e Melhorias⌗

Se algo não funcionar:

  • Voltar no Anti-Gravity
  • Pedir ajustes (ex: problema no mobile, algo faltando)
  • Gerar novo HTML
  • Substituir no GoHighLevel

🧠 Duas Estratégias de Uso⌗

✔ Página 100% HTML⌗

  • A página inteira é feita via HTML convertido

✔ HTML Estratégico (HTML “Snipe”)⌗

  • Usa o construtor normal
  • Insere blocos HTML personalizados apenas em partes específicas

⚠ Limitação⌗

  • Animações extremamente complexas podem não converter 100%
  • Mas 99% dos sites funcionam perfeitamente

🚀 Resultado Final⌗

Permite criar:

  • Sites altamente profissionais
  • Visual avançado
  • Animações modernas
  • Dentro do GoHighLevel ou WordPress
  • Em minutos
  • Algo que quase ninguém está fazendo ainda

Copiar sites AntiGravity para o GoHighLevel , Wordpress ou outro Editor

Olá, linda IA automatizadora,

Nesta masterclass exclusiva, eu mostro exatamente como pegar qualquer site bonito e transformá-lo em algo que você pode inserir no GoHighLevel, no WordPress ou no construtor de sites da sua preferência.

Recursos 🤖 Habilidade Transformer

Replicar sites AntiGravity para os Editores

chatgpt.com ↗

1

Recursos

↑ voltar ao topo · ver no Telegram ↗