Ajuste a aparência do seu app e, em seguida, visualize o resultado antes de publicar.

Design abre ao lado da sua visualização ao vivo e permite que você altere a aparência do seu projeto sem escrever código.

Este guia aborda como definir estilos globais com Theme, editar elementos individuais com Editor Visual, substituir imagens da Library, descrever alterações em linguagem simples e verificar seu trabalho em diferentes dispositivos antes de ele entrar no ar.

Como o Design funciona

Quando os Agentes de IA concluem uma tarefa, o Visualizador de App aparece no topo da página. Selecione Design para abrir o painel de design no lado esquerdo da tela, com sua visualização ao vivo ao lado. Ele tem três abas:

• Theme define regras globais para o app inteiro — cores, fontes e efeitos. É melhor usá-lo antes de começar a criar.
• Editor Visual ajusta os elementos que você selecionou. Funciona em qualquer projeto, a qualquer momento.
• Library substitui imagens ou gera novas.

Theme define as regras, e o Editor Visual aperfeiçoa os detalhes. Selecione Exit para fechar o painel.

O painel Design abre à esquerda. Até você selecionar algo, o Editor Visual solicita que você escolha um elemento.

Antes de começar

Antes de abrir o Design, certifique-se de que:

• Seu projeto tenha uma build concluída. O Design abre a partir do Visualizador de App, que aparece somente depois que os agentes terminam uma tarefa.
• Você saiba que as alterações não entram no ar até você publicar. Sua URL pública não é afetada até você publicar a versão atualizada.
• Você saiba que um theme alcança apenas estilos compartilhados. Elementos criados com valores fixos mantêm a aparência antiga após uma mudança de theme. Veja Se um theme não ficar certo abaixo.

Defina estilos globais com Theme

Um theme é o sistema de design do seu projeto. Ele define variáveis globais — paletas, tipografia e espaçamento — que se aplicam a todo o seu app, em vez de configurações em um único elemento.

Theme é melhor usado durante a etapa de preparação, antes de você começar a criar. Aplicá-lo cedo significa que tudo o que os agentes gerarem seguirá esse theme desde o início.

Escolha um theme

A aba Theme abre com um campo Search Themes e agrupa os themes em seções:

• Current Theme — o que seu projeto usa agora. Antes de você aplicar qualquer coisa, aparece No theme applied yet, e o botão + ao lado cria um novo theme.
• Default Theme — 14 predefinições selecionadas por designers. Cada uma é mostrada como uma prévia de uma página criada com ela, com seu nome e uma linha de amostras exibindo sua paleta. Elas não podem ser excluídas.
• My Theme — themes que você criou ou personalizou. Eles podem ser renomeados e excluídos.

Cada theme aparece como uma prévia de uma página criada com ele, com seu nome e uma linha de amostras exibindo sua paleta, para que você possa avaliar a direção antes de aplicá-lo.

A aba Theme, com um theme aplicado no topo e seus themes salvos abaixo.

Para aplicar um:

1. Selecione o theme que você deseja.
2. Atoms pergunta "Do you want to apply theme name?"
3. Selecione Apply para confirmar ou Cancel para voltar.
4. Verifique a prévia.

Resultado esperado: a prévia é atualizada para o theme que você escolheu, e ele agora aparece em Current Theme.

Observação: Se você tiver alterações não salvas no Editor Visual, o Atoms mostrará Unsaved Changes e pedirá que você as salve ou descarte antes de aplicar um novo theme.

Atualize um theme aplicado

Um ponto na aba Theme significa que uma versão mais recente do seu theme aplicado está disponível.

Para usá-la, selecione Atualizar no seu theme atual e confirme Do you want to re-apply theme name? Seu projeto então passará a usar a versão mais recente.

Você não precisa atualizar. Se deixar como está, seu projeto continuará usando a versão que você aplicou.

Observação: Se seu app não parecer com o theme que você selecionou, elementos individuais podem ter sido substituídos no Editor Visual. Essas substituições afetam conteúdo específico e permanecem após uma mudança de theme.

