دیزاینسیستمی که هم مهندس هم ایجنت میخونتش
خلاصهٔ کاملتر
نویسندهها میگن کدنویسیِ کمکگرفته از AI به تیمهای کوچیک اجازه میده سریعتر بسازن و ایدهها رو اعتبارسنجی کنن، ولی وقتی این روش جا میافته وقتشه که UX و UI رو جدی بالا ببری. محصولِ Currents (یه پلتفرمِ مشاهدهپذیریِ تست) با تیمی از مهندسهای قوی رشد کرده بود، ولی صدها تصمیمِ طراحی سرِ صحنه گرفته میشد و همین باعثِ ناهماهنگی شده بود.
دو محرکِ اصلی کار رو فوری کرد: اول اینکه AI واگرایی رو تشدید میکرد؛ تیم با Cursor و Claude کد تولید میکرد و بدونِ یه پایهی طراحی، هر PR ریسکِ اضافهکردنِ یه کامپوننتِ جدید رو داشت. دوم اینکه ظاهرِ محصول جلوِ فروش و بازاریابی رو گرفته بود. مدیرعامل هم میخواست دیزاینسیستم برای تحویلهای آینده «قابلِخواندن برای AI» باشه.
قبلِ کارِ طراحی، تیم یه ممیزیِ کمکگرفته از AI رو رو حدودِ ۷۹۱ فایل انجام داد؛ کاری که قبلاً دو-سه هفته طول میکشید، با کمکِ مدل تو یکسومِ زمان تموم شد. ممیزی نشون داد دو کتابخونهی آیکون، تا ۲۳۶ رنگِ یکتا با ۱٬۴۱۳ استفاده، و چند سیستمِ فونتِ رقیب همزمان درکارن.
راهحل یه دیزاینسیستمِ عمداً کوچیک بود با قاعدهی «گزینهی کمتر، جوابِ بدیهی». برای تایپوگرافی فونتِ Innovator Grotesk رو انتخاب کردن چون متریکهاش تقریباً مثلِ Inter بود و بدونِ بازچینشِ لایه جایگزین میشد. برای آیکون، ست جدید رو با AI به حدودِ ۹۰٪ آیکونهای قدیمی نگاشت کردن. رنگها هم از ۱٬۴۱۳ استفاده به چهار گروهِ توکن (elevation، content، UI، border) جمع شد.
نکتهای که سیستم رو واقعاً برای AI خوانا میکنه، تعریفِ رنگها با OKLCH ـه. چون OKLCH رنگ رو بهشکلِ روشنایی، اشباع و رنگمایهی قابلِفهم بیان میکنه، ایجنت میتونه بدونِ حدس پالت رو گسترش بده؛ مثلاً اگه ازش بخوای «یه بوردر یک پله نرمتر با همون رنگمایه»، یه مقدار میده که با بقیهی پالت جور دربیاد نه یه هگزِ سرخود. نتیجه: تو هفت هفته یه پایهی طراحیِ خوانا برای هم آدم هم ایجنت.
نکات کلیدی:
- تولیدِ کد با AI بدونِ دیزاینسیستم باعثِ واگرایی و انفجارِ کامپوننتها میشه
- ممیزیِ کمکگرفته از AI کارِ چندهفتهای رو به یکسوم زمان رسوند
- اصلِ طراحی: تعدادِ گزینهی کم و یه جوابِ بدیهی برای هر انتخاب
- تعریفِ رنگ با OKLCH سیستم رو برای ایجنت خوانا و قابلِگسترش میکنه
- دیزاینسیستم تو Figma، Storybook و GitHub زندگی میکنه تا هم مهندس هم AI بخوننش




