Narzędzia przechwytywania

Daj AI precyzyjny kontekst wizualny. Zrzuty ekranu, zaznaczanie elementów i obrazy.

Im precyzyjniejszy kontekst wizualny przekażesz AI, tym lepsze będą jego edycje. Proyecta oferuje kilka narzędzi przechwytywania.

Zaznaczanie elementu (Visual Editor)

W trybie Visual Editor każdy element w podglądzie staje się klikalny. Najedź kursorem, aby go podświetlić, i kliknij, aby go zaznaczyć. Zaznaczony element zostaje wyróżniony nakładką, a jego edytowalne właściwości (tekst, kolory, odstępy, czcionki, obramowania, efekty) pojawiają się w panelu bocznym.

Po zaznaczeniu elementu możesz:

• Edytować go bezpośrednio — zmieniać właściwości inline bez pisania żadnego promptu
• Zapytać o niego AI — zaznaczenie jest przekazywane jako kontekst, dzięki czemu możesz powiedzieć "make this button bigger" lub "move this section above the hero", a AI będzie dokładnie wiedzieć, o co ci chodzi

Elementy dynamiczne (obliczane className, renderowanie warunkowe, wyrażenia) automatycznie przechodzą do czatu AI ze strukturyzowanym promptem.

Zobacz Visual Edit, aby poznać pełną listę edytowalnych właściwości.

Wklejanie lub przeciąganie zrzutów ekranu do czatu

Pole czatu akceptuje obrazy bezpośrednio:

1. Wklej — skopiuj zrzut ekranu skrótem systemowym (Cmd+Shift+4 na Mac, Win+Shift+S na Windows) i wklej do czatu
2. Przeciągnij — upuść dowolny plik obrazu na pole czatu

Obsługiwane formaty: PNG, JPEG, WebP, GIF, AVIF. Maksymalny rozmiar: 10 MB na obraz.

Zrzuty ekranu podglądu

AI może samodzielnie wykonywać zrzuty ekranu twojego podglądu w dowolnym momencie za pomocą wbudowanego narzędzia preview_screenshot. Wyniki zrzutów ekranu będą widoczne bezpośrednio w czacie. AI wywołuje je automatycznie, gdy musi zweryfikować wprowadzone zmiany lub zrozumieć aktualny stan twojej aplikacji.

Narzędzie do zrzutów ekranu może celować w konkretne trasy (np. /dashboard, /settings) i przechwytuje wymiary, co pomaga AI analizować układ i odstępy.

FAQ

Jak wskazać AI konkretny przycisk lub tekst?

Użyj trybu Visual Editor i kliknij dany element. Spowoduje to przekazanie AI precyzyjnego, strukturyzowanego odwołania — znacznie lepszego niż opisywanie elementu słowami.

Wkrótce

Następujące narzędzia przechwytywania są zaimplementowane wewnętrznie, ale nie są jeszcze dostępne w interfejsie użytkownika:

• Annotate — przechwytuje bieżący podgląd i pozwala narysować na nim strzałki, prostokąty, okręgi, odręczne linie i etykiety tekstowe przed wysłaniem do AI.
• Screen Record — nagrywa wieloetapową interakcję (kliknięcia, nawigację, animacje) i dołącza przechwycone klatki do wiadomości w czacie. Idealne do błędów związanych z czasem, których pojedynczy zrzut ekranu nie jest w stanie uchwycić.