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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.codemate.ai/build/design-mode.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.