DocumentaciónPrimeros pasosInicio rápido
Inicio rápido
Pasa de un diseño a un tema que funciona en tu CMS. Tu tema estará listo en pocas horas.
Antes de empezar
Necesitas:
- Una cuenta de transjt.
- Una cuenta de HubSpot con permisos de Super Admin, o una instalación nueva de WordPress.
- Un diseño en Figma, un repositorio en GitHub o la dirección de la web publicada que vas a migrar. ¿Aún no tienes diseño? Usa el archivo gratuito transjt Figma Playground, o deja que el Generador de prompts para webs gratuito escriba el prompt para tu builder de IA.
- El plan adecuado: las importaciones desde Figma funcionan con una suscripción de transjt (Free, Creator o Professional), un proyecto de GitHub se exporta como una compra única de la web completa, y una migración es un pago único por sitio.
1. Crea tu cuenta
Ve a transjt.ai y regístrate con Figma, Google, HubSpot, GitHub o tu correo electrónico. La misma cuenta sirve para el plugin y para la app.
2. Conecta tu CMS
Conecta el CMS al que quieres exportar. Solo necesitas uno de los dos.
HubSpot
- Inicia sesión en transjt.ai y abre Settings > Integrations.
- Haz clic en Add CMS y elige HubSpot.
- Se abre una ventana de HubSpot (OAuth). Inicia sesión y autoriza a transjt. HubSpot pide permisos de Super Admin.
¿No se abre nada? Tu navegador ha bloqueado la ventana emergente. Permite las ventanas emergentes para app.transjt.ai y vuelve a intentarlo.
También puedes saltarte este paso por ahora y conectar HubSpot más adelante, en el paso Deploy de tu proyecto.
Más información en Conectar HubSpot.
WordPress
- Descarga el plugin de transjt y súbelo en Plugins, en el panel de WordPress.
- Haz clic en Activate. transjt.ai aparece en el menú de administración de la izquierda.
- Sin cerrar la sesión de transjt.ai, haz clic en transjt.ai en la barra lateral y elige Connect. Autoriza la conexión en la ventana emergente.
Más adelante, en el paso Deploy de tu proyecto, seleccionas este sitio en Select Existing Account.
Más información en Conectar WordPress.
3. Crea un proyecto
En transjt.ai, abre Projects y haz clic en +. Ponle un nombre al proyecto, añade una imagen de portada si quieres y haz clic en Create. La imagen de portada se usa después como imagen de vista previa de tu tema en HubSpot o WordPress, para que lo reconozcas cuando lo elijas allí. En el siguiente paso, Source, elige de dónde viene tu diseño: Figma, GitHub o Migration (una web publicada que vas a migrar). Si trabajas desde Figma, también puedes crear el proyecto desde el plugin (consulta el paso 4).
Todos los proyectos siguen los mismos pasos, que se muestran en la parte superior de la pantalla: Create → Source → Import → Preview → Export → Deploy.
Desde esa misma vista general también puedes eliminar proyectos.
La cuenta de HubSpot de un proyecto se elige en el paso Deploy: abre Select Existing Account para elegir una cuenta conectada, o haz clic en Add HubSpot para conectar una nueva desde ahí. Una web de WordPress tiene que estar conectada antes mediante el plugin (paso 2).
4. Importa tu diseño
Elige tu camino: un diseño de Figma o código de un builder de IA en GitHub.
Desde Figma
- Instala el plugin de transjt desde la Figma Community, o busca «transjt» en Plugins & Widgets en Figma. También lo encuentras en la app de transjt, en Plugins.
- Inicia sesión en el plugin.
- En Select type, elige lo que vas a importar: Component, Blog (el diseño del listado del blog) o Blog Detail (el diseño de una entrada).
- En Projects, elige un proyecto existente o haz clic en Create Project y ponle un nombre.
- En Figma, selecciona las capas que quieres convertir y haz clic en Import to transjt.
- Los componentes seleccionados se transfieren a la app de transjt.
Desde GitHub
- Elige GitHub en el paso Source de tu proyecto.
- Haz clic en Connect GitHub y sigue las indicaciones de la ventana emergente. Si no se abre nada, comprueba que tu navegador no esté bloqueando las ventanas emergentes.
- Selecciona la cuenta, el repositorio y la rama, y haz clic en Proceed.
transjt importa el código y construye el frontend de tu proyecto. Para obtener el resultado más limpio, añade esto a tu prompt: «Usa React/Vite sin Next.js ni SSR». Con v0, bolt.new, Claude Code o Replit, pide en su lugar una exportación estática de Next.js. Consulta Builders de IA compatibles.
5. Vista previa
En la app de transjt, previsualiza los componentes importados antes de exportar. En los proyectos de GitHub, recorre cada página y su contenido. En WordPress también puedes previsualizar el frontend combinado con el CMS después del paso Deploy.
¿Falta alguna fuente? El botón Aa de la parte superior derecha muestra cuántas faltan y te permite subirlas o sustituirlas. Consulta Fuentes.
6. Exportación
Haz clic en Export en la app de transjt (en los proyectos de GitHub el botón también se llama «Export») y elige 
HubSpot o 
WordPress. transjt genera el tema. Lo envías a tu CMS en el siguiente paso, Deploy.
Proyectos de GitHub
la exportación es un pago único por la web completa. Completa el pago cuando se te pida.
Proyectos de Figma
las importaciones usan tokens de tu suscripción. Las exportaciones no usan ninguno. Gestiona o mejora tu plan en Settings > Subscriptions.
7. Despliegue
En el paso Deploy ves Ready to deploy con tu paquete actual: la fecha, los componentes que contiene y estos botones:
- Deploy Theme to HubSpot o Deploy Theme to WordPress: envía el tema a tu CMS.
- Download Theme: descarga el tema como archivo ZIP para instalarlo manualmente. Consulta cómo hacerlo en HubSpot y en WordPress.
- Open Preview (solo WordPress): muestra tu web combinada con WordPress en un entorno de pruebas.
La primera vez que despliegas un proyecto, transjt te pregunta dónde desplegarlo (Select Account or Add new): elige una cuenta conectada en Select Existing Account o haz clic en Add HubSpot. Una vez vinculado el proyecto, este paso se omite.
HubSpot
Haz clic en Deploy Theme to HubSpot. ¿Aún no está vinculado? Selecciona tu cuenta o haz clic en Add HubSpot e inicia sesión.
Más información en Conectar HubSpot.
WordPress
Haz clic en Deploy Theme to WordPress. ¿Aún no está vinculado? Selecciona tu sitio en Select Existing Account. Aparece ahí en cuanto el plugin de transjt está conectado.
Más información en Conectar WordPress.
Paquetes anteriores
Cada exportación crea un paquete. El más reciente se muestra arriba; los anteriores aparecen en Previous Packages. De cada paquete ves:
- la fecha y la hora de la exportación,
- cuándo se desplegó por última vez (en verde, con un icono de nube; el paquete actual muestra Last Deploy),
- sus componentes, al abrirlo con la flecha.
Con los dos botones junto a un paquete anterior puedes:
- Descargarlo, para instalar esa versión manualmente, o
- Volver a desplegarlo, por ejemplo para volver a una versión anterior de tu tema.
8. Empieza a crear
HubSpot
Crea una página o un proyecto de sitio web y elige tu tema por su nombre y su imagen de vista previa. Aparece después de tu primera exportación.
Más información en Usar tu tema en HubSpot.
WordPress
Ve a Appearance > Themes, pasa el cursor sobre el tema y haz clic en Activate. Las páginas nuevas muestran tus bloques en la barra lateral izquierda.
Más información en Usar tu tema en WordPress.