🎨 Estudio de IA: Crea Más Rápido con Inteligencia Artificial
El Estudio de IA es un constructor conversacional impulsado por IA que te ayuda a crear sitios web, landing pages y otras experiencias interactivas más rápido usando indicaciones en lenguaje natural.
📋 Contenido de este Tutorial
🎨 ¿Qué es el Estudio de IA?
✨ Beneficios Clave
📍 Dónde Encontrar el Estudio de IA
🔐 Permisos de Usuario
🖥️ Vista General de la Interfaz
🚀 Creando un Proyecto
✏️ Cómo Editar y Refinar Proyectos
👁️ Vista Previa y Revisión
🕐 Historial de Versiones
📝 Integración de Formularios y Calendarios
🌐 Publicar tus Proyectos
📋 Clonar Proyectos
📊 Datos de Envíos de tu Proyecto
⚠️ Limitaciones Actuales
❓ Preguntas Frecuentes
🎨 ¿Qué es el Estudio de IA?
El Estudio de IA puede generar diseños, contenido, imágenes y experiencias de varias páginas a partir de una indicación, y luego te permite refinar el resultado con instrucciones de seguimiento.
Puede crear una sola página o varias secciones conectadas en el mismo proyecto web, ayudándote a llegar a un punto de partida más completo en vez de construir cada parte manualmente. También aplica un estilo consistente en toda la página, genera contenido según tu indicación y objetivo, y te entrega un borrador sólido para refinar después. Si no proporcionas imágenes, el Estudio de IA puede generar visuales para las secciones principales y de apoyo. Si subes imágenes y le pides explícitamente que las use, las colocará dentro de la página.
No se limita a sitios web o landing pages estándar. También puede usarse para crear experiencias interactivas como encuestas de varios pasos, flujos de reserva de calendario personalizados, formularios de marca y otras experiencias de cara al cliente.
El Estudio de IA te puede ayudar a:
Crear una landing page usando una URL en vivo como inspiración para el diseño y la estructura.
Construir un escaparate usando tus fotos de marca subidas.
Generar un diseño de dashboard para un caso de uso específico de tu negocio.
Crear una página de reserva de citas conectada a tu calendario.
Construir un sitio web con contenido, visuales y llamados a la acción ya listos.
💡 Nota: el Estudio de IA y el Estudio de Agentes IA son dos herramientas distintas dentro de CRMHUB. El Estudio de IA es un constructor conversacional para crear sitios web, páginas y otros recursos web usando indicaciones. El Estudio de Agentes IA es un constructor visual para crear agentes de IA que responden a eventos, interactúan con usuarios y automatizan tareas.
✨ Beneficios Clave
Creación más rápida: empieza con una indicación en vez de construir cada sección manualmente.
Edición natural: pide cambios en lenguaje simple y deja que la IA actualice el proyecto.
Refinamiento visual: haz clic en elementos de la vista previa en vivo para actualizar texto, imágenes, íconos, espaciado, colores y detalles de diseño sin tocar código.
Inspiración flexible: usa plantillas, URLs, capturas de pantalla e imágenes subidas para guiar el resultado.
Iteración segura: usa el historial de versiones y las opciones de restauración para probar cambios con más confianza.
Organización integrada: gestiona proyectos, carpetas, trabajo reciente y favoritos desde un solo lugar.
Ruta a producción: previsualiza, publica y conecta un dominio personalizado cuando el proyecto esté listo.
📍 Dónde Encontrar el Estudio de IA
El Estudio de IA está disponible desde el menú de navegación izquierdo de tu cuenta, una vez habilitado en la sección de Funciones Beta.
Paso 1: Abre tu cuenta en CRMHUB.
Paso 2: Habilita el Estudio de IA en Funciones Beta si aún no está activado.
Paso 3: En el menú de navegación izquierdo, haz clic en Estudio de IA.
🔐 Permisos de Usuario
Los permisos del Estudio de IA ayudan a los administradores y dueños de cuenta a controlar qué miembros del equipo pueden acceder, ver y gestionar los recursos del Estudio de IA. Incluye dos niveles:
Ver Estudio de IA: acceso de solo lectura.
Ver y Gestionar Estudio de IA: acceso completo de lectura y escritura.
🖥️ Vista General de la Interfaz
La pantalla principal es donde inicias proyectos nuevos, reabres trabajo anterior y gestionas todo lo que has construido. Al abrir el Estudio de IA verás:
Un cuadro de descripción donde escribes lo que quieres construir.
Pestañas como Vistos Recientemente, Mis Proyectos, Favoritos y Plantillas.
Opciones de plantilla como landing pages, dashboards, escaparates de ecommerce, portafolios y blogs.
Un panel lateral con acceso a proyectos y trabajo reciente.
Desde ahí puedes iniciar un proyecto nuevo, abrir uno existente, renombrarlo, moverlo a una carpeta o eliminarlo.
🚀 Creando un Proyecto
Empezar con una Indicación
Escribe una indicación describiendo lo que quieres construir. Mientras más detalle des, mejor será el primer borrador. También puedes usar entradas de apoyo como archivos, imágenes o una URL en vivo para estructura, diseño o inspiración de estilo.
Ejemplos de indicaciones:
"Crea un sitio web para una clínica dental con reserva de citas en línea."
"Construye un portafolio para un diseñador freelance usando las imágenes de marca adjuntas."
"Construye una página de inicio para un campamento familiar usando esta URL como inspiración para el estilo de navegación y la estructura general."
"Crea un sitio web de skincare boutique usando la captura de pantalla adjunta como dirección visual para la sección principal, el espaciado y la tipografía."
Preferencias de Diseño Guiadas
No necesitas escribir una indicación perfecta para empezar. Cuando una solicitud es amplia o le faltan detalles importantes de diseño, el Estudio de IA puede hacer preguntas de seguimiento antes de construir, para que el primer borrador se ajuste mejor a tu objetivo, tu marca y el estilo que prefieres.
Puede pedirte que elijas preferencias como:
Paleta de colores: elige entre muestras visuales curadas sin necesidad de dar códigos hexadecimales.
Estilo tipográfico: elige combinaciones de fuentes que definan la personalidad de la página (moderno, limpio, premium, creativo, editorial, enérgico).
Dirección de diseño: elige entre opciones visuales de layout (secciones en grilla, layouts divididos, editorial, galería, por secciones).
Objetivo de conversión: elige la acción principal que la página debe fomentar (reservar una llamada, vender un producto, captar leads).
Puedes revisar tus respuestas antes de enviarlas, saltar preguntas individuales, o hacer clic en Saltar todo para que el Estudio de IA elija opciones sensatas según tu solicitud.
Empezar con una Plantilla
Las plantillas son útiles cuando quieres un punto de partida más rápido con una estructura familiar. El Estudio de IA ofrece plantillas para tipos de proyecto comunes: landing page, dashboard, escaparate de ecommerce y portafolio. Haz clic en la pestaña Plantillas y selecciona la que quieras.
✏️ Cómo Editar y Refinar Proyectos
El Estudio de IA funciona mejor como un constructor conversacional. No estás atado a la primera versión que crea; después de la generación puedes seguir pidiendo cambios como:
Cambiar colores o estilos.
Reescribir titulares o texto del cuerpo.
Agregar un formulario de contacto o una sección de reservas.
Usar una URL de referencia o captura de pantalla para una sección específica.
Ejemplos de indicaciones de seguimiento: "Cambia los colores a verde claro en vez de naranja." · "Agrega una página de Contacto." · "Haz que la navegación superior se parezca a la URL de referencia." · "Agrega una sección de testimonios similar a la captura adjunta."
👁️ Vista Previa y Revisión
Dentro del editor puedes: cambiar entre vista de Vista Previa y Código; ver el proyecto en modo escritorio, tablet y móvil; usar el menú desplegable de página para cambiar entre páginas de un proyecto de varias páginas; y abrir la página seleccionada en una pestaña nueva o refrescar la vista previa después de cambios.
🕐 Historial de Versiones
Cada cambio generado por IA crea una versión a la que puedes volver más tarde. Desde el historial de versiones puedes abrir versiones anteriores, previsualizarlas, marcarlas como favoritas, o revertir a una versión anterior si lo necesitas. Haz clic en el botón Historial de Versiones dentro de tu proyecto para verlo.
📝 Integración de Formularios y Calendarios
⚠️ Importante: los formularios y calendarios no se conectan automáticamente. El Estudio de IA puede crear el diseño de un formulario o sección de reservas, pero debes pedirle que conecte ese componente antes de que empiece a enviar datos a tu cuenta.
Cómo Funcionan los Formularios
El Estudio de IA puede crear secciones y páginas basadas en formularios a partir de una indicación (formulario de contacto, registro, feedback, captación de leads). En esta etapa, el formulario empieza como un diseño de front-end, y puede aparecer en la página antes de estar conectado a tu CRM.
Cuando quieras que el formulario empiece a recibir envíos, pídele al Estudio de IA que lo conecte, o haz clic en Conectar cuando se te indique en el chat. Esto activa el flujo de Conectar al CRM, que se usa para crear contactos en tu cuenta, capturar envíos de formularios, y dar soporte a workflows mediante disparadores de seguimiento.
Cómo Funcionan los Calendarios
El Estudio de IA también puede crear páginas enfocadas en reservas. Si pides una página de citas, consultoría o llamada de descubrimiento, puede construir la página alrededor del agendamiento y agregar una sección de reservas.
El flujo funciona así: (1) el Estudio de IA crea el área de reserva en la página; (2) seleccionas un calendario existente en tu cuenta; (3) ese calendario queda conectado a la página.
🌐 Publicar tus Proyectos
Publicar tu proyecto lo hace disponible a través de una URL en vivo para revisarlo, compartirlo y lanzarlo en tu propio dominio.
Publicar en un Dominio de Vista Previa
Paso 1: Haz clic en Publicar en la esquina superior derecha. Actualiza la URL si lo necesitas y haz clic en Publicar de nuevo.
Paso 2: Actualiza el ícono, nombre, descripción e imagen social. Haz clic en Aplicar Cambios.
Paso 3: Haz clic en Publicar.
Conectar un Dominio Personalizado
No puedes conectar un dominio personalizado hasta que el proyecto se haya publicado primero en un dominio de vista previa.
Paso 1: Haz clic en Publicar, luego selecciona Agregar Dominio Personalizado.
Paso 2: Ingresa el dominio que quieres conectar. Si escribes un dominio raíz (ejemplo.com) o su versión www, aparecerá la opción de agregar también el otro y configurar una redirección. Se recomienda conectar ambas versiones.
Paso 3: Si el dominio ya está gestionado en CRMHUB, la configuración continúa dentro del flujo. Si se encuentran registros en conflicto, revisa la advertencia antes de hacer clic en Agregar Registros.
Paso 4: Si el dominio no está gestionado en CRMHUB, agrega el o los registros DNS mostrados y haz clic en Verificar DNS.
Paso 5: Una vez completada la configuración, el chat de IA mostrará que el dominio personalizado está conectado, con una opción de Ver sitio.
Definir una URL Principal Publicada
Te permite elegir el dominio principal en vivo para tu proyecto. Las demás URLs conectadas harán una redirección automática hacia el dominio principal.
Paso 1: Haz clic en Publicar, luego en el menú de tres puntos junto a la URL que quieres hacer principal.
Paso 2: Haz clic en Establecer como principal.
📋 Clonar Proyectos
El Estudio de IA te permite clonar un proyecto dentro de tu misma cuenta. Al clonar un proyecto puedes duplicarlo, ubicarlo en la raíz o dentro de una carpeta existente, y elegir si incluir el historial de chat y de versiones del proyecto original.
Paso 1: Haz clic en el menú de tres puntos del proyecto que quieres clonar y selecciona Clonar.
Paso 2: En la ventana de clonación, ingresa el nombre del nuevo proyecto y elige la carpeta destino (o déjalo en la raíz).
Paso 3: Activa o desactiva Incluir historial del proyecto. Con historial incluye el chat y las versiones del proyecto original; sin historial crea una copia limpia.
Paso 4: Haz clic en Clonar.
📊 Datos de Envíos de tu Proyecto
Una vez conectado, los envíos de formularios van al CRM de tu cuenta conectada, no al proyecto del Estudio de IA en sí. Puedes ver los envíos en Contactos, o en Sitios → Formularios → Envíos → Formularios Externos.
Los formularios del Estudio de IA pueden usar el disparador de workflow "Formulario del Estudio de IA Enviado", que inicia un workflow cuando se envía un formulario conectado, con filtros por proyecto, formulario, ruta de página y dominio.
⚠️ Limitaciones Actuales
Los proyectos del Estudio de IA se gestionan dentro del Estudio de IA y no pueden moverse a los constructores estándar de Sitios o Embudos.
La recreación basada en URL o imágenes debe tratarse como inspiración de estructura, diseño y estilo, no como una copia exacta.
Los formularios y calendarios pueden requerir pasos de conexión antes de funcionar con los datos y el agendamiento de tu cuenta.
❓ Preguntas Frecuentes
¿El Estudio de IA es solo para sitios web y landing pages? No. También puede crear otras experiencias de front-end como encuestas de varios pasos, formularios de marca, flujos de reserva y otras experiencias interactivas de cara al cliente.
¿Necesito mover un proyecto a Embudos o Sitios antes de publicarlo? No. Los proyectos del Estudio de IA se publican directamente desde ahí mismo. Puedes construir varias páginas, conectarlas dentro del mismo proyecto, y luego publicar y conectar un dominio desde ese espacio.
¿Puedo mover o copiar un proyecto del Estudio de IA a Embudos o Sitios? No. Los proyectos permanecen en el Estudio de IA y no pueden copiarse a los constructores estándar.
¿Puedo previsualizar mi proyecto en móvil antes de publicar? Sí. Incluye opciones de vista previa para escritorio, tablet y móvil. Haz clic en el ícono de computadora en la parte superior de la vista previa para cambiar entre modos.
