Visualizador de App
Visualize seu app ao vivo, teste suas interações e execute verificações antes da publicação — com um tour completo pela barra de ferramentas e todas as formas de fazer edições visuais.
O que é o Visualizador de App?
Quando seus Agentes de IA terminam uma tarefa, o Visualizador de App é aberto no topo da página. Em vez de apenas ver como sua criação parece, você pode interagir com ela como um app totalmente funcional — clicar pelas páginas, testar recursos e fazer alterações visuais sem escrever código. Ele também serve como a verificação final antes da publicação: se algo parecer errado ou se comportar de forma inesperada, você pode identificar e corrigir isso antes que os usuários vejam.
Antes de começar: o processamento do Agente pode levar um momento. Enquanto a tarefa é executada, o painel Terminal à direita mostra a atividade em tempo real, incluindo criação de arquivos, geração de código e quaisquer erros encontrados ao longo do caminho. Você também pode usar o ícone de Atualizar a qualquer momento para recarregar a versão mais recente da prévia.
A barra de ferramentas do Visualizador de App
Uma barra de ferramentas compacta fica acima da janela de prévia. Da esquerda para a direita, aqui está o que cada controle faz:
- Design: alterna o modo de edição visual. Com ele ativo, clicar em qualquer coisa na prévia seleciona esse elemento para edição — veja “Modifique seu app” abaixo.
- Alternância de dispositivo: o ícone de exibição alterna a prévia para a visualização móvel e de volta, para que você possa verificar a responsividade sem sair da página.
- Atualizar: recarrega a janela de prévia. Seu primeiro passo sempre que a prévia parecer desatualizada ou travada.
- Início: leva a prévia de volta para a página inicial do seu app de onde quer que você tenha navegado.
- Seletor de página: o menu suspenso no meio lista as páginas do seu app; escolha uma para visualizá-la diretamente em vez de clicar até chegar lá.
- Abrir em nova aba: o ícone de seta abre a prévia em uma aba separada do navegador. Especialmente útil quando a prévia incorporada está travada ou sem resposta.
- Console: na borda direita, abre o painel com logs do sistema e mensagens de erro, sua primeira parada quando algo parece quebrado.
A barra de ferramentas acima da prévia: Design à esquerda, depois a alternância de dispositivo (“Mostrar prévia móvel”), atualizar, início, o seletor de página, abrir em nova aba e Console à direita.
O ícone de seta abre o app em execução em sua própria aba do navegador — uma saída confiável se a prévia incorporada se comportar mal.
Como usar o Visualizador de App
Etapa 1: Aguarde a prévia carregar
Depois que os agentes terminarem, o Visualizador de App carrega sua prévia na janela principal. Isso geralmente leva de alguns segundos a um minuto.
Mais de 2 minutos? Clique em Atualizar na barra de ferramentas. Se ainda estiver travado, verifique se há erros no Console (veja a Etapa 3).
Etapa 2: Visualize e teste as interações
Depois de carregado, você está olhando para o seu app real:
- Verifique a responsividade: use a alternância de dispositivo para alternar entre as visualizações desktop e móvel e confirmar que o layout se mantém em telas menores.
- Clique por todas as interações: abra cada link de navegação, pressione os botões, envie os formulários e acione os estados de hover. Uma página que renderiza não é o mesmo que uma página que funciona.
- Percorra a jornada principal: siga o caminho mais importante, da landing page à exploração e à conclusão da principal chamada para ação, do início ao fim.
- Teste em uma aba real: abra a prévia em uma nova aba do navegador para uma verificação final no ambiente que seus usuários realmente terão.
Etapa 3: Verifique se há erros (se algo parecer errado)
Se o app não carregar ou parecer quebrado, selecione Console na barra de ferramentas do Visualizador de App. O painel Console é aberto abaixo da prévia, enquanto o Terminal é uma área separada de atividade da tarefa. Ele reúne os logs do sistema e as mensagens de erro gerados durante a compilação. As mensagens de erro em vermelho podem incluir uma descrição do que deu errado e detalhes adicionais de diagnóstico.
Para corrigir erros:
- Clique em Resolve na notificação de Relatório de Problemas, a IA analisa e corrige automaticamente todos os bugs identificados, e a prévia é recarregada assim que as correções são aplicadas. Você pode acompanhar o progresso ao vivo no painel Terminal.
- Sem botão Resolve? Clique em “…” (mais opções) ao lado da mensagem mais recente do agente e selecione Feedback para entrar em contato com a equipe de suporte — inclua seu Chat Link e uma captura de tela do erro.
Para o fluxo completo de tratamento de erros, consulte Relatório de Problemas.
Etapa 4: Modifique seu app
Método 1 — Clique para editar (melhor para alterações visuais)
Primeiro selecione Design na barra de ferramentas do Visualizador de App para ativar o modo de edição visual. Design está disponível apenas em estados elegíveis de projeto desktop para usuários com acesso de editor; se você não o vir, use o Método 2 no chat. Em seguida, clique diretamente em qualquer elemento na prévia. O elemento é selecionado com um contorno e um selo nomeando o que você escolheu e seu tamanho, um h1, um botão, um card. Uma barra inline “Peça aos Atoms para alterar…” aparece exatamente no elemento, para que você possa descrever uma alteração limitada exatamente àquele ponto, e um editor visual é aberto à esquerda para ajustes práticos:
- Cores: cores de texto, fundo e borda por meio de um seletor de cores.
- Espaçamento: padding, margin e o espaço entre elementos.
- Tipografia: tamanho, peso e família da fonte.
- Layout: alinhamento, propriedades de flexbox e grid.
- Conteúdo de texto: edite as palavras no lugar.
Cada alteração atualiza a prévia instantaneamente, para que você veja o resultado em tempo real. O editor visual também inclui uma aba Library para navegar e adicionar recursos pré-construídos: ícones, imagens e componentes de UI, diretamente no seu projeto.
A edição por clique em ação: o título está selecionado (com sua tag e tamanho exibidos), e a barra inline permite pedir uma alteração exatamente para este elemento.
Método 2 — Descreva no chat
Diga aos agentes o que alterar em linguagem simples, e eles aplicam isso ao app:
Deixe a cor de fundo mais escura.
Reduza o padding ao redor do cabeçalho.
Altere a cor do botão para azul.
Verificações antes da publicação
O Visualizador de App é a última parada antes de Publicar. Esta checklist ajuda a detectar problemas comuns antes que os usuários os vejam:
- A prévia carrega corretamente, e o Console não mostra mensagens de erro em vermelho.
- O layout se mantém na visualização móvel, não apenas no desktop.
- Toda interação funciona: navegação, botões, formulários e a principal chamada para ação.
- O conteúdo placeholder foi substituído; marcadores entre colchetes como [Nome da empresa] são fáceis de ignorar e muito visíveis quando estão ao vivo.
- Cada página no seletor de página recebe pelo menos uma olhada rápida, não apenas a página inicial.
Tudo certo? Clique em Publicar no canto superior direito e compartilhe o link.
Referência rápida
- Atualizar a prévia — ícone de Atualizar na barra de ferramentas do Visualizador de App.
- Alternar visualização do dispositivo — alternância de dispositivo na barra de ferramentas para testar diferentes tamanhos de tela.
- Pular entre páginas — menu suspenso do seletor de página na barra de ferramentas.
- Abrir em uma nova aba — ícone de seta na barra de ferramentas.
- Ver logs de erro — selecione Console na barra de ferramentas do Visualizador de App; o painel de logs é aberto abaixo da prévia.
- Corrigir erros automaticamente — botão Resolve na notificação de Relatório de Problemas.
- Editar elementos visuais — clique em qualquer elemento na prévia para selecioná-lo e abrir o editor visual.
- Relatar um problema — “…” → Feedback em qualquer mensagem do agente.
FAQ
Por que meu Visualizador de App mostra uma tela de carregamento?
O site está carregando, e o Visualizador de App está funcionando normalmente, aguarde um momento. Se levar mais de 2 minutos, clique no ícone de Atualizar ou verifique se há erros no painel Console.
Por que meu Visualizador de App mostra mensagens de erro em vermelho?
Os agentes podem encontrar problemas durante a compilação, o que ocasionalmente causa erros na página da web. Clique em Resolve e os agentes corrigirão isso para você; assim que for corrigido, a prévia volta ao normal. As mensagens vermelhas são um sinal, não uma crise.
Por que não consigo remover o selo Atoms da minha página publicada?
A remoção do selo requer Pro ou superior. Clique no seu avatar no canto superior direito, selecione Settings, depois vá para Plans & Billing e escolha o plano Pro ou Max. Depois da atualização, o selo Atoms é removido automaticamente das suas páginas publicadas.
Como corrigir problemas de layout ou estilo da página usando o Design Mode?
- Abra o Design Mode e selecione o elemento exato que está desalinhado ou com estilo incorreto.
- Informe a página e o breakpoint, o problema atual, o resultado desejado e o que não deve mudar.
- Use instruções mensuráveis, como padding, alinhamento, largura, cor ou comportamento de quebra de linha. Anexe uma imagem de referência quando a correspondência visual for importante.
- Aplique uma alteração e depois verifique os layouts desktop e móvel, além de estados importantes como carregamento, vazio, hover e erro.
- Se o resultado quebrar outra área, volte para a última versão funcional e tente novamente com um alvo mais restrito.
Por que o Visualizador de App está mostrando uma tela branca em branco?
- Confirme se o problema afeta apenas o Visualizador de App, a URL de Preview ou também o site publicado.
- Atualize uma vez, abra o Preview em uma nova aba e teste em uma janela anônima.
- Verifique se a tarefa ou compilação atual ainda está em execução. Aguarde terminar antes de tentar novamente.
- Se uma mensagem explícita disser que o saldo de Cloud & AI é insuficiente ou que o app está suspenso, abra Settings → Cloud & AI e revise esse saldo. Não recarregue com base apenas em uma tela em branco.
- Registre qualquer erro de Console ou Network sem compartilhar cookies, tokens ou valores secretos.
Se a tela continuar em branco, entre em contato com o Suporte com o Chat Link, a URL completa do Viewer, horário e fuso horário, ambientes afetados, captura de tela e detalhes de erro sanitizados.
Por que meu Preview ou Visualizador de App está mostrando uma tela em branco ou carregando para sempre?
- Verifique se apenas o Visualizador de App, a URL de Preview ou o site publicado está afetado.
- Atualize uma vez, abra o Preview em uma nova aba e teste em uma janela anônima.
- Verifique se a tarefa ou compilação atual ainda está em execução e aguarde terminar.
- Teste a última versão funcional conhecida. Se ela funcionar, compare a alteração recente que introduziu a tela em branco.
- Abra Settings → Cloud & AI apenas quando o produto relatar explicitamente saldo insuficiente ou app suspenso.
Se o problema continuar, entre em contato com o Suporte com o Chat Link, a URL completa do Viewer, versão, horário e fuso horário, ambientes afetados, captura de tela e erro sanitizado de Console ou Network.
Por que minhas alterações no Design Mode parecem corretas no Preview, mas não no site publicado?
Preview e o site publicado são canais independentes. Salvar ou visualizar não envia alterações para produção.
- Clique em Update no painel Publish — Abra o painel Publish e clique em Update. Aguarde até que o status mostre Up to date.
- Faça um hard refresh no site ao vivo — Pressione Cmd+Shift+R (Mac) ou Ctrl+F5 (Windows), ou abra a URL em uma janela anônima para descartar cache do navegador.
- Verifique o número da versão publicada — No painel Publish, confirme se a versão corresponde ao que você vê no Preview. Se forem diferentes, publique novamente.
- Teste o subdomínio Prod da plataforma — Se você usa um domínio personalizado, abra a URL padrão de Prod separadamente. Se o subdomínio Prod estiver atualizado, mas o domínio personalizado não, o problema é cache de DNS ou CDN.
Se o problema persistir, forneça a URL de Preview, a URL de Prod, capturas de tela de comparação lado a lado e o horário em que você clicou em Publish ou Update.
Por que minha página parece quebrada no celular depois que o agente fez alterações?
Quando o agente modifica o layout ou o estilo, ele pode quebrar sem querer o comportamento responsivo em telas menores.
- Visualize primeiro na largura móvel — Use a alternância de dispositivo na barra de ferramentas do Visualizador de App para mudar para a visualização móvel e verificar o resultado antes de publicar.
- Use o Design Mode na visualização móvel — Mude para o Design Mode enquanto a alternância de dispositivo estiver definida para móvel. Clique no elemento quebrado para que o agente mire apenas naquele componente naquele tamanho de tela.
- Forneça restrições responsivas explícitas — Diga ao agente exatamente como o layout móvel deve parecer. Exemplo: "Em telas menores que 768px, empilhe os cards em uma única coluna e defina o padding como 16px."
- Peça ao agente para preservar as media queries existentes — Ao solicitar alterações no desktop, adicione: "Não modifique nenhum estilo responsivo ou móvel existente."
Se o problema persistir, forneça o Chat Link, uma captura de tela do layout móvel quebrado e uma imagem de referência do layout esperado.
Por que as imagens estão ausentes ou não carregam no Preview ou no site publicado?
Se as imagens parecerem quebradas, mostrarem ícones placeholder ou não carregarem:
- Verifique os caminhos dos arquivos de imagem — Abra a seção Files e verifique se os arquivos de imagem existem nos caminhos referenciados no seu código. O agente pode ter movido ou renomeado arquivos durante as edições.
- Verifique o tamanho e o formato do arquivo — Imagens muito grandes ou formatos não suportados podem não carregar. Comprima as imagens ou converta para PNG, JPG ou WebP.
- Verifique o armazenamento em Cloud — Vá para Settings > Cloud & AI para confirmar que você tem espaço de armazenamento disponível.
- Faça um hard refresh — Pressione Cmd+Shift+R (Mac) ou Ctrl+F5 (Windows) para limpar referências de imagem em cache.
Se o problema persistir, forneça o Chat Link, a URL da imagem ausente e uma captura de tela do estado quebrado.
O agente alterou o elemento errado ou quebrou outras partes da página. O que devo fazer?
Quando o agente modifica elementos não relacionados ou introduz regressões em outras partes da página:
- Reverta — Vá para History e faça Remix a partir da última versão estável. Isso redefine o contexto do chat enquanto preserva seu código.
- Use o Design Mode para isolar — Mude para o Design Mode e clique diretamente no elemento específico. Isso ancora o escopo de edição do agente àquele componente.
- Adicione restrições explícitas — Declare claramente o que NÃO deve mudar. Exemplo: "Altere apenas a cor de fundo do cabeçalho para #1A365D. Não modifique a barra de navegação, o rodapé nem qualquer outro componente."
- Uma alteração por prompt — Faça uma alteração, verifique o resultado e depois prossiga para a próxima.
Se o agente repetir regressões em outros elementos, faça Remix a partir de uma versão estável e tente novamente com uma instrução de escopo bem restrito.
Por que o Preview está mostrando um erro de compilação ou dependência ausente?
Se o painel Preview mostrar um erro de compilação, um banner de erro vermelho ou uma mensagem sobre pacotes ausentes:
- Use o botão Resolve — Se uma notificação de Relatório de Problemas aparecer no Visualizador de App, clique em Resolve e a IA analisará e corrigirá automaticamente todos os erros identificados. Se nenhum botão Resolve aparecer, copie a mensagem de erro exata do painel Console e cole para o agente com: "Corrija este erro de compilação: [mensagem de erro]."
- Verifique alterações recentes — Se o erro apareceu após uma edição específica, vá para History e compare com a última versão funcional para identificar qual alteração causou a quebra.
- Faça Remix a partir da última versão funcional — Se o erro for difícil de resolver, faça Remix a partir do seu último checkpoint bem-sucedido e reaplique as alterações de forma incremental.
- Verifique a compatibilidade do pacote — Se o erro fizer referência a um pacote específico, peça ao agente: "Verifique se [nome do pacote] é compatível com a configuração atual do projeto e corrija quaisquer conflitos de versão."
Observação: se a mensagem de erro fizer referência a componentes da plataforma (Visualizador de App, script de inicialização, Publish, registro de deploy) ou a arquivos internos de pacotes de terceiros (por exemplo, @vue/compiler-core, vite), isso pode ser um problema da plataforma e não do agente. Entre em contato com o Suporte com a mensagem de erro completa.
Se o problema persistir, forneça a mensagem de erro completa, o Chat Link e uma captura de tela do erro.
Por que minhas alterações de fonte, cor ou espaçamento não estão surtindo efeito?
Se o agente confirmar que a alteração foi feita, mas o resultado visual não mudou:
- Faça um hard refresh — Pressione Cmd+Shift+R (Mac) ou Ctrl+F5 (Windows). Alterações de CSS costumam ser armazenadas em cache pelo navegador.
- Verifique conflitos de especificidade de CSS — O agente pode ter adicionado estilos que são sobrescritos por regras existentes. Peça ao agente: "Verifique se o estilo que solicitei está sendo sobrescrito por outra regra de CSS e corrija a especificidade, se necessário."
- Use o Design Mode para inspecionar — Mude para o Design Mode e clique no elemento. O editor visual à esquerda mostra as cores, o espaçamento, a tipografia e as propriedades de layout atualmente aplicados, para que você possa ver se a alteração solicitada foi aplicada.
- Verifique o arquivo correto — Para projetos com folhas de estilo globais e estilos em nível de componente, o agente pode ter editado o arquivo errado. Pergunte: "Onde você aplicou a alteração? Mostre o caminho do arquivo e a linha."
Se o problema persistir, forneça o Chat Link, uma captura de tela do elemento inalterado e os valores exatos de estilo que você solicitou.
Por que o Design Mode seleciona o componente errado quando clico?
O Design Mode usa o layout visual para determinar qual componente você está tentando selecionar. Elementos aninhados ou sobrepostos podem causar seleção incorreta.
- Aproxime o zoom — Aumente o zoom na área antes de clicar. Isso ajuda a distinguir componentes muito próximos ou aninhados.
- Use descrição em texto como alternativa — Se clicar repetidamente selecionar o elemento errado, descreva-o no chat. Exemplo: "Selecione o segundo botão dentro do card de preços na coluna da direita."
- Faça referência pelo caminho do arquivo — Se você souber qual arquivo contém o componente, diga isso diretamente ao agente: "Edite o elemento em src/components/PricingCard.tsx, linha 42."
Se os problemas de seleção persistirem, forneça uma captura de tela destacando o elemento desejado e o Chat Link.