Présentation

Vibr est un outil de prototypage pour designers. Vous décrivez un écran avec des mots simples, et un agent le planifie, le construit avec le design system de votre choix, vérifie qu'il s'affiche, le relit pour détecter les problèmes d'accessibilité et de mise en page, puis corrige ce qu'il trouve. Le résultat est du vrai code React que vous pouvez parcourir, réviser, annoter, relier en parcours et exporter.

Fonctionnement

1. Apportez une clé. Vibr appelle Google Gemini, OpenAI, Anthropic ou OpenRouter avec votre propre clé API. La clé reste dans votre navigateur.
2. Choisissez un design system. Material UI, Ant Design, Fluent UI, Mantine, Shoelace, Octuple, ou n'importe quel package npm.
3. Décrivez un écran. Vibr affiche chaque étape pendant qu'il travaille, et le canevas dessine l'écran au fur et à mesure de son écriture.
4. Continuez. Demandez des modifications, désignez un élément pour ne modifier que cette partie, comparez des versions, épinglez des commentaires et enregistrez dans votre bibliothèque.

Ce qui le distingue

• De vrais composants, pas des imitations. Les brouillons importent le véritable package du design system : ce que vous voyez correspond à ce qu'un développeur livrerait.
• Il vérifie son propre travail. Chaque brouillon est affiché, puis relu aux largeurs ordinateur, tablette et mobile avec des vérifications d'accessibilité automatisées avant que vous ne le voyiez.
• Votre bibliothèque vous suit. Les images, vidéos, thèmes de couleurs, échelles typographiques et icônes que vous ajoutez peuvent être insérés dans n'importe quelle demande avec une mention @.
• Ni compte, ni serveur. Tout s'exécute dans votre navigateur. Consultez Clés, confidentialité et stockage.

Pour aller plus loin

• Vous découvrez Vibr ? Commencez par Prise en main.
• Vous voulez de meilleurs résultats ? Lisez Rédiger des prompts.
• Vous vous demandez ce que signifient les étapes ? Consultez Déroulement d'une génération.
• Un problème ? Consultez Dépannage.