🧩 El problema
Construiste un sitio increíble en un framework (React, Next, Vue, Svelte). Entonces el cliente dice: "uso GoHighLevel" (o WordPress). El problema: estos constructores son "arrastrar y soltar" e no aceptan directamente un codebase de framework. Es un desajuste de lenguaje.
✓ Lo que tienes
- ✓Sitio en React / Next / Vue / Svelte
- ✓Varios archivos, componentes, build
- ✓Funciona de maravilla en localhost
✗ Lo que acepta el constructor
- ✗Bloques visuales de «arrastrar y soltar»
- ✗No entiende los componentes ni el proceso de build
- ✗Pega el framework sin modificar → se rompe
💡 La idea
El camino no es abandonar el framework, sino traducir el resultado a un formato que el constructor entienda. De eso trata el resto del módulo.
React/Next/Vue
GHL / WordPress
lenguajes diferentes
traducir, no rendirse
🔄 Una Transformer Skill
La traducción se realiza mediante una Transformer Skill: una skill que toma todo el codebase y lo convierte en un único archivo HTML autocontenido — todo en un solo lugar (HTML + CSS + JS), compatible con el bloque «Custom HTML/JS» de GHL.
💡 Consejo práctico
La Transformer Skill también está en la Biblioteca (Ruta 5). Úsala como punto de partida y prueba el HTML antes de entregárselo al cliente.
base de código completa
convierte
1 HTML único
Custom HTML/JS
🚫 Restricciones del bloque Custom HTML
El bloque "Custom HTML/JS" es potente, pero tiene reglas claras. Conocerlas es lo que hace que la conversión funcione a la primera. En resumen: nada de herramientas de frameworks, solo lo básico de la web.
✗ No puede
- ✗JSX / Babel
- ✗ES modules (import / export)
- ✗Herramientas de build (Vite / Webpack)
- ✗APIs de Node (process.env)
- ✗Etiquetas html / head / body (GHL inyecta el shell)
✓ Puede
- ✓HTML + style + script vanilla
- ✓SVG inline
- ✓CDN (scripts externos por URL)
- ✓Tailwind vía CDN
- ✓Prefijar las clases CSS para evitar conflictos
⚠️ Trampa común
Olvidar prefijar las clases. El constructor tiene su propio CSS; si tus clases tienen nombres genéricos, entran en conflicto y el diseño se rompe. Usa prefijos (p. ej., vf-) y mantente a salvo.
ni export
solo vanilla
Tailwind vía CDN
clases propias
🎬 Creación «design-first» en AI Studio
Un flujo que da un resultado más atractivo: construye primero en una plataforma enfocada en diseño (un AI Studio de diseño), descarga el archivo y después clon en AntiGravity y conviértelo. Este camino cubre ~99% de los sitios — solo algunas animaciones muy específicas podrían no funcionar.
Construye en AI Studio (design-first)
Concéntrate en lo visual en una plataforma de diseño: ahí el sitio se ve bonito más rápido.
Descárgalo y clónalo en AntiGravity
Lleva el archivo al entorno local, donde tienes control total.
Convierte a 1 HTML
Ejecuta Transformer Skill y genera el archivo self-contained. Cubre ~99% de los casos.
💡 Por qué design-first
Empezar por el diseño da un sitio más atractivo antes de la parte técnica. La conversión viene después, sobre una base que ya le gusta al cliente.
primero
llevar a local
1 HTML
cubre casi todo
✂️ HTML Sniping
No siempre quieres migrar la página completa. A veces el cliente ya tiene una página en GHL/WordPress y solo quiere una sección más atractiva. Ahí entra el HTML Sniping: en vez de migrarlo todo, inyectas bloques premium puntuales de HTML de alta calidad dentro de la página existente.
Migración completa
Toda la página se convierte en 1 HTML self-contained.
Cuándo: el sitio es nuevo o se rehízo por completo.
HTML Sniping
Un bloque premium puntual se integra en una página que ya existe.
Cuándo: solo una sección necesita una mejora.
💡 Consejo práctico
Sniping es quirúrgico: genera valor visual sin tocar el resto. Ideal para "hacer más atractiva esta sección" sin rehacer toda la página.
solo un bloque
alta calidad
en la página existente
sin rehacer todo
📋 Pegar en GHL y ajustar
Con el HTML a mano, el paso final es mecánico. En el editor de GHL: agrega un bloque "Custom Code" → pega el HTML → guarda/publica → prueba. Si se rompe en el móvil, vuelve al agente, pídele que lo corrija, vuelve a copiar y pegar.
Agrega "Custom Code"
En el editor, arrastra el bloque de código personalizado hasta donde debe aparecer la sección.
Pega, guarda y publica
Pega el HTML autocontenido, guarda y publica la página.
Prueba, también en el móvil
Revísalo en la computadora y en el celular. ¿Se rompió en el celular? Ve al paso 4.
Repara y vuelve a pegar
Dile al agente «en el móvil haz X, corrígelo». Toma el nuevo HTML, vuelve a copiarlo y pégalo.
⚠️ El ciclo de ajustes
En móvil es donde más se rompe. Trátalo como un ciclo corto: describe el problema → corrige → vuelve a copiar → vuelve a pegar → prueba. Repite hasta que quede perfecto en ambos tamaños.
el bloque correcto
guardar + publicar
escritorio + móvil
vuelve al agente
🔬 Ejemplo práctico
Tienes un sitio en React de un taller mecánico y el cliente usa GoHighLevel. El camino:
- Ejecuta Transformer Skill: el codebase React se convierte en 1 HTML autocontenido (sin importación/exportación, sin build, con clases prefijadas).
- En GHL, agrega un bloque Custom Code, pega el HTML, guárdalo y publícalo.
- Ábrelo en el celular: la sección de precios se está desbordando del ancho.
- Vuelve al agente: "en mobile la tabla de precios se desborda; corrígelo manteniendo el HTML único". Vuelve a copiar y pegar.
Resultado: el sitio React del cliente funciona dentro de GoHighLevel, sin problemas en escritorio y en móvil.
🏋️ Ejercicio
Convierte un sitio (hecho antes) a 1 HTML autocontenido y pega en un bloque Custom Code de GHL o WordPress:
- Busca un sitio tuyo de la Trilha 2 (o un clon de la Trilha 3.1).
- Ejecuta Transformer Skill y genera el HTML único, respetando todas las restricciones.
- Pega en un bloque Custom Code de GHL o WordPress, guarda y publica.
- Prueba en el móvil y ejecuta el ciclo de ajustes hasta que quede perfecto.
Meta: un sitio de un framework funcionando dentro de un constructor visual, sin romperse.
⚡ Prompts listos
Copia, pega en tu asistente de IA y adapta a tu 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.
✅ Resumen del módulo
Siguiente ruta:
Ruta 4 — Profesionalizar