Crie ou edite um theme no Theme Manager

Selecione + ao lado de Current Theme para criar um do zero, ou abra um theme existente para alterá-lo. Qualquer uma das opções abre o Theme Manager, onde você ajusta um theme com precisão em relação a uma prévia ao vivo.

As configurações dele ficam em três abas:

• Color — os papéis de cor que seu app usa, agrupados por finalidade: Base Colors, Card, Popover, Primary, Secondary e mais. Cada papel tem seu próprio valor, então alterar Primary afeta todos os elementos que o utilizam.
• Fonts — suas fontes Serif, Sans-serif e Mono.
• Effects — Radius dos cantos e uma Shadow que você controla por cor, opacidade, desfoque, espalhamento e deslocamento.

A prévia ao lado é construída com componentes reais — formulários de login, botões, campos de entrada, texto corrido e monoespaçado — para que você possa avaliar uma alteração imediatamente, em vez de adivinhar. Use o alternador claro/escuro abaixo dela para verificar ambos, porque uma paleta que funciona em superfícies claras pode perder contraste nas escuras.

Abaixo da prévia, você também tem Undo e Redo para percorrer suas alterações, e Reset para retornar o theme ao estado inicial.

Theme Manager. A prévia é atualizada conforme você altera um valor, e os controles abaixo dela abrangem desfazer, refazer, exportar, importar e redefinir.

Salve um theme

1. Selecione Save.
2. Dê a ele um Theme Name ou mantenha o sugerido.
3. Selecione Save para confirmar.

Resultado esperado: seu theme aparece em My Theme na aba Theme, com sua paleta exibida como amostras. Aplique-o da mesma forma que qualquer outro theme.

Observação: As edições não são mantidas até você salvá-las. O Atoms interromperá a ação e oferecerá salvar ou descartar se você tentar aplicar um theme diferente com alterações não salvas pendentes.

Reutilize um theme em vários projetos

O Theme Manager tem Export e Import abaixo da prévia. Exporte um theme para um arquivo e depois importe-o em outro projeto para reutilizar a mesma direção de design, ou compartilhe-o com um colega de equipe para que o projeto dele combine com o seu.

Se um theme não ficar certo

Aplicar um theme não é uma verificação de compatibilidade, então normalmente isso não falha. Um theme substitui os valores de estilo compartilhados sobre os quais seu app foi construído, o que significa que qualquer theme no seletor geralmente pode ser aplicado a qualquer projeto.

O que você pode ver, em vez disso, é um theme que é aplicado com sucesso, mas não alcança tudo. Não há mensagem de erro para isso — simplesmente parece errado.

Parte do seu app mantém a aparência antiga. Este é o problema mais comum. Um elemento ao qual foi atribuído um valor fixo, uma cor específica ou uma fonte definida diretamente nele, em vez de um dos estilos compartilhados do seu app, não pode ser afetado por uma mudança de theme, então mantém a aparência anterior e pode entrar em conflito com tudo ao redor. Corrija isso no Editor Visual ou peça aos agentes no chat para substituir o valor fixo pelos estilos do seu theme.

O texto fica difícil de ler. Um theme escuro aplicado a um layout projetado para superfícies claras pode deixar o texto com contraste insuficiente. Ajuste os elementos afetados no Editor Visual ou escolha um theme mais próximo do seu design existente.

Atoms informa que o theme não pode ser aplicado. Isso é incomum e significa que a interface do seu projeto não foi construída com o sistema de themes do Atoms. Use o Editor Visual no lugar — tudo ainda pode ser feito elemento por elemento.

Importante: Escolha um theme cedo sempre que possível. Quando os agentes criam com um theme já aplicado, eles usam seus estilos compartilhados desde o início, então menos elementos acabam com valores fixos que uma mudança posterior de theme não consegue alcançar.

Edite elementos individuais com Editor Visual

