Saltar al contenido principal

AI Studio en Ropofy

Actualización

AI Studio es un constructor impulsado por IA en Ropofy que te ayuda a crear sitios web, páginas de destino y otras experiencias interactivas más rápido utilizando indicaciones en lenguaje natural. En lugar de construir todo desde cero, puedes describir lo que quieres, usar plantillas, referenciar una URL o imagen y refinar el resultado con IA. AI Studio está diseñado para acelerar la creación mientras mantiene tus proyectos organizados dentro de un espacio de trabajo dedicado.

Importante: AI Studio está disponible a través de Labs. Actívalo para tu subcuenta antes de usarlo.

---

---

¿Qué es AI Studio?

 

AI Studio es un constructor conversacional, potenciado por IA, que te ayuda a convertir ideas en experiencias digitales funcionales más rápido. Puede generar estructuras, contenido, imágenes y experiencias multi-página a partir de una indicación y luego permite refinar el resultado a través de instrucciones posteriores.

 

AI Studio puede crear una página o varias secciones conectadas en el mismo proyecto web, ayudando a los usuarios a llegar a un punto inicial más completo más rápido, en lugar de construir cada parte manualmente. También aplica un aspecto coherente en toda la página, genera contenido basado en la indicación y el objetivo de la página, y ofrece un primer borrador sólido que los usuarios pueden refinar después. Si un usuario no proporciona imágenes, AI Studio puede generar elementos visuales para las secciones principales y áreas de soporte. Si el usuario sube imágenes y le solicita claramente a AI Studio que las use, puede colocar esas imágenes en la página.

 

AI Studio no está limitado a sitios web estándar o páginas de destino. También puede usarse para crear experiencias interactivas front-end, como encuestas de varios pasos, flujos personalizados de reserva en calendarios, formularios con marca y otras experiencias de cara al cliente. Esto convierte a AI Studio en un espacio de trabajo creativo más amplio para construir experiencias para clientes, no solo páginas estáticas.

 

AI Studio puede ayudarte a:

  • Crear una página de destino usando una URL activa como inspiración para la estructura y diseño
  • Construir una tienda online utilizando tus propias fotos de marca
  • Generar un diseño de panel de control para un caso de uso de negocio específico
  • Crear una página de reservas conectada a tu calendario
  • Construir un sitio web con contenido, imágenes y llamados a la acción ya incluidos
Nota: AI Studio y Agent Studio son dos herramientas de IA separadas dentro de Ropofy, diseñadas para diferentes casos de uso. AI Studio es un constructor conversacional asistido por IA que te ayuda a crear rápidamente sitios web, páginas y otros activos web usando indicaciones. Agent Studio es un constructor visual para crear agentes impulsados por IA que pueden responder a eventos, interactuar con usuarios y automatizar tareas.

---

Beneficios clave de AI Studio

 

AI Studio ayuda a los equipos a crear más rápido, experimentar con mayor facilidad y pasar de la idea al lanzamiento con menos trabajo manual. Su mayor ventaja es que combina generación, iteración, previsualización y gestión de proyectos en un solo espacio de trabajo.

 

  • Creación rápida: Comienza con una indicación en vez de construir cada sección manualmente
  • Edición natural: Solicita cambios en lenguaje común y permite que IA actualice el proyecto

  • Refinamiento visual: Haz clic en elementos en la vista previa en vivo para actualizar texto, imágenes, iconos, espaciado, colores y detalles de diseño sin editar código.

  • Inspiración flexible: Usa plantillas, URLs, capturas de pantalla e imágenes subidas para guiar el resultado
  • Iteración segura: Utiliza el historial de versiones y las opciones de restauración para probar cambios con más confianza
  • Organización integrada: Gestiona proyectos, carpetas, trabajos recientes y elementos destacados desde un solo lugar

  • Camino a producción: Previsualiza, publica y conecta un dominio personalizado cuando el proyecto esté listo

---

Dónde encontrar AI Studio

 

