Prompts schrijven

Het scherm beschrijven

Schrijf waar het scherm voor is en wat erop staat, zoals je een designer zou briefen. Vibr vult realistische voorbeeldcontent in, dus je hoeft de teksten niet zelf te schrijven.

• Goed: “Een analysedashboard met KPI-kaarten en een tabel met recente bestellingen”
• Beter: “Een analysedashboard voor een koffiebranderij: vier KPI-kaarten voor omzet, bestellingen, gemiddelde bestelling en terugkerende klanten, een grafiek met de omzet per week en een tabel met recente bestellingen met statuslabels”

Druk op Enter om te verzenden en op Shift+Enter voor een nieuwe regel. Op touchscreens voegt Return een nieuwe regel toe en verzendt de knop Verzenden.

Als een verzoek te vaag is om te plannen, stelt Vibr je een vraag in plaats van te gokken. Beantwoord die in het invoerveld, en de run gaat vanaf daar verder.

Vibr ontwerpt alleen interfaces. Een verzoek waarin niets te bouwen valt, zoals een kennisvraag of een opstel, krijgt een antwoord van één regel met een idee voor een interface die je in plaats daarvan kunt bouwen, en na Plannen wordt niets meer uitgevoerd. Alles wat een pagina, app of scherm kan worden, over welk onderwerp ook, wordt gewoon gebouwd. Zodra er een concept in de werkruimte staat, kun je er ook vragen over stellen (‘Waarom dit lettertype?’, ‘Is dit contrast toegankelijk?’), en Vibr antwoordt in de chat zonder het concept te wijzigen.

Begin vanuit een afbeelding

Heb je een schets, screenshot of mockup? Voeg die toe aan je verzoek en Vibr bouwt vanuit wat erop staat. Kies + onder het vak en dan Bestand toevoegen, of plak of sleep een afbeelding erin. Je kunt er per verzoek maximaal drie toevoegen, als PNG, JPEG, WebP, GIF, AVIF of SVG.

• "Bouw deze schets als aanmeldpagina"
• "Volg de lay-out van deze screenshot, met content voor een fietsenwinkel"
• Een afbeelding zonder tekst bouwt wat de afbeelding laat zien.

Het concept gebruikt de eigen componenten en typografie van je designsysteem, dus het volgt de lay-out en hiërarchie van de afbeelding in plaats van de pixels te kopiëren. Tekst in de afbeelding geldt als content, nooit als instructie.

Elke afbeelding wordt verkleind en opnieuw getekend voordat ze wordt verstuurd, waardoor de metadata verdwijnt, en ze wordt op je apparaat gecontroleerd zoals elke afbeelding die je aan de bibliotheek toevoegt. Ze gaat alleen met dat verzoek naar je AI-provider. Ze wordt niet in je bibliotheek bewaard of bij het gesprek gehouden, dus latere verzoeken sturen haar niet opnieuw.

Documenten bijvoegen

Een briefing, onderzoeksnotities, een designuitdaging, de cijfers van vorig kwartaal: voeg het document toe en Vibr ontwerpt op basis ervan. Kies + onder het vak en dan Bestand toevoegen, of plak of sleep het in het vak. Je kunt per verzoek maximaal drie documenten toevoegen:

• PDF
• Word, PowerPoint en Excel (.docx, .pptx, .xlsx)
• CSV, TSV, Markdown en platte tekst

Uit Google Documenten, Presentaties of Spreadsheets download je het bestand eerst (Bestand, dan Downloaden) in een van deze formaten.

Vibr leest elk document in je browser. Het model krijgt de tekst, met de sprekersnotities van een presentatie en de rijen van een spreadsheet als tabel, plus een paar afbeeldingen: de eerste pagina's van een PDF, of de eerste afbeeldingen in een Word-bestand of presentatie. Met een verzoek gaan maximaal 30.000 tekens tekst mee; daarboven wordt de tekst ingekort en zegt de chip dat. Kies de chip van een document om precies te zien wat er wordt verstuurd, en om de afbeeldingen ervan in je bibliotheek te bewaren. Om een document in latere verzoeken opnieuw te gebruiken, kies je In bibliotheek bewaren in het voorbeeld en vermeld je het daarna met @doc.

Elk document wordt gecontroleerd voordat het wordt gelezen. Bestanden die macro's kunnen uitvoeren (.docm, .pptm, .xlsm, of een document met een verborgen macroproject), archieven die zouden uitpakken tot ver boven hun grootte en met een wachtwoord beveiligde PDF's worden geweigerd. Niets in een document wordt uitgevoerd: scripts, links, formuliervelden, formules en ingesloten objecten worden genegeerd, en de cellen van een spreadsheet komen door als hun opgeslagen waarden. De tekst krijgt dezelfde opschoning en controles als alles wat je typt, de afbeeldingen dezelfde als referentieafbeeldingen, en het model behandelt een document als materiaal om vanuit te ontwerpen, nooit als instructies.

