Skip to main content
PBX Build es el editor de experimentos impulsado por IA de Kameleoon. Puede usarlo para crear experimentos impulsados por IA en minutos escribiendo una instrucción sencilla, sin necesidad de código. Para un recorrido guiado por la experimentación basada en prompts en Kameleoon, haga clic aquí.

​
Acceder al flujo de creación

  1. En la aplicación Kameleoon, vaya a Experiences > A/B Test > New experiment.
  2. Si utiliza el plan Starter o Trial, la interfaz basada en prompts se abre automáticamente.
  3. Si utiliza el plan Enterprise, aparecerá una ventana emergente. Seleccione By Prompt.
No puede utilizar el Graphic editor para editar una variante que genera PBX. Para más información, consulte el FAQ.
  1. Introduzca la información requerida y haga clic en Create.
Si utiliza PBX sin el script de Kameleoon instalado, consulte el FAQ de PBX para obtener orientación.

​
Configurar su experimento

​
1. Defina su prompt

En el campo de prompt, describa la modificación que desea realizar en lenguaje natural. Puede cambiar el tamaño del área del prompt haciendo clic y arrastrando la esquina. Ejemplos:
  • “Update the product listing grid to display 2 products per row instead of 4.”
  • “Change the default sorting option to ‘Price, low to high’.”
Al analizar su sitio web y los activos visuales existentes, Kameleoon detecta y mapea automáticamente la identidad de su marca, incluido su tono de voz, fuentes, imágenes y paleta de colores.

​
Usar imágenes y diseños

Para proporcionar contexto visual o añadir activos específicos (como banners o pop-ups), haga clic en + > Add an image o pegue una imagen desde el portapapeles. Puede adjuntar hasta 10 imágenes en un solo prompt para obtener contexto visual completo.
Añadir una imagen o dibujar un boceto en el área de prompt
PBX detecta automáticamente cómo utilizar cada imagen—no se requiere etiquetado manual:
  • Asset: PBX inserta el archivo de imagen directamente en la variación.
  • Mockup: PBX usa la imagen como referencia para recrear el diseño con código.
Para previsualizar una imagen cargada, haga clic en ella en el área del prompt. También puede hacer clic en Copy reference para copiar el enlace de la imagen. También puede importar diseños de Figma directamente. Para más información, consulte Importar diseños desde Figma.
Para más detalles sobre las limitaciones de los prompts, consulte el FAQ de PBX.

​
Usar el dictado por voz

Dicte su prompt en lugar de escribirlo. Haga clic en el icono del micrófono en la barra de herramientas de prompt, diga su prompt y, a continuación, haga clic en la marca de verificación para transcribirlo en el campo de prompt.
La barra de herramientas de prompt con el icono del micrófono resaltado en azul

​
Seleccionar elementos

Ayude a la IA a identificar qué elementos modificar de las siguientes formas:
  • Descripción de texto: describa el elemento en su prompt (por ejemplo, “Move the product grid below the banner”).
  • Cuadro de selección: haga clic en + > Draw sketch y delimite el elemento objetivo en la página. Utilice la caja de herramientas para dibujar, borrar o eliminar su selección.
PBX también puede navegar a otras páginas de su sitio o a sitios externos si su prompt lo requiere—por ejemplo, para hacer referencia a un elemento de diseño de una página diferente o para usar otro sitio web como inspiración.
No puede desplazarse ni dibujar fuera de la vista actual cuando utiliza la herramienta de dibujo. Use descripciones de texto para los elementos situados más abajo en la página.

​
Configurar los ajustes de IA

Personalice cómo la IA genera las variantes e interactúa con su sitio web. Haga clic en el icono + y seleccione AI Settings. En la barra lateral Projects, seleccione el proyecto que desea editar. El menú AI Settings incluye dos pestañas:
  • Master Prompt: defina las instrucciones generales y el contexto para la IA. Para más información, consulte el artículo Master Prompts.
  • Technical Settings: configure las preferencias técnicas para su proyecto. Puede ajustar las siguientes opciones:
    • Website adapts automatically to different screen sizes: habilite esta opción para sitios web adaptables. Desactívela si su versión móvil utiliza una URL independiente o no se actualiza al redimensionar.
    • Enable support for dynamic websites (SPA, PWA…): habilite esta opción para detectar cambios virtuales de URL y garantizar que el targeting por URL y la recopilación de datos funcionen correctamente.
    • Custom attribute: establezca un atributo personalizado para permitir que Kameleoon haga seguimiento de cada cambio virtual de URL, habilite el targeting por URL y recopile datos, como el número de vistas de página.
    • Avoid dynamic IDs selectors: especifique los selectores que se deben evitar.