AI Studio está disponible desde la navegación izquierda dentro de tu subcuenta después de habilitarlo en Labs. Esto facilita volver a tus proyectos y continuar trabajando desde el mismo espacio de trabajo a lo largo del tiempo.

 

  1. Abre tu subcuenta en Ropofy.

  2. Activa AI Studio en Labs si aún no está activado.

  3. En la navegación izquierda, haz clic en AI Studio.

 

---

Permisos de usuario para AI Studio

 

Los permisos de AI Studio ayudan a los administradores y propietarios de cuentas a controlar qué miembros del equipo pueden acceder, ver y gestionar los recursos de AI Studio. AI Studio incluye dos niveles de permisos:

  • Ver AI Studio: Proporciona acceso solo de lectura a AI Studio.
  • Ver y gestionar AI Studio: Proporciona acceso completo de lectura y escritura a AI Studio.

 

---

Pantalla principal e interfaz de AI Studio

 

La pantalla principal de AI Studio es donde empiezas nuevos proyectos, reabres trabajos pasados y gestionas todo lo que has creado. Entender este diseño hace más sencillo moverse rápidamente entre creación, edición y organización.

 

Cuando abres AI Studio, verás:

  • Un cuadro de descripción donde puedes escribir lo que deseas construir
  • Pestañas como Visto recientemente, Mis proyectos, Destacados y Plantillas
  • Opciones de plantilla como páginas de destino, tableros, tiendas ecommerce, portafolios y blogs
  • Una barra lateral izquierda con acceso a proyectos y trabajos recientes

 

Desde el área principal, puedes iniciar un nuevo proyecto, abrir uno existente, renombrarlo, mover un proyecto a una carpeta o eliminarlo.

 

---

Creación de un proyecto en AI Studio

 

AI Studio te da varias formas de comenzar, lo que ayuda a diferentes usuarios a partir del tipo de entrada que ya tienen. Ya sea que comiences con una idea, una plantilla, una referencia de sitio web o una imagen, el objetivo es el mismo: llegar a un primer borrador fuerte más rápidamente.

 

 

Comenzar con una indicación

 

Puedes escribir una indicación que describa lo que quieres construir. Cuantos más detalles brindes, mejor AI Studio podrá dar forma a la primera versión. Junto con tu indicación, también puedes usar archivos de apoyo, imágenes o una URL en vivo para inspirar la estructura, el diseño o el estilo.

 

Ejemplos de indicaciones:

  • Crea un sitio web para una clínica dental con reservas online
  • Construye un sitio de portafolio para un diseñador freelance usando las imágenes de marca adjuntas
  • Construye la página principal de un campamento familiar utilizando esta URL como inspiración para el estilo de navegación y la estructura general: https://www.campingvacation.com/
  • Crea un sitio boutique de cuidado de la piel 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 es necesario escribir una indicación perfecta para empezar. Cuando una solicitud es muy amplia o le faltan detalles importantes de diseño, AI Studio puede hacer preguntas de seguimiento antes de construir para que el primer borrador se ajuste mejor a la meta, marca y aspecto preferido del usuario.

 

Por ejemplo, si un usuario dice, “construye un sitio web para mi empresa,” AI Studio puede preguntar para qué tipo de negocio es el sitio, cuál debe ser el objetivo principal de conversión, o qué dirección de diseño encaja mejor con la marca. Estas preguntas pueden tener opciones simples, alternativas visuales, deslizadores o respuestas de texto personalizado.

 

AI Studio puede pedir a los usuarios escoger preferencias como:

  • Paleta de colores: Selecciona entre gamas visuales curadas sin necesitar dar colores exactos o códigos hexadecimales.
  • Estilo tipográfico: Elige combinaciones de fuentes que definan la personalidad de la página, como moderna, limpia, premium, creativa, editorial o enérgica.
  • Dirección del diseño: Selecciona opciones visuales de disposición como secciones en cuadrícula, diseños divididos, editoriales, tipo galería o por secciones.
  • Objetivo de conversión: Elige la acción principal que la página debe impulsar, como agendar una llamada, vender un producto o captar clientes potenciales.

 

Las preguntas guiadas de diseño solo aparecen cuando son útiles. Si el usuario ya da una dirección de estilo clara, AI Studio puede empezar a construir directamente.

