‏Design Mode کرسر: روی صفحه بزن، کد عوض شه

کرسر تو این پست از یه آپدیت برای Design Mode می‌گه؛ ابزاری که هدفش کم کردن فاصله بین چیزیه که رو صفحه می‌بینی و چیزیه که ایجنت ازش می‌فهمه. ایده‌ی اصلی اینه که کار روی UI ذاتاً فضاییه (spatial) و دیزاینرها و PMها و فرانت‌اندکارها معمولاً با اشاره به المان‌ها و بخش‌های صفحه با هم حرف می‌زنن، نه فقط با چت. این مود بهت اجازه می‌ده همون‌جا تو جریان کار، محصولت رو ادیت کنی.

از توی مرورگر کرسر می‌تونی روی هر المان کلیک کنی، روی صفحه خط بکشی یا با صدا تغییر رو توضیح بدی، و کرسر کانتکست لازم رو برمی‌داره تا کد رو عوض کنه؛ در همین حین تو می‌ری سراغ ادیت بعدی. به گفته‌ی تیم کرسر چند راه برای رسوندن منظورت هست: انتخاب یه المان، اضافه کردن چند رفرنس، کشیدن روی رابط کاربری، یا استفاده از صدا.

Multi-select وقتی به درد می‌خوره که تغییر به رابطه‌ی بین چند المان بستگی داره؛ مثلاً دو تا کامپوننت رو رفرنس می‌دی و می‌خوای یکی شبیه اون یکی بشه یا یه گروه کامپوننت با هم تنظیم بشن. کشیدن روی صفحه هم وقتی مفیده که ایجنت باید بدونه دستور به کدوم ناحیه مربوطه؛ نکته‌ی جالب اینه که این annotation روی یه فریم فریزشده‌ی صفحه می‌شینه، پس ایجنت دقیقاً همون state‌ای رو می‌بینه که تو بهش واکنش نشون دادی.

زیر کاپوت، وقتی یه المان رو انتخاب می‌کنی دو تا سیگنال مکمل وارد کانتکست می‌شه: هویت خود المان (xpath، کامپوننت، attributeها، computed styles و propها از fiber tree) و یه اسکرین‌شات برای کانتکست فضایی (چیدمان، المان‌های اطراف و state دقیق صفحه). همین باعث می‌شه ایجنت دقیقاً همون چیزی رو داشته باشه که برای پیدا کردن سورس و ادیت کردن کد لازمه.

نکته‌ی دیگه‌ای که نویسنده روش تأکید می‌کنه ریتم کاره: موقع اصلاح یه رابط کاربری، هر تغییر معمولاً تغییر بعدی رو می‌سازه. Design Mode بهت اجازه می‌ده هر ادیت رو همون لحظه که متوجهش شدی بفرستی، حتی قبل از اینکه قبلی تموم شه؛ یعنی می‌تونی راحت‌تر چندکاره (multitask) باشی و چند تا ساب‌ایجنت رو هم‌زمان مدیریت کنی.

به گفته‌ی کرسر این جریان وقتی بهترین جواب رو می‌ده که مدل بتونه سریع تغییرات هدفمند روی UI بزنه، و Composer 2.5 دقیقاً تو همینه چون هم سریعه هم تو کار رابط کاربری قویه. همین‌طور که ایجنت‌ها تموم می‌کنن، اپ hot reload می‌شه و تغییرات رو تو محصول در حال اجرا می‌بینی و تا وقتی که رابط درست به نظر برسه ادامه می‌دی.

نکات کلیدی:

• آپدیت Design Mode کرسر بهت اجازه می‌ده مستقیم روی محصول در حال اجرا، با کلیک، کشیدن یا صدا دیزاین رو ادیت کنی
• انتخاب المان دو سیگنال وارد کانتکست می‌کنه: هویت المان (xpath، props، computed styles) و یه اسکرین‌شات برای کانتکست فضایی
• annotationها روی یه فریم فریزشده می‌شینن تا ایجنت دقیقاً همون state صفحه رو ببینه
• می‌تونی ادیت‌ها رو پشت سر هم بفرستی و چند ساب‌ایجنت رو هم‌زمان مدیریت کنی
• این مود با مدل Composer 2.5 بهترین جواب رو می‌ده چون سریع و قوی تو کار UIه