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
"Apply a glassmorphism effect to the header. Make it semi-transparent with a 10px blur and a subtle white border."
Adding Logic
"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."
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]
You can also ask the AI to refactor code. Try: “Optimize this component for performance and remove any unused imports.”
