‏Box Design System: فایل فیگما رو برای ایجنت‌های کدنویس مرتب کن

تیم Flexy Global تو یه پروژه نرم‌افزار سازمانی با یه فایل فیگما کار می‌کرد که فقط یه بخشش ده‌ها صفحه داشت. به گفته نویسنده‌ها، هر صفحه جدا معنی داشت ولی معلوم نبود صفحه‌ها چطور به هم وصلن. تیم این رو از جلسه‌ها می‌دونست، ولی یه coding agent (یعنی ابزار هوش مصنوعی‌ای که خودش کد می‌نویسه) هیچ‌کدوم از این زمینه رو نداشت. یه صفحه تنها اطلاعات کافی نمی‌داد و کل بوم هم پر از چیزای بی‌ربط بود.

راه‌حلشون Box Design System بود، یعنی تقسیم بوم فیگما به بخش‌های مرزدار که هر کدوم صفحه‌ها، حالت‌ها، انتقال‌ها و یادداشت‌های لازم برای فهم یه تیکه از محصول رو دارن. جعبه‌ها سه سطح دارن: Feature box برای یه قابلیت کامل مثل Navigation، Flow box برای هر تعامل جدا مثل «Select Assets» یا «Direct Map Exploration»، و Screen-state box که حالت دقیق هر صفحه رو اسم می‌ذاره. جعبه‌ها بر اساس رفتار چیده می‌شن، نه صفحه. چون دو تعامل ممکنه ظاهر یکسانی داشته باشن ولی کارشون فرق کنه.

نویسنده‌ها می‌گن هر جعبه باید بدون توضیح طراح قابل فهم باشه. یعنی حالت شروع، کاری که کاربر می‌کنه، نتیجه‌ش، و حالت‌هایی مثل loading، empty، error یا disabled همه کنار هم باشن. چون ایجنت از جلسه یا پیام Slack خبر نداره و هرچی جا بیفته رو باید حدس بزنه، و به قول خودشون «حدس زدن همون جاییه که اشتباه‌ها شروع می‌شن». برای همین با فلش‌های ساده نشون می‌دن هر کلیک به کدوم حالت می‌رسه، البته فقط جایی که یه صفحه چند مسیر مختلف داره.

وقتی ایجنت از طریق Figma MCP server (یعنی رابطی که داده ساختاریافته فایل فیگما رو به ایجنت می‌ده) وصل می‌شه، به جای «این صفحه رو بساز» می‌شه یه جعبه مشخص رو بهش داد. مرز جعبه لازم نیست با یه کامپوننت کد یکی باشه و معماری کد رو تعیین نمی‌کنه. کیفیت خروجی هنوز به کدبیس، پرامپت و کامپوننت‌های موجود بستگی داره و چیزایی مثل Auto Layout، variables و Code Connect هم همچنان لازمن.

نویسنده‌ها صادقانه می‌گن جعبه‌ها محصولی که تعریف نشده رو درست نمی‌کنن، فقط ابهامش رو بهتر نشون می‌دن. جای design system اصلی رو هم نمی‌گیرن، که تو یه فایل جدا با اسم‌گذاری و گروه‌بندی تمیز نگه داشته می‌شه. جمع‌بندیشون اینه که جعبه رفتار رو تعریف می‌کنه، design system ظاهر رو، و کدبیس عملکرد واقعی رو. حالا که فایل طراحی ورودی مستقیم ایجنت‌ها شده، مرتب بودنش دیگه فقط یه لطف به طراح بعدی نیست.

نکات کلیدی:

• Box Design System صفحه‌های فیگما رو بر اساس رفتار محصول توی جعبه‌های مرزدار گروه‌بندی می‌کنه.
• جعبه‌ها سه سطح دارن: Feature box، Flow box و Screen-state box.
• هر جعبه باید حالت شروع، اکشن، نتیجه و حالت‌های loading/empty/error رو کنار هم داشته باشه.
• فلش بین اکشن و حالت نتیجه فقط جایی لازمه که یه صفحه چند مسیر مختلف داره.
• با Figma MCP server می‌شه به جای کل صفحه، یه جعبه مشخص رو به ایجنت داد.
• جعبه‌ها جای design system جدا و Code Connect رو نمی‌گیرن و محصول تعریف‌نشده رو هم درست نمی‌کنن.