Design e visualização prévia

Design abre ao lado da sua visualização prévia 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 o Editor Visual, substituir imagens da Library, descrever mudanças 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 à esquerda da tela, com sua visualização prévia ao vivo ao lado. Ele tem três abas:

• Theme define regras globais para o app inteiro — cores, fontes e efeitos. É melhor usar 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 compilação 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 afeta 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 parecer correto 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. Aplicar um logo no início significa que tudo o que os agentes gerarem seguirá esse theme desde o começo.

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 visualização prévia de uma página criada com ela, com seu nome e uma linha de amostras mostrando 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 visualização prévia de uma página criada com ele, com seu nome e uma linha de amostras mostrando 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. O Atoms pergunta "Do you want to apply theme name?"
3. Selecione Apply para confirmar ou Cancel para voltar.
4. Verifique a visualização prévia.

Resultado esperado: a visualização 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 há uma versão mais recente do seu theme aplicado 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 usando uma visualização prévia ao vivo.

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

• Color — as funções de cor que seu app usa, agrupadas por finalidade: Base Colors, Card, Popover, Primary, Secondary e mais. Cada função tem seu próprio valor, então alterar Primary afeta todos os elementos que a utilizam.
• Fonts — suas fontes Serif, Sans-serif e Mono.
• Effects — Radius dos cantos e Shadow, que você controla por cor, opacidade, desfoque, expansão e deslocamento.

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

Abaixo da visualização 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 visualização prévia é atualizada conforme você altera um valor, e os controles abaixo dela incluem 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 mostrada 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 impedirá 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 visualização prévia. Exporte um theme para um arquivo e depois importe-o em outro projeto para reutilizar a mesma direção de design, ou envie-o a um colega de equipe para que o projeto dele combine com o seu.

Se um theme não parecer correto

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 afeta tudo. Não há mensagem de erro para isso — simplesmente parece errado.

Parte do seu app mantém a aparência antiga. Esse é o problema mais comum. Um elemento que recebeu 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 atual.

O 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 no 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 afetar.

Edite elementos individuais com o Editor Visual

Selecione um elemento na visualização 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 mudanças 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 de 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 preenchimento.
• 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.

Quais seções aparecem depende 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 visualização prévia conforme você as faz. Para abandoná-las, use Discard na parte inferior da visualização 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 aparecem na parte inferior da visualização 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 mudanças cosméticas e o chat para mudanças estruturais, como novas páginas, novos recursos ou lógica de backend.
2. Para fazer a mesma alteração em uma linha de cartões 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 a Library

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

1. Selecione o elemento que você quer alterar na visualização prévia. Até fazer isso, a Library mostra 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 gerada ou enviada por upload, selecione a miniatura finalizada.
4. Verifique a visualização prévia. A imagem é aplicada imediatamente ao elemento selecionado.
5. Selecione Save na parte inferior da visualização 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 imagem 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 por upload aparecem abaixo da área de envio — selecione uma para aplicá-la.

Observação: Use asset aparece apenas nas imagens integradas. Imagens que você gera ou envia por upload são aplicadas selecionando a miniatura.

Descreva mudanças em vez de clicar

Quando uma mudança é mais fácil de descrever do que de executar clicando, você pode pedir aos agentes para fazer isso. 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 mudança e editar propriedades diretamente. Digite em Ask the Atoms to change… e envie.
• A entrada de chat abaixo do painel Design. Quando um elemento está selecionado, a entrada 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 isto mais calmo — mais espaço em branco, título menor."

- "Faça o estilo deste botão combinar com o da 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 mudança simples de cor ou espaçamento, edite a propriedade diretamente.

Visualize suas alterações

Use a barra de ferramentas acima da visualização prévia:

• Device view — alterne entre tamanhos de tela para testar a responsividade. Mudanças de theme e tipografia que parecem corretas no desktop muitas vezes 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 visualização prévia se ela parecer desatualizada.
• Open in a new tab — veja 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 visualização prévia

Se a visualização prévia parecer desatualizada, continuar carregando ou mostrar erros em vermelho, o problema está na visualização prévia, e não no Design. Consulte Solução de problemas de compilação e visualização 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 compilação, consulte Relatório de Problemas.