Capture Tools

Geef de AI nauwkeurige visuele context. Screenshots, elementselectie en afbeeldingen.

Hoe nauwkeuriger de visuele context die je de AI geeft, hoe beter de bewerkingen. Proyecta biedt verschillende capture tools.

Een element selecteren (Visual Editor)

In de Visual Editor-modus wordt elk element in de preview klikbaar. Beweeg erover om het te markeren, klik om het te selecteren. Het geselecteerde element wordt gemarkeerd met een overlay en de bewerkbare eigenschappen (tekst, kleuren, afstand, lettertypen, randen, effecten) verschijnen in het zijpaneel.

Zodra een element is geselecteerd, kun je:

• Het direct bewerken — eigenschappen inline aanpassen zonder een prompt te schrijven
• De AI ernaar vragen — de selectie wordt als context meegegeven, zodat je kunt zeggen "make this button bigger" of "move this section above the hero" en de AI precies weet wat je bedoelt

Dynamische elementen (berekende classNames, conditionele rendering, expressies) vallen automatisch terug op de AI-chat met een gestructureerde prompt.

Zie Visual Edit voor de volledige lijst met bewerkbare eigenschappen.

Screenshots plakken of slepen naar de chat

De chatinvoer accepteert afbeeldingen direct:

1. Plakken — maak een screenshot met de snelkoppeling van je besturingssysteem (Cmd+Shift+4 op Mac, Win+Shift+S op Windows) en plak het in de chat
2. Slepen — sleep een afbeeldingsbestand naar de chatinvoer

Ondersteunde formaten: PNG, JPEG, WebP, GIF, AVIF. Maximale grootte: 10 MB per afbeelding.

Preview-screenshots

De AI kan op elk moment zelf screenshots van je preview maken via een ingebouwde preview_screenshot-tool. De screenshot-resultaten verschijnen inline in de chat. De AI roept dit automatisch aan wanneer het nodig is om wijzigingen te verifiëren of de huidige staat van je app te begrijpen.

De screenshot-tool kan specifieke routes targeten (bijv. /dashboard, /settings) en legt afmetingen vast, wat de AI helpt bij het redeneren over layout en afstand.

Veelgestelde vragen

Hoe wijs ik de AI op een specifieke knop of tekst?

Gebruik de Visual Editor-modus en klik op het element. Dat geeft een nauwkeurige, gestructureerde verwijzing door aan de AI — veel beter dan het element in woorden te beschrijven.

Binnenkort beschikbaar

De volgende capture tools zijn intern geïmplementeerd maar nog niet beschikbaar in de UI:

• Annotate — leg de huidige preview vast en teken er pijlen, rechthoeken, cirkels, vrije lijnen en tekstlabels op voordat je het naar de AI stuurt.
• Screen Record — neem een meerstappeninteractie op (klikken, navigatie, animaties) en voeg de vastgelegde frames toe aan je chatbericht. Ideaal voor tijdgevoelige bugs die met één screenshot niet te vangen zijn.