UX Components؛ دفترچهٔ راهنمای کامپوننتهای رابط کاربری
فرانتاندClaude Opus 5خلاصهٔ کاملتر
UX Components خودش رو یه مرجع کاربردی برای کامپوننتهای رابط کاربری تو دیزاینسیستمهای مختلف معرفی میکنه. تو صفحهٔ معرفیش اومده که میتونی کامپوننتها رو مرور و مقایسه کنی و بفهمی هر کدوم رو کجا باید به کار ببری. تمرکزش دقیقاً روی همون سؤالیه که موقع طراحی زیاد پیش میاد: این چیزی که لازم دارم، تو این دیزاینسیستم اسمش چیه و چه حالتهایی داره؟
بخش Browse Components برای هر کامپوننت راهنمای استفاده، حالتها (states) و حتی پرامپتهای آمادهٔ AI رو نگه میداره، و دو نمای جدا داره: نمای پیشفرض و نمای اتمیک (Atomic) که کامپوننتها رو ریزتر میبینه.
بخش Compare همون کاری رو میکنه که اسمش میگه: نشون میده یه کامپوننت واحد تو دیزاینسیستمهای مختلف با چه اسمهایی شناخته میشه. همین مقایسه برای حالتها هم جدا وجود داره — چیزی که موقع سوییچ کردن بین دو دیزاینسیستم بیشترین وقت رو ازت میگیره.
کنارش دو دایرکتوری هست: دیزاینسیستمها و کتابخونههای آیکون. تو بخش Universal Icons میتونی اسم درست یه آیکون رو بین کتابخونههای مختلف پیدا کنی و پیشنمایشها رو کنار هم ببینی، یا مستقیم دوتا کتابخونه رو مقایسه کنی.
برای دسترسیپذیری هم الگوهای استاندارد W3C ARIA به کامپوننتهای کاتالوگ نگاشت شدن و یه فهرست جدا هم برای الگوهایی که هنوز نگاشت نشدن (Unmapped) وجود داره — یعنی میبینی کجای پوشش هنوز خالیه.
دو بخش آخر مخصوص کار با ابزارهای هوش مصنوعیه: یه سرور MCP که دادهٔ کامپوننتها رو در اختیار ابزارهای AI میذاره، و یه مرجع به اسم DESIGN.md که هویت بصری برند رو به شکلی مینویسه که بشه مستقیم دستش داد به یه ایجنت طراحی.
نکات کلیدی:
- مرجع کامپوننتهای UI همراه با راهنمای استفاده و حالتها
- مقایسهٔ نام کامپوننتها و حالتها بین دیزاینسیستمهای مختلف
- دایرکتوری دیزاینسیستمها و کتابخونههای آیکون با جستوجوی آیکون بین کتابخونهها
- نگاشت الگوهای استاندارد W3C ARIA به کامپوننتها و فهرست الگوهای پوششدادهنشده
- سرور MCP و مرجع DESIGN.md برای وصل کردن دادهها به ابزارها و ایجنتهای AI
