Referencia
Sistemas de diseño y modelos
Los sistemas de diseño con los que construye Vibr, cómo usar cualquier paquete de npm y los modelos que ofrece cada proveedor.
Sistemas de diseño incluidos
| Sistema de diseño | Tipo | Paquetes |
|---|---|---|
| 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 | Componentes web | @shoelace-style/shoelace@2 |
| Octuple | React | @eightfold.ai/octuple@2 |
Los borradores importan componentes reales de estos paquetes, cargados desde una CDN, y se renderizan con React 19. Antes de construir, Vibr lee qué componentes exporta de verdad cada paquete, para que el modelo no pueda inventarse uno que no existe. La CDN es esm.sh. Si deja de responder, Vibr carga los borradores desde una copia de respaldo (jsDelivr, o la propia copia de Fluent UI de Vibr) durante el resto de tu visita y te lo indica.
Cambiar el sistema de diseño inicia una sesión nueva. Guarda antes lo que quieras conservar.
Usa cualquier paquete de npm
Elige Paquete npm personalizado… en el selector Sistema de diseño y rellena:
| Campo | Qué introducir | Ejemplo |
|---|---|---|
| Paquete (con versión) | El nombre del paquete y su versión principal. | @radix-ui/themes@3 |
| Ruta o URL del CSS | Opcional. La hoja de estilos del paquete, si tiene una. | @radix-ui/themes@3/styles.css |
| Tipo | React o Componentes web. | React |
| Módulo de registro | Opcional, para componentes web que necesitan un cargador que los registre. | my-ds@1/dist/loader.js |
Vibr comprueba que el paquete existe en npm antes de construir. Si el nombre o la versión no son correctos, te lo indica.
Vibr también revisa el paquete antes de que nada lo cargue. Un rango de versiones se fija en la versión más reciente con al menos 2 semanas (@radix-ui/themes@3 pasa a ser, por ejemplo, @radix-ui/themes@3.3.0 en el campo), para que no se use una versión defectuosa publicada hoy. Un paquete que figura como malware nunca se carga. Debajo del campo, Vibr avisa de alertas de seguridad conocidas, de una versión obsoleta, de un paquete con menos de 30 días o con menos de 1000 descargas la semana pasada, y de un nombre que difiere en una o dos letras de un paquete popular. Estas comprobaciones usan datos públicos de deps.dev, npm y OSV, y solo envían el nombre y la versión del paquete.
Para elegir también bibliotecas de gráficos y tablas, consulta Gráficos y tablas.
Proveedores y modelos
| Proveedor | Modelos | Planifica con |
|---|---|---|
| Google Gemini | gemini-3.5-flash (predeterminado), gemini-3.7-flash, gemini-flash-latest, gemini-3.1-pro-preview | gemini-3.5-flash |
| OpenAI | gpt-5.5 (predeterminado), gpt-5.4, gpt-5.4-mini | gpt-5.4-mini |
| Anthropic | claude-sonnet-5-5 (predeterminado), claude-opus-5-5 | claude-haiku-5-5 |
| OpenRouter | anthropic/claude-sonnet-5.5 (predeterminado), 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 |
OpenRouter te da una sola clave para los modelos de Claude, GPT y Gemini. En lugar de pegar una clave, puedes seleccionar Iniciar sesión con OpenRouter en el diálogo de la clave. OpenRouter crea una clave solo para Vibr, que puedes ver, limitar y revocar en tu cuenta de OpenRouter.
El paso Planificar usa un modelo más rápido del mismo proveedor. Si tu clave no puede usarlo, planifica el modelo que has elegido. Cada modelo también tiene un respaldo del mismo proveedor que entra en acción cuando está ocupado o ha agotado su cuota; consulta Cómo funciona una ejecución.
El nivel gratuito de Gemini funciona con los modelos Flash. Los modelos Pro requieren activar la facturación en Google AI Studio.