Begin hier
Overzicht
Vibr maakt van een beschrijving van een scherm een werkend, interactief prototype, gebouwd met een echt designsysteem, gewoon in je browser.
Vibr is een prototypingtool voor designers. Je beschrijft een scherm in gewone woorden, en een agent plant het, bouwt het met het designsysteem dat je kiest, controleert of het rendert, beoordeelt het op problemen met toegankelijkheid en lay-out, en repareert wat hij vindt. Het resultaat is echte React-code waar je doorheen kunt klikken en die je kunt aanpassen, annoteren, aan flows kunt koppelen en kunt exporteren.
Zo werkt het
- Neem een sleutel mee. Vibr roept Google Gemini, OpenAI, Anthropic of OpenRouter aan met je eigen API-sleutel. De sleutel blijft in je browser.
- Kies een designsysteem. Material UI, Ant Design, Fluent UI, Mantine, Shoelace, Octuple of elk pakket op npm.
- Beschrijf een scherm. Vibr toont elke stap terwijl het werkt, en het canvas tekent het scherm terwijl het wordt geschreven.
- Ga door. Vraag om wijzigingen, wijs één element aan om alleen dat deel te wijzigen, vergelijk versies, pin feedback vast en sla op in je bibliotheek.
Wat het anders maakt
- Echte componenten, geen imitaties. Concepten importeren uit het echte pakket van het designsysteem, dus wat je ziet is wat een developer zou opleveren.
- Het controleert zijn eigen werk. Elk concept wordt gerenderd en daarna beoordeeld op desktop-, tablet- en telefoonbreedte met automatische toegankelijkheidscontroles, voordat je het ziet.
- Je bibliotheek reist met je mee. Afbeeldingen, video's, kleurthema's, typografische schalen en iconen die je toevoegt, neem je in elk verzoek op met een
@-vermelding. - Geen account, geen server. Alles draait in je browser. Zie Sleutels, privacy en opslag.
Waar je verder kunt
- Nieuw hier? Begin met Aan de slag.
- Betere resultaten? Lees Prompts schrijven.
- Benieuwd wat de stappen betekenen? Zie Zo werkt een run.
- Ging er iets mis? Kijk bij Problemen oplossen.