How it works
Type your instructions in plain language, and the AI generates or modifies your page in real time. You’ll see changes appear in the preview as the AI works. Example prompts:- “Create a landing page with a hero section, features grid, and contact form”
- “Change the heading to say ‘Welcome to Acme’”
- “Make the call-to-action button larger and more prominent”
- “Add a testimonials section with three customer quotes”
Writing effective prompts
Be specific about what you want
The more detail you provide, the better the results. Instead of “make it look better,” try “increase the contrast between the heading and background, and add more whitespace around the hero section.”Reference your brand
The AI has access to your brand colors, fonts, and images. You can say things like “use my primary brand color for the buttons” or “add my logo to the header.”Describe the structure
When creating new sections, describe the layout you have in mind:- “Create a three-column features section with icons above each feature”
- “Add a two-column layout with an image on the left and text on the right”
Iterate in steps
You don’t need to get everything perfect in one prompt. Start with the basic structure, then refine with follow-up messages:- “Create a hero section with a headline and subheadline”
- “Add a background image behind the hero”
- “Make the text white so it’s readable over the image”
Attaching images
You can include images with your prompts to give the AI visual context. This is useful when you want to:- Reference a design you’d like to replicate
- Show a screenshot of a competitor’s page for inspiration
- Provide a mockup or wireframe to follow
Visual context mode
Press theV key to enter visual context mode. This lets you select specific elements on the page to reference in your prompt. The AI will understand exactly which part of the page you’re talking about.
Working with variants
When you have multiple variants, the AI works on whichever variant is currently focused. If no variant is focused, changes may apply to all variants. Click on a variant’s focus button to isolate it before prompting.What the AI can do
The AI has access to several capabilities:| Capability | Description |
|---|---|
| Create pages | Generate complete page HTML from scratch |
| Edit sections | Make targeted changes to specific parts |
| Use your media | Access images from your brand’s media library |
| Capture screenshots | Take screenshots of any URL for reference |
| Create variants | Generate new page variants for testing |
Tips for best results
- Start simple: Begin with basic structure, then add details
- One change at a time: For complex edits, break them into smaller steps
- Use your brand assets: Reference your uploaded images and brand colors
- Review before moving on: Check each change before requesting the next
- Provide feedback: If something isn’t right, tell the AI what to fix
Version history
Sometimes, your agent may make a mistake or you may change your mind. One way to handle this is by using the version history to revert to a specific point in time. There are two ways you can do this:- Click the rollback icon on each user message
- Select the version history icon in the top-right toolbar