---
title: Design
question: How do I get mockups and hand them to the agent that writes the code?
description: Design system, HTML mockups annotated zone by zone, revised then approved, and attached to the issue the agent reads.
section: start
order: 7
---
Open **Design**, create a space and describe what you want to see: Diavi draws a clickable HTML mockup, you annotate it directly on the screen, it revises it, and you approve it. An approved mockup can be attached to an issue: the agent that develops the issue sees it.

## What can I ask for?

- **Design system**: colours, typography and components. The mockups that follow respect it.
- **Global mockup**: the journey and the main pages, seen together.
- **Screen**: one specific screen, with its empty and error states. Paste a user story if you have one.

A space can build on a project-management project: its vision then guides the mockups. Without a project, design works on its own.

## How do I annotate a mockup?

Click an element of the mockup, choose comment, replace or delete, and write your remark. Switch between **Desktop** and **Phone** to see both widths. Once your annotations are in place, ask for a revision: a new version appears. You can also edit the HTML yourself.

## How do I attach it to an issue?

The space must be linked to a repository, and the mockup approved. Enter the issue number: Diavi posts a screenshot of the mockup in a comment. The reader agent reads the images attached to issues, so the mockup feeds the development with no other setting.

## What does it cost, and where is it configured?

Drawing and revising are model calls, on the account's AI key (allow up to three minutes). Whether attaching to issues is allowed, the screenshot width, how long its link stays valid and the agent's model are set in **Preferences → Project management and design**.