Crear un experimento basado en prompts

Puede 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.

4. Introduzca la información requerida y haga clic en Create.

​

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. 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.

​

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.

​

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.

​

Navegación de 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. 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.

​

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.

​

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.

​

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

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.