Los usuarios también pueden revisar sus respuestas antes de enviar, omitir preguntas individuales, o hacer clic en Omitir todo para que AI Studio escoja las opciones más sensatas según lo solicitado.

 

 

 

Comenzar con una plantilla

 

Las plantillas son útiles cuando deseas un punto inicial más rápido con una estructura conocida. AI Studio ofrece plantillas para tipos de proyectos comunes como:

  • Página de destino
  • Tablero

  • Tienda ecommerce

  • Portafolio

 

Para usar una plantilla, haz clic en la pestaña Plantillas y selecciona la plantilla que desees.

 

---

Cómo editar y refinar proyectos

 

AI Studio funciona mejor como un constructor conversacional. No estás obligado a usar la primera versión que crea, lo cual facilita seguir mejorando el resultado hasta que coincida con tu meta. Después de la generación, puedes seguir pidiendo a AI Studio que haga cambios como:

  • Cambiar colores o estilos
  • Reescribir titulares o textos principales

  • Agregar un formulario de contacto o sección de reservas

  • Usar una URL o captura de pantalla como referencia para alguna sección

 

Ejemplos de indicaciones de ajuste:

  • Cambia los colores por un verde claro en vez de naranja
  • Agrega una página de contacto
  • Haz la navegación superior similar a la URL de referencia
  • Agrega una sección de testimonios similar a la captura adjunta
  • Cambia la imagen de la sección principal por la imagen adjunta

 

AI Studio también puede usar imágenes subidas en el proyecto. Si no proporcionas imágenes, puede generar imágenes visuales para ti.

---

Ediciones visuales en AI Studio

 

Las Ediciones Visuales permiten a los usuarios refinar directamente los proyectos de AI Studio desde la vista previa en vivo. En lugar de usar indicaciones o abrir el Editor de Código para cada pequeño ajuste, los usuarios pueden seleccionar elementos en la página y realizar actualizaciones visuales a texto, botones, imágenes, iconos, colores, espaciado y detalles de diseño.

 

Para entrar al modo de Edición Visual, haz clic en Ediciones Visuales en el área de indicaciones en la parte inferior izquierda del constructor.

 

Tras habilitar el modo de Edición Visual, la vista previa se vuelve interactiva. Los usuarios pueden hacer doble clic en el texto para editarlo en línea, seleccionar elementos para abrir controles contextuales o utilizar una indicación en los elementos seleccionados cuando deseen ayuda de la IA con un cambio específico.

 

---

Editor de Código en AI Studio

 

AI Studio también incluye un Editor de Código integrado para quienes quieren mayor control directo de sus proyectos. El Editor de Código te permite editar manualmente el código subyacente para personalizarlo con precisión.

 

Esto es especialmente útil para cambios específicos de diseño, ajustar funcionalidad o refinar resultados generados por la IA sin regenerar todo el proyecto. Puedes usar el Editor de Código para actualizar la estructura, modificar estilos, depurar problemas y ajustar comportamientos avanzados—todo dentro de AI Studio, con los cambios reflejados en tiempo real.

 

---

Soporte SEO avanzado en AI Studio

 

AI Studio incluye herramientas SEO incorporadas para ayudar a que tus proyectos sean encontrados por motores de búsqueda, plataformas sociales y experiencias de búsqueda impulsadas por IA.

 

Como los sitios hechos con AI Studio se construyen como aplicaciones web modernas y rápidas, pueden ser más difíciles de leer por motores de búsqueda o rastreadores por defecto. El soporte SEO avanzado resuelve esto haciendo que tu contenido sea más accesible y fácil de indexar—sin cambiar cómo se ve o rinde tu sitio para los visitantes.

 

Con SEO activado, puedes:

  • Mejorar cómo tu sitio es rastreado e indexado por los motores de búsqueda
  • Asegurar que los enlaces compartidos muestren título, descripción e imagen de vista previa correctos
  • Generar un sitemap para que los motores encuentren tus páginas más rápido
  • Hacer tu contenido más legible para herramientas de búsqueda IA como ChatGPT u otros asistentes

 

