Pular para o conteúdo principal

Começando

Comece a usar o Skip em minutos seguindo este guia passo a passo.

Requisitos​

Antes de começar, você precisa apenas de:

  • Um navegador web moderno (Chrome, Firefox, Safari ou Edge)
  • Uma conta de email válida
  • Conexão com internet

Não é necessário instalar nada no seu computador!

1. Criando sua Conta​

  1. Acesse goskip.dev
  2. Clique em "Criar conta" ou "Sign Up"
  3. Escolha uma das opções de registro:
    • Email e senha
    • Conta do Google
    • Conta do GitHub
  4. Confirme seu email
  5. Pronto! Você já está dentro do Skip

2. Conhecendo a Interface​

Bem-vindo(a) a este guia passo a passo sobre como criar uma aplicação com Skip

Interface do Skip

Barra Superior​

  • Logo do Skip (clique para voltar ao dashboard)
  • Como funciona: Guia rápido
  • Preços: Acompanhe seu plano de assinatura
  • Workspace: Visualize, edite e configure seus projetos
  • Perfil: Gerencie seu dados pessoais e usas estatísticas de uso

Minha Conta​

Tela Minha Conta

  1. Acesse-o clicando no botão superior direito → "Minha Conta"
  2. Aqui você pode encontrar:
    • Perfil: Gerencie seu nome e sobrenome.
    • Segurança: Altere email e senha.
    • Integrações: Visualize e gerencie suas integrações com "Supabase" e "GitHub".
    • Plano & uso: Estatísticas de Créditos e Uso e Plano Atual

3. Seu Primeiro Projeto​

Prompt de Geração​

Descreva no campo disponível o objetivo do site , o público-alvo, o estilo visual e qualquer funcionalidade desejada. Quanto mais claro o prompt, melhor será o resultado.

Dica

“Crie um site institucional para uma clínica médica, com páginas de 'serviços', 'sobre nós' e 'agendamento'.”

Uploads​

Você pode fazer upload de imagens para auxiliar na compatibilidade da sua ideia clicando no ícone "+": Botão de upload

Envie e aguarde​

Pressione Enter ou clique em "Enviar" representado pela seta → e aguarde a IA processar seu pedido

4. Explorando o Builder​

Agora que você criou seu primeiro projeto, explore as funcionalidades:

Painel de Chat (direita)​

  • Digite mensagens para modificar seu projeto
  • Veja o histórico de conversas

Preview (Centro/esquerda)​

  • Visualize seu aplicativo em tempo real
  • Teste interações e funcionalidades

Barra de Ferramentas (topo da tela)​

Barra de Ferramentas

  • Edite o nome do projeto: escreva o nome de sua preferência ao lado do icone de caneta

Navegação de sessões

  • Sessões: Representadas pelas setas permite a navegação entre cada sessão~/aba da página (se houver), como: "Inicio", "Serviço", "Sobre" etc. Além disso temos ao lado o icone que permite atualizar as páginas.
  • /Index: Representa a página incial e ao clicar voce pode visualizar todas as páginas do seu projeto.
  • Modo de visualização: Do lado direito voce pode alternar entre modos de visualização Desktop e Mobile (ícones no topo da tela ao lado de 'Index')
  • Bug Scanner: Por fim voce pode visualizar os erros, requisições, console e navegação.

Botões superiores

  • 1. Ajuda: Tire dúvidas no Whatsapp
  • 2. Esconder chat: Configure domínio, integrações, etc.
  • 3. Supabase: Conecte ao banco de dados Supabase.
  • 4. Código: Conecte ao GitHub e exporte seu código ou baixe-o.
  • 5. Versão: Acompanhe as versões do seu projeto e seus logs.
  • 6. Configurações: Configurações do projeto (domínios, conexões e metadados)
  • 7. Publicar: Torne seu projeto público para todos verem!

5. Fazendo Modificações​

Painel de Chat

  • 1. "+": Faça upload de imagens.

  • 2. Selecionar Elemento: Ao clicar, fica na cor laranja e com o mouse você pode ir na sua aplicação e selecionar algum elemento (imagem, texto...) para altera-lo ou usar como referência.

  • 3. Agente: Escolha o tipo de agente que você quer usar:

    • Agent:
    • Build:
    • Chat:
    • Upload:

  • 4. Prompt: Para modificar seu projeto, simplesmente converse com a IA:

    • Exemplos de comandos:

      Mude a cor do botão para azul
      Adicione um formulário de contato na seção final
      Faça o header ficar fixo ao rolar a página
      Adicione animações suaves aos cards de features

      A cada modificação, o preview será atualizado automaticamente.

6. Salvando Versões​

A cada alteração o sistema cria uma nova versão:

  1. Clique no botão "Build Insepctor" na parte superior.

Painel de Versões

  1. A esquerda podemos ver cada versão da sua aplicação, a direita temos:
    1. Visão Geral: Status da versão, Linhas e arquivos adicionados juntos aos passo a passos.
    2. PM: Especificação do agente, como uma linha de raciocínio.
    3. Dev: Arquitetura implementada, estrutura de arquivos e códigos.
    4. Q.A: Resultados de Agentes que avaliam a qualidade do seu código/projeto junto a erros.
    5. Build Insepctor: Possibilita a reversão da versão para a anterior excluindo essa atual.
    6. Histórico de Eventos: Histórico.

7. Publicando seu Projeto​

Quando estiver satisfeito com o resultado:

  1. Clique no botão "Publicar" na barra superior
  2. Escolha um subdomínio (ex: meu-projeto.usecurling.app)
  3. Ou configure um domínio customizado (planos Premium/Business)
  4. Clique em "Publish"
  5. Aguarde o deploy (geralmente 1-2 minutos)
  6. Acesse o link fornecido e veja seu projeto no ar!
Dicas

Seja Específico nos Prompts​

Bom:

Crie um botão roxo com texto branco, bordas arredondadas
e efeito de hover que aumenta o tamanho em 5%

Evite:

Faça um botão bonito

Use Referências Visuais Mencione sites ou estilos conhecidos

Crie uma navbar similar ao site da Stripe, com fundo
branco e sombra sutil

Próximos Passos​

Agora que você criou seu primeiro projeto:

  • Veja Vídeo Aulas para aprender a passo a passo com um profissional
  • Acesse a aba Construindo para conhecer recursos avançados
  • Explore Integrações para conectar seu projeto com outras ferramentas
  • Confira Deploy para aprender a tornar seu projeto público de forma mais profissional
  • Veja Avançado para aprender a identificar e corrigir erros

Ainda com dúvidas?​