# Interface

Localize-se no builder do Skip: barra superior, pré-visualização do app, chat com o agente e os painéis que abrem por cima do projeto.

Fonte: https://guides.adapta.org/guias/skip/comece-aqui/interface/

**TL;DR** · O Skip tem duas telas principais: o **workspace**, onde você cria e encontra projetos, e o **builder**, onde constrói. O builder é dividido em três partes: a **barra superior** (nome do projeto, navegação do preview, botões dos painéis e **Publicar**), a **pré-visualização** do app à esquerda e o **chat com o agente** à direita. Os painéis (Skip Cloud, Inspetor de Build, Tema, Configurações, Bug Scanner) abrem por cima e fecham sem sair do projeto.

![Gravação do builder do Skip: o botão Selecionar elemento como anexo é acionado, o botão Entrar da tela de login fica contornado no preview, o painel Propriedades abre à direita e o campo Peça ao Skip recebe o pedido de correção com o sintoma, o resultado esperado e a restrição.](https://guides.adapta.org/media/screenshots/skip/chat-2026-09-22/skip-chat-2026-09-22.gif)

*Aponte, descreva, restrinja: o elemento selecionado no preview vira o alvo do pedido e o campo Peça ao Skip recebe o texto; enviar é o passo seguinte, que não aparece aqui.*

## Workspace e builder

![Home do Skip com a barra lateral de ícones, o cartão Iniciar novo projeto e a lista Últimos projetos.](https://guides.adapta.org/media/screenshots/skip/home-2026-09-21/home-2026-09-21.png)

*Na home: **1** Início Guiado e Prompt Livre, **2** a frase que monta o pedido, **3** os últimos projetos e **4** a barra lateral de navegação.*

O workspace é a tela de entrada: saudação, o cartão **Iniciar novo projeto**, a lista **Últimos projetos** e a barra lateral com **Início**, **Projetos**, **Templates**, **Cursos**, **Gerenciar organização**, **Minha conta** e **Sair**. Ele está detalhado em [Projetos e templates](https://guides.adapta.org/guias/skip/recursos-do-skip/projetos-templates/).

Ao criar ou abrir um projeto, você entra no builder, que ocupa a janela inteira. O logotipo do Skip no canto superior esquerdo leva de volta ao workspace.

![Builder do Skip com três áreas numeradas: 1, a barra superior, com nome do projeto, setas de navegação, seletor de rota, alternância desktop e mobile e o botão Publicar; 2, o chat com o agente à direita, mostrando o fim de uma resposta com próximos passos e a caixa de mensagem; 3, a pré-visualização do app à esquerda, exibindo a tela de login do sistema gerado.](https://guides.adapta.org/media/screenshots/skip/interface-2026-09-19/skip-builder-2026-09-19-cor.png)

*O builder inteiro numa tela: a barra superior (1) com a navegação e os painéis, o chat com o agente (2) e a pré-visualização (3), onde o app roda de verdade enquanto você conversa.*

## Barra superior

Da esquerda para a direita:

|  Controle |  O que faz |
| --- | --- |

|  Nome do projeto e lápis |  Mostra o nome dado pelo agente na primeira execução; o lápis permite renomear |

|  Setas e recarregar |  Voltam, avançam e recarregam a página que está no preview |

|  Seletor de rota |  Lista todas as páginas do app (no exemplo: início, login, criar conta, painel, lançar, clientes, projetos e a página de não encontrado); escolha uma para abri-la no preview |

|  **Visualização Desktop** e **Visualização Mobile** |  Alternam a largura do preview entre computador e celular |

|  **Abrir Bug Scanner** (lupa) |  Abre o painel de erros, requisições, console e navegação do app |

|  **Ajuda** |  Abre "Precisa de ajuda?" com os três canais do Skip: Central de Ajuda, E-mail e WhatsApp |

|  **Esconder Chat** |  Recolhe a coluna do chat e deixa o preview em largura total; clique de novo para voltar |

|  **Skip Cloud** |  Abre o painel do backend do projeto (coleções, autenticação, segredos, logs) |

|  Código (`</>`) |  Abre um menu com **Editar Código** e **Conectar GitHub** |

|  **Inspetor de Build** |  Abre as execuções do agente: linha do tempo, especificação, arquivos, testes e versões |

|  **Editar tema do app** |  Abre o painel de cores e raio das bordas do app |

|  **Configurações e Estatísticas** |  Abre as configurações do projeto: dados, selo, metadados, domínio, GitHub, uso e visitas |

|  **Publicar** e seta |  Publica o projeto; a seta ao lado abre **Visualizar Produção** (o app publicado) e **Visualizar Preview** (a prévia) |

## Pré-visualização do app

A área da esquerda mostra o app rodando de verdade, na rota escolhida no seletor. Você pode usar o app por ali: entrar, cadastrar, navegar. Como os dados vão para o Skip Cloud, o que você cadastra no preview fica salvo no projeto.

Durante uma execução do agente, o preview exibe o estado de construção ("Construindo seu app... Os agentes do Skip estão gerando a interface.") e volta ao app quando a versão fica pronta.

## Chat com o agente

A coluna da direita é a conversa do projeto. Cada mensagem sua ganha o horário e o link **restaurar checkpoint**, que marca o ponto para onde o projeto pode voltar. A resposta do agente começa com o entendimento do pedido e o plano, segue com o rastro de tudo que ele consultou, criou e editou, e termina com o resumo do que há no app e sugestões de próximos passos.

![Trecho final da resposta do agente no chat do Skip: próximos passos sugeridos, horário, botões de avaliação e cópia, contador de créditos e o estado Concluído com a versão.](https://guides.adapta.org/media/screenshots/skip/chat-2026-09-12/resposta-concluida.png)

*O fim de cada resposta traz os próximos passos sugeridos e o rodapé com o custo em créditos.*

No rodapé de cada resposta ficam o horário, **Gostei do resultado** e **Não gostei do resultado**, **Copiar mensagem**, o contador de **créditos consumidos nesta interação** e o estado da execução com a versão gerada (por exemplo, "Concluído - Versão 0.0.1").

O bloco com a contagem de etapas e o tempo ("37 etapas concluídas · 265s") é um botão: clique para expandir ou recolher o rastro da execução.

Abaixo fica a caixa **Mensagem para o agente**, com o placeholder "Descreva o que você quer criar...". Ao lado dela:

- **Adicionar anexo**: envia imagens ou documentos como referência.

- **Selecionar elemento como anexo**: você aponta uma parte do app no preview e descreve a mudança em cima dela.

- **Modo de execução**: mostra o modo atual (**Agente**).

- **Enviar mensagem**: dispara o pedido.

![Rodapé do chat do Skip: caixa Mensagem para o agente, botões de anexo e de selecionar elemento, seletor de modo Agente e botão de enviar.](https://guides.adapta.org/media/screenshots/skip/chat-2026-09-12/rodape-e-caixa.png)

*A caixa de mensagem com anexo, seleção de elemento e o modo de execução.*

## Os painéis que abrem por cima

|  Painel |  Botão |  Para que serve |  Artigo |
| --- | --- | --- | --- |

|  Skip Cloud |  ícone do Skip Cloud |  Ver e ajustar coleções, login, segredos, automações e logs |  [Skip Cloud, banco de dados e login](https://guides.adapta.org/guias/skip/recursos-do-skip/skip-cloud/) |

|  Inspetor de Build |  **Inspetor de Build** |  Entender o que o agente fez em cada execução |  [Inspetor de Build e Bug Scanner](https://guides.adapta.org/guias/skip/recursos-do-skip/diagnostico/) |

|  Bug Scanner |  lupa |  Ver erros e requisições do app em uso |  [Inspetor de Build e Bug Scanner](https://guides.adapta.org/guias/skip/recursos-do-skip/diagnostico/) |

|  Tema |  **Editar tema do app** |  Trocar cores de fundo e texto e o raio das bordas, com **Cancelar** e **Aplicar** |  esta página |

|  Configurações e Estatísticas |  engrenagem |  Nome, selo, metadados, domínio, GitHub, créditos e visitas do projeto |  [Configurações do projeto](https://guides.adapta.org/guias/skip/recursos-do-skip/configuracoes-do-projeto/) |

O painel **Tema** substitui a coluna do chat enquanto está aberto: a aba **Cores** mostra **Fundo** e **Texto** com o código de cada cor, o botão **Mostrar opções avançadas** com mais cores e o controle **Raio das bordas**; a aba **Fontes** está marcada como "em breve". Nada muda até você clicar em **Aplicar**.

**Dica do curso:** em *Skip na Prática*, aula "Entendendo o Skip", a Adapta percorre a barra superior nesta mesma ordem: seletor de páginas do app, visualização desktop e mobile e os detalhes de cada versão. Faça o mesmo tour no seu primeiro projeto antes de pedir a primeira alteração; saber nomear a parte da tela ("na barra lateral", "no cabeçalho") deixa o pedido mais preciso.

## O que conferir

- **Rota certa no preview:** se uma tela "sumiu", verifique o seletor de rota antes de pedir correção; ela pode só não estar aberta.

- **Chat escondido:** o botão **Esconder Chat** fica realçado enquanto o chat está recolhido.

- **Créditos:** o contador no rodapé de cada resposta mostra o custo daquela execução; o saldo da organização está em [Créditos e plano](https://guides.adapta.org/guias/skip/conta-e-organizacao/creditos/).