AI Chat

The chat is how you communicate with the AI. Describe what you want to build, ask questions, and request changes in natural language.

How to Use

1

Type your request

Describe what you want in the text box. Be specific about layout, content, and style.

2

Wait for the AI

The AI will analyze your request and generate the code.

3

Review the changes

Check the canvas and preview to see what changed. Continue the conversation to refine.

Writing Good Prompts

Good Prompts

  • "Add a hero section with a large heading, subtitle, and a call-to-action button"
  • "Create a 3-column grid of feature cards"
  • "Change the navigation to be sticky on scroll"

Vague Prompts

  • "Make it look better"
  • "Add some stuff"
  • "Fix it"

The more specific you are, the better the results. Include details about:

  • What you want to add or change
  • Where it should appear
  • How it should look or behave

Example Prompts

Layout

Create a header with a logo on the left and navigation on the right
Add a footer with social links and copyright
Make this section a two-column layout on desktop

Styling

Change the background color to a dark gradient
Make the buttons rounded with a shadow
Use the Inter font for all headings

Components

Add a testimonials carousel with 3 slides
Create a pricing table with three tiers
Add a contact form with name, email, and message fields

Functionality

Add form validation to the email field
Create a mobile menu that slides in from the right
Add a dark mode toggle to the header

Using Context

The AI remembers your conversation, so you can build on previous messages:

Y
Add a pricing section with three tiers
AI
I've added a pricing section with Basic, Pro, and Enterprise tiers...
Y
Make the Pro tier highlighted as "Most Popular"

Tips

  • Select an element in the canvas before chatting to target specific components.
  • If something doesn't work as expected, describe the issue and ask for a fix.
  • You can ask the AI to explain what it did or why it made certain choices.
  • Reference existing elements: "Make the heading match the button style".