Een document gaat alleen met dat verzoek mee. Het wordt niet in je bibliotheek bewaard of bij het gesprek gehouden.

Aanpassen wat je hebt

Zodra er een concept is, staat er in het invoerveld “Beschrijf verfijningen of nieuwe secties…”. Elk verzoek past het concept op het canvas aan en wordt een nieuwe versie, zodat je altijd terug kunt. Een paar voorbeelden:

• “Laat het Pro-abonnement opvallen en voeg een FAQ toe”
• “Gebruik op desktop een lay-out met twee kolommen”
• “Vervang de tabel op telefoons door kaarten”

Het huidige concept blijft op het canvas staan terwijl de nieuwe versie wordt geschreven, en het canvas schakelt over zodra er genoeg klaar is om te tekenen.

Alleen één deel wijzigen

Zo wijzig je één element zonder de rest aan te raken:

1. Kies Element selecteren (het aanwijzericoon boven het canvas).
2. Klik op het deel dat je wilt wijzigen. Een label boven het invoerveld toont welk element het is en waar het in de code staat.
3. Beschrijf de wijziging. Woorden als “dit”, “hier” en “het” verwijzen naar dat element.

Druk op Esc om te stoppen met selecteren, of kies de X op het label om het te wissen.

Als het element vaker op de pagina staat, zoals een kaart in een lijst of een kop in elk prijsplan, verschijnt onder het label een keuze: Alleen deze wijzigt alleen de kopie waarop je klikte, en Alle N wijzigt ze allemaal. Alleen deze is de standaard. Het canvas omlijnt de kopieën die veranderen.

Meerdere delen samen wijzigen

Houd Shift ingedrukt en klik op meer elementen om ze in één verzoek te wijzigen, tot 8. Elk krijgt een nummer in de werkruimte, en de chip somt ze op. Beschrijf dan hoe ze samenhangen, zoals ‘maak deze gelijk’ of ‘geef deze dezelfde ruimte’. Shift+klik nogmaals op een gekozen element om het weg te halen.

Op een touchscreen kies je Meer toevoegen in de chip en tik je op de elementen. Met het toetsenbord druk je op Shift+Enter op een element met focus. Elk toegevoegd element telt alleen als de kopie die je koos. Een element binnen een al gekozen element hoort daar al bij en wordt niet dubbel toegevoegd.

Assets vermelden met @

Typ @ in het invoerveld, of kies de knop @, om iets uit je bibliotheek in een verzoek op te nemen. Terwijl je typt, verschijnt er een lijst. Kies met ↑ en ↓ en voeg toe met Enter of Tab.

Vermelding	Wat het toevoegt
@image/name	Een afbeelding die je hebt geïmporteerd of van Unsplash hebt opgeslagen.
@video/name	Een video die je hebt geïmporteerd of van Pixabay hebt opgeslagen.
@theme/name	Een kleurthema, met de lichte en donkere modus.
@type/ramp/style	Een tekststijl uit een van je typografische schalen, zoals @type/georgia/h1.
@icon/name	Een ingebouwd Lucide-icoon, of een icoon uit een iconenlettertype dat je hebt geïmporteerd (@icon/set/name).
@screen/name	Een opgeslagen prototype om naar te linken. Zie Flows.
@chart/kind	Een soort grafiek, zoals @chart/donut, gebouwd met je grafiekbibliotheek. Zie Grafieken en tabellen.
@table/feature	Een tabelfunctie, zoals @table/sortable, gebouwd met je tabelbibliotheek.

Vermeldingen in je verzoek verschijnen als labels onder het invoerveld. Een label wordt rood als de naam niet in je bibliotheek staat, en dan laat Vibr die vermelding weg. Hoe je assets toevoegt, lees je in Afbeeldingen, video's, documenten, thema's, typografie en iconen.

Tips voor betere resultaten

• Eén scherm per verzoek. Bouw een pagina en vul die daarna aan. Heel grote verzoeken kunnen de uitvoerlimiet van het model bereiken; vraag in dat geval om één sectie per bericht.
• Benoem de onderdelen. “De abonnementskaarten” of “de header” is makkelijker om mee te werken dan “het stukje bovenaan”.
• Gebruik de juiste tool. Voor één element selecteer je dat element. Voor notities die je wilt bewaren, pin je een annotatie vast.