Estas funciones trabajan juntas para mejorar tu visibilidad tanto en búsqueda tradicional, como en redes sociales y nuevas búsquedas por IA.

---

Previsualización y revisión de tu proyecto

 

Las herramientas de previsualización te ayudan a chequear cómo se ve el proyecto antes de publicarlo. Estos controles son útiles para revisar la estructura, probar varias páginas y confirmar la experiencia en diferentes dispositivos.

 

Dentro del editor puedes:

  1. Cambiar entre vistas de Previsualización y Código
  2. Ver el proyecto en modalidad escritorio, tablet y móvil
  3. Usar el desplegable de página para cambiar entre páginas en proyectos multipágina

  4. Abrir la página seleccionada en una nueva pestaña o refrescar la previsualización tras cambios

---

Historial de versiones

 

Cada cambio generado por IA crea una versión a la que puedes regresar más adelante. Esto te da una forma segura de refinar tu trabajo sin preocuparte por perder un borrador anterior. Desde el historial de versiones puedes:

  • Abrir versiones anteriores

  • Previsualizar una versión pasada
  • Marcar una versión

  • Restaurar una versión anterior si es necesario

 

Es útil para comparar cambios, deshacer el resultado de una indicación o regresar a una versión que encajaba mejor con tu objetivo.

 

Para ver el historial de versiones, haz clic en el botón Historial de versiones dentro de tu proyecto.

 

---

Integración de formularios y calendario

 

Los formularios y los calendarios te ayudan a convertir una página generada por IA en una experiencia funcional que puede recopilar información o agendar citas con tu negocio. AI Studio puede construir el front-end de estas acciones y luego guiarte por los pasos necesarios para que sean funcionales dentro de tu cuenta Ropofy. De esta forma, el resultado es más útil desde el inicio aunque tú decides cuándo se conectan los formularios y calendarios.

Importante: Los formularios y calendarios no se conectan automáticamente. AI Studio puede crear el diseño del formulario o sección de reservas, pero debes pedirle que conecte ese componente antes de que empiece a enviar datos a tu subcuenta.

Cómo funcionan los formularios en AI Studio

 

AI Studio puede crear secciones basadas en formularios y experiencias de página a partir de una indicación. Por ejemplo, puedes pedirle agregar un formulario de contacto, registro, feedback o captura de leads en la página. En esta etapa, el formulario inicia solo como layout de front-end. Es decir, el formulario aparece en la página antes de estar conectado a tu CRM.

 

Cuando desees que el formulario empiece a recolectar envíos, pídele a AI Studio que lo conecte o haz clic en Conectar cuando lo pida en el chat. Esto inicia el flujo Conectar al CRM, que se utiliza para:

  • Crear contactos en la subcuenta

  • Capturar envíos en el formulario

  • Soportar flujos de trabajo a través de activadores de seguimiento

 

Una vez completada esa conexión, AI Studio puede enlazar el formulario al setup conectado para que los envíos lleguen a tu cuenta Ropofy.

 

 

Cómo funcionan los calendarios en AI Studio

 

AI Studio también puede crear páginas enfocadas en reservas. Si pides una página de citas, consulta o llamada de descubrimiento, puede construir la página centrada en la programación y agregar la sección correspondiente.

 

Para hacer funcional la experiencia de reservas, AI Studio puede detectar calendarios ya existentes en la subcuenta y pedirte elegir cuál conectar. A grandes rasgos, el flujo del calendario es así:

  1. AI Studio crea la zona de reservas en la página.
  2. Seleccionas un calendario de la subcuenta.

  3. Ese calendario se conecta a la página.

 

Así es más sencillo convertir una página de reservas en una experiencia funcionante sin necesidad de construir todo a mano.

 

---

Publicando tus proyectos

 

Publicar tu proyecto de AI Studio lo hace accesible mediante una URL activa para revisarlo, compartirlo y lanzarlo en tu propio dominio. Ropofy soporta un flujo simple de publicación: comienza con una URL de vista previa y luego puedes conectar un dominio personalizado y elegir la URL publicada principal para los visitantes.

 

