Visualizador de App

O que é o Visualizador de App?

Quando os Agentes de IA concluem uma tarefa, o Visualizador de App aparece no topo da página. Ele permite que você visualize seu app ativo e faça edições visuais diretamente — sem necessidade de programação.

Antes de Começar

• O processamento do Agente pode levar um momento — aguarde pacientemente.
• Verifique o painel Terminal à direita para acompanhar o progresso detalhado. O painel Terminal exibe logs em tempo real do que o Agente de IA está fazendo, incluindo criação de arquivos, geração de código e quaisquer erros encontrados durante o processo de build.
• Clique no ícone de atualização a qualquer momento para recarregar a visualização.

Como Usar o Visualizador de App

Etapa 1: Aguarde a visualização carregar

Depois que os Agentes terminarem, o Visualizador de App carrega sua visualização na janela principal de preview.

⏱️ Geralmente leva de alguns segundos a um minuto.

Se demorar mais de 2 minutos: clique no ícone de atualização na barra de ferramentas do Visualizador de App. Se ainda travar, verifique o painel Terminal para ver erros (consulte a Etapa 3 abaixo).

Etapa 2: Visualize seu app

Assim que carregar, você poderá ver seu app ativo na janela de preview.

• Desktop / Tablet / Mobile — Use a barra de ferramentas de dispositivo no topo da janela de preview para alternar entre as visualizações e testar a responsividade. A barra de ferramentas exibe três ícones que representam dispositivos desktop, tablet e mobile. Clique em cada ícone para ver como seu app fica em diferentes tamanhos de tela sem sair da página.
• Abrir em nova aba— Clique no ícone de seta no canto superior direito da janela de preview para abrir a visualização em uma aba separada do navegador. Isso é especialmente útil se a visualização incorporada estiver travada ou sem resposta.

Etapa 3: Verifique se há erros (se algo parecer errado)

Se seu app não carregar ou parecer quebrado, verifique o painel Console em busca de mensagens de erro.

O painel Console fica no lado direito da tela, abaixo da aba Terminal. Ele exibe logs do sistema e mensagens de erro geradas durante o processo de build.

Se você vir mensagens de erro em vermelho, elas normalmente incluem:

• Uma descrição do que deu errado
• O arquivo e o número da linha em que o erro ocorreu
• Um stack trace para ajudar a identificar a causa raiz

Para corrigir os erros: (Para mais detalhes, consulte: Relatório de Problemas)

• Clique em "Resolve" — a IA analisará e corrigirá automaticamente todos os bugs identificados.
• A visualização será recarregada assim que as correções forem aplicadas. Você pode acompanhar o progresso em tempo real pelo painel Terminal.

Não há botão "Resolve"?

Clique em "..." (mais opções) ao lado da mensagem mais recente do Agente e selecione "Feedback" para relatar o problema à nossa equipe de suporte. Inclua seu Link do Chat e uma captura de tela do erro.

Etapa 4: Modifique seu app

Método 1: Clique para editar (recomendado para alterações visuais)

Clique diretamente em qualquer elemento na janela de preview. Um editor visual aparecerá no lado esquerdo da tela, permitindo que você ajuste:

• Cores — Altere a cor do texto, a cor de fundo ou a cor da borda com um seletor de cores
• Espaçamento — Ajuste padding, margin e o espaço entre elementos
• Tipografia — Modifique tamanho, espessura e família da fonte
• Layout — Altere alinhamento, configurações de flexbox ou propriedades de grid
• Conteúdo de texto — Edite o texto diretamente no editor

Assim que você fizer uma alteração, a visualização será atualizada instantaneamente para que você veja o resultado em tempo real.

O editor visual também inclui uma aba Library onde você pode navegar e adicionar recursos pré-construídos, como ícones, imagens e componentes de UI, ao seu projeto.

Método 2: Descreva no chat

Diga ao Agente de IA o que você quer alterar usando linguagem natural. Por exemplo:

• "Deixe a cor de fundo mais escura"
• "Reduza o padding ao redor do cabeçalho"
• "Mude a cor do botão para azul"

A IA entenderá sua solicitação e aplicará as alterações ao seu app.

Referência Rápida

• Atualizar visualização – Clique no ícone de atualização na barra de ferramentas do Visualizador de App para recarregar a janela de preview.
• Alternar visualização do dispositivo – Use os ícones Desktop, Tablet ou Mobile na barra de ferramentas de preview para testar como seu app fica em diferentes tamanhos de tela.
• Abrir em nova aba – Clique no ícone de seta no canto superior direito da janela de preview para abrir a visualização em uma aba separada do navegador.
• Ver logs de erro – Verifique o painel Console no lado direito da tela para ver mensagens de erro e logs do sistema.
• Corrigir erros automaticamente – Clique no botão "Resolve" na notificação de Relatório de Problemas para permitir que a IA corrija todos os bugs identificados.
• Editar elementos visuais – Clique em qualquer elemento na janela de preview para abrir o editor visual no lado esquerdo.
• Relatar um problema – Clique em "..." → "Feedback" em qualquer mensagem do Agente para relatar problemas à equipe de suporte.

FAQ

Por que meu Visualizador de App mostra uma tela de carregamento?

A exibição de carregamento significa que o site está carregando. O Visualizador de App está funcionando normalmente. Aguarde um momento para que a visualização carregue corretamente. Se demorar mais de 2 minutos, tente clicar no ícone de atualização ou verificar o painel Console em busca de erros.

Por que meu Visualizador de App mostra mensagens de erro em vermelho?

Os Agentes podem encontrar problemas durante o processo de build, o que ocasionalmente pode causar erros na página da web. Clique em "Resolve", e os Agentes corrigirão o erro para você. Depois de corrigido, o Visualizador de App fará a visualização normalmente, então não há necessidade de se preocupar com o aparecimento de mensagens de erro em vermelho.

Por que não consigo remover o selo Atoms da minha página publicada?

A remoção do selo requer Pro ou superior. Você pode fazer o upgrade a qualquer momento em Configurações → Planos e Faturamento. Após o upgrade, o selo será removido automaticamente das suas páginas publicadas.

Para fazer o upgrade, clique no seu avatar no canto superior direito, selecione Configurações e depois vá para Planos e Faturamento. Escolha o plano Pro ou Max e conclua o processo de upgrade. Após a atualização, o selo Atoms não aparecerá mais nas suas páginas publicadas.