Selecione um elemento na prévia para editá-lo. Para trabalhar em vários ao mesmo tempo, mantenha Ctrl pressionado e clique no Windows, ou Cmd e clique no Mac.

Importante: Os controles de propriedades descritos abaixo atuam em um elemento por vez. Quando você tiver vários elementos selecionados, altere-os descrevendo o que deseja no chat — veja Descreva alterações em vez de clicar.

Um selo acima da sua seleção mostra o nome do elemento e seu tamanho — o tamanho da fonte para texto ou as dimensões para um contêiner — para que você possa confirmar que selecionou o elemento pretendido, e não o contêiner dele.

A aba Editor Visual então mostra as propriedades disponíveis para esse elemento, agrupadas em seções:

• Layout — margem e padding.
• Appearance — cor de fundo, opacidade e raio dos cantos. O raio vai de None até Small, Medium, Large, XL, 2XL, 3XL e Full.
• Content — o texto do elemento.
• Style — família da fonte, peso, tamanho, alinhamento do texto e decoração.
• Class — as classes de estilo aplicadas ao elemento, recolhidas por padrão.

As seções exibidas dependem do que você selecionou: um elemento de texto oferece Content e Style, enquanto um contêiner pode mostrar apenas Layout, Appearance e Class.

Uma barra de ferramentas flutuante também aparece sobre sua seleção com os controles mais comuns à mão — fonte, peso, alinhamento e cor para texto — junto com o controle de exclusão e o campo de prompt descrito abaixo.

As alterações aparecem na prévia conforme você as faz. Para abandoná-las, use Discard na parte inferior da prévia.

Salve suas alterações

As edições não são mantidas até você salvá-las. Depois que você fizer uma alteração, Discard e Save aparecerão na parte inferior da prévia.

• Save mantém suas alterações.
• Discard as descarta e retorna o elemento ao estado anterior.

Resultado esperado: os botões desaparecem depois que você salva, e sua alteração agora faz parte do projeto.

Observação: Se você tentar sair do Design, aplicar um theme diferente ou usar Selecionar para conversar com trabalho não salvo pendente, o Atoms mostrará Unsaved Changes e pedirá que você salve ou descarte antes de continuar.

Salvar mantém a alteração no seu projeto. Isso não a coloca no seu site ao vivo — veja Publique suas alterações.

Com um elemento selecionado, o Editor Visual mostra suas propriedades. A barra de ferramentas flutuante sobre a seleção alterna entre descrever uma alteração e editá-la diretamente.

Dicas:

1. Use o Editor Visual para alterações cosméticas e o chat para alterações estruturais, como novas páginas, novos recursos ou lógica de backend.
2. Para fazer a mesma alteração em uma linha de cards ou botões, selecione todos com Ctrl-click ou Cmd-click e descreva a alteração uma vez no chat. Editar cada um pelos controles de propriedades significa repetir o mesmo processo.

Substitua imagens com Library

Library aplica uma imagem ao elemento que você selecionou, então comece escolhendo onde a imagem deve ir.

1. Selecione o elemento que você deseja alterar na prévia. Até fazer isso, a Library mostrará Select an element to start visual editing.
2. Abra a aba Library e escolha uma origem — Image, Generate ou Upload.
3. Aplique sua imagem. Como fazer isso depende de onde ela veio. Para uma imagem integrada, passe o cursor sobre ela e selecione Use asset. Para uma imagem que você gerou ou enviou, selecione a miniatura finalizada.
4. Verifique a prévia. A imagem é aplicada imediatamente ao elemento selecionado.
5. Selecione Save na parte inferior da prévia ou Discard para desfazer.

Resultado esperado: o elemento escolhido passa a exibir a nova imagem, e os botões Save e Discard desaparecem depois que você salva.

A aba Library com categorias de imagens e Popular Images.

De onde vêm as imagens