Después de publicar un sitio, los usuarios pueden seguir editando. Esos cambios permanecen en borrador hasta que se publique nuevamente. Así puedes mejorar la página sin modificar la versión activa enseguida.

 

Cuando un proyecto de AI Studio está conectado a un dominio:

  • El proyecto se encuentra en AI Studio bajo Sitios

  • La conexión de dominio es visible en Dominios

  • La página publicada aparece en ese dominio conectado

 

Publicar en un dominio de vista previa

 

Publicar en un dominio de vista previa te da una versión activa de tu proyecto AI Studio antes de conectar un dominio de marca. Esto te permite probar la experiencia, revisar el diseño y asegurar que todo funciona como esperas antes de lanzarlo en tu dominio propio.

 

Para publicar tu proyecto en un dominio de vista previa:

  1. Haz clic en Publicar en la esquina superior derecha. Actualiza la URL si es necesario y haz clic en Publicar nuevamente.
  2. Actualiza el icono, nombre, descripción e imagen social. Luego haz clic en Aplicar cambios.
  3. Haz clic en Publicar.

Conectar un dominio personalizado

 

Conectar un dominio personalizado te permite publicar tu proyecto de AI Studio en una URL de marca. No puedes conectar un dominio personalizado hasta que el proyecto se haya publicado primero en un dominio de vista previa.

 

Para conectar un dominio personalizado:

  1. Haz clic en Publicar y selecciona Agregar dominio personalizado.

  2. Escribe el dominio que deseas conectar.
    Si introduces un dominio apex (ejemplo.com) o la versión www (www.ejemplo.com), aparecerá la opción de agregar ambos dominios y crear una redirección. Se recomienda conectar tanto el dominio raíz como el www.
    Déjalo seleccionado para conectar ambos dominios en la misma configuración. Desmárcalo si solo quieres conectar el dominio que escribiste. Esta opción solo aparece para apex y www (no para subdominios tipo blog.ejemplo.com).

  3. Si el dominio ya está gestionado en Ropofy, la configuración continúa dentro del flujo. Si hay registros en conflicto, revisa la advertencia y los registros afectados antes de hacer clic en Agregar registros.

  4. Si el dominio no está gestionado en Ropofy, agrega el/los registros DNS indicados y luego haz clic en Verificar DNS. Si escogiste conectar el apex y www, te pedirá agregar/verificar dos registros en el mismo flujo.

  5. Al finalizar la configuración, el chat de IA muestra que el dominio personalizado está conectado, muestra el dominio y te brinda la opción Ver sitio.

Establecer una URL publicada principal

 

Establecer una URL principal te permite elegir el dominio activo principal para tu proyecto de AI Studio. Las otras URLs conectadas redirigirán automáticamente a ese dominio con una redirección 301.

Nota: Si conectaste tanto el dominio apex como el www durante la configuración, el dominio que ingresaste se trata como principal (canónico) y el otro redirige hacia él. Si tu proyecto ya tiene una URL principal, esa no cambia.

Para establecer una URL publicada principal:

  1. Haz clic en Publicar y luego en el menú de tres puntos junto a la URL que deseas hacer principal.
  2. Haz clic en Establecer como principal.

---

Clonar proyectos en AI Studio

 

 

AI Studio te permite clonar un proyecto dentro de la misma subcuenta o entre diferentes subcuentas de la misma agencia. Clonar proyectos facilita reutilizar trabajos exitosos sin tener que volver a construir todo desde cero.

 

Al clonar un proyecto, puedes:

  • Duplicarlo en la misma subcuenta
  • Clonarlo a otra subcuenta en tu agencia
  • Ubicarlo en la raíz o dentro de una carpeta existente
  • Elegir si incluís la actividad de chat e historial de versiones del proyecto original

 

Sigue estos pasos para clonar un proyecto:

  1. Haz clic en el menú de tres puntos del proyecto que deseas clonar y selecciona Clonar.
  2. En la ventana de Clonar proyecto, introduce el nuevo nombre. Selecciona la subcuenta y carpeta de destino (o déjalo en la raíz).
  3. Activa o desactiva Incluir historial del proyecto. Con Historial incluye la actividad de chat y las versiones del original. Sin Historial crea una copia limpia sin chats ni historial.
  4. Haz clic en Clonar.

