---
title: "Design & mockups"
description: "Generate visual mockups before building, refine them in the editor, and approve the design that drives the change."
url: https://evonx.ai/docs/evolve/design-and-mockups
locale: en
updated: 2026-09-04
---

# Design & mockups

Generate visual mockups before building, refine them in the editor, and approve the design that drives the change.

For visual changes, seeing beats describing. Before writing code, an Evolution
Thread can generate mockups — realistic pictures of the screens it intends to
build — so you approve a direction while changing it is still free.

## How mockups fit the flow

When a thread's plan includes visible UI, the design stage produces one or more
mockups of the affected screens. They live on the thread's timeline next to the
plan, so the discussion ("make the status badge bigger, drop the sidebar") happens
before execution, not after.

1. Review the generated mockups in the thread. Each shows a concrete take on your
   request — layout, hierarchy, and content, in your app's style.

2. React in plain language: pick one, combine ideas, or ask for another round with
   different direction. Iterating on images costs far less than iterating on
   built screens.

3. Need pixel-level control? Open the mockup in the **mockup editor** and adjust
   it directly, then save your edited version to the thread.

4. Approve. The approved mockup becomes the reference the execution stage builds
   against.

> **Tip**
> Mockups are the right place to catch "that's not what I meant". If you find
> yourself explaining a layout in words across several messages, ask for a mockup
> round instead — or attach a photo or sketch of what you have in mind.

## When mockups are skipped

Not every change needs design: an API change, a new export, a bug fix goes
straight from plan to execution. You can always request mockups explicitly if you
want a visual checkpoint anyway.

## Related

- [User-flow diagrams](/docs/evolve/user-flow-diagrams) — the structural
  counterpart: screens and paths rather than pixels.
- [Evolution Threads explained](/docs/evolve/evolution-threads) — where the design
  stage sits in the whole flow.