Haga clic en Save para conservar los cambios, o haga clic en Back to the editor para volver a la interfaz del editor y descartar cualquier cambio.

​
2. Flujo de trabajo de la IA

Cuando envía un prompt, PBX trabaja el cambio en tiempo real. Cada acción que realiza la IA aparece a medida que sucede, junto con su razonamiento en lenguaje claro, para que pueda seguir lo que hace PBX en cada paso.

​
Seguimiento y razonamiento en tiempo real

A medida que PBX genera su variación, puede ver cada paso que realiza y la lógica que hay detrás. PBX resalta los elementos en la página mientras procesa su prompt, mostrándole exactamente lo que está apuntando la IA. PBX puede navegar a otras páginas de su sitio o a sitios externos cuando su prompt lo requiere. Puede hacer referencia a una función o elemento de diseño de una página diferente, o indicarle a la IA otro sitio para usar como inspiración. Puede solicitarlo directamente en su prompt—por ejemplo, “Replica el diseño de filtros de búsqueda de este sitio de reservas de viajes: www.example.com/search.”

​
Herramientas de interacción

En puntos clave del proceso de generación, PBX se detiene y presenta una de las siguientes herramientas de interacción antes de continuar:
  • Validación de elementos resaltados: PBX resalta el elemento que pretende modificar. Confirme la selección o redirija PBX a un elemento diferente.
  • Selector de opciones: PBX presenta dos o más opciones de diseño para elegir. Seleccione la opción que mejor se ajuste a su intención.
  • Confirmación: PBX resume la acción que está a punto de realizar y le pide que confirme antes de ejecutarla.
Este ciclo ver-entender-dirigir detecta los errores de dirección a tiempo, reduciendo el retrabajo y las generaciones sin salida.

​
Elegir entre variaciones

Tras la generación, PBX presenta varias opciones de variación para comparar. Seleccione la que mejor se ajuste a su intención y haga clic en Aplicar versión. Si ninguna de las opciones es adecuada, continúe con los prompts para refinar el resultado o proporcionar detalles adicionales.
Elegir una variación generada
La IA también puede hacer preguntas aclaratorias (por ejemplo, sobre preferencias de imagen o tipos de contenido) para asegurarse de que el resultado coincida con lo que tenía en mente.

​
Copiar una variación a Figma

Una vez que una variación está lista, puede copiarla al portapapeles como capas de Figma editables y pegarla directamente en un archivo de Figma, sin reconstruir el diseño desde cero.
  1. En la tarjeta Your version is ready, abra el menú de tres puntos y haga clic en Copy to Figma.
  2. Espere mientras PBX empaqueta la variación. El progreso aparece en cada paso.
  3. Haga clic en Copy to clipboard.
  4. Abra Figma y pegue con ⌘ + V (macOS) o Ctrl + V (Windows).
Copiar una variación de PBX a Figma desde el menú de tres puntos en la tarjeta de variación
El contenido pegado aparece como capas nativas de Figma.
Las capas copiadas funcionan mejor en variaciones simples y mayormente estáticas—las variaciones con elementos interactivos complejos pueden no transferirse correctamente. PBX solo captura el componente que creó, no toda la página circundante.
También puede iniciar este flujo desde la tarjeta del experimento en el panel de experimentos.

​
Deshacer un prompt

La salida de cada prompt incluye un botón Deshacer. Haga clic en él para revertir su variación al estado en que se encontraba cuando ese prompt se completó, descartando todos los cambios realizados por los prompts posteriores. Utilice esta opción cuando un prompt de seguimiento lleve la variación en la dirección incorrecta. En lugar de empezar de nuevo, haga clic en Deshacer en el prompt al que desea volver e intente un enfoque diferente desde ese punto.

​
Crear a partir de bocetos

Diseñe componentes como pop-ups u overlays dibujándolos directamente en la página:
  1. Haga clic en + > Draw sketch.
  2. Dibuje su diseño.
  3. Indique a la IA que lo construya (p. ej., “Build the popup based on my sketch”).
Siga las prácticas recomendadas para redactar prompts para obtener los mejores resultados.

​
3. Revisar y ajustar el código generado

Haga clic en el botón Code en el encabezado para abrir el panel de código. Haga clic en CSS o JS para ver y editar el código pertinente. Haga clic en Edit code para realizar cambios.
Si introduce varios prompts y genera varias versiones para una variante determinada, puede alternar entre esas variantes utilizando el desplegable en la parte superior izquierda del panel de código. Una vez que la IA genere contenido para su experimento, puede refinar su salida editando el código subyacente. Cuando guarda los cambios, Kameleoon genera automáticamente una nueva versión de su variante.
Para refinar una variante utilizando prompts en lugar de código, consulte el FAQ.

