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

# How to write effective prompts

> Write clear, specific, and actionable prompts for PBX by following context, precision, and simplicity principles to get the best AI-generated variations.

Prompt-based experimentation (PBX) uses AI to help you build and test ideas quickly. You do not need coding skills to create high-performing variations—you only need to know how to communicate your vision to the AI.

Think of the AI as a skilled collaborator. If you provide clear instructions and context, the AI can deliver precise results. Use this guide to learn the principles of effective prompting.

## What makes a good prompt?

To get the best results from the AI, focus on these three core principles.

### Context

Provide context on the goal of your change. Explaining why you want to test a particular idea helps the AI tailor its output to meet your objectives.

* **Good:** "Change the color of the CTA to blue to improve visibility for the user." ✅
* **Too vague:** "Make this CTA nicer." ❌

### Precision

Be specific about the change you want to make. Give an accurate visual description, including details like size, color, shape, position, and style.

* **Good:** "Add a white delivery truck icon next to the free shipping text to improve the click-through rate. The icon's height should match the text height." ✅
* **No clear goal:** "Change up the design." ❌

### Simplicity

Use simple, actionable terminology. Focus on clear instructions and stick to one request per prompt. Do not overcomplicate the prompt with technical jargon.

* **Good:** "Replace the white background with a top-to-bottom gradient from `#2b5d50` to `#dae995`." ✅
* **Too many instructions:** "Change the button color, add a promo image, and move the text." ❌

## Follow a clear prompt structure

Users succeed with PBX when their prompts follow a clear structure. Use these four steps for more complex requests:

1. **Define the change**
   * State exactly what transformation you want to achieve.
2. **Specify visual and layout changes**
   * Detail the visual changes for the target element, layout guidelines, and design elements. You can also reference mockups or design files here.
3. **Explain the behavior**
   * Describe how the target element should respond to user actions.
4. **Set boundaries and limitations (optional)**
   * Define technical limitations, responsive requirements, and what should not happen.

<Tip>
  Use an LLM to refine complex prompts before you use them in Kameleoon. You can even provide the above prompt structure as a template for the LLM to follow.
</Tip>

## Examples in action

Review these examples to see how the prompt structure works in practice.

### The "compare hotels" prompt

This example provides a clear structure for a complex feature:

> "Build a 'Compare hotels' feature like the mockup. Add a 'Compare properties' toggle in the left sidebar to turn it on or off. When the toggle is on, show a 'Compare' checkbox on each property card in the bottom right. If at least one property is selected, show a sticky bottom tray with thumbnails, an 'X/5 selected' counter, and 'Cancel' and 'Compare' buttons. Clicking 'Compare' opens a simple modal showing the selected listing details. Limit selection to 5."

<Frame>
  ![Compare hotels prompt](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/prompt-based-experimentation/dos-and-donts/hotel-compare.png)
</Frame>

<Frame>
  ![Compare hotels modal](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/prompt-based-experimentation/dos-and-donts/modal.png)
</Frame>

### Will this prompt work?

**Prompt:** "Replace the 'Show on map' block with a movable floating 'Map' button. Users should be able to drag it anywhere on the page. Clicking it should open the map view."

**Verdict:** ✅ **Yes.** It follows the recommended prompt structure and clearly describes the transformation.

<Frame>
  ![Show on map prompt](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/prompt-based-experimentation/dos-and-donts/map.png)
</Frame>

**Prompt:** "Show a 15% discount for returning loyal customers."

**Verdict:** ❌ **No.** AI currently struggles to create new functionalities that involve dynamic data or backend logic.

**Prompt:** "Make the grid view the default view."

**Verdict:** ✅ **Yes.** If the grid view already exists on the page, the AI can change the default state.

<Frame>
  ![Grid view prompt](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/prompt-based-experimentation/dos-and-donts/view.png)
</Frame>

## When in doubt...

If you are unsure how to phrase a prompt, keep these tips in mind:

* **Think big, but stay realistic:** AI cannot create new backend functionality. Focus on UI and UX changes.
* **Keep it simple:** Straightforward changes do not need complex prompts.
* **Treat AI like a teammate:** Write prompts as clearly as you would brief a developer.

<Info>
  You can also use the **Draw a sketch** feature to visually circle the area you want to update, the **Import a file** feature to provide a mockup for the AI to follow, or [import designs directly from Figma](./import-designs-from-figma).
</Info>