‏چطور از هوش مصنوعی رابط کاربری با سبک مشخص بخوایم

مارکوس آیزله تو این مقاله می‌گه عبارت «clean and modern» جای تفسیر زیادی برای مدل می‌ذاره. برای همین یه اپ کوچیک به اسم Test Desk ساخته: دوازده تست از سه ماژول، با جستجو، فیلتر نتیجه و ماژول، مرتب‌سازی بر اساس مدت اجرا و باز شدن پیام خطای تست‌های شکست‌خورده. ایده رو از مقاله‌ی John Hartnup گرفته که برای پوستر از اسم سبک‌هایی مثل Bauhaus و Swiss استفاده کرده بود.

روشش اینه که یه brief عملکردی مشترک بنویسی (یعنی توضیح اینکه صفحه چه داده‌ای نشون بده و چه کنترل‌هایی داشته باشه) و بعد برای هر سبک یه درخواست طراحی جدا بهش اضافه کنی. داده و رفتار ثابت می‌مونه و فقط ترکیب‌بندی عوض می‌شه. یعنی چهار نسخه دقیقاً همون دوازده تست رو نشون می‌دن ولی شکل‌شون فرق داره.

چهار سبکی که ساخته: Swiss report با تیتر خیلی بزرگ، پس‌زمینه‌ی سفید مایل به کرم و خط قرمز پررنگ. Editorial با تیتر ایتالیک Georgia و ستون باریک آمار سمت چپ. Workbench با پس‌زمینه‌ی تیره، فونت monospace، تیتر کوچیک 32px و فیلترها تو یه نوار عمودی کنار جدول. Neo-brutalist هم با بلوک‌های رنگی، حاشیه‌های ضخیم مشکی و سایه‌های سخت. نویسنده می‌گه خودش Workbench رو برای این کار ترجیح می‌ده، چون زودتر به نتیجه‌ها می‌رسه.

نکته‌ی مهم اینه که «dark mode» فقط رنگ‌ها رو عوض می‌کنه. برای اینکه چیدمان هم عوض بشه باید صریح بگی، مثلاً «فیلترها تو یه نوار عمودی باریک سمت چپ». تو سبک Neo-brutalist هم گفته متن جدول اندازه‌ی عادی بمونه و تزئین‌ها فقط دور متن باشن. این‌طوری «bold» یه محدوده‌ی مشخص پیدا می‌کنه.

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

نویسنده تأکید می‌کنه که برچسب‌ها، شمارنده‌ها و ستون‌ها رو تو brief نگه داری تا مدل متن اضافه نسازه. اگه اپت از یه design system مثل Carbon استفاده می‌کنه، مستندات و کامپوننت‌هاشو به مدل بده. همه‌ی کنترل‌ها تو هر چهار نسخه تست مرورگر رو رد کردن و تو موبایل هم جدول داخل ناحیه‌ی خودش اسکرول افقی می‌خوره.

نکات کلیدی:

• عبارت «clean and modern» خیلی کلیه، یه اسم سبک مثل Swiss یا neo-brutalist بده.
• یه brief عملکردی مشترک بنویس و درخواست طراحی هر سبک رو جدا بهش اضافه کن.
• درخواست dark mode فقط رنگ رو عوض می‌کنه، چیدمان رو باید جدا و صریح بگی.
• بازخورد مشخص بده، مثل «تیتر رو به 48px کم کن و آمار رو تو یه ردیف بذار».
• برچسب‌ها و ستون‌ها رو تو brief ثابت نگه دار تا مدل متن اضافه نسازه.
• اگه design system داری (مثلاً Carbon)، مستندات و کامپوننت‌هاشو به مدل بده.