امکان یادداشت‌گذاری بصری در Cursor؛ ویرایش مستقیم کدهای فرانت‌اند از روی مرورگر

ابزار کدنویسی Cursor قابلیت یادداشت‌گذاری (Annotate) را به بخش Design Mode اضافه کرده است تا پیش‌نمایش مرورگر داخلی این ابزار به یک لایه تعاملی برای علامت‌گذاری روی برنامه‌های وب در حال اجرا تبدیل شود. توسعه‌دهندگان اکنون می‌توانند المان‌های صفحه را انتخاب کنند، شکل‌ها و فلش‌های راهنما رسم نمایند یا یادداشت‌های متنی به آن‌ها پیوست کنند. در ادامه، Cursor تمامی این نشانه‌ها را بسته‌بندی کرده و در اختیار ایجنت کدنویسی قرار می‌دهد تا با استفاده از زمینه بصری و متنی، بخش‌های مربوطه را در کدهای اصلی پروژه بیابد و ویرایش کند.

برای نمونه، جهت هماهنگ‌سازی بخش هدر در نسخه موبایل کافی است تیتر را انتخاب کنید، با نگه‌داشتن کلید Shift روی دکمه ناوبری کلیک نمایید و در یادداشت بنویسید: فرم این دکمه را شبیه المان کپسولی کن و فاصله زیر آن را افزایش بده. این یادداشت ارجاع دقیق به هر دو المان را در خود ذخیره می‌کند و نیاز به نوشتن پرامپت‌های طولانی برای توصیف موقعیت و رابطه میان اجزا را به حداقل می‌رساند.

علامت‌گذاری روی صفحه در حال اجرا

جزئیات کامل این ویژگی در مستندات Design Mode درون مرورگر اختصاصی پنجره Agent آمده است. برای استفاده از این قابلیت، می‌توانید ابزار Annotate را از نوار ابزار بالای مرورگر فعال کنید یا پس از قرار گرفتن در محیط مرورگر، کلیدهای ترکیبی Cmd/Ctrl + Shift + D را بفشارید.

ابزارهای انتخاب و نشانه‌گذاری

• انتخاب المان: روی یک المان کلیک کنید تا کادر یادداشت باز شود و تغییر مورد نظرتان را شرح دهید. پیش از کلیک، فشردن کلیدهای جهت‌نمای بالا یا پایین امکان جابه‌جایی هایلایت میان المان‌های والد و فرزند را فراهم می‌کند.
• گروه‌بندی المان‌ها: با نگه‌داشتن کلید Shift و کلیک روی چند المان مختلف، آن‌ها را در قالب یک یادداشت واحد ترکیب کنید؛ این روش برای مواردی که یک کامپوننت باید دقیقاً شبیه کامپوننت دیگر طراحی شود بسیار کاربردی است.
• مشخص‌کردن یک محدوده: با کشیدن ماوس روی صفحه، یک ناحیه دلخواه را انتخاب کنید. ابزارهای ترسیمی شامل قلم آزاد (Draw)، بیضی، مستطیل و فلش در دسترس هستند.
• ویرایش مستقیم متن: با دوبار کلیک روی هر المان متنی، نوشته آن را مستقیماً روی صفحه تغییر دهید.
• تنظیم استایل‌ها: در یادداشت‌های متصل به یک المان، با انتخاب گزینه Edit CSS properties بخش بررسی مشخصات CSS را باز کنید؛ این تغییرات همراه با یادداشت ذخیره می‌شوند.
• استفاده از ورودی صوتی: پس از افزودن متن یا تغییرات CSS، می‌توانید از فرمان‌های صوتی نیز برای تکمیل یادداشت بهره ببرید.

اطلاعات و زمینه‌های موجود در هر یادداشت

هر یادداشت ذخیره‌شده، دستورات توسعه‌دهنده را همراه با اطلاعات ساختاریافته جامعی از تک‌تک المان‌های انتخاب‌شده تجمیع می‌کند:

• شناسه DOM: شامل تگ HTML، شناسه id، کلاس‌ها و ویژگی‌های المان (Attributes).
• مکان‌یاب در کدهای مبدأ: مسیر سلکتور استاندارد به سبک CSS برای یافتن سریع موقعیت قطعه‌کد.
• محتوا و ابعاد هندسی: ۲۰۰ کاراکتر اول متن قابل مشاهده به‌همراه ابعاد دقیق و مختصات قرارگیری المان.
• استایل‌های محاسبه‌شده (Computed Styles): رنگ متن، رنگ پس‌زمینه، اندازه قلم، فونت، نوع نمایش (display) و موقعیت قرارگیری (position).
• متادیتای فریمورک: نام کامپوننت و پشته سلسله‌مراتبی آن برای برنامه‌های مبتنی بر React، Vue و Svelte.

