Primeros pasos

Antes de empezar

Necesitas una clave de API de uno de estos proveedores. Todos tienen una forma gratuita o de bajo coste de probarlo.

• Google Gemini: consigue una clave en Google AI Studio. Las claves del nivel gratuito funcionan con los modelos Flash; los modelos Pro requieren activar la facturación.
• OpenAI: crea una clave secreta en el panel de OpenAI.
• Anthropic: crea una clave en Anthropic Console.

Con una cuenta de pago, un borrador suele costar unos céntimos. El diálogo de la clave muestra el rango del modelo que elegiste.

¿Aún no tienes clave? Prueba los ejemplos

En tu primera visita, la bienvenida ofrece Prueba un ejemplo, sin clave. Añade tres prototipos terminados a tu biblioteca y abre el primero: la página de inicio de una cafetería, su pantalla de carta y un panel de operaciones. Todo lo que no consulta a un modelo funciona con ellos, como seleccionar elementos, comparar versiones, todos los tamaños, medir, notas, Reproducir y exportar. Para cambiar un ejemplo con una solicitud, añade una clave. Más tarde, el diálogo de la clave también ofrece Abre un ejemplo, hasta que guardes una clave.

Añade tu clave

1. Elige tu proveedor en el selector Proveedor de IA de la barra superior.
2. Selecciona Añadir clave. El cuadro de diálogo muestra el nombre del proveedor que has elegido.
3. Pega la clave y selecciona Guardar clave. El botón cambia a Clave configurada.

Vibr comprueba lo que pegas antes de guardarlo. Detecta confusiones habituales, como el ID de una clave en lugar del secreto, una clave de otro proveedor, una clave de administrador de Anthropic o un espacio de más, y te dice qué corregir. Puedes guardar una clave para cada proveedor (Gemini, OpenAI y Anthropic) y cambiar entre ellos cuando quieras; todos los modelos de un proveedor usan su clave. Para configurar otra, elige ese proveedor y vuelve a seleccionar Añadir clave. Eliminar esta clave elimina solo la clave del proveedor actual. Olvidar todas las claves elimina todas las claves guardadas en este navegador.

Elige un sistema de diseño y un modelo

• Sistema de diseño define la biblioteca de componentes con la que se construye cada borrador. Cambiarlo inicia una sesión nueva, porque un borrador no puede cambiar de biblioteca a medias. Consulta Sistemas de diseño y modelos para ver la lista completa y cómo usar tu propio paquete de npm.
• Proveedor de IA y Modelo definen quién construye el borrador. Cada proveedor tiene un valor predeterminado razonable, y Vibr recuerda tu elección en este navegador.

Usa Vibr en tu idioma

Vibr se abre en el idioma de tu navegador cuando es uno de estos: inglés, árabe, chino (simplificado), neerlandés, francés, alemán, hebreo, italiano, japonés, coreano, portugués (Brasil) y español. Si no, se abre en inglés. Para elegir el idioma tú mismo, usa el botón Idioma de la interfaz (el globo) de la barra superior. En un móvil, está en los ajustes, debajo del sistema de diseño. Elige Automático para volver a seguir el idioma del navegador.

En árabe y hebreo, Vibr se lee de derecha a izquierda: el diseño se invierte y las flechas apuntan al otro lado. Esto solo cambia Vibr. Para ver tu borrador en otro idioma, usa Vista previa en otro idioma en el lienzo. La documentación está en los mismos idiomas: usa el menú de idioma en la parte superior de cualquier página de la documentación.

Construye tu primera pantalla

Escribe lo que quieres en el cuadro de la parte inferior del chat o selecciona uno de los ejemplos, como «Una página de precios con tres planes y un selector de pago anual». Pulsa Intro o selecciona Enviar.

El chat muestra cada paso a medida que ocurre, y el lienzo empieza a dibujar la pantalla mientras aún se está escribiendo. La mayoría de las pantallas están listas en menos de un minuto.

Qué hacer después

• Pide cambios con tus propias palabras: «Haz que la tarjeta de resumen sea fija» o «Añade un campo para cupones».
• Selecciona Guardar para conservarlo en tu biblioteca.
• Prueba las herramientas del lienzo: anchos de móvil y tableta, versiones y comparación.