Carregando o Design Editor…

2Temas

Adicione um tema para criar um eixo, como Modo, e depois adicione variantes, como Claro e Escuro. Cada variável pode ter um valor por variante, e trocar a variante redesenha tudo o que está vinculado a ela.

Salve o conjunto atual como predefinição para reutilizá-lo em outros arquivos. As predefinições podem ser exportadas e importadas como arquivos .optheme.

4design.md

O painel Sistema de design (Cmd+Shift+D) guarda uma descrição escrita do design: tema visual, cores, tipografia, estilos de componentes, princípios de layout e notas para geração. Os agentes leem essa descrição antes de desenhar.

Importe ou exporte como arquivo design.md.

Gere automaticamente a partir do design atual com o seu modelo de IA.

Sincronizar tudo com variáveis transforma as cores em variáveis; +Var adiciona uma de cada vez.

DocumentaçãoUsando o editor

Variáveis e temas

As variáveis guardam as cores, tamanhos e textos que um design repete. Os temas trocam todas de uma vez, por exemplo entre claro e escuro.

1Variáveis

Abra o painel Variáveis com Cmd+Shift+V. Crie variáveis de cor, número e texto, pesquise-as e vincule-as a preenchimentos, contornos, tamanhos ou textos. Os agentes também podem criar variáveis de verdadeiro ou falso.

2Temas

Salve o conjunto atual como predefinição para reutilizá-lo em outros arquivos. As predefinições podem ser exportadas e importadas como arquivos .optheme.

3Sistemas de design

Quatro sistemas de design completos vêm com o app: Halo, Lunaris, Nitro e shadcn. Cada um é um conjunto completo de tokens com temas claro e escuro. Aplique um em Início, Sistemas de design, ou peça a um agente.

4design.md

Importe ou exporte como arquivo design.md.
Gere automaticamente a partir do design atual com o seu modelo de IA.
Sincronizar tudo com variáveis transforma as cores em variáveis; +Var adiciona uma de cada vez.

5Guias de estilo

A Central de recursos tem 63 guias de estilo integrados que o agente pode seguir, além dos seus: importe qualquer arquivo DESIGN.md, ou cole um, em Estilos. Fixe um estilo para que o agente o use em todo design novo.