---
title: El diseño
question: ¿Cómo obtener maquetas y dárselas al agente que programa?
description: Design system, maquetas HTML anotadas por zonas, revisadas y aprobadas, y adjuntas a la issue que lee el agente.
section: start
order: 7
---
Abra **Diseño**, cree un espacio y describa lo que quiere ver: Diavi dibuja una maqueta HTML clicable, usted la anota directamente sobre la pantalla, él la revisa y usted la aprueba. Una maqueta aprobada se adjunta a una issue: el agente que desarrolla la issue la ve.

## ¿Qué se puede pedir?

- **Design system**: colores, tipografía y componentes. Las maquetas siguientes lo respetan.
- **Maqueta global**: el recorrido y las páginas principales, vistos en conjunto.
- **Pantalla**: una pantalla concreta, con sus estados vacíos y de error. Pegue una historia de usuario si la tiene.

Un espacio puede apoyarse en un proyecto de gestión de proyectos: su visión guía entonces las maquetas. Sin proyecto, el diseño funciona por sí solo.

## ¿Cómo anotar una maqueta?

Haga clic en un elemento de la maqueta, elija comentar, sustituir o eliminar y escriba su observación. Cambie entre **Ordenador** y **Teléfono** para ver los dos anchos. Cuando sus anotaciones estén puestas, pida una revisión: aparece una nueva versión. También puede modificar el código HTML usted mismo.

## ¿Cómo adjuntarla a una issue?

El espacio debe estar vinculado a un repositorio y la maqueta, aprobada. Indique el número de la issue: Diavi publica una captura de la maqueta en un comentario. El agente lector lee las imágenes adjuntas a las issues, así que la maqueta alimenta el desarrollo sin ningún otro ajuste.

## ¿Cuánto cuesta y dónde se configura?

Dibujar y revisar son llamadas al modelo, con la clave de IA de la cuenta (cuente hasta tres minutos). La autorización para adjuntar a las issues, el ancho de la captura, la validez de su enlace y el modelo del agente se configuran en **Preferencias → Gestión de proyectos y diseño**.