Migración a HubSpot CMS con IA y Claude Code

Pasarse a HubSpot suele atascarse en una sola cosa: reconstruir la web. Este es un flujo de trabajo con IA en cuatro pasos (un prompt generado, Claude Code, transjt y la CLI de HubSpot), con lo que implica cada paso y lo que hace posible.

La mayoría de las migraciones a HubSpot no se atascan en el contenido. Las entradas del blog, las páginas y las imágenes se pueden importar. Lo que lleva semanas es la reconstrucción: convertir el aspecto y la estructura de la web antigua en un tema de HubSpot con plantillas y módulos que su equipo de marketing pueda editar.

Tradicionalmente, eso significa un diseñador, un desarrollador que conozca HubL y varias rondas de revisión. Con las herramientas de IA, la mayor parte de ese trabajo pasa a un flujo en el que cada herramienta hace bien una tarea, y su equipo mantiene el control en cada paso.

El flujo de trabajo, de un vistazo

1. Crear el prompt: describa su nueva web a partir de la que ya tiene.
2. Construir la web con vibe coding: Claude Code convierte el prompt en un front end funcional.
3. Convertirla con transjt: el front end se convierte en un tema nativo de HubSpot.
4. Perfeccionarla con Claude Code y la CLI de HubSpot: siga mejorando el tema en código, sin riesgos.

En paralelo, traslade el contenido con las herramientas de importación de HubSpot y configure las redirecciones. Cada parte se explica a continuación.

Antes de empezar

Necesita cinco cosas:

• La dirección de su web actual: el punto de partida del prompt
• Claude Code: la herramienta de programación con IA de Anthropic, en su ordenador
• Una cuenta de GitHub: donde vive el código de la nueva web
• Una cuenta de transjt: el plan gratuito basta para probar la conversión
• Una cuenta de HubSpot con plan de CMS: y permisos de superadministrador para la primera conexión con transjt

No necesita saber HubL: Claude Code se encarga de la parte técnica.

Paso 1: crear el prompt

Un generador de IA es tan bueno como su briefing. Un prompt vago («hazme una web moderna») da una web genérica; uno preciso da una web que realmente puede publicar.

El Website Prompt Generator (en inglés) redacta ese briefing por usted. Hace unas pocas preguntas breves:

• Qué tipo de web está creando y qué páginas necesita
• Su web actual: si la tiene, la IA lee la página de inicio y las páginas del menú principal: navegación, textos, colores, tipografías y logotipo
• Qué pasa con su contenido: mantenerlo palabra por palabra, reescribirlo o empezar de cero
• Estilo y movimiento: de sobrio y corporativo a expresivo
• Estándares: hasta dónde llegar en accesibilidad y SEO
• Su herramienta de IA: Claude Code, Lovable, v0, bolt.new y otras

El resultado es un prompt completo y listo para producción. Fija la tecnología desde el principio para que el desarrollo no se desvíe, y pide una estructura preparada para el CMS: niveles de encabezado separados del tamaño visual, textos alternativos, destinos de enlace y campos SEO para cada página. Para Claude Code, además, pide pruebas automatizadas, de modo que el desarrollo se comprueba a sí mismo.

Lo que esto hace posible:

• Una web nueva que conserva lo que funciona en la antigua: estructura, textos, marca
• Un briefing que ya incluye diseño responsive, accesibilidad y bases de SEO
• Un punto de partida en minutos en lugar de un largo documento de requisitos

Paso 2: construir la web con vibe coding

Ahora el prompt se convierte en una web. Aquí usamos Claude Code porque trabaja donde está su código: crea el proyecto, lo ejecuta en su ordenador y lo modifica cuando usted se lo pide.

Una sesión típica es así:

