Design mode

Generate high-fidelity UI designs from a natural language description, then refine them before exporting to code.

Design mode lets you establish a visual direction before any code is written. Describe the interface you want layout, color, components and Build produces a design you can review and iterate on. When you're satisfied, export it directly to the code generation pipeline.

No Figma account or design experience is required. If you do use Figma, see Figma integration instead.

---

Generating a design

Write a description of the UI you want. The more detail you include about layout, color scheme, and component types, the closer the initial output will be.

A SaaS analytics dashboard. Dark mode. Sidebar navigation with icons
and a collapsible state. Top bar with user avatar and notification bell.
Main area with four KPI cards, a line chart for monthly revenue, and
a table of recent transactions with status badges.

Build produces a complete layout structure, color palette, typography, spacing, and component composition rendered as a visual you can inspect directly.

---

Refining with follow-ups

After the first output, continue the conversation to adjust any aspect of the design:

Switch the color scheme to indigo and slate. Make the sidebar collapsible.
Replace the line chart with a grouped bar chart.

Add a dark/light mode toggle to the top bar. Move the KPI cards below the chart.

Each refinement updates only what you describe the rest of the design is preserved.

---

Exporting

Once the design looks right, you have three export options:

Format	Use it when
Image (PNG)	You need a static reference for sharing, presentations, or specs
HTML Code	You're ready to generate the implementation the design is passed directly to the code pipeline

---

When to use design mode

Design mode produces better UI output than jumping straight to code with a text description. If visual quality matters a customer-facing product, a portfolio piece, or anything where layout and color are part of the brief spend time in design mode first. It acts as a specification that grounds the code generation.

If you already have designs in Figma, use Figma integration instead to import them directly.