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 o painel Console em busca de erros.

Os agentes podem encontrar problemas durante a build, o que ocasionalmente causa erros na página web. Clique em Resolve e os agentes corrigirão isso para você; quando estiver corrigido, a visualização voltará ao normal. Mensagens vermelhas são um sinal, não uma crise.

A remoção do badge exige 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 do upgrade, o badge do Atoms é removido automaticamente das suas páginas publicadas.

1. Abra o Modo Design e selecione o elemento exato que está desalinhado ou com estilo incorreto.
2. Informe a página e o breakpoint, o problema atual, o resultado desejado e o que não deve mudar.
3. 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.
4. Aplique uma alteração e depois verifique os layouts desktop e mobile, além de estados importantes como carregamento, vazio, hover e erro.
5. Se o resultado quebrar outra área, volte para a última versão funcional e tente novamente com um alvo mais específico.

1. Confirme se o problema afeta apenas o Visualizador de App, a URL de Preview ou também o site publicado.
2. Atualize uma vez, abra o Preview em uma nova aba e teste em uma janela anônima.
3. Verifique se a tarefa ou build atual ainda está em execução. Aguarde a conclusão antes de tentar novamente.
4. 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.
5. Registre qualquer erro do Console ou da 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 do erro sanitizados.

1. Verifique se apenas o Visualizador de App, a URL de Preview ou o site publicado está afetado.
2. Atualize uma vez, abra o Preview em uma nova aba e teste em uma janela anônima.
3. Verifique se a tarefa ou build atual ainda está em execução e aguarde sua conclusão.
4. Teste a última versão funcional conhecida. Se ela funcionar, compare com a alteração recente que introduziu a tela em branco.
5. Abra Settings → Cloud & AI apenas quando o produto informar 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, a versão, horário e fuso horário, ambientes afetados, captura de tela e erro sanitizado do Console ou da Network.

O Preview e o site publicado são canais independentes. Salvar ou visualizar não envia alterações para produção.

1. Clique em Update no painel Publish — Abra o painel Publish e clique em Update. Aguarde até que o status mostre Up to date.
2. 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.
3. 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.
4. 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 comparativas lado a lado e o horário em que você clicou em Publish ou Update.

Quando o agente modifica layout ou estilo, ele pode quebrar sem querer o comportamento responsivo em telas menores.

1. Visualize na largura mobile primeiro — Use o alternador de dispositivo na barra de ferramentas do Visualizador de App para mudar para a visualização mobile e verificar o resultado antes de publicar.
2. Use o Modo Design na visualização mobile — Mude para o Modo Design enquanto o alternador de dispositivo estiver definido para mobile. Clique no elemento quebrado para que o agente mire apenas nesse componente naquele tamanho de tela.
3. Forneça restrições responsivas explícitas — Diga ao agente exatamente como o layout mobile deve ficar. Exemplo: "Em telas menores que 768px, empilhe os cards em uma única coluna e defina o padding como 16px."
4. Peça ao agente para preservar as media queries existentes — Ao solicitar alterações para desktop, adicione: "Não modifique nenhum estilo responsivo ou mobile existente."

Se o problema persistir, forneça o Chat Link, uma captura de tela do layout mobile quebrado e uma imagem de referência do layout esperado.

Se as imagens parecerem quebradas, mostrarem ícones placeholder ou não carregarem:

1. Verifique os caminhos dos arquivos de imagem — Abra a seção Files e confirme 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.
2. 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.
3. Verifique o armazenamento em Cloud — Vá para Settings > Cloud & AI para confirmar que você tem espaço de armazenamento disponível.
4. 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.

Quando o agente modifica elementos não relacionados ou introduz regressões em outras partes da página:

1. 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.
2. Use o Modo Design para isolar — Mude para o Modo Design e clique diretamente no elemento específico. Isso ancora o escopo da edição do agente àquele componente.
3. 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."
4. Uma alteração por prompt — Faça uma alteração, verifique o resultado e depois prossiga para a próxima.

Se o agente continuar causando 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.

Se o painel Preview mostrar um erro de build, uma faixa de erro vermelha ou uma mensagem sobre pacotes ausentes:

1. 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 exata de erro do painel Console e cole para o agente com: "Corrija este erro de build: [mensagem de erro]."
2. 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.
3. 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.
4. Verifique a compatibilidade do pacote — Se o erro mencionar 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 mencionar componentes da plataforma (Visualizador de App, script de inicialização, Publish, registro de deploy) ou 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.

Se o agente confirmar que a alteração foi feita, mas o resultado visual não mudou:

1. Faça um hard refresh — Pressione Cmd+Shift+R (Mac) ou Ctrl+F5 (Windows). Alterações de CSS frequentemente ficam em cache no navegador.
2. Verifique conflitos de especificidade de CSS — O agente pode ter adicionado estilos que estão sendo 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."
3. Use o Modo Design para inspecionar — Mude para o Modo Design e clique no elemento. O editor visual à esquerda mostra as cores, espaçamentos, tipografia e propriedades de layout atualmente aplicados, para que você possa ver se a alteração solicitada foi aplicada.
4. Verifique o arquivo correto — Em 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-me 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.

O Modo Design usa o layout visual para determinar qual componente você está tentando selecionar. Elementos aninhados ou sobrepostos podem causar seleção incorreta.

1. Aproxime — Dê zoom na área antes de clicar. Isso ajuda a distinguir componentes muito próximos ou aninhados.
2. 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."
3. 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.