Sketch mode
Sketch mode produces fast HTML/Tailwind drafts rendered directly in the browser. It’s built for exploring layout and visual direction in seconds, before committing to real code.- Generates several drafts in parallel so you can compare directions.
- Each draft (“take”) renders live with its own loading / ready / error state.
- Lock a marketplace theme so every draft uses your palette and typography.
- Refine a single take with natural language — each refinement is saved as a new version so you can step back.
- Copy the take’s HTML, or copy a paste-ready prompt to hand off to an AI agent.
Code mode
Code mode produces full React / shadcn components with a live sandboxed preview and multi-turn editing.- Generates multiple component variants; pick one to continue with.
- A live preview runs the real component in a sandbox.
- Refine through a multi-turn chat — describe changes and watch the component update.
- Attach images or files for extra context.
- Copy the component code when you’re happy with it.
Refining a draft
Both modes work the same way once you’ve generated: pick one draft, then describe what to change.1
Pick a draft
Select the take or variant closest to what you want.
2
Describe the change
“Make the CTA bigger”, “switch to a two-column layout”, “use a darker
background”. Small, specific instructions work best.
3
Iterate
Each refinement builds on the current draft. Keep going until it’s right,
then take the code.
Starting from a marketplace component
You can seed a generation from an existing community component and remix it, instead of starting from a blank prompt — a fast way to adapt a proven component to your needs.Generating and refining are a paid feature and draw from your credits
balance. Turn on AI for Builder and choose a monthly allowance, or use a Team
AI-enabled seat with a 500, 1,000, or 2,000-credit monthly allowance. See
Pricing & Credits for what each action costs.