Skip to main content
The chat interface is your primary tool for editing UIs. Describe what you want in plain English and the AI modifies the code in real time.

​
How It Works

Every message you send is interpreted by the AI in the context of your current codebase. The AI:
  1. Reads your current code - It understands every component, style, and layout
  2. Interprets your request - Natural language is mapped to specific code changes
  3. Applies the changes - Code is modified and the preview updates instantly
  4. Explains what it did - The AI describes the changes it made

​
Writing Effective Prompts

​
Layout Changes

Move the sidebar to the right side of the page
Make the header fixed at the top with a blur backdrop
Add a 2-column grid layout for the card section on desktop, single column on mobile

​
Styling Changes

Change the primary color to emerald-500
Add a subtle box shadow to all cards
Switch to dark mode with a #0A0A0A background
Use the Inter font family throughout

​
Component Changes

Add a search bar with an icon to the header
Replace the static list with an accordion
Add a loading skeleton state for the data table
Create a modal that opens when clicking the "Edit" button

​
Content Changes

Replace the placeholder text with content for a fitness app
Add 5 more items to the pricing comparison table
Change the hero headline to "Build faster with AI"

​
Context Chips

When you select a Style or Design System from the footer buttons, they appear as context chips in the chat input area. These provide additional context to the AI:
  • Style chip (purple) - Tells the AI to use a specific visual aesthetic for the next change
  • Design System chip (teal) - Tells the AI to reference your component library and tokens
Context chips are automatically cleared after you send a message. Style and Design System context chips in the chat input

​
Styles and Design Systems in the Editor

For UI projects, the Styles and Design Systems buttons are directly visible in the chat footer (no dropdown menu needed).

​
Styles Button

Click to open a dropdown with all 9 style cards. Select one to add it as context for your next message. This is useful when you want to restyle a section or generate new components in a specific aesthetic.

​
Design Systems Button

Click to browse your uploaded design systems with search and preview cards. Select one to ensure the AI uses your components and guidelines.

​
Tips

Instead of one massive prompt, make small, incremental changes. “Add a nav bar” → “Make it sticky” → “Add a search icon” → “Add dropdown menus on hover.” This gives you more control over the result.
Say “in the hero section” or “in the footer” to target specific parts of the page. The AI understands spatial references.
If a change isn’t what you wanted, you can ask the AI to “undo that” or “revert the last change.” The chat history preserves the context.
“When I click the menu button, slide in a sidebar from the left with a dark overlay” - the AI can build complex interactions from natural language.