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.Describe the change
“Make the CTA bigger”, “switch to a two-column layout”, “use a darker
background”. Small, specific instructions work best.
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 draw from your monthly credits. See
Pricing & Credits for what each action costs.