Claude a HubSpot: conecta Claude y crea tu web
«Claude a HubSpot» suele significar una de dos cosas. O quieres que Claude trabaje dentro de HubSpot: consultar negocios, resumir campañas, redactar emails, actualizar registros. O has creado algo con Claude, en Claude Design, Claude Code o en un chat, y tiene que convertirse en una web de HubSpot que tu equipo de marketing pueda gestionar.
Esta guía cubre las dos: primero cómo conectar Claude con HubSpot y qué puede hacer el conector, y después los caminos para convertir lo que has creado con Claude en un tema de HubSpot.
Parte 1: Conectar Claude con HubSpot
HubSpot ofrece dos formas oficiales de conectarse con Claude, para dos tareas distintas.
El conector de HubSpot para Claude (para todos)
HubSpot lanzó su conector para Claude en julio de 2025, el primer conector de CRM para Claude. Ha crecido mucho desde entonces. Según la documentación de HubSpot, actualizada en septiembre de 2026, Claude ya puede leer y escribir:
- Registros del CRM: contactos, empresas, negocios, tickets y objetos personalizados
- Emails de marketing, landing pages, entradas de blog y páginas web
- Llamadas, reuniones, notas, tareas y emails
- Productos, presupuestos, facturas y pedidos
Qué necesitas: un plan de pago de Claude (Pro, Max, Team o Enterprise) y una cuenta de HubSpot de cualquier nivel, incluido el CRM gratuito. Un superadministrador tiene que aprobar el conector y elegir a qué datos puede acceder.
Cómo configurarlo: en Claude, abre Ajustes → Conectores, busca HubSpot, añádelo y conecta tu cuenta.
Límites que conviene conocer: los cambios masivos están limitados a 10 registros por operación, Claude no puede borrar nada y los datos sensibles quedan fuera de su alcance. Cada acción queda registrada en el registro de auditoría de HubSpot, a nombre del usuario y del conector. HubSpot recomienda que las herramientas de escritura pidan aprobación antes de ejecutarse, y estamos de acuerdo.
El servidor MCP para desarrolladores (para desarrolladores)
Para desarrollar sobre HubSpot hay un servidor MCP para desarrolladores aparte y local, disponible para todos desde febrero de 2026. Se instala con la CLI de HubSpot mediante hs mcp setup y da a Claude Code herramientas para crear y gestionar temas, plantillas y módulos del CMS, además de apps y funciones serverless.
Esa es la conexión que usa un desarrollador para crear un tema de HubSpot con Claude Code. Aun así, requiere a alguien que domine HubL, el lenguaje de plantillas de HubSpot, para revisar el resultado.
Parte 2: Convertir lo que has creado con Claude en una web de HubSpot
Tanto si diseñaste una web en Claude Design, como si Claude Code te construyó un frontend o recibiste una página en un chat, el resultado es código: HTML, CSS y JavaScript. Una web de HubSpot funciona con un tema: plantillas, módulos que tu equipo de marketing añade, mueve y edita en el editor drag-and-drop, una cabecera y un pie comunes, un blog y formularios.
Hay tres caminos para pasar de uno a otro.
1. Importar una sola página con el conector
El conector de HubSpot puede importar un diseño de Claude Design como una nueva landing page de HubSpot. Toma el diseño como un único archivo HTML autocontenido y crea la página, y si vuelves a importar el mismo proyecto, actualiza esa página en lugar de crear una copia. La misma importación sirve también para emails, gráficos para redes sociales y diseños de blog.
Ideal para: una landing page de campaña, rápido.
El inconveniente: obtienes una página importada, no una web. No hay módulos reutilizables entre páginas, ni cabecera y pie comunes, ni plantillas de blog. Cambiar el diseño más adelante significa cambiarlo en Claude Design e importarlo de nuevo.
2. Crear un tema con Claude Code y la CLI de HubSpot
Cómo: pasa el proyecto a Claude Code, conecta el servidor MCP para desarrolladores de HubSpot y deja que Claude Code escriba un tema: plantillas HubL, módulos con campos, un theme.json y CSS. Súbelo y pruébalo con la CLI de HubSpot. Describimos este proceso en migración a HubSpot CMS con IA y Claude Code.
Ideal para: desarrolladores de HubSpot que quieren control total.
El inconveniente: alguien tiene que dominar HubL y revisar cada módulo. Lo lento es definir bien los campos, para que marketing pueda editar una sección sin romperla. Además, cada iteración consume tu cuota de Claude.
3. Convertirlo en un tema nativo de HubSpot con transjt
Para este camino creamos transjt: entra un diseño o un repositorio y sale un tema nativo de HubSpot, con módulos HubL reales que tu equipo de marketing edita en el editor drag-and-drop.
Desde Claude Code o Claude Design:
- Si empezaste en Claude Design, pasa el proyecto a Claude Code.
- Pide a Claude Code que construya el frontend en React con Vite, sin renderizado en el servidor. Es el único requisito que importa para la conversión, y Claude Code lo cumple si se lo dices desde el principio.
- Sube el proyecto a un repositorio de GitHub.
- Conecta el repositorio con transjt, elige HubSpot y revisa la vista previa.
A través de Figma: si tu equipo revisa los diseños en Figma, llévalo primero allí, con Claude Code y el servidor MCP de Figma o una herramienta de importación de HTML como html.to.design, y expórtalo con el plugin de Figma de transjt a HubSpot.
Lo que obtienes:
- Un tema nativo de HubSpot con módulos HubL que tu equipo de marketing reordena sin desarrolladores.
- Textos, imágenes y orden de las secciones que se cambian en el editor de HubSpot.
- Un blog nativo y formularios nativos.
- Diseños para escritorio, tablet y móvil incluidos.
- Listo en pocas horas, no en semanas.
Ideal para: agencias y equipos de marketing que quieren una web completa en HubSpot, no una sola página.
El inconveniente: es un producto de pago. Puedes empezar gratis y ver la vista previa antes de pagar; consulta los planes actuales en tarifas.
Los tres caminos comparados
| Importación con el conector | Claude Code + CLI de HubSpot | transjt | |
|---|---|---|---|
| Resultado | Una landing page (o email, diseño de blog) | Un tema a medida | Un tema nativo de HubSpot |
| Esfuerzo | Minutos | Días | Pocas horas |
| Conocimientos | Ninguno | HubL y desarrollo en HubSpot CMS | Ninguno |
| Módulos reutilizables | No | Sí, si los creas | Sí |
| Cabecera, pie, blog | No | Sí, si los creas | Sí |
| Ideal para | Una página de campaña | Desarrolladores que quieren control | Una web completa que edita tu equipo |
Situación a septiembre de 2026.
¿Qué camino elegir?
- Una página de campaña, rápido: impórtala con el conector.
- Eres desarrollador de HubSpot: crea el tema con Claude Code y el servidor MCP para desarrolladores.
- Un equipo gestionará toda la web en HubSpot: conviértela en un tema nativo con transjt.
Cuando la web esté en marcha, mantén el conector: Claude podrá ayudarte con el CRM, los emails y el contenido de la web que acabas de crear.
¿Trabajas con WordPress? Lee Claude a WordPress para conocer las opciones de conexión y los caminos hacia un tema nativo de WordPress.
Preguntas frecuentes
Sí. El conector oficial de HubSpot para Claude funciona con todos los niveles de HubSpot, incluido el CRM gratuito, y necesita un plan de pago de Claude. Un superadministrador lo aprueba y decide a qué datos puede acceder Claude.
Según la documentación de HubSpot, Claude puede leer y escribir registros del CRM, emails de marketing, landing pages, entradas de blog y páginas web, y registrar llamadas, notas y tareas. No puede borrar registros, y los cambios masivos están limitados a 10 registros a la vez.
Sí, como una sola página. El conector de HubSpot importa un Claude Design como nueva landing page, email o diseño de blog. Para una web completa con módulos reutilizables, necesitas un tema de HubSpot.
Depende del camino. Una página importada se crea a partir de un único archivo HTML y no incluye módulos reutilizables. Un tema creado con Claude Code es tan editable como lo sean sus módulos. Un tema de transjt incluye módulos HubL que tu equipo edita y reordena en el editor drag-and-drop.
Sí. WordPress tiene sus propias opciones de conexión, y los mismos caminos con Claude Code y Figma llevan a un tema nativo de WordPress con transjt.