Capture Tools
AI को सटीक visual context दें। Screenshots, element selection, और images।
आप AI को जितना सटीक visual context देंगे, उसके edits उतने ही बेहतर होंगे। Proyecta कई capture tools के साथ आता है।
एक element चुनें (Visual Editor)
Section titled “एक element चुनें (Visual Editor)”Visual Editor mode में, preview का हर element clickable हो जाता है। Highlight करने के लिए hover करें, select करने के लिए click करें। चुना गया element एक overlay से highlight होता है और उसकी editable properties (text, colors, spacing, fonts, borders, effects) sidebar panel में दिखाई देती हैं।
एक बार element select हो जाने के बाद, आप या तो:
- इसे सीधे edit करें — कोई prompt लिखे बिना inline properties बदलें
- AI से इसके बारे में पूछें — selection को context के रूप में पास किया जाता है, तो आप कह सकते हैं
"make this button bigger"या"move this section above the hero"और AI को ठीक-ठीक पता होता है कि आपका क्या मतलब है
Dynamic elements (computed classNames, conditional rendering, expressions) स्वचालित रूप से एक structured prompt के साथ AI chat पर fall back हो जाते हैं।
editable properties की पूरी सूची के लिए Visual Edit देखें।
chat में screenshots paste या drag करें
Section titled “chat में screenshots paste या drag करें”chat input सीधे images स्वीकार करता है:
- Paste — अपने OS shortcut (Mac पर Cmd+Shift+4, Windows पर Win+Shift+S) से screenshot copy करें और chat में paste करें
- Drag — chat input पर कोई भी image file drop करें
समर्थित formats: PNG, JPEG, WebP, GIF, AVIF। अधिकतम size: प्रति image 10 MB।
Preview screenshots
Section titled “Preview screenshots”AI किसी भी समय एक built-in preview_screenshot tool के ज़रिए आपके preview के अपने screenshots ले सकता है। आप chat में inline screenshot results दिखाई देते देखेंगे। जब AI को अपने बदलावों की जाँच करनी हो या आपके app की मौजूदा स्थिति समझनी हो, तो वह इसे स्वचालित रूप से invoke करता है।
Screenshot tool विशेष routes को target कर सकता है (जैसे, /dashboard, /settings) और dimensions capture करता है, जिससे AI को layout और spacing के बारे में सोचने में मदद मिलती है।
मैं AI को किसी खास button या text की ओर कैसे इंगित करूँ?
Visual Editor mode का उपयोग करें और element पर click करें। इससे AI को एक सटीक, structured reference पास होता है — element को शब्दों में describe करने से कहीं बेहतर।
जल्द आ रहा है
Section titled “जल्द आ रहा है”निम्नलिखित capture tools आंतरिक रूप से implement हैं लेकिन अभी तक UI में उपलब्ध नहीं हैं:
- Annotate — AI को भेजने से पहले वर्तमान preview capture करें और उस पर arrows, rectangles, circles, freehand strokes, और text labels बनाएं।
- Screen Record — एक multi-step interaction (clicks, navigation, animations) record करें और captured frames को अपने chat message से attach करें। ऐसे timing-sensitive bugs के लिए आदर्श जिन्हें एक single screenshot capture नहीं कर सकता।