Cómo convertir un frontend creado con IA en módulos de HubSpot
Un generador con IA puede darte una biblioteca de componentes impecable en una tarde. Lo que no puede darte es algo que tu equipo de marketing pueda editar. Si el CRM, el email y los formularios ya viven en HubSpot, la web también pertenece ahí — y eso significa convertir componentes de React en módulos HubL nativos.
HubSpot renderiza HubL en sus propios servidores, y su CMS está construido alrededor de módulos que marketing puede reordenar y personalizar con datos del CRM sin abrir código. Ese diseño es justo la razón por la que un build de React no se puede usar tal cual, y es la traducción que transjt automatiza. Este es el recorrido completo.
Antes de empezar: el único requisito de stack
Pídele a tu herramienta de IA React con Vite, sin renderizado en servidor. HubSpot renderiza HubL en el servidor, así que lo que se convierte limpiamente es un frontend renderizado en el cliente. Herramienta por herramienta:
- Lovable ya produce React con Vite, así que normalmente no hay nada que cambiar.
- v0 usa por defecto el App Router de Next.js con componentes de servidor — pídele React y Vite en su lugar.
- bolt.new, Replit y Rocket montan un stack completo por defecto. HubSpot ya aporta formularios, registros de contacto y almacenamiento de contenido, así que aquí la mayor parte de eso sobra.
- Figma Make y builder.io generan React a partir de un diseño, que es justo la entrada que transjt espera.
- Claude Code respeta la restricción si la indicas en el primer prompt.
Comprueba tu suscripción primero
Este es el único requisito duro, y conviene confirmarlo antes de empezar cualquier trabajo de diseño. Subir un tema propio exige un nivel de Content Hub que permita archivos de código personalizados. Los niveles Starter lo restringen. Más allá de eso, el resultado es un tema de HubSpot estándar, sin requisitos especiales.
Paso 1: crea el frontend en tu herramienta de IA
Escribe prompts y refina hasta que la interfaz esté como quieres. La conversión no te pide cambiar tu forma de trabajar, solo que declares la restricción de stack desde el principio.
Paso 2: lleva el código a GitHub
GitHub es el puente del que lee transjt. Lovable y Replit sincronizan automáticamente, bolt.new hace push desde el editor, v0 y Figma Make exportan código que confirmas tú, y Claude Code ya trabaja dentro de tu repositorio. Sea cual sea la vía, el historial de commits deja constancia de qué versión del diseño produjo qué tema.
Paso 3: conecta el repositorio con transjt
Autoriza GitHub en tu proyecto de transjt y selecciona el repositorio. transjt lee el árbol de componentes y decide qué partes se convierten en plantillas HubL y cuáles en campos de módulo editables — esa distinción determina qué podrá cambiar tu equipo de marketing más adelante.
Paso 4: elige HubSpot y revisa la vista previa
Elige HubSpot como CMS de destino y compara la vista previa con tu diseño original. Al confirmar, transjt escribe un tema nativo: plantillas HubL y módulos con campos editables declarados, que subes a través del gestor de diseño. A partir de ahí los módulos aparecen en el editor de páginas, listos para construir.
Desde un repositorio sincronizado, esto suele completarse en hasta una hora, según el número de páginas.
Qué significa realmente «editable»
Esta es la diferencia entre convertir e incrustar. Los módulos con campos definidos permiten a marketing cambiar textos, imágenes y el orden de las secciones en el editor de arrastrar y soltar, mientras que espaciados, tipografía y color se mantienen exactamente como se diseñaron. El sistema de diseño aguanta precisamente porque está codificado en los módulos y no descrito en un documento.
También desbloquea lo que solo funciona cuando una página es contenido nativo de HubSpot: personalización según la etapa del ciclo de vida o cualquier propiedad de contacto, informes a nivel de página, atribución que llega hasta negocios reales y tests A/B. Una app de React alojada fuera no te da nada de eso sin instrumentación adicional.
Actualizar después de regenerar
Haz push de los componentes actualizados al mismo repositorio y vuelve a ejecutar transjt para sincronizar los cambios en tu tema. Tú sigues diseñando donde prefieres diseñar y HubSpot sigue sirviendo las páginas.
Cuándo es este el enfoque correcto
Conviene convertir cuando marketing ya vive en HubSpot y tener la web en otro sitio significa coser dos sistemas para siempre; cuando cada página de campaña es hoy una tarea de desarrollo; cuando necesitas personalización basada en datos del CRM; o cuando nadie del equipo tiene motivo para aprender un lenguaje de plantillas que usará una sola vez.
HubL es una habilidad especializada sin segundo uso fuera de HubSpot. Automatizar esa capa es justo el objetivo: la experiencia para la que habrías tenido que contratar resulta que no hace falta.