# مشخصات درس‌نامه: سیستم طراحی (Design Systems & Component Ecosystems)
- **شناسه در سیلابس:** `L5.8`
- **فصل:** فصل ۵: طراحی تجربه و هویت محصول (Ch 5)
- **نوع محتوا:** 📘 درس‌نامه متنی
- **زمان تقریبی مطالعه:** ۱۵ دقیقه
- **پیش‌نیازهای مستقیم:** `L5.7` (کامپوننت‌ها، وضعیت‌ها و انیمیشن)

---

## ۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy)
دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند:
- [ ] **درک کند (Understand):** سیستم طراحی (Design System) چیست و چرا بدون آن، یک پروژه بزرگ ساخته‌شده با هوش مصنوعی تدریجاً به یک «هیولای فرانکنشتاین» با ده‌ها رنگ و دکمه ناهماهنگ تبدیل می‌شود.
- [ ] **تحلیل/ارزیابی کند (Evaluate):** سیر تحول کتابخانه‌های رابط کاربری از نسل بوت‌استرپ (Bootstrap) و متریال یو‌آی (Material UI) تا پارادایم انقلابی **shadcn/ui و Tailwind** (مالکیت کامل کدها در پروژه) را مقایسه کند.
- [ ] **به‌کار ببندد (Apply):** معماری توکن‌های طراحی (Design Tokens) را بر اساس استانداردهای **Aura Design Systems (https://www.aura.build/design-systems)** برای استخراج متغیرهای تم تیره و روشن پیاده‌سازی کند.
- [ ] **به‌کار ببندد (Apply):** سند مشخصات طراحی مارک‌داون اختصاصی **`design.md` (بر پایه https://getdesign.md/design-md)** را در ریشه پروژه پورتفولیو قرار دهد تا هوش مصنوعی را مجبور به استفاده از توکن‌های از پیش‌تعیین‌شده نماید.

---

## ۲. محدوده و مرزهای محتوا (Scope & Boundaries)

### آنچه باید پوشش داده شود (In-Scope):
1. **سندرم هیولای فرانکنشتاین در وایب کدینگ:**
   * وقتی با هوش مصنوعی چند صفحه مختلف می‌سازید، در صفحه اول دکمه آبی و گرد است، در صفحه دوم بنفش و تیز، و در صفحه سوم خاکستری!
   * سیستم طراحی منبع واحد حقیقت بصری است که جلوی این چندپارگی را می‌گیرد.
2. **سیر تحول کتابخانه‌های کامپوننت وب:**
   * **نسل اول (بوت‌استرپ - Bootstrap):** کلاس‌های سنگین یکپارچه با ظاهر یکنواخت و قدیمی سال ۲۰۱۲.
   * **نسل دوم (Material UI و کتابخانه‌های پکیجی):** کامپوننت‌های آماده کامل در قالب پکیج‌های حجیم npm که تغییر ظاهر آن‌ها طاقت‌فرسا و قفل‌شده بود.
   * **نسل سوم و حاکم فعلی (shadcn/ui + Tailwind CSS):** کامپوننت جعبه سیاه نیست؛ کدهای تک‌تک اجزا (Button, Card, Modal, Input) مستقیماً درون پوشه `components/ui/` پروژه شما کپی می‌شوند و شما و ایجنت هوش مصنوعی مالک ۱۰۰٪ آن‌ها هستید.
3. **معماری توکن‌های طراحی با الهام از Aura (aura.build/design-systems):**
   * جریان تبدیل توکن‌ها:
     * متغیرهای ریشه CSS در فایل سراسری (`--background`, `--foreground`, `--primary`, `--card`, `--radius`).
     * نگاشت متغیرها به کلاس‌های کلاسیک Tailwind (`bg-background text-foreground border-border`).
     * استفاده در کامپوننت‌ها به طوری که با یک سوییچ تم، تمام رنگ‌های کل سایت همزمان تغییر کنند.
4. **تدوین فایل `design.md` برای هوش مصنوعی (getdesign.md/design-md):**
   * ساخت فایلی سبک در ریشه پروژه که راهنمای هوش مصنوعی باشد:
     * پالت رنگی مجاز، فواصل مجاز (گرید ۸ پیکسلی)، فونت مجاز (وزیرمتن و اینتر) و سبک کامپوننت‌ها.
     * ارجاع به `@design.md` در پرامپت‌های ادیتور Cursor و جلوگیری از اختراع کدهای سلیقه‌ای تصادفی نظیر `p-[17px]` یا `bg-[#2a4d69]`.
5. **سیستم کامپوننت‌های پروژه محوری (پورتفولیوی پویا):**
   * گونه‌های استاندارد دکمه (Button Variants: پیش‌فرض، ثانویه، خط‌دور، شبحی).
   * کارت استاندارد پروژه با کادر شیشه‌ای و شعاع گردی ۱۲ پیکسلی (`rounded-xl`).
6. **کال‌اوت‌های Quera:**
   * `<details class="violet">`: چرا مدل shadcn/ui به پرطرفدارترین رویکرد در دنیای ایجنت‌های مدرن تبدیل شد؟
   * `<details class="green">`: فایل `design.md`؛ بیمه‌نامه یکپارچگی ظاهری پروژه شما در برابر شیطنت‌های مدل‌های زبانی.

### آنچه نباید وارد آن شویم (Out-of-Scope):
- نصب فنی دستورات CLI شادسی‌ان (در فصل ۶ به صورت عملی در کدبیس اجرا خواهد شد).
- توسعه پکیج‌های سازمانی منتشرشونده در رجیستری npm.

---

## ۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms)

| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده |
| :--- | :--- | :--- |
| Design System | سیستم طراحی | مجموعه یکپارچه‌ای از قوانین، توکن‌ها و کامپوننت‌های قابل‌استفاده مجدد برای ساخت رابط کاربری |
| shadcn/ui | شادسی‌ان یو‌آی | مجموعه کامپوننت‌های مدرن متن‌باز که کدهای آن مستقیماً در پوشه پروژه شما کپی و سفارشی‌سازی می‌شود |
| Design Tokens | توکن‌های طراحی | متغیرهای استاندارد مرکزی برای مقادیر رنگ، فاصله، شعاع و سایه‌ها در سراسر اپلیکیشن |
| design.md | سند مشخصات طراحی | فایل مارک‌داون راهنما برای ایجنت‌های هوش مصنوعی جهت رعایت خطوط قرمز طراحی سیستم |
| Component Variants | گونه‌های کامپوننت | حالت‌ها و نسخه‌های مختلف ظاهری یک جزء (مانند دکمه اصلی، دکمه حاشیه‌دار، دکمه خطر) |

---

## ۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders)
> **راهنمای ایجنت نویسنده:** تمام تصاویر باید در پوشهٔ `images/` قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:

1. **تصویر کاور درس:** `images/cover.png`
   * **موضوع:** کاور مدرن با تم تیره و یک پالت سازمان‌یافته سه‌بعدی از کامپوننت‌های شیشه‌ای منظم، دکمه‌ها، چیپ‌ها و سوییچ‌های هماهنگ سیستم طراحی.
2. **سندرم هیولای فرانکنشتاین در برابر سیستم طراحی:** `images/frankenstein-vs-design-system.png`
   * **موضوع:** تصویر مقایسه‌ای: سمت چپ دکمه‌ها و کادرهای نامتقارن و ناموزون در برابر سمت راست مجموعه یکدست، هارمونیک و چشم‌نواز.
3. **خط زمانی تحول کتابخانه‌های فرانت‌اند:** `images/ui-libraries-evolution.png`
   * **موضوع:** اینفوگرافیک تاریخی: بوت‌استرپ ۲۰۱۲ $\rightarrow$ متریال یو‌آی ۲۰۱۸ $\rightarrow$ انقلاب شادسی‌ان و تیلویند در عصر هوش مصنوعی.
4. **پایپ‌لاین توکن‌ها در Aura Design Systems:** `images/design-tokens-pipeline.png`
   * **موضوع:** فلوچارت اتصال: توکن‌های متغیر CSS در فایل سراسری $\rightarrow$ کلاس‌های تیلویند $\rightarrow$ خروجی یکپارچه کامپوننت‌ها.
5. **نمونه فایل `design.md` در ریشه پروژه:** `images/design-md-in-editor.png`
   * **موضوع:** اسکرین‌شات تمیز از فایل مارک‌داون راهنمای طراحی باز شده در ادیتور در حال هدایت ایجنت هوش مصنوعی.

---

## ۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (`README.md`)

1. **تیتر اصلی:** `# سیستم طراحی: پایان دوران هیولای فرانکنشتاین در رابط کاربری`
2. **مقدمه:** چرا سایت‌های ساخته‌شده با هوش مصنوعی بعد از چند روز شبیه به چهل‌تکه می‌شوند؟
3. **جدول کاور درس**
4. **سیستم طراحی چیست و چه مسائلی را حل می‌کند؟:** خلق زبان بصری واحد و ابدی.
5. **سیر تحول کتابخانه‌های فرانت‌اند (از Bootstrap تا shadcn/ui):**
   * چرا دیگر کامپوننت‌های پکیج بسته npm محبوب نیستند؟
   * راز آزادی عمل با کپی کدهای کامپوننت در پوشه پروژه.
6. **باکس نکته Quera (`<details class="violet">`):** فلسفه بنیادین مالکیت کد در معماری shadcn/ui.
7. **توکن‌های طراحی در Aura (aura.build/design-systems):**
   * استخراج پالت‌های متغیر معنایی و مدیریت تم تیره.
8. **سند مشخصات طراحی `design.md` (getdesign.md/design-md):**
   * چگونه سلیقه هوش مصنوعی را با یک فایل مارک‌داون مهار کنیم؟
   * درج قوانین تایپوگرافی، فواصل گرید و گونه‌های دکمه.
9. **سیستم طراحی اختصاصی پورتفولیوی پویا:** کالبدشکافی گونه‌های دکمه و کارت‌ها.
10. **باکس آرامش‌بخش Quera (`<details class="green">`):** بیمه‌نامه هماهنگی پروژه با دستور `@design.md`.
11. **جمع‌بندی درس‌نامه:** مجهز شدن به سیستم طراحی و ورود به درس نهایی فصل: مبارزه با زباله هوش مصنوعی (AI Slop).

---

## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
- [ ] ضرورت سیستم طراحی در جلوگیری از تولید رابط‌های کاربری چندتکه تبیین شده باشد.
- [ ] مقایسه تحلیلی نسل‌های کامپوننت (Bootstrap, Material UI, shadcn/ui) ارائه گردد.
- [ ] مرجع Aura و معماری توکن‌های معنایی رنگ و فواصل در متن شرح داده شود.
- [ ] مفهوم و کاربرد فایل `design.md` برای هدایت ایجنت‌های هوش مصنوعی مستند شود.