Compartir proyectos usando Snapshots

Puedes también usar Snapshots para compartir múltiples proyectos de AI Studio entre agencias o subcuentas. Snapshots te permite empaquetar proyectos seleccionados de una subcuenta origen y reutilizarlos en subcuentas existentes o al crear nuevas.

Usa Snapshots si deseas:

  • Compartir varios proyectos de AI Studio a la vez
  • Crear plantillas reutilizables de proyecto
  • Estandarizar configuraciones AI Studio entre subcuentas
  • Acelerar la incorporación sin clonar cada proyecto uno a uno

---

Datos de envío de tu proyecto


Una vez conectado, los envíos de formularios ingresan al CRM conectado de la subcuenta, no al propio proyecto de AI Studio. Es decir, la página vive en AI Studio pero las respuestas, contactos y actividad de envíos van al CRM de Ropofy. Tras la conexión, los envíos pueden aparecer como envíos de formularios externos y usarse en flujos de trabajo mediante seguimiento externo.


Los usuarios pueden ver envíos en:

 

  1. Contactos
  2. Sitios > Formularios > Envíos > Formularios externos

Cómo los flujos de trabajo se conectan a envíos de formularios

Novedad: Los formularios de AI Studio ahora pueden usar el activador "AI Studio Form Submitted" en flujos de trabajo. Inicia un flujo cuando se envía un formulario de AI Studio conectado y soporta filtros por proyecto, formulario, ruta de página y dominio.

Una vez el formulario está conectado al seguimiento del CRM, los envíos pueden utilizarse en flujos de trabajo a través de activadores de seguimiento. El flujo práctico es:

  1. Crear el diseño del formulario en AI Studio
  2. Conectar el formulario al rastreo del CRM
  3. En un flujo, usar el activador "External Tracking Event"
  4. Usar el evento "Form submission" para continuar automatizaciones
  5. Filtrar por "Dominio" y/o "Formulario externo" y proseguir automatizaciones

---

Limitaciones actuales y notas importantes

 

Conocer los límites actuales de AI Studio ayuda a establecer expectativas y evita confusiones durante la configuración. Dado que AI Studio está disponible en Labs, algunos comportamientos pueden cambiar con el tiempo.

Notas importantes:

  • Los proyectos de AI Studio se gestionan dentro de AI Studio y no pueden moverse a los constructores estándar de Sitios o Embudos.

  • Las recreaciones basadas en URL o imagen deberán considerarse inspiración para estructura, diseño y dirección visual, no una copia exacta uno a uno.

  • Los formularios y calendarios pueden requerir pasos de conexión antes de que funcionen con tus datos de Ropofy y tu sistema de reservas.

---

Preguntas frecuentes

 

P: ¿AI Studio es solo para sitios web y páginas de destino?
No. AI Studio también puede crear otras experiencias front-end como encuestas de varios pasos, formularios con marca, flujos de reservas y otras experiencias interactivas de cara al cliente.

 

P: ¿Necesito mover un proyecto de AI Studio a Embudos o Sitios antes de publicarlo?
No. Los proyectos de AI Studio pueden publicarse directamente desde AI Studio. Puedes construir varias páginas, conectarlas en el mismo proyecto y luego publicar y conectar un dominio desde ahí.

 

P: ¿Puedo mover o copiar un proyecto de AI Studio a Embudos o Sitios bajo la sección de Sitios?
No. Los proyectos de AI Studio permanecen en AI Studio y no pueden copiarse a los constructores estándar de Embudos o Sitios. AI Studio está diseñado para publicar directamente desde su propio espacio de trabajo; no es necesario pasar el resultado a los constructores heredados.

 

P: ¿Puedo previsualizar mi proyecto en móvil antes de publicarlo?
Sí. AI Studio incluye opciones de vista previa para escritorio, tablet y móvil para revisar la estructura antes de publicar. Haz clic en el icono de ordenador en la parte superior de la vista previa para cambiar de modo.

Comentarios

0 comentarios

Inicie sesión para dejar un comentario.