Comece aqui
Primeiros passos
Adicione uma chave, escolha um design system e um modelo e crie sua primeira tela em poucos minutos.
Antes de começar
Você precisa de uma chave de API de um destes provedores. Todos têm uma forma gratuita ou de baixo custo para experimentar.
- Google Gemini: obtenha uma chave no Google AI Studio. Chaves do nível gratuito funcionam com os modelos Flash; os modelos Pro exigem faturamento ativado.
- OpenAI: crie uma chave secreta no painel da OpenAI.
- Anthropic: crie uma chave no Anthropic Console.
Em uma conta paga, um rascunho costuma custar alguns centavos. A caixa de diálogo da chave mostra a faixa para o modelo escolhido.
Ainda não tem chave? Experimente os exemplos
Na primeira visita, as boas-vindas oferecem Experimente um exemplo, sem chave. Três protótipos prontos entram na sua biblioteca e o primeiro abre: a página inicial de uma cafeteria, a tela do cardápio e um painel de operações. Tudo o que não chama um modelo funciona com eles, como selecionar elementos, comparar versões, todos os tamanhos, medir, notas, Reproduzir e exportar. Para alterar um exemplo com uma solicitação, adicione uma chave. Depois, a caixa de diálogo da chave também oferece Abra um exemplo, até você salvar uma chave.
Adicione sua chave
- Escolha seu provedor no seletor Provedor de IA da barra superior.
- Selecione Adicionar chave. A caixa de diálogo mostra o nome do provedor escolhido.
- Cole a chave e selecione Salvar chave. O botão muda para Chave configurada.
O Vibr verifica o que você cola antes de salvar. Ele detecta confusões comuns, como o ID de uma chave no lugar do segredo, uma chave de outro provedor, uma chave de administrador da Anthropic ou um espaço sobrando, e diz o que corrigir. Você pode salvar uma chave para cada provedor (Gemini, OpenAI e Anthropic) e alternar entre eles quando quiser; todos os modelos de um provedor usam a chave dele. Para configurar outra, escolha esse provedor e selecione Adicionar chave de novo. Remover esta chave remove só a chave do provedor atual. Esquecer todas as chaves remove todas as chaves salvas deste navegador.
Escolha um design system e um modelo
- Design system define a biblioteca de componentes usada em todos os rascunhos. Trocar de design system inicia uma nova sessão, porque um rascunho não pode mudar de biblioteca no meio do caminho. Consulte Design systems e modelos para ver a lista completa e saber como usar seu próprio pacote npm.
- Provedor de IA e Modelo definem quem cria o rascunho. Cada provedor tem um padrão sensato, e o Vibr lembra sua escolha neste navegador.
Use o Vibr no seu idioma
O Vibr abre no idioma do seu navegador quando ele é um destes: inglês, árabe, chinês (simplificado), holandês, francês, alemão, hebraico, italiano, japonês, coreano, português (Brasil) e espanhol. Caso contrário, abre em inglês. Para escolher um idioma, use o botão Idioma da interface (o globo) na barra superior. No celular, ele fica nas configurações, abaixo do design system. Escolha Automático para voltar a seguir o navegador.
Em árabe e hebraico, o Vibr é lido da direita para a esquerda: o layout é espelhado, e as setas apontam para o outro lado. Isso muda só o Vibr. Para ver seu rascunho em outro idioma, use a pré-visualização em outro idioma no canvas. A documentação está nos mesmos idiomas: use o menu de idioma no topo de qualquer página da documentação.
Crie sua primeira tela
Digite o que você quer na caixa de texto na parte de baixo do chat ou selecione um dos exemplos, como "Uma página de preços com três planos e uma opção de cobrança anual". Pressione Enter ou selecione Enviar.
O chat mostra cada etapa à medida que acontece, e o canvas começa a desenhar a tela enquanto ela ainda está sendo escrita. A maioria das telas fica pronta em menos de um minuto.
O que fazer em seguida
- Peça alterações com palavras simples: "Deixe o card de resumo fixo" ou "Adicione um campo de cupom".
- Selecione Salvar para guardá-lo na sua biblioteca.
- Experimente as ferramentas do canvas: larguras de celular e tablet, versões e comparação.