Comece aqui
Visão geral
O Vibr transforma a descrição de uma tela em um protótipo interativo e funcional, criado com um design system de verdade, direto no seu navegador.
O Vibr é uma ferramenta de prototipagem para designers. Você descreve uma tela com palavras simples, e um agente a planeja, cria com o design system que você escolher, verifica se ela renderiza, revisa problemas de acessibilidade e layout e corrige o que encontrar. O resultado é código React de verdade, que você pode navegar, revisar, anotar, conectar em fluxos e exportar.
Como funciona
- Traga uma chave. O Vibr chama o Google Gemini, a OpenAI, a Anthropic ou o OpenRouter com a sua própria chave de API. A chave fica no seu navegador.
- Escolha um design system. Material UI, Ant Design, Fluent UI, Mantine, Shoelace, Octuple ou qualquer pacote do npm.
- Descreva uma tela. O Vibr mostra cada etapa enquanto trabalha, e o canvas desenha a tela enquanto ela é escrita.
- Continue. Peça alterações, aponte para um elemento para alterar só essa parte, compare versões, fixe feedback e salve na sua biblioteca.
O que o torna diferente
- Componentes de verdade, não imitações. Os rascunhos importam do pacote real do design system, então o que você vê é o que um engenheiro entregaria.
- Ele verifica o próprio trabalho. Cada rascunho é renderizado e depois revisado nas larguras desktop, tablet e celular, com verificações automáticas de acessibilidade, antes de você vê-lo.
- Sua biblioteca vai com você. Imagens, vídeos, temas de cores, escalas tipográficas e ícones que você adiciona podem entrar em qualquer solicitação com uma menção
@. - Sem conta, sem servidor. Tudo é executado no seu navegador. Consulte Chaves, privacidade e armazenamento.
Próximos passos
- Primeira vez aqui? Comece por Primeiros passos.
- Quer resultados melhores? Leia Como escrever prompts.
- Quer entender as etapas? Consulte Como uma execução funciona.
- Algo deu errado? Consulte Solução de problemas.