Referência
Design systems e modelos
Os design systems com que o Vibr cria, como usar qualquer pacote do npm e os modelos que cada provedor oferece.
Design systems incluídos
| Design system | Tipo | Pacotes |
|---|---|---|
| Material UI (MUI) | React | @mui/material@6, @mui/icons-material@6, Emotion |
| Ant Design | React | antd@5 |
| Fluent UI React | React | @fluentui/react-components@9 |
| Mantine | React | @mantine/core@7, @mantine/hooks@7 |
| Shoelace | Web components | @shoelace-style/shoelace@2 |
| Octuple | React | @eightfold.ai/octuple@2 |
Os rascunhos importam componentes reais desses pacotes, carregados de uma CDN, e renderizam com React 19. Antes de criar, o Vibr lê quais componentes cada pacote realmente exporta, para que o modelo não invente um que não existe. A CDN é o esm.sh. Se ele parar de responder, o Vibr carrega os rascunhos de uma reserva (o jsDelivr, ou a cópia do Fluent UI do próprio Vibr) pelo resto da sua visita e avisa você.
Trocar de design system inicia uma nova sessão. Salve antes tudo o que quiser manter.
Use qualquer pacote do npm
Escolha Pacote npm personalizado… no seletor Design system e preencha:
| Campo | O que informar | Exemplo |
|---|---|---|
| Pacote (com versão) | O nome do pacote e a versão principal. | @radix-ui/themes@3 |
| Caminho ou URL do CSS | Opcional. A folha de estilo do pacote, se houver. | @radix-ui/themes@3/styles.css |
| Tipo | React ou Web components. | React |
| Módulo de registro | Opcional, para web components que precisam de um loader para registrá-los. | my-ds@1/dist/loader.js |
O Vibr verifica se o pacote existe no npm antes de criar. Se o nome ou a versão estiver errado, ele avisa.
O Vibr também verifica o pacote antes que qualquer coisa o carregue. Um intervalo de versões é fixado na versão mais recente com pelo menos 2 semanas (@radix-ui/themes@3 vira, por exemplo, @radix-ui/themes@3.3.0 no campo), para que uma versão ruim publicada hoje não seja usada. Um pacote listado como malware nunca é carregado. Abaixo do campo, o Vibr aponta alertas de segurança conhecidos, uma versão obsoleta, um pacote com menos de 30 dias ou com menos de 1.000 downloads na semana passada, e um nome que difere em uma ou duas letras de um pacote popular. Essas verificações usam dados públicos do deps.dev, do npm e do OSV, e enviam só o nome e a versão do pacote.
Para escolher também bibliotecas de gráficos e tabelas, veja Gráficos e tabelas.
Provedores e modelos
| Provedor | Modelos | Planeja com |
|---|---|---|
| Google Gemini | gemini-3.5-flash (padrão), gemini-3.7-flash, gemini-flash-latest, gemini-3.1-pro-preview | gemini-3.5-flash |
| OpenAI | gpt-5.5 (padrão), gpt-5.4, gpt-5.4-mini | gpt-5.4-mini |
| Anthropic | claude-sonnet-5-5 (padrão), claude-opus-5-5 | claude-haiku-5-5 |
| OpenRouter | anthropic/claude-sonnet-5.5 (padrão), anthropic/claude-opus-5.5, openai/gpt-5.5, google/gemini-3.5-flash, google/gemini-3.1-pro-preview | anthropic/claude-haiku-5.5 · openai/gpt-5.4-mini · google/gemini-3.5-flash |
O OpenRouter dá uma única chave para modelos Claude, GPT e Gemini. Em vez de colar uma chave, você pode selecionar Entrar com o OpenRouter na janela da chave. O OpenRouter cria uma chave só para o Vibr, que você pode ver, limitar e revogar na sua conta do OpenRouter.
A etapa Planejar usa um modelo mais rápido do mesmo provedor. Se a sua chave não puder usá-lo, o modelo que você escolheu planeja. Cada modelo também tem um reserva do mesmo provedor, que assume quando ele está ocupado ou sem cota; consulte Como uma execução funciona.
O nível gratuito do Gemini funciona com os modelos Flash. Os modelos Pro exigem faturamento ativado no Google AI Studio.