​
4. Comparar y simular

Utilice los botones de la cabecera para alternar entre vistas:
  • Website display: previsualice la apariencia de la variante.
  • Code: vea la implementación técnica.
  • Compare: compare distintas variaciones lado a lado.
Comparar y simular vistas en PBX

​
Vista previa en diferentes dispositivos

Para ver cómo se ve su variante en diferentes tamaños de pantalla, haga clic en los iconos de móvil, tableta o escritorio en la parte superior de la página. Cambiar la vista previa del dispositivo no afecta al código generado. Haga clic en Simulate para probar el experimento en directo en su sitio web antes de lanzarlo.

​
Compartir su experimento

Compartir tu experimento PBX
Haga clic en el icono de compartir en la esquina superior derecha para:
  • Copy link: comparte un enlace directo al experimento.
  • Share on LinkedIn: publica su experimento directamente en su feed.

​
Finalizar el experimento

Una vez que su variación esté completa:
  1. Haga clic en Finalize.
  2. Establezca sus objetivos, targeting de audiencia y asignación de tráfico.
  3. Lance su experimento.
Ahora está listo para experimentar más rápido que nunca, sin código y sin retrasos.

​
FAQ

No, no puede utilizar el Graphic editor en variantes generadas por IA. Aunque algunos casos límite podrían beneficiarse de ello, PBX gestiona todos los escenarios que cubre el Graphic editor. Para evitar conflictos, Kameleoon desactiva la herramienta visual para los experimentos generados por IA.
Sí, puede solicitar cambios en varias páginas. Vaya a las páginas elegidas y aplique los prompts directamente. Kameleoon combina automáticamente el código en una sola variación.No obstante, pruebe la experiencia completa con el modo de simulación para asegurarse de que el código en distintas páginas no entre en conflicto.
Tras crear una variación en la primera página de producto, vaya a la siguiente página de producto. Esta acción vuelve a ejecutar el código generado por IA.Alternativamente, utilice el modo de simulación para probar la experiencia en todas las páginas relevantes y asegurar un comportamiento coherente.
Sí, puede utilizar un diseño o un mockup. Haga clic en el icono + > Add an image para cargar su archivo. No obstante, un mockup por sí solo suele ser insuficiente. Para obtener los mejores resultados, utilice su diseño junto con instrucciones claras y detalladas.Trate a PBX como a un desarrollador: proporcione detalles específicos para obtener el mejor resultado.Ejemplo de buen prompt con un mockup:
  • Adjunte su mockup o archivo de diseño.
  • Describa los elementos que se deben cambiar.
  • Especifique dimensiones, colores y espaciado.
  • Explique los comportamientos interactivos.
  • Indique los requisitos técnicos.
PBX adopta los ajustes de aplicación de una sola página (SPA) de su proyecto. Si configuró estos ajustes (consulte Configurar un experimento en una single-page app), PBX utiliza automáticamente:
  • Sus atributos personalizados.
  • Sus reglas de exclusión.
  • Cualquier otra configuración específica de SPA.
No. Debe esperar a que PBX termine de generar una variante antes de empezar a trabajar en otra.
Este problema ocurre en páginas seguras, como áreas con sesión iniciada, que bloquean la carga dentro de un iframe. El editor PBX utiliza un iframe para editar páginas web de forma segura. Los ajustes de seguridad de su sitio podrían bloquear el contenido del iframe, lo que resulta en una pantalla en blanco.Cómo solucionarlo: Pida a su equipo de desarrollo que modifique la lógica de “frame-busting”. El código debe comprobar si el nombre del frame es kameleoon-pbx-preview. Si coincide, la lógica debe permitir que la página se cargue.Código de ejemplo:
PBX genera código limpio, seguro, adaptable y accesible. A menudo crea soluciones más robustas que la codificación manual, especialmente para sitios web modernos y aplicaciones de una sola página (SPA). PBX sigue las prácticas recomendadas de QA, como las pruebas multinavegador y las comprobaciones visuales.El código generado también respeta las configuraciones de su proyecto:
  • PBX aplica automáticamente la configuración de SPA y los atributos personalizados.
  • Respeta las reglas de exclusión.
Estas consideraciones garantizan que el código generado se integre sin problemas con su configuración y cumpla las reglas para los experimentos codificados manualmente.