Edição visual e visualização prévia

A edição visual funciona diretamente no Visualizador de App. Use a barra de ferramentas abaixo da visualização prévia para selecionar elementos, editar texto, substituir imagens, aplicar um tema e visualizar suas alterações antes de publicar.

Use Select element para alterações assistidas por IA, Edit Text para alterações diretas no texto e Theme para estilos globais, como cores, fontes e efeitos.

Como a edição visual funciona

Quando os agentes de IA concluem uma tarefa, o Visualizador de App aparece na parte superior do projeto. A barra de ferramentas de edição visual fica localizada abaixo da visualização prévia.

• Select element permite selecionar um ou mais elementos e pedir aos agentes que os modifiquem.
• Edit Text permite editar texto diretamente na visualização prévia.
• Theme abre os controles de tema para estilos globais.

A barra de ferramentas pode ser recolhida quando você não precisar dela.

Antes de começar

Antes de começar a editar, certifique-se de que:

• Seu projeto tenha uma compilação concluída. As ferramentas de edição visual ficam disponíveis no Visualizador de App depois que os agentes terminam uma tarefa.
• Você saiba que as alterações não ficam ativas até que você publique. Sua URL pública não é afetada até que você publique a versão atualizada.
• Você saiba que um tema afeta apenas estilos compartilhados. Elementos criados com valores fixos mantêm a aparência antiga após uma mudança de tema. Veja Se um tema não parecer correto abaixo.

Defina estilos globais com Theme

Um tema é 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 fase de preparação, antes de você começar a criar. Aplicá-lo cedo significa que tudo o que os agentes gerarem seguirá esse tema desde o início.

Escolha um tema

Selecione Theme na barra de ferramentas abaixo do Visualizador de App. O painel Theme inclui um campo Search Themes e agrupa os temas 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 tema.
• Featured Theme — 15 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.
• Your Theme — temas que você criou ou personalizou. Eles podem ser renomeados e excluídos.

Cada tema 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 tema aplicado no topo e seus temas salvos abaixo.

Para aplicar um:

1. Selecione o tema 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 tema que você escolheu, e ele agora aparece em Current Theme.

Observação: Se você tiver alterações de texto ou imagem não salvas, o Atoms pedirá que você as salve ou descarte antes de aplicar um novo tema.

Atualize um tema aplicado

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

Para usá-la, selecione Atualizar no seu tema 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 é obrigado a atualizar. Se deixar como está, seu projeto continuará executando a versão que você aplicou.

Observação: Observação: Se seu app não parecer com o tema que você selecionou, elementos individuais podem ter estilos que substituem o tema. Essas substituições se aplicam a conteúdos específicos e permanecem após uma mudança de tema.

Criar ou editar um tema no Theme Manager

Selecione + ao lado de Current Theme para criar um do zero ou abra um tema existente para alterá-lo. Em ambos os casos, será aberto o Theme Manager, onde você ajusta um tema com precisão usando uma visualização prévia ao vivo.

As configurações 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, expansão e deslocamento.

A visualização prévia ao lado é construída com componentes reais — formulários de login, botões, campos de entrada, texto corrido e texto monoespaçado — para que você possa avaliar uma alteração 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 tema ao estado inicial.

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

Salvar um tema

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

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

Observação: As edições não são mantidas até que você as salve. O Atoms impedirá você e oferecerá salvar ou descartar caso tente aplicar um tema diferente com alterações não salvas pendentes.

Reutilizar um tema em vários projetos

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

Se um tema não parecer correto

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

O que você pode ver, em vez disso, é um tema 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 tema, então mantém a aparência anterior e pode entrar em conflito com tudo ao redor. Selecione o elemento afetado e descreva a alteração no chat do projeto.

O texto fica difícil de ler. Um tema 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 tema mais próximo do seu design atual.

O Atoms informa que o tema não pode ser aplicado. Isso é incomum e significa que a interface do seu projeto não foi construída com o sistema de temas do Atoms. Use o Editor Visual em vez disso — tudo ainda pode ser feito elemento por elemento.

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

