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

# AI Prompts

> Master the art of describing your app features to the Blox Agent

The Blox AI Agent is your co-developer. By using clear, specific prompts, you can build complex features and polish UI details in seconds.

## Best Practices

To get the most out of the AI, follow these three principles:

### 1. Be Contextual

Tell the agent *where* you want the change.

* **Bad**: "Make the background blue."
* **Good**: "Change the background color of the `ProfileCard` component to a light blue gradient."

### 2. Describe Behavior, Not Just Style

Explain what should happen when a user interacts with an element.

* **Example**: "Add a button that, when clicked, opens the system camera and then shows the captured image in the `ProfilePicture` slot."

### 3. Use Reference Terms

If you have a Figma file imported, refer to layer names or component types.

***

## The Prompt Cookbook

Use these templates to speed up your development.

### UI Modifications

<CodeGroup>
  ```text Glassmorphism theme={null}
  "Apply a glassmorphism effect to the header. Make it semi-transparent with a 10px blur and a subtle white border."
  ```

  ```text Theming theme={null}
  "Switch the entire app to a dark theme. Use #0a0a0a for backgrounds and #AF3630 for primary buttons."
  ```
</CodeGroup>

### Adding Logic

<CodeGroup>
  ```text API Calls theme={null}
  "Add an effect to the home screen that fetches the latest news from 'https://api.news.com/v1' on mount and displays it in a list."
  ```

  ```text Navigation theme={null}
  "When the user taps the 'Get Started' button, navigate them to the 'Onboarding' screen with a slide-from-right transition."
  ```
</CodeGroup>

## Refining Result

If the AI doesn't get it right the first time, you can provide corrective feedback:

> "The button is too small. Increase the padding to 20px and make the corners more rounded (radius: 12px)."

## Video Tutorial

\[PLACEHOLDER: Insert Loom Video of AI Prompting Flow Here]

<Tip>
  You can also ask the AI to **refactor** code. Try: "Optimize this component for performance and remove any unused imports."
</Tip>