1. Abra una carpeta de proyecto vacía e inicie Claude Code.
2. Pegue el prompt. Claude Code configura el proyecto y construye las páginas sección por sección.
3. Abra la vista previa local en el navegador y revísela página por página.
4. Pida cambios en lenguaje normal: Claude Code edita el código y la vista previa se actualiza.
5. Deje que Claude Code ejecute las pruebas del prompt y corrija lo que falle.
6. Suba el proyecto a un repositorio de GitHub.

Las buenas peticiones de cambio son concretas. Por ejemplo:

• «Haz la sección hero más tranquila: menos movimiento, más espacio en blanco, titular en una sola línea en escritorio».
• «Añade una franja de logos de clientes bajo el hero, en escala de grises, seis logos».
• «Mueve la sección de precios encima de las preguntas frecuentes».
• «Usa nuestro azul de marca en todos los botones principales».
• «Revisa cada página en una pantalla de 375 píxeles de ancho y corrige lo que falle».

Construya en secciones claras (hero, funciones, testimonios, precios) en lugar de una sola página larga. Secciones limpias y separadas dan después módulos limpios y editables.

Lo que esto hace posible:

• Rediseño y reconstrucción en un mismo paso
• Iteraciones rápidas sin esperar a un sprint de desarrollo
• Un código real en GitHub, no un proyecto cerrado de un maquetador visual

Paso 3: convertirla con transjt

Un front end hecho con vibe coding todavía no es una web de HubSpot. No tiene plantillas, ni módulos, ni campos que el equipo de marketing pueda editar. Ese es el hueco que cubre transjt.

1. Conecte GitHub en transjt y elija el repositorio.
2. Revise la vista previa. transjt convierte el front end en un tema nativo de HubSpot y le muestra el resultado antes de enviar nada a HubSpot.
3. Conecte HubSpot: la primera conexión requiere permisos de superadministrador.
4. Exporte el tema. Está listo en pocas horas y aparece en su cuenta de HubSpot.
5. Cree sus páginas a partir de las plantillas del tema en el editor de arrastrar y soltar de HubSpot.

¿Ha cambiado la web en Claude Code después de exportar? Suba el cambio a GitHub y vuelva a sincronizar el repositorio en transjt.

Sobre el precio: puede probar la conversión con el plan gratuito. Si necesita una sola web en lugar de una suscripción, la exportación única le permite empezar gratis y pagar solo después de la vista previa, con garantía de devolución del dinero. Consulte las tarifas.

Lo que esto hace posible:

• Páginas que su equipo de marketing edita sin un desarrollador
• Cabecera y pie de página como módulos editables
• Formularios vinculados a formularios nativos de HubSpot, para que los envíos lleguen a su CRM
• Plantillas de listado y de detalle del blog con su nuevo diseño
• Diseños para escritorio, tableta y móvil incluidos

Paso 4: perfeccionarla con Claude Code y la CLI de HubSpot

Una web nunca está terminada en el lanzamiento. La CLI de HubSpot conecta su ordenador con las herramientas de diseño de HubSpot, para que Claude Code pueda trabajar con los archivos del tema publicado.

El ciclo es sencillo: descargar los archivos del tema, pedir el cambio a Claude Code y volver a subirlos. Claude Code puede ejecutar estos pasos por usted.

Con eso listo, usted describe el cambio y Claude Code lo realiza:

• Ajustar colores, espaciados o tipografía en toda la web
• Añadir pequeñas interacciones, animaciones o scripts
• Mejorar el rendimiento, por ejemplo la carga de imágenes
• Añadir datos estructurados, como el marcado de preguntas frecuentes para buscadores y respuestas de IA
• Corregir un ajuste de un módulo o ampliar un módulo con un campo nuevo

Una regla mantiene sus cambios a salvo: ponga sus ajustes en los archivos custom.css y custom.js del tema. transjt nunca sobrescribe estos dos archivos cuando vuelve a exportar el tema, así que puede seguir convirtiendo diseños nuevos mientras sus propias mejoras se mantienen.

