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

chapters/05-design-and-ux/00-lesson-chapter-goals/spec.md

@@ -0,0 +1,82 @@
+# مشخصات درس‌نامه: اهداف فصل پنجم (Chapter Goals)
+- **شناسه در سیلابس:** `L5.1`
+- **فصل:** فصل ۵: طراحی تجربه و هویت محصول (Ch 5)
+- **نوع محتوا:** 📘 درس‌نامه متنی
+- **زمان تقریبی مطالعه:** ۵ دقیقه
+- **پیش‌نیازهای مستقیم:** `L4.9` (فهرست تسک و ترتیب ساخت)
+
+---
+
+## ۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy)
+دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند:
+- [ ] **درک کند (Understand):** چرا طراحی تجربه کاربری (UX) و هویت بصری مدرن، وجه تمایز محصولات حرفه‌ای و پرفروش از نرم‌افزارهای زشت، بی‌کیفیت و کلیشه‌ای ساخته‌شده با هوش مصنوعی (AI Slop) است.
+- [ ] **درک کند (Understand):** نقشه راه ۸ درس‌نامه کاربردی این فصل (از اصول UX و جریان کاربر تا وایرفریم، تایپوگرافی دوزبانه، رنگ‌بندی، سیستم طراحی، انیمیشن‌ها و منابع الهام طراحان مدرن) چگونه چیده شده است.
+- [ ] **درک کند (Understand):** پایگاه‌های دانش و مراجع ترند جهانی معرفی‌شده در این فصل (Aura Build، Design.md، 21st.dev، Mobbin و Curated.design) چگونه در قامت ابزارهای روزمره یک وایب کدر به کار گرفته می‌شوند.
+- [ ] **تحلیل/ارزیابی کند (Evaluate):** چگونگی پیاده‌سازی هویت بصری شیک، مینیمال و استاندارد برای پروژه محوری دوره (پورتفولیوی شخصی پویا همراه با پنل ادمین و سئو) را بررسی و پیش‌بینی کند.
+
+---
+
+## ۲. محدوده و مرزهای محتوا (Scope & Boundaries)
+
+### آنچه باید پوشش داده شود (In-Scope):
+1. **ورود به دنیای طراحی مدرن محصول:**
+   * هوش مصنوعی بدون هدایت بصری دقیق، وب‌سایت‌هایی بی‌روح با رنگ‌های تند و نامتعادل می‌سازد؛ در این فصل هنر چیدمان و سلیقه بصری را به ایجنت تزریق می‌کنیم.
+2. **مرور سرفصل‌های فصل ۵:**
+   * درس ۵.۲: مبانی تجربه کاربری، جریان کاربر (User Flow) و استفاده از الگوهای مرجع Mobbin.
+   * درس ۵.۳: وایرفریمینگ، اولویت‌بندی بصری و ساختار صفحات اصلی و پنل ادمین.
+   * درس ۵.۴: تایپوگرافی استاندارد دوزبانه (فونت فارسی وزیرمتن + فونت انگلیسی Inter) و پالت‌های رنگی مدرن با Aura Build.
+   * درس ۵.۵: هنر فاصله‌گذاری، گرید ۸ پیکسلی، فضای منفی و راهنمای ساختار چیدمان در Design.md.
+   * درس ۵.۶: اصول طراحی واکنش‌گرا (Responsive) و نقاط شکست موبایل و دسکتاپ.
+   * درس ۵.۷: کامپوننت‌های تعاملی، وضعیت‌ها (Hover, Focus, Loading) و آیکون‌های ترند Lucide و Tabler.
+   * درس ۵.۸: سیستم طراحی (Design System)؛ استاندارد توکن‌های shadcn/ui و قواعد سیستم‌های طراحی در Aura.
+   * درس ۵.۹: ایده‌پردازی با هوش مصنوعی و پرهیز قاطع از AI Slop با مراجع پیشروی 21st.dev و Curated.design.
+3. **تداوم پروژه محوری (پورتفولیوی پویا):**
+   * خلق ظاهر بصری و هویت برند اختصاصی برای ویترین نمونه‌کارها، صفحه لاگین و داشبورد ادمین.
+4. **کال‌اوت آرامش‌بخش Quera (`<details class="green">`):** نیاز به هیچ‌گونه تسلط قبلی بر نرم‌افزارهای سنگین گرافیکی نظیر Photoshop نیست؛ ما با تفکر سیستماتیک و کدهای طراحی پیش خواهیم رفت.
+
+### آنچه نباید وارد آن شویم (Out-of-Scope):
+- آموزش برنامه‌نویسی ری‌اکت و هوک‌های کدنویسی (مبحث فصل ۶).
+- کدنویسی اتصالات بک‌اند و دیتابیس (فصل ۷).
+
+---
+
+## ۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms)
+
+| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده |
+| :--- | :--- | :--- |
+| Visual Identity | هویت بصری | مجموعه هماهنگ رنگ‌ها، فونت‌ها، فاصله‌ها و سبک ظاهری که شخصیت محصول را می‌سازد |
+| AI Slop | زباله / شلختگی هوش مصنوعی | طراحی‌های شلوغ، بی‌سلیقه، رنگ‌های ناهماهنگ و کلیشه‌ای تولیدشده بدون هدایت انسانی |
+| User Flow | مسیر / جریان کاربر | زنجیره مراحلی که کاربر از لحظه ورود تا رسیدن به هدف نهایی در وب‌سایت طی می‌کند |
+| Design Tokens | توکن‌های طراحی | متغیرهای استاندارد مرکزی برای رنگ‌ها، فاصله‌ها و شعاع گوشه‌ها در سیستم طراحی |
+
+---
+
+## ۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders)
+> **راهنمای ایجنت نویسنده:** تمام تصاویر باید در پوشهٔ `images/` قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:
+
+1. **تصویر کاور درس:** `images/cover.png`
+   * **موضوع:** کاور با تم تیره و خطوط درخشان طراحی محصول که تبدیل یک چیدمان اولیه به یک رابط کاربری مینیمال، لوکس و مدرن را نشان می‌دهد.
+2. **نقشه راه فصل ۵:** `images/chapter-5-roadmap.png`
+   * **موضوع:** اینفوگرافیک گام‌به‌گام از جریان کاربر $\rightarrow$ وایرفریم $\rightarrow$ تایپوگرافی و رنگ $\rightarrow$ چیدمان $\rightarrow$ واکنش‌گرایی $\rightarrow$ کامپوننت‌ها $\rightarrow$ سیستم طراحی $\rightarrow$ مبارزه با AI Slop.
+3. **جعبه‌ابزار مراجع مدرن طراحی:** `images/modern-design-resources.png`
+   * **موضوع:** نمایش تصویری لوگوها و مراجع معرفی‌شده: 21st.dev، Mobbin، Curated.design، Aura Build و Design.md.
+
+---
+
+## ۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (`README.md`)
+
+1. **تیتر اصلی:** `# اهداف فصل پنجم: طراحی تجربه و هویت محصول`
+2. **مقدمه کوتاه:** چرا ظاهر و حس و حال (Look & Feel) محصول، زبان ناخودآگاه اعتماد کاربر است؟
+3. **جدول کاور درس**
+4. **سرفصل‌های کلیدی فصل در یک نگاه:** مرور ۸ گام طراحی محصول از نقشه تا جزئیات بصری.
+5. **جدول نقشه راه یادگیری فصل**
+6. **معرفی مراجع ترند طراحی وب (21st.dev, Mobbin, Curated.design):** منابعی که سلیقه شما و ایجنت را متحول می‌کنند.
+7. **پورتفولیوی پویا در آینه طراحی شیک:** آماده‌سازی ویترین شخصی برای ورود به مرحله ساخت.
+8. **کال‌اوت اطمینان‌بخش Quera (`<details class="green">`):** ثبت دکمه «خواندم» و آغاز خلق تجربه کاربری.
+
+---
+
+## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
+- [ ] اهداف کلان فصل و اهمیت عبور از AI Slop به صراحت بیان شده باشد.
+- [ ] تمامی مراجع صنعتی و ترندهای طراحی مورد تایید در ساختار فصل معرفی شوند.
+- [ ] نقشه راه ۸ درس‌نامه بعدی با زبان شیوا و منطقی مستند گردد.