ابزار Cursor هنگام ذخیره هر یادداشت، یک اسکرین‌شات برش‌خورده نیز از صفحه ثبت می‌کند. در یادداشت‌های متصل به المان، تصویر المان انتخابی ذخیره می‌شود و در نشانه‌گذاری‌های منطقه‌ای، کل ناحیه به‌همراه خطوط و اشکال رسم‌شده در تصویر قرار می‌گیرد. ایجنت هوش مصنوعی با کمک این تصویر، قصد بصری کاربر را درک کرده و با متادیتای ساختاریافته، المان رندرشده را تا کامپوننت اصلی آن در کدهای پروژه ردیابی می‌کند.

یادداشت‌های ذخیره‌شده ممکن است شامل متن‌های برنامه، مشخصات المان‌ها، متادیتای کامپوننت‌ها، استایل‌ها و تصاویر پیش‌نمایش باشند؛ از این رو تیم‌هایی که با داده‌های حساس و محرمانه کار می‌کنند باید پیش از ارسال این نشانه‌ها به مدل انتخابی، سیاست‌های امنیتی و نظارتی معمول خود را اعمال نمایند.

مدیریت صف درخواست‌ها

کلید Batch edits روی کارت هر یادداشت تعیین می‌کند که Cursor درخواست را بلافاصله ارسال نماید یا چند نشانه مختلف را تجمیع کرده و در قالب یک پیام واحد به ایجنت تحویل دهد.

هم‌زمان با اجرای یک وظیفه توسط ایجنت، برنامه‌نویسان می‌توانند المان دیگری را نشانه‌گذاری کرده و درخواست بعدی را ثبت کنند. ابزار Cursor این یادداشت‌ها را مانند پیام‌های تکمیلی در محیط چت، وارد صف انتظار می‌کند. همچنین در صورتی که سرور توسعه محلی از قابلیت بارگذاری زنده (Hot Reload) پشتیبانی کند، با ویرایش کدهای اصلی، نتایج فوراً در پیش‌نمایش مرورگر نمایان می‌شوند.

مدلی سریع برای همراهی با ریتم توسعه

قابلیت Annotate به نسخه ۳.۲۴.۱۸ یا نسخه‌های جدیدتر Cursor نیاز دارد. در نسخه‌های قبلی، کنترل‌های مرتبط از طریق یک آیکون قلم با عنوان Design Mode در نوار ابزار مرورگر در دسترس بودند.

ابزار Cursor این ویژگی را بدون دریافت هزینه مجزا در تمام پلن‌های فعلی خود گنجانده است و میزان مصرف ایجنت نیز مطابق با سهمیه اشتراک کاربر و مدل انتخابی محاسبه می‌شود.

تیم توسعه Cursor برای این فرایند، استفاده از مدل اختصاصی Composer 2.5 را پیشنهاد می‌کند؛ زیرا فرایند نشانه‌گذاری به مدلی نیاز دارد که بتواند مفاهیم بصری رابط کاربری را به درستی درک کرده و ویرایش‌های دقیق را با سرعت بسیار بالا تحویل دهد. تاخیر پردازشی کمتر باعث می‌شود چرخه ویرایش و بازخوانی صفحه، کاملاً با سرعت بارگذاری آنی سرور هماهنگ بماند.

ابزاری ایده‌آل برای ظریف‌کاری رابط کاربری

ویژگی Annotate گزینه‌ای بی‌نقص برای اعمال اصلاحات مشخص در فرانت‌اند مانند تنظیم فواصل، تایپوگرافی، متغیرهای رنگی، نقاط شکست واکنش‌گرا (Breakpoints)، فرم دکمه‌ها و تراز کردن کامپوننت‌ها به شمار می‌رود. ترکیب اسکرین‌شات به‌همراه ساختار DOM و متادیتای فریمورک، اطلاعات لازم را در اختیار ایجنت قرار می‌دهد تا تغییراتی دقیق و هدفمند در کدهای اصلی ایجاد کند.

با این حال، ایجاد کامپوننت‌های کاملاً جدید، منطق بک‌اند و اصلاحات معماری پروژه به برنامه‌ریزی جامع‌تری نیازمندند. برای چنین وظایفی، محیط گفت‌وگوی معمول Cursor و مستندات Plan Mode مسیرهای مناسب‌تری پیشنهاد می‌کنند. همچنین توصیه می‌شود برنامه‌نویسان پیش از ادغام نهایی تغییرات ایجادشده با این روش، تغییرات کد (Diff) را بررسی کرده، حالت‌های واکنش‌گرا را بیازمایند و آزمون‌های همیشگی دسترسی‌پذیری و بازگشت عملکرد را روی پروژه اجرا کنند.