Image é a coleção integrada. Use Search assets para algo específico ou navegue por uma categoria — Backgrounds, Nature, Education, Health, Fashion, Science, Feelings e People, com More tags para o restante. Selecionar uma categoria a abre; use a seta de voltar para retornar. Popular Images abaixo mostra uma seleção geral. Passe o cursor sobre qualquer imagem e selecione Use asset para aplicá-la.

Generate cria uma nova imagem a partir de uma descrição e requer um plano Pro ou Max. Digite o que você quer em Describe the image you want to generate e selecione Generate. Os resultados aparecem abaixo do campo. Selecione uma miniatura finalizada para aplicá-la ao seu elemento.

Upload adiciona seu próprio arquivo por arrastar e soltar, colar ou clicar. As imagens podem estar nos formatos JPEG, PNG, GIF, BMP, TIFF ou WEBP, com até 4 MB. As imagens enviadas aparecem abaixo da área de envio — selecione uma para aplicá-la.

Observação: Use asset aparece apenas nas imagens integradas. As imagens que você gera ou envia são aplicadas ao selecionar a miniatura correspondente.

Descreva alterações em vez de clicar

Quando uma alteração é mais fácil de descrever do que de executar clicando, você pode pedir aos agentes. Há dois lugares para fazer isso, e ambos atuam sobre o que você tiver selecionado no momento.

• A barra de ferramentas flutuante na sua seleção. Uma pequena barra de ferramentas aparece sobre o elemento que você escolheu. Seus dois ícones alternam entre descrever uma alteração e editar propriedades diretamente. Digite em Ask the Atoms to change… e envie.
• O campo de chat abaixo do painel Design. Quando um elemento está selecionado, o campo mostra um rótulo Design e o prompt Ask the Atoms team to modify the selected element…, para que os agentes apliquem sua instrução a esse elemento, e não ao projeto inteiro.

A barra de ferramentas flutuante fica sobre sua seleção. O chip à esquerda mostra a qual elemento a instrução será aplicada.

Descreva o resultado, não o mecanismo:

- "Deixe isso mais calmo — mais espaço em branco, título menor."

- "Faça o estilo deste botão combinar com a página de preços."

Instruções vagas como "faça ficar melhor" produzem resultados imprevisíveis.

Observação: Clicar em uma propriedade no Editor Visual a altera imediatamente. Enviar um prompt pede aos agentes que façam o trabalho, o que leva mais tempo. Para uma alteração simples de cor ou espaçamento, edite a propriedade diretamente.

Visualize suas alterações

Use a barra de ferramentas acima da prévia:

• Device view — alterne entre tamanhos de tela para testar a responsividade. Alterações de theme e tipografia que parecem corretas no desktop frequentemente quebram no mobile, então sempre verifique o mobile antes de publicar.
• Page selector — navegue entre as páginas do seu app.
• Refresh — recarregue a prévia se ela parecer desatualizada.
• Open in a new tab — visualize o app em largura total em uma aba separada do navegador.
• Console — abra o painel de logs quando algo parecer errado.

Resultado esperado: suas alterações ficam visíveis em todas as páginas e em todas as larguras de dispositivo que você pretende oferecer suporte.

Recupere-se de um problema na prévia

Se a prévia parecer desatualizada, continuar carregando ou mostrar erros em vermelho, o problema está na prévia e não no Design. Consulte Solução de problemas de build e prévia para ver as etapas de solução de problemas — Refresh, o painel Console, Resolve e como relatar um erro que persiste.

Uma coisa específica do Design: se suas edições parecerem ter desaparecido, verifique se você as salvou. Alterações não salvas são descartadas quando você sai do Design — veja Salve suas alterações.

Publique suas alterações

As alterações de Design permanecem no seu projeto de trabalho até você publicar. Selecione Publish no canto superior direito ou Atualizar se o projeto já estiver no ar.

Observação: Se seu projeto usa Specify Versão em vez de Always Latest, o site ao vivo permanece bloqueado na versão escolhida, e suas alterações de design não aparecerão publicamente até você publicar uma nova versão.

Para os erros que os agentes relatam durante uma build, consulte Relatório de Problemas.