> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Crear un experimento basado en prompts

> Aprenda a crear experimentos impulsados por IA en minutos escribiendo instrucciones en lenguaje natural.

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í](https://kameleoon.navattic.com/dac08g2).

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

<Note>
  No puede utilizar el Graphic editor para editar una variante que genera PBX. Para más información, consulte el [FAQ](../prompt-based-experimentation-faq#can-i-use-the-graphic-editor-on-a-variant-created-with-ai).
</Note>

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/prompt-based-experimentation/create-a-prompt-based-experiment/new-experiment.png)
</Frame>

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

<Tip>
  Si utiliza PBX sin el script de Kameleoon instalado, consulte el [FAQ de PBX](../prompt-based-experimentation-faq#can-i-create-a-prompt-based-experiment-without-installing-the-kameleoon-script) para obtener orientación.
</Tip>

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

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/prompt-based-experimentation/create-a-prompt-based-experiment/draw-sketch.png)
</Frame>

Cuando carga o pega una imagen y envía un prompt, PBX le pregunta cómo utilizarla:

* **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](./import-designs-from-figma).

<Tip>
  Para más detalles sobre las limitaciones de los prompts, consulte el [FAQ de PBX](../prompt-based-experimentation-faq#can-i-create-any-type-of-variant-with-prompts).
</Tip>

#### 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 si su prompt lo requiere—por ejemplo, para hacer referencia a un elemento de diseño de una página diferente.

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

#### 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](./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.

#### Generar ideas de optimización

Para obtener sugerencias para su página:

1. Escriba un prompt como *"Suggest ideas to optimize this page."*
2. Revise la lista de mejoras accionables generadas por la IA.
3. Haga clic en **Regenerate** para obtener nuevas ideas o en **Cancel** para utilizar un prompt diferente.

<Tip>
  Para obtener información sobre por qué el mismo prompt puede dar resultados diferentes al regenerarlo, consulte [esta entrada del FAQ de PBX](../prompt-based-experimentation-faq#why-can-the-same-prompt-lead-to-different-outputs-when-tried-multiple-times).
</Tip>

#### Crear variantes en paralelo

Cree varias variantes simultáneamente. Mientras se genera una variante, puede empezar otra inmediatamente. Un icono de carga indica el progreso, y Kameleoon le notifica cuando cada variante está lista.

### 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 cuando su prompt lo requiere—por ejemplo, para hacer referencia a una función o elemento de diseño de una página diferente. Puede solicitarlo directamente en su prompt.

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

<Frame>
  <img src="https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/prompt-based-experimentation/create-a-prompt-based-experiment/variations.png" alt="Elegir una variación generada" width="50%" />
</Frame>

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.

#### 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](./how-to-write-effective-prompts-dos-and-donts) para obtener los mejores resultados.

### 3. Revisar y ajustar el código generado

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/prompt-based-experimentation/create-a-prompt-based-experiment/css-js.png)
</Frame>

Haga clic en el icono **Code** en la esquina superior derecha, o haga clic en los iconos de código **`[CSS]`** o **`JS`** en el panel de generación. Haga clic en **`CSS`** o **`JS`** para ver y editar el código pertinente. Haga clic en **Edit code** para realizar cambios.

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/prompt-based-experimentation/create-a-prompt-based-experiment/code-editor.png)
</Frame>

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.

<Tip>
  Para refinar una variante utilizando prompts en lugar de código, consulte el [FAQ](../prompt-based-experimentation-faq#my-first-prompt-didnt-generate-the-right-output-can-i-submit-additional-prompts-to-fix-whats-incorrect).
</Tip>

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

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/prompt-based-experimentation/create-a-prompt-based-experiment/views.png)
</Frame>

Haga clic en **Simulate** para probar el experimento en directo en su sitio web antes de lanzarlo.

#### Compartir su experimento

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/prompt-based-experimentation/create-a-prompt-based-experiment/share.png)
</Frame>

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.
