‏دیزاین سیستم برای ایجنت‌های هوش مصنوعی

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

به گفتهٔ نویسنده، ایجنت‌های هوش مصنوعی یه مسیر تازه باز کردن. وقتی بیشتر کد رو ایجنت‌ها می‌نویسن، دیزاین سیستم می‌شه بخشی از چیزی که اسمش رو گذاشته AI steering layer، یعنی همون context‌ای که هر تغییر سایت رو با برند و قواعد طراحی و توسعه هم‌راستا نگه می‌داره. حالا مارکتینگ صفحهٔ فرود اضافه می‌کنه، مهندسی داکیومنت می‌ذاره و PM صفحهٔ قیمت‌ها رو عوض می‌کنه. اگه چیزی هدایتشون نکنه، ایجنت هرکدوم رنگ و فاصله و لحن خودش رو پیاده می‌کنه.

راه‌حلی که نویسنده پیشنهاد می‌ده collaborative steering هست: یه مسئول طراحی و یه مسئول فرانت‌اند یه بار گرید، فونت، رنگ، فاصله‌ها و کامپوننت‌ها رو تعریف می‌کنن و ایجنت‌های همه به اون «می‌چسبن». اینطوری تیم به کارش ادامه می‌ده و سایت هم یکپارچه می‌مونه.

مثال اصلی سایت Intent هست. اونجا یه فایل AGENTS.md به ایجنت‌ها می‌گه به‌جای تکرار مقادیر رنگ و تایپوگرافی و گرید، از کلاس‌های تم و متغیرهای CSS تو استایل‌شیت سراسری استفاده کنن. این استایل‌شیت رنگ‌ها، فونت‌ها، اندازهٔ متن، گرید ریسپانسیو و تم روشن و تیره رو به شکل design token (یعنی مقادیر اسم‌داری که کل سایت ازشون استفاده می‌کنه) تعریف می‌کنه. یه صفحهٔ دیزاین سیستم هم همه‌چیز رو به‌صورت نمونهٔ زنده نشون می‌ده که ایجنت‌ها می‌تونن بررسیش کنن.

نتیجه‌ش اینه که وقتی کسی از ایجنت یه دکمهٔ جدید می‌خواد، ایجنت همون کامپوننت Button موجود رو با استایلش استفاده می‌کنه که خودکار با دارک‌مود هم جور می‌شه. دیزاین سیستم Intent اول از مشخصات Figma شروع شد و با یه اتصال Figma MCP خودکار به کد تبدیل شد. بعد از اون، خود کد شد منبع اصلی و فونت جدید، لِی‌اوت ریسپانسیو و دارک‌مود مستقیم تو کد اضافه شدن. ایجنت‌ها حتی تغییرات رو به فایل‌های Figma هم برگردوندن، ولی چون کد منبع اصلیه، تو عمل لازم نشد.

سایت‌های Sol و Aria هم همین روش رو دارن: design token، دستورالعمل برای ایجنت و یه صفحهٔ دیزاین سیستم که چون از همون کد سایت ساخته می‌شه، همیشه به‌روزه. جمع‌بندی نویسنده اینه که تیم‌های طراحی سال‌ها تلاش کردن آدم‌ها مستندات دیزاین سیستم رو بخونن، ولی ایجنت‌ها هر بار می‌خوننش.

نکات کلیدی:

• مشکل قدیمی دیزاین سیستم‌ها اینه که از محصول واقعی عقب می‌مونن
• با ایجنت‌ها، دیزاین سیستم می‌شه لایهٔ هدایت (steering layer) کد فرانت‌اند
• سایت Intent با یه فایل AGENTS.md ایجنت‌ها رو به استفاده از متغیرهای CSS و کلاس‌های تم مجبور می‌کنه
• دیزاین سیستم Intent از Figma با Figma MCP به کد تبدیل شد و بعد کد منبع اصلی شد
• Sol و Aria هم صفحهٔ دیزاین سیستمی دارن که از همون کد سایت ساخته می‌شه