feat: add chapter 05-design-and-ux specs

chapters/05-design-and-ux/07-lesson-design-systems/spec.md

@@ -0,0 +1,104 @@
+# مشخصات درس‌نامه: سیستم طراحی (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` برای هدایت ایجنت‌های هوش مصنوعی مستند شود.