> For the complete documentation index, see [llms.txt](https://docs.codemate.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.codemate.ai/build/design-mode.md).

# Design mode

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.

<figure><img src="/files/jH9Fniea18JOOaOTWD82" alt=""><figcaption></figcaption></figure>

***

### 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.