Edite elementos com o Editor Visual

1. Passe o cursor sobre a barra de ferramentas de edição visual e selecione Select element.
2. A barra de ferramentas exibe Click to select, Ctrl/Cmd + Click for multiple.
3. Selecione um elemento na visualização prévia. Para selecionar vários elementos, mantenha Ctrl no Windows ou Cmd no Mac pressionado enquanto seleciona.
4. Suas seleções são anexadas ao chat do projeto. A barra de ferramentas mostra o número selecionado, como Edit 1 selection in chat window.
5. Descreva a alteração que você deseja no chat do projeto e envie sua mensagem.
6. Selecione Select element novamente para sair do modo de seleção.

Use o chat do projeto para alterações como layout, cores, espaçamento, estilo ou alterações que afetem vários elementos selecionados.

Editar texto diretamente

1. Selecione Edit Text na barra de ferramentas abaixo do Visualizador de App.
2. Quando Click text content to edit aparecer, selecione o texto que você deseja alterar.
3. Edite o texto diretamente na visualização prévia.
4. Você pode editar vários elementos de texto antes de salvar. A barra de ferramentas mostra o número de edições pendentes, como 1 text change ou 2 text changes.
5. Selecione Save para manter todas as alterações de texto pendentes ou Discard para removê-las.

Você também pode clicar duas vezes no texto enquanto usa Select element para começar a editá-lo diretamente.

Salve ou descarte suas alterações

Alterações diretas em texto e imagem não são aplicadas até que você as salve. Quando há alterações pendentes, a barra de ferramentas mostra o número de alterações junto com Discard e Save.

• Save aplica todas as edições diretas pendentes.
• Discard remove as edições pendentes e retorna os elementos afetados ao estado anterior.

Se você tentar sair do modo de edição com alterações pendentes, o Atoms exibirá:

Alterações não salvas

Você tem alterações não salvas. Salve ou descarte as alterações antes de sair do modo de edição.

Selecione Cancel para continuar editando ou Discard para sair sem manter as alterações.

Salvar atualiza o projeto em andamento. Isso não atualiza o site ao vivo até que você publique.

Substituir uma imagem

1. Entre no modo Select element.
2. Selecione a imagem que você deseja substituir.
3. Escolha uma imagem da biblioteca de imagens ou use o controle de upload na imagem selecionada.
4. Verifique a substituição na visualização prévia.
5. Selecione Save para aplicar a alteração de imagem ou Discard para removê-la.

Se você também inserir uma instrução no chat do projeto, a substituição da imagem e a instrução do chat poderão ser enviadas juntas.

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 exige um plano Pro ou Max. Digite o que você deseja em Describe the image you want to generate e selecione Generate. Os resultados aparecem abaixo do campo. Selecione uma miniatura pronta 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 selecionando a miniatura correspondente.

Descreva alterações no chat

Depois de selecionar um ou mais elementos com Select element, descreva o resultado que você deseja no chat do projeto.

Por exemplo:

• "Deixe esta seção mais calma, com mais espaço em branco e um título menor."
• "Faça estes botões combinarem com o estilo da página de preços."

Seja específico sobre o resultado pretendido. Instruções como "faça ficar melhor" podem produzir resultados imprevisíveis

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. Alterações de tema 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 — 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.

Recuperar-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 pode estar no Visualizador de App e não nas suas edições visuais. 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.

Se suas edições diretas de texto ou imagem parecerem ter desaparecido, verifique se você as salvou. Alterações não salvas podem ser descartadas quando você sai do modo de edição — veja Salve ou descarte suas alterações.

Publique suas alterações

As edições visuais permanecem no seu projeto em andamento até que você publique. Selecione Publish no canto superior direito ou Atualizar se o projeto já estiver ao vivo.

Observação: Se seu projeto usar Specify Versão em vez de Always Latest, o site ao vivo permanecerá bloqueado na versão que você escolheu, e suas alterações de design não aparecerão publicamente até que você publique uma nova versão.

Para os erros que os agentes relatam durante uma compilação, consulte Relatório de Problemas.