Dos hábitos ayudan: ponga la carpeta del tema descargado bajo control de versiones con git, para poder revisar y deshacer cada cambio, y vuelva a publicar las páginas afectadas después de cada subida para que el cambio esté activo.

Trasladar el contenido

transjt construye el tema; no traslada su contenido. Para eso, HubSpot tiene sus propias herramientas:

• Entradas del blog: la importación del blog de HubSpot trae entradas desde WordPress y otras plataformas. Después, revise imágenes, autores y enlaces internos.
• Páginas: vuelva a crearlas a partir de las plantillas del nuevo tema. Si eligió «mantener palabra por palabra» en el paso 1, la mayor parte del texto ya está en su sitio.
• Formularios: conecte cada formulario del nuevo diseño a un formulario de HubSpot.
• Medición: añada su herramienta de analítica y su gestor de etiquetas en la configuración del sitio web de HubSpot.

Luego, las redirecciones. Cada URL antigua que cambia necesita una redirección a su nueva dirección, o perderá el posicionamiento que ha conseguido. HubSpot admite redirecciones en bloque como una hoja de cálculo con URL antiguas y nuevas, y Claude Code puede crear esa lista comparando el sitemap antiguo con el nuevo.

Lista de comprobación para el lanzamiento

• Cada URL antigua redirige a su nueva dirección
• Títulos de página y metadescripciones trasladados
• Los formularios envían a HubSpot y llegan las notificaciones
• Analítica y gestor de etiquetas instalados
• Páginas revisadas en el móvil
• Nuevo sitemap enviado en Google Search Console
• El alojamiento de la web antigua se mantiene hasta confirmar las redirecciones

Errores frecuentes

• Un prompt vago. «Moderna y limpia» no es un briefing. Deje que el generador haga las preguntas.
• Editar archivos generados. Los cambios fuera de custom.css y custom.js pueden sustituirse al exportar de nuevo.
• Olvidar las redirecciones. La forma más rápida de perder tráfico de búsqueda en una migración.
• No volver a publicar. Los cambios subidos solo aparecen en las páginas que vuelve a publicar.
• Una página gigante. Construya en secciones, para que cada una se convierta en su propio módulo editable.

Qué hace cada paso

Por dónde empezar

Si está planeando pasarse a HubSpot, empiece por la parte que suele llevar más tiempo: el diseño y el tema. Cree su prompt (en inglés), construya la web con Claude Code y deje que transjt la convierta en un tema de HubSpot que su equipo gestione por su cuenta.

Más sobre la migración en sí: WordPress a HubSpot · Migrar a HubSpot CMS · Migrar de WordPress a HubSpot CMS, paso a paso

Preguntas frecuentes

¿transjt migra mi contenido?

No directamente. transjt construye el tema de HubSpot. Sus entradas del blog se trasladan con las herramientas de importación de HubSpot, y las redirecciones mantienen activas sus URL antiguas.

Pero si le da al Website Prompt Generator su web actual como referencia, este traslada la estructura y los textos de sus páginas principales a la nueva web, y transjt convierte ese contenido junto con el diseño.

¿Se sobrescriben mis cambios de código al exportar de nuevo?

No, si los guarda en los archivos custom.css y custom.js del tema: transjt nunca sobrescribe esos dos archivos.

¿Necesito un desarrollador?

No para el flujo principal. El generador de prompts, Claude Code y transjt cubren la reconstrucción; un desarrollador ayuda con integraciones poco habituales o funciones a medida.

¿Qué generadores de IA funcionan además de Claude Code?

El prompt también funciona con Lovable, v0, bolt.new, Replit, Builder.io, Rocket, Figma Make y Base44. transjt convierte su código del mismo modo una vez que está en GitHub.

¿Perderé mi posicionamiento?

No, si redirige cada URL que cambie y traslada los títulos de página y las metadescripciones. La falta de redirecciones es la causa más habitual de pérdida de tráfico tras una migración.