Design EditorDocumentaciónUsar el editor
Variables y temas
Las variables guardan los colores, tamaños y textos que se repiten en un diseño. Los temas los cambian todos a la vez, por ejemplo entre claro y oscuro.
1Variables
Abre el panel Variables con Cmd+Shift+V. Crea variables de color, número y texto, búscalas y vincúlalas a rellenos, trazos, tamaños o textos. Los agentes también pueden crear variables de verdadero o falso.
2Temas
Agrega un tema para crear un eje, como Modo, y luego añade variantes como Claro y Oscuro. Cada variable puede tener un valor por variante, y al cambiar de variante se vuelve a pintar todo lo vinculado a ella.
Guarda el conjunto actual como preajuste para reutilizarlo en otros archivos. Los preajustes se pueden exportar a archivos .optheme e importar desde ellos.
3Sistemas de diseño
La app incluye cuatro sistemas de diseño completos: Halo, Lunaris, Nitro y shadcn. Cada uno es un conjunto completo de tokens con temas claro y oscuro. Aplica uno desde Inicio, Sistemas de diseño, o pídeselo a un agente.
4design.md
El panel Sistema de diseño (Cmd+Shift+D) guarda una descripción escrita del diseño: tema visual, colores, tipografía, estilos de componentes, principios de diseño y notas para la generación. Los agentes la leen antes de dibujar.
- Impórtala o expórtala como archivo
design.md. - Genérala automáticamente a partir del diseño actual con tu modelo de IA.
- Sincronizar todo con variables convierte sus colores en variables; +Var añade uno cada vez.
5Guías de estilo
El Centro de recursos tiene 63 guías de estilo integradas que el agente puede seguir, además de las tuyas: importa cualquier archivo DESIGN.md, o pega uno, en Estilos. Fija un estilo para que el agente lo use en cada diseño nuevo.