Para freelancers, agencias digitales y equipos de marketing

Cómo trabajar con transjt.ai, HubSpot CMS, WordPress CMS y GitHub (Vibe Code)

Con transjt.ai puedes convertir diseños de Figma —o código que ya hayas creado con vibe coding en Lovable, v0, bolt.new, Claude Code y otros— en temas listos para HubSpot y WordPress. Descubre cómo importar desde Figma o GitHub, optimizar tu flujo de trabajo y ofrecer a tus clientes sitios web limpios y adaptables.

Regístrate

¿Cómo crear una cuenta en transjt.ai?

Regístrate usando la autenticación de Google o Figma, o con tu correo electrónico directamente en transjt.ai. Necesitarás esta cuenta para usar tanto el plugin como la aplicación.

Regístrate

¿Cómo descargar el plugin de transjt para Figma?

Puedes obtener el plugin de transjt a través de la aplicación transjt.ai o directamente en Figma, buscando ‘transjt’ en la sección de «Plugins y Widgets».

Abrir página del Plugin

¿Cómo conectar transjt con HubSpot?

Inicia sesión en transjt.ai, ve a Settings > Integrations, haz clic en Agregar cuenta, selecciona HubSpot y sigue las indicaciones. Se requieren permisos de administrador en HubSpot.

Ir a Integrations

¿Cómo crear proyectos en transjt.ai?

Abre transjt.ai, ve a la sección Projects y haz clic en el icono ‘+’ para crear un nuevo project. También puedes eliminar projects desde la misma vista general.

Ir a Projects

¿Cómo vincular projects de transjt con HubSpot?

Abre tu project y haz clic en el ícono de engranaje en la esquina superior izquierda. En la pestaña Integrations, agrega una nueva cuenta de HubSpot o selecciona una cuenta existente de la lista para vincularla.

¿Cómo vincular otra cuenta de HubSpot?

Abre tu project y haz clic en el ícono de engranaje. Si tienes varias cuentas de HubSpot integradas, selecciona la correcta. Si no, agrega una nueva cuenta siguiendo los pasos descritos anteriormente.

¿Cómo crear un proyecto de Vibe Code / GitHub?

Abre transjt.ai, ve a «Projects» y haz clic en «+» (Create new project). Ponle nombre al proyecto y selecciona «From GitHub» como origen.

¿Qué herramientas de vibe coding admite transjt?

Por ahora hemos probado y admitimos Lovable, Figma Make, Claude Code, builder.io, rocket.new, bolt.new, v0 y Replit. Para obtener un frontend limpio, añade esto a tu prompt: «Use React/Vite without Next.js and SSR».

¿Cómo autenticar GitHub?

Si no hay ninguna cuenta de GitHub conectada, haz clic en «Connect GitHub» y sigue los pasos de la ventana emergente (asegúrate de que tu navegador no la bloquee). Después selecciona la cuenta de GitHub, el repositorio y la rama, y haz clic en «Proceed».

¿Cómo importar código desde GitHub?

Una vez seleccionados el repositorio y la rama, transjt importa el código generado automáticamente y prepara el frontend para integrarlo en HubSpot o WordPress como theme personalizado.

¿Cómo previsualizar en transjt el código generado desde GitHub?

Tras la importación, transjt construye todo el frontend de tu proyecto y puedes recorrer cada página y su contenido. Después del paso «Deploy» también puedes previsualizar el frontend junto con el CMS (solo en WordPress).

¿Cómo exportar el código a HubSpot o WordPress?

Después de la vista previa, haz clic en la pestaña «Export» o en el botón «Export Now» y elige tu CMS: HubSpot o WordPress. Una vez completado el pago, generamos un theme nativo de HubSpot o WordPress y lo desplegamos en tu cuenta de HubSpot o en tu sitio de WordPress.

¿Qué se puede hacer cuando el theme está listo?

Cuando el código del frontend y el CMS se han combinado puedes descargar el theme e instalarlo manualmente, desplegarlo en tu cuenta de HubSpot o en tu sitio de WordPress, o previsualizarlo en la sandbox (solo en WordPress).

¿Cómo activar el plugin transjt en WordPress?

Descarga el plugin transjt, súbelo al panel de control de plugins de WordPress y haz clic en «Activar». Una vez activado, verás que transjt.ai aparece en el menú de administración de la izquierda.

¿Cómo conectar y autorizar transjt con WordPress?

Asegúrate primero de haber iniciado sesión en tu cuenta de transjt.ai. A continuación, haz clic en «transjt.ai» en la barra lateral izquierda y pulsa «Conectar». Aparecerá una ventana emergente en la que se te pedirá que autorices la conexión entre transjt y WordPress.

¿Cómo activar el tema transjt en WordPress?

Una vez realizada la primera exportación desde transjt al CMS de WordPress, encontrarás tu nuevo tema en «Apariencia > Temas». Tendrá el mismo nombre y la misma imagen de vista previa que configuraste en transjt.ai. Solo tienes que pasar el cursor por encima y hacer clic en «Activar».

¿Cómo crear páginas en WordPress?

Abre el panel de control de WordPress, ve a «Páginas» y haz clic en «Añadir nueva página». En la barra lateral izquierda verás los componentes personalizados generados por transjt. Solo tienes que arrastrarlos y soltarlos en tu página para crear tu diseño.

¿Cómo crear un blog en WordPress?

En Transjt, asigna la etiqueta «Blog» al diseño de la lista de entradas de tu blog y la etiqueta «Detalle del blog» al diseño de cada entrada individual; a continuación, expórtalos a WordPress. Una vez exportados, podrás insertar fácilmente estos componentes en tus entradas de WordPress.

¿Cómo añadir y configurar un menú de navegación en WordPress?

Regístrate en Google, Figma o, si lo prefieres, en transjt.ai. Necesitarás esta cuenta tanto para el complemento como para la aplicación.

¿Cómo añadir y configurar un pie de página en WordPress?

Regístrate en Google, Figma o, si lo prefieres, en transjt.ai. Necesitarás esta cuenta tanto para el complemento como para la aplicación.

¿Cómo añadir un formulario en WordPress?

Antes de exportar tu primer formulario desde transjt a WordPress, instala y activa el plugin «Contact Form 7». A continuación, exporta el formulario y la IA generará la estructura final por ti.

¿Cómo vincular su formulario diseñado a los formularios de HubSpot?

Simplemente diseñe cualquier formulario en Figma y vincúlelo con HubSpot en menos de 5 minutos sin escribir ninguna línea de código.

¿Qué son los "Componentes Globales"?

Los Componentes Globales pueden utilizarse, por ejemplo, para configurar un "widget de precios" una sola vez y vincularlo a diferentes páginas. Esto ahorra tiempo y trabajo.

Administra tu suscripción

Ofrecemos cuatro planes de subscription: Free, Creator, Professional y Enterprise (solo bajo solicitud). Puedes administrar o actualizar tu subscription en cualquier momento desde Settings > Subscription.

Ir a Subscriptions

¿Qué son las tasks en transjt?

La sección Tasks ofrece una vista general de todas las tasks activas de IA, incluidas las importaciones desde Figma y las exportaciones a HubSpot. Cuando una task se completa, se marcará como ‘Ready for export’. Si el componente ya existe en HubSpot, puedes elegir si reemplazarlo o mantener el existente. No olvides hacer clic en ‘Continue’ para continuar.

Uso de tokens: ¿cuándo se usan los tokens?

"Los tokens se usan cada vez que los diseños son procesados por la IA, tanto en la entrada (lo que envías) como en la salida (lo que genera la IA). Cada importación desde Figma y exportación a HubSpot consume tokens.

Cómo seleccionar el Theme de transjt en HubSpot y crear páginas

Crea un nuevo website project o una página en HubSpot CMS. Selecciona tu transjt theme buscando la imagen de vista previa y el nombre del project desde transjt.ai. Ten en cuenta que el transjt theme solo aparecerá después de tu primer export a HubSpot.

¿Cómo crear un diseño en UX Pilot y exportarlo con transjt a HubSpot?

Utilice UX Pilot para crear diseños en Figma con IA y exportarlos con transjt al CMS de HubSpot. ¡Este flujo de trabajo le ahorrará mucho tiempo!

¿Cómo crear un diseño en Relume.io y exportarlo con transjt a HubSpot?

Vaya más allá del wireframing y los mapas de sitio con Relume. Úselo para crear páginas de diseño y componentes, y exporte su proyecto directamente al CMS de HubSpot a través de transjt.ai.

Diseña componentes, no páginas, para export (figma-transjt)

Evita importar páginas completas en transjt.ai, ya que no se dividirán en components individuales. En su lugar, importa components únicos — esto facilita la construcción de páginas en HubSpot más adelante.

Usa la funcionalidad de Auto Layout de Figma

El Auto Layout de Figma es una herramienta potente: cuando se configura correctamente, funciona sin problemas con transjt.ai para obtener excelentes resultados y ahorrar tiempo tanto en el desarrollo frontend como backend. Recuerda agrupar los elementos lógicos para mantener tu diseño organizado y fácil de exportar.

Cómo añadir instrucciones para la IA en los diseños

Puedes añadir instrucciones para la IA directamente dentro de tu diseño en Figma. Simplemente escribe explicaciones de texto dentro del campo de texto de un component, y la IA las interpretará y aplicará. Por ejemplo: añade al título principal ‘Hover state with background shadow’, y la animación hover se generará automáticamente.

¿Cómo crear un formulario de varios pasos en Figma para HubSpot CMS?

Simplemente añade ambos pasos —por ejemplo, en un flujo de formulario— a tu archivo de diseño y etiquétalos como “Step 1” y “Step 2”. La IA los combinará en un formulario de varios pasos sin interrupciones e integrará automáticamente con HubSpot CMS.