Skip to content

Capture Tools

AI-কে সঠিক ভিজ্যুয়াল প্রসঙ্গ দিন। স্ক্রিনশট, এলিমেন্ট সিলেকশন এবং ছবি।

AI-কে যত সঠিক ভিজ্যুয়াল প্রসঙ্গ দেবেন, এর এডিটগুলো তত ভালো হবে। Proyecta বেশ কয়েকটি capture tool নিয়ে আসে।

একটি এলিমেন্ট সিলেক্ট করুন (Visual Editor)

Section titled “একটি এলিমেন্ট সিলেক্ট করুন (Visual Editor)”

Visual Editor মোডে, preview-এর প্রতিটি এলিমেন্টে ক্লিক করা যায়। হাইলাইট করতে হোভার করুন, সিলেক্ট করতে ক্লিক করুন। সিলেক্ট করা এলিমেন্টটি একটি overlay দিয়ে হাইলাইট হয় এবং এর এডিটযোগ্য প্রপার্টিগুলো (টেক্সট, রঙ, স্পেসিং, ফন্ট, বর্ডার, ইফেক্ট) সাইডবার প্যানেলে দেখা যায়।

একটি এলিমেন্ট সিলেক্ট হলে, আপনি হয়:

  • সরাসরি এডিট করতে পারবেন — কোনো prompt না লিখেই inline প্রপার্টি পরিবর্তন করুন
  • AI-কে এটি সম্পর্কে জিজ্ঞেস করতে পারবেন — সিলেকশনটি প্রসঙ্গ হিসেবে পাঠানো হয়, ফলে আপনি "make this button bigger" বা "move this section above the hero" বললে AI ঠিক বুঝতে পারে আপনি কী বোঝাচ্ছেন

ডায়নামিক এলিমেন্টগুলো (computed classNames, conditional rendering, expression) স্বয়ংক্রিয়ভাবে একটি structured prompt-সহ AI chat-এ ফলব্যাক করে।

এডিটযোগ্য প্রপার্টির পূর্ণ তালিকার জন্য Visual Edit দেখুন।

চ্যাটে স্ক্রিনশট paste বা drag করুন

Section titled “চ্যাটে স্ক্রিনশট paste বা drag করুন”

chat input সরাসরি ছবি গ্রহণ করে:

  1. Paste — আপনার OS শর্টকাট দিয়ে একটি স্ক্রিনশট কপি করুন (Mac-এ Cmd+Shift+4, Windows-এ Win+Shift+S) এবং chat-এ paste করুন
  2. Drag — যেকোনো ইমেজ ফাইল chat input-এ drop করুন

সমর্থিত ফরম্যাট: PNG, JPEG, WebP, GIF, AVIF। সর্বোচ্চ আকার: প্রতিটি ছবির জন্য 10 MB।

AI যেকোনো সময় একটি বিল্ট-ইন preview_screenshot tool ব্যবহার করে আপনার preview-এর নিজস্ব স্ক্রিনশট নিতে পারে। স্ক্রিনশটের ফলাফল chat-এ inline দেখা যাবে। AI স্বয়ংক্রিয়ভাবে এটি ব্যবহার করে যখন এটি তার পরিবর্তনগুলো যাচাই করতে বা আপনার অ্যাপের বর্তমান অবস্থা বুঝতে চায়।

স্ক্রিনশট tool নির্দিষ্ট route টার্গেট করতে পারে (যেমন, /dashboard, /settings) এবং dimensions ক্যাপচার করে, যা AI-কে layout ও spacing সম্পর্কে যুক্তি করতে সাহায্য করে।

সচরাচর জিজ্ঞাসা

Section titled “সচরাচর জিজ্ঞাসা”

আমি কীভাবে AI-কে একটি নির্দিষ্ট বাটন বা টেক্সটের দিকে নির্দেশ করব?

Visual Editor মোড ব্যবহার করুন এবং এলিমেন্টটিতে ক্লিক করুন। এটি AI-কে একটি সঠিক, structured রেফারেন্স পাঠায় — শব্দে এলিমেন্টটি বর্ণনা করার চেয়ে অনেক বেশি কার্যকর।

নিচের capture tool গুলো অভ্যন্তরীণভাবে প্রস্তুত কিন্তু এখনো UI-তে উন্মুক্ত করা হয়নি:

  • Annotate — বর্তমান preview ক্যাপচার করুন এবং AI-কে পাঠানোর আগে তাতে তীর, আয়তক্ষেত্র, বৃত্ত, freehand স্ট্রোক এবং টেক্সট লেবেল আঁকুন।
  • Screen Record — একটি মাল্টি-স্টেপ ইন্টারঅ্যাকশন (ক্লিক, নেভিগেশন, অ্যানিমেশন) রেকর্ড করুন এবং ক্যাপচার করা ফ্রেমগুলো আপনার chat মেসেজে সংযুক্ত করুন। টাইমিং-সংবেদনশীল বাগের জন্য আদর্শ যা একটি একক স্ক্রিনশটে ধরা যায় না।