When using the AI, you first need to know what you want, you can either prompt with an image, text or image and text.
If you are doing it with only text, you need to write a good prompt.
If you are doing it with only text, you need to write a good prompt.
Writing Prompts
The quality of your output depends on your prompt. Be specific about what you want.
What to Include
Section type
– Hero, features, pricing, testimonials, CTA, etc.
– Hero, features, pricing, testimonials, CTA, etc.
Layout structure
– Columns, grid, centered, sidebar, etc.
– Columns, grid, centered, sidebar, etc.
Elements needed
– Headings, text, buttons, images, icons
– Headings, text, buttons, images, icons
Specific styling
– Colors, alignment, spacing if not set in your theme styles or with variables/classes
– Colors, alignment, spacing if not set in your theme styles or with variables/classes
What to Avoid
– Vague descriptions like “make it look cool”
– Extremely long and complex prompts
– Requesting multiple unrelated sections at once
Good Prompts
Hero section with full-width background image, centered white text,H1 heading, subheading, and two buttons side by side
Pricing section with 3 columns. Each card has an icon at top,plan name, price, list of 5 features, and a CTA button at bottom
Testimonials grid with 4 cards. Each card has a quote icon,testimonial text in italics, customer name, and small round photo
Design Type
The Ai has 4 different design styles, choose whichever you want, or keep it standard.
Choose a design direction:
| Type | Description |
|---|---|
| Minimal | Simple layouts, focus on structure, minimal styling |
| Corporate | Professional, balanced, neutral palette |
| Creative | More dynamic, bolder accents |
| Futuristic | Sharp edges, high contrast |
Color Mode
The AI, has 2 different color modes, dark and light:
Light
– Light backgrounds, dark text
Dark
– Dark backgrounds, light text
The AI will use appropriate colors and set text colors for readability.
Include Classes
Toggle on to give the AI access to your global classes. When enabled, the AI will use your existing classes where appropriate, maintaining design consistency.
Include Variables
Toggle on to give the AI access to your CSS variables. The AI will use your color variables, spacing values, and other tokens in the generated output.
> Tip: Enable both classes and variables for the most consistent results with your existing design system.
Reference Images
You can provide an image for the AI to use as a reference.
Upload an Image
- Click the image icon in the modal
- Select an image file from your computer
- The image will be shown as a preview
Paste an Image
- Copy any image to your clipboard
- Click in the prompt textarea
- Press `Cmd/Ctrl + V`
- The image will be added as reference
“Use My Design” Option
When a reference image is provided, you can either let it copy it to its best extent, or use your design variables, theme styles and classes to give your spin on it.
On ( To turn it on include your variables or classes)
– AI copies only the layout/structure, uses your classes and variables for styling
– AI copies only the layout/structure, uses your classes and variables for styling
Off ( To turn it off dont include your variables or classes)
– AI tries to match both layout and visual style from the image
Using the Result
- Wait for generation to complete
- Click Copy to copy the result
- In Bricks Builder, right-click and select Paste
- The elements will be inserted into your page
> Tip: When pasting, you can use bricks paste button or press cmd/ctrl + v, also make sure no other elements are highlighted.