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.
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
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.
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.
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.
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.
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 |
| Inspetor de Build | Inspetor de Build | Entender o que o agente fez em cada execução | Inspetor de Build e Bug Scanner |
| Bug Scanner | lupa | Ver erros e requisições do app em uso | Inspetor de Build e Bug Scanner |
| 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 |
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.
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.