‏DeLibra: دیزاین سیستمی که ایجنت‌ها هم می‌خوننش

Raphael Batte تو معرفی پروژهٔ DeLibra از یه مشکل آشنا شروع می‌کنه. دیزاین سیستم (یعنی مجموعهٔ رنگ‌ها، فونت‌ها و کامپوننت‌های مشترک یه محصول) معمولاً بین Figma، فایل‌های CSS، کد و مستندات پخشه. آدم‌ها با خوندن این تکه‌ها تصویر کلی رو تو ذهنشون می‌سازن، ولی ایجنت‌های هوش مصنوعی فقط تکه‌ها رو می‌بینن.

به گفتهٔ نویسنده، نتیجه اینه که ایجنت جاهای خالی رو خودش پر می‌کنه و توکن، کامپوننت یا الگویی می‌سازه که از قبل وجود داشته، یعنی عملاً hallucinate می‌کنه. DeLibra برای حل این مشکل دیزاین سیستم رو به یه libra تبدیل می‌کنه: یه کتابخونهٔ ساختاریافته که آدم‌ها مثل مستند می‌خوننش و ایجنت‌ها به‌عنوان داده و context ازش استفاده می‌کنن.

ساختن libra از هر چیزی که الان داری شروع می‌شه: یه فایل Figma، CSS سایت اصلی، یه ریپازیتوری یا حتی یه قالب خالی. یه skill مخصوص (یعنی مجموعه‌دستورالعملی که ایجنت موقع کار دنبالش می‌کنه) ایجنت رو راهنمایی می‌کنه تا مقدارهای پایه رو به token تبدیل کنه و الگوهای تکراری رو به شکل کامپوننت دسته‌بندی کنه. خروجی یه سند زنده‌ست و وقتی یه توکن عوض بشه، همهٔ نمونه‌هایی که ازش استفاده می‌کنن هم آپدیت می‌شن.

هر libra چهار بخش داره. توکن‌ها اسم‌گذاری و گروه‌بندی شدن و منبع هر مقدار مشخصه. کامپوننت‌ها عکس نیستن و واقعاً از روی همون توکن‌ها رندر می‌شن. تم روشن و تیره روی یه نمونه کنار هم نشون داده می‌شن تا اختلافشون قبل از production دیده بشه. نمای موبایل و دسکتاپ هم کنار هم قرار می‌گیرن.

هر جزء libra رو می‌شه به شکل کد دید و HTML و CSS پشتش رو کپی یا اکسپورت کرد. به گفتهٔ نویسنده، بخش ارزشمندترش نمای مقایسه‌ست: CSS یه سایت زنده، یه stylesheet قدیمی یا بیلد یه تیم دیگه رو بهش می‌دی و DeLibra اونو با libra مقایسه می‌کنه. خروجی فهرستیه از چیزهایی که از سیستم فاصله گرفتن، چیزهایی که هیچ‌وقت توکن نشدن و اینکه اول چی رو درست کنی. یعنی بررسی دیزاین سیستم به‌جای یه بعدازظهر چشمی نگاه کردن، تبدیل می‌شه به یه diff.

نکات کلیدی:

• DeLibra دیزاین سیستم رو به یه libra تبدیل می‌کنه که هم مستند برای آدم‌هاست هم داده برای ایجنت.
• ورودی می‌تونه Figma، CSS سایت، یه ریپازیتوری کد یا یه قالب خالی باشه.
• هر libra شامل توکن‌ها، کامپوننت‌های رندرشده، تم روشن و تیره و نمای موبایل و دسکتاپه.
• نمای مقایسه CSS بیرونی رو با libra مقایسه می‌کنه و فهرست اختلاف‌ها رو برمی‌گردونه.
• کد پروژه تو ریپازیتوری raphael-batte/delibra روی GitHub هست.