Capture-verktyg
Ge AI:n exakt visuell kontext. Skärmdumpar, elementval och bilder.
Ju mer exakt visuell kontext du ger AI:n, desto bättre blir redigeringarna. Proyecta levereras med flera capture-verktyg.
Välj ett element (Visual Editor)
Section titled “Välj ett element (Visual Editor)”I läget Visual Editor blir varje element i förhandsgranskningen klickbart. Håll muspekaren över ett element för att markera det, klicka för att välja det. Det valda elementet framhävs med ett överlager och dess redigerbara egenskaper (text, färger, avstånd, typsnitt, ramar, effekter) visas i sidopanelen.
När ett element är markerat kan du antingen:
- Redigera det direkt — ändra egenskaper inline utan att skriva någon prompt
- Fråga AI:n om det — markeringen skickas med som kontext så att du kan säga
"make this button bigger"eller"move this section above the hero"och AI:n vet exakt vad du menar
Dynamiska element (beräknade classNames, villkorlig rendering, uttryck) faller automatiskt tillbaka till AI-chatten med en strukturerad prompt.
Se Visual Edit för den fullständiga listan över redigerbara egenskaper.
Klistra in eller dra skärmdumpar till chatten
Section titled “Klistra in eller dra skärmdumpar till chatten”Chattinmatningen tar emot bilder direkt:
- Klistra in — kopiera en skärmdump med ditt operativsystems kortkommando (Cmd+Shift+4 på Mac, Win+Shift+S på Windows) och klistra in i chatten
- Dra — släpp en bildfil direkt på chattinmatningen
Filformat som stöds: PNG, JPEG, WebP, GIF, AVIF. Maximal storlek: 10 MB per bild.
Förhandsgranskningsskärmdumpar
Section titled “Förhandsgranskningsskärmdumpar”AI:n kan ta egna skärmdumpar av din förhandsgranskning när som helst via ett inbyggt preview_screenshot-verktyg. Du ser skärmdumpsresultaten visas direkt i chatten. AI:n anropar detta automatiskt när den behöver verifiera sina ändringar eller förstå det aktuella tillståndet i din app.
Skärmdumpsverktyget kan riktas mot specifika rutter (t.ex. /dashboard, /settings) och fångar dimensioner, vilket hjälper AI:n att resonera kring layout och avstånd.
Vanliga frågor
Section titled “Vanliga frågor”Hur pekar jag AI:n på en specifik knapp eller text?
Använd Visual Editor-läget och klicka på elementet. Det skickar en exakt, strukturerad referens till AI:n — betydligt bättre än att beskriva elementet med ord.
Kommer snart
Section titled “Kommer snart”Följande capture-verktyg är implementerade internt men är ännu inte tillgängliga i gränssnittet:
- Annotate — fånga den aktuella förhandsgranskningen och rita pilar, rektanglar, cirklar, frihandsdrag och textetiketter på den innan du skickar till AI:n.
- Screen Record — spela in en flerstegsinteraktion (klick, navigering, animationer) och bifoga de inspelade bildrutorna till ditt chattmeddelande. Idealiskt för tidskänsliga buggar som en enskild skärmdump inte kan fånga.