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

chapters/05-design-and-ux/08-lesson-ai-ideation-preventing-slop/spec.md

@@ -0,0 +1,100 @@
+# مشخصات درس‌نامه: ایده‌پردازی با AI و جلوگیری از AI Slop (AI Ideation & Preventing AI Slop)
+- **شناسه در سیلابس:** `L5.9`
+- **فصل:** فصل ۵: طراحی تجربه و هویت محصول (Ch 5)
+- **نوع محتوا:** 📘 درس‌نامه متنی
+- **زمان تقریبی مطالعه:** ۱۵ دقیقه
+- **پیش‌نیازهای مستقیم:** `L5.8` (سیستم طراحی)
+
+---
+
+## ۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy)
+دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند:
+- [ ] **درک کند (Understand):** پدیده فراگیر «زباله هوش مصنوعی (AI Slop)» چیست و چرا مدل‌های زبانی به طور پیش‌فرض تمایل دارند خروجی‌های میانگین، کلیشه‌ای و فاقد هویت تولید کنند.
+- [ ] **تحلیل/ارزیابی کند (Evaluate):** نشانه‌های بارز طراحی‌های ارزان و شتاب‌زده هوش مصنوعی (گرادیان‌های تکراری بنفش/آبی، متون شعاری رباتیک، فواصل ناهماهنگ) را به سرعت شناسایی و رفع کند.
+- [ ] **به‌کار ببندد (Apply):** از برترین مراجع و ویترین‌های ترند طراحی جهان نظیر **21st.dev (https://21st.dev/)** و **Curated.design (https://curated.design/)** به همراه Mobbin و Pinterest به عنوان لنگرگاه الهام سلیقه بالا (High-Taste Benchmarks) استفاده کند.
+- [ ] **به‌کار ببندد (Apply):** تکنیک سه‌مرحله‌ای هدایت بصری چندرسانه‌ای (ارسال تصویر نمونه مرجع + اعمال چک‌لیست سلبی + تنظیم رفتار تعاملی) را برای ارتقای چشم‌نواز پروژه محوری (پورتفولیوی پویا) به کار بندد.
+
+---
+
+## ۲. محدوده و مرزهای محتوا (Scope & Boundaries)
+
+### آنچه باید پوشش داده شود (In-Scope):
+1. **پدیده شوم AI Slop در دنیای وب:**
+   * در سال‌های اخیر اینترنت پر شده از هزاران وب‌سایت شبیه به هم: پس‌زمینه تیره با گرادیان کلیشه‌ای بنفش و آبی، تیترهای بادکنکی «قدرت هوش مصنوعی را آزاد کنید!»، کارت‌های تکراری و حس تصنعی شدید.
+   * چرا هوش مصنوعی به خودی خود اسلاپ تولید می‌کند؟ چون مدل بر اساس «میانگین» میلیون‌ها دیتای اینترنت آموزش دیده و میانگین وب، معمولی و سطحی است!
+2. **پادزهر اسلاپ: سلیقه انسانی و نمونه‌های مرجع باکیفیت:**
+   * هوش مصنوعی در خلاء خلاق نیست؛ اگر شما به او مرجع باکیفیت ندهید، او به حالت میانگین خسته‌کننده بازمی‌گردد.
+3. **گنجینه مراجع طراحی طراحان پیشتاز جهان:**
+   * **پلتفرم 21st.dev (https://21st.dev/):** پلتفرم مشهور به «npm مهندسان طراحی»؛ مخزنی خیره‌کننده از کامپوننت‌های مدرن متحرک، کارت‌های تعاملی، گردهای شیشه‌ای و دکمه‌های مغناطیسی ساخته‌شده با Tailwind و React که با یک کلیک می‌توان پرامپت یا کد آن‌ها را به ادیتور داد.
+   * **پلتفرم Curated.design (https://curated.design/):** کاتالوگی الهام‌بخش از شاهکارهای وب با جلوه شگفت‌انگیز (WOW Factor)، تایپوگرافی‌های جسورانه و چیدمان‌های بدون نقص.
+   * **پلتفرم Mobbin (https://mobbin.com/):** برای الگوهای جریان واقعی و پنل‌های تنظیمات استاندارد.
+   * **پینترست (Pinterest):** برای بافت‌ها، ترکیب رنگ‌های مینیمال و بروتالیسم مدرن.
+4. **تکنیک سه‌مرحله‌ای پرامپت ضد اسلاپ (Anti-Slop Prompting):**
+   * **گام ۱ (انتخاب بنچ‌مارک):** یافتن یک کامپوننت چشم‌نواز در 21st.dev یا یک اسکرین‌شات از Curated.design.
+   * **گام ۲ (ارسال تصویر و الگوی مرجع به ایجنت):** *«این تصویر کارت نمونه را ببین؛ من می‌خواهم کارت‌های نمایش پروژه پورتفولیو دقیقاً با همین کیفیت تمیز، کادر ظریف، فونت خوانا و هاله نوری ملایم ساخته شود.»*
+   * **گام ۳ (اعمال چک‌لیست قرمز):** ممنوعیت گرادیان‌های بنفش کلیشه‌ای، استفاده از رنگ‌های عمیق اسلیت/زینک، فواصل استاندارد و متن‌های واقعی و انسانی.
+5. **ارتقای ویترین پروژه محوری (پورتفولیوی پویا):**
+   * تبدیل کارت‌های پروژه و هدر معرفی به اثری متمایز، سنگین، باوقار و مدرن که در همان نگاه اول کارفرما را تحت تاثیر قرار دهد.
+6. **کال‌اوت‌های Quera:**
+   * `<details class="violet">`: پلتفرم جادویی 21st.dev؛ سریع‌ترین روش تزریق کامپوننت‌های هنرمندانه به پروژه بدون نیاز به اختراع چرخ از صفر.
+   * `<details class="red">`: چک‌لیست ۵ تایی تشخیص AI Slop؛ نشانه‌های خطرناکی که هویت کار شما را آماتور جلوه می‌دهند.
+
+### آنچه نباید وارد آن شویم (Out-of-Scope):
+- مباحث کدنویسی رندرینگ سمت سرور یا کلاینت Next.js (فصل ۶).
+- کدنویسی کامل انیمیشن‌های پیشرفته با WebGL یا شیدرها.
+
+---
+
+## ۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms)
+
+| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده |
+| :--- | :--- | :--- |
+| AI Slop | زباله / خروجی شلخته هوش مصنوعی | محتوا و کدهای سطحی، بی‌کیفیت و کلیشه‌ای تولیدشده توسط مدل بدون سلیقه و نظارت انسانی |
+| Taste & Curation | سلیقه و گلچین‌گری | توانایی تشخیص طرح عالی از متوسط و انتخاب بهترین نمونه‌های مرجع برای هدایت هوش مصنوعی |
+| 21st.dev | پلتفرم توئنی‌فرست | بازارچه متن‌باز کامپوننت‌های تعاملی باکیفیت و انیمیشنی برای مهندسان طراحی فرانت‌اند |
+| WOW Factor | عامل شگفتی‌آفرینی بصری | ویژگی‌های طراحی نوآورانه که کاربر را در ثانیه‌های نخست میخکوب و تحت تاثیر قرار می‌دهد |
+| Visual Benchmark | محک / مبنای سنجش بصری | تصویر یا نمونه مرجع استاندارد که کیفیت خروجی هوش مصنوعی با آن مقایسه و سنجیده می‌شود |
+
+---
+
+## ۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders)
+> **راهنمای ایجنت نویسنده:** تمام تصاویر باید در پوشهٔ `images/` قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:
+
+1. **تصویر کاور درس:** `images/cover.png`
+   * **موضوع:** کاور مدرن با تم تیره که دو نیمه را نشان می‌دهد: سمت چپ یک طرح کدر و کلیشه‌ای بی‌روح هوش مصنوعی و سمت راست درخشش یک طراحی هنرمندانه و اصیل با المان‌های لوکس.
+2. **مقایسه طراحی اسلاپ با طراحی اصیل و مدرن:** `images/ai-slop-vs-premium-ui.png`
+   * **موضوع:** اینفوگرافیک مقایسه‌ای: سایت پر از گرادیان بنفش و متون کلیشه‌ای در برابر پورتفولیوی شیک با تایپوگرافی سنجیده و فضای تنفس‌دار.
+3. **گشت‌وگذار در گنجینه 21st.dev:** `images/twentyfirst-dev-library.png`
+   * **موضوع:** اسکرین‌شات تمیز از محیط پلتفرم 21st.dev با نمایش کامپوننت‌های خیره‌کننده، کارت‌های متحرک و دکمه کپی کد برای ایجنت.
+4. **ویترین شاهکارهای وب در Curated.design:** `images/curated-design-gallery.png`
+   * **موضوع:** نمایی از گالری Curated.design با وب‌سایت‌های دارای عامل شگفتی (WOW Factor) و پالت‌های رنگی جذاب.
+5. **چرخه سه‌مرحله‌ای پرامپت ضد اسلاپ:** `images/anti-slop-prompt-cycle.png`
+   * **موضوع:** دیاگرام چرخشی: ۱. انتخاب رفرنس باکیفیت $\rightarrow$ ۲. ارسال تصویر با پرامپت قیددار به ایجنت $\rightarrow$ ۳. بررسی چک‌لیست قرمز و خروجی پریمیوم.
+
+---
+
+## ۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (`README.md`)
+
+1. **تیتر اصلی:** `# ایده‌پردازی با AI و پرهیز از AI Slop: چگونه محصولی بسازیم که روح داشته باشد؟`
+2. **مقدمه:** چرا ۹۰٪ سایت‌های تولیدشده با هوش مصنوعی در سال‌های اخیر شبیه به هم و غیرقابل تحمل شده‌اند؟
+3. **جدول کاور درس**
+4. **کالبدشکافی زباله هوش مصنوعی (AI Slop):** چرا مدل‌ها به طور پیش‌فرض کارهای پیش‌پاافتاده می‌سازند؟
+5. **نقش سلیقه و متصدی‌گری انسانی (Curation):** بازگرداندن خلاقیت به صندلی راننده.
+6. **جعبه‌ابزار الهام طراحان پیشتاز جهان:**
+   * پلتفرم خارق‌العاده **21st.dev**: بازار کامپوننت‌های زنده فرانت‌اند.
+   * گالری لوکس **Curated.design**: دیدن استانداردهای روز دیزاین وب.
+   * قدرت Mobbin و Pinterest در کشف ایده‌های نو.
+7. **باکس نکته Quera (`<details class="violet">`):** استفاده مستقیم از کامپوننت‌های 21st.dev در پرامپت‌های ادیتور Cursor.
+8. **فرمول سه‌مرحله‌ای پرامپت‌نویسی ضد اسلاپ:**
+   * انتخاب بنچ‌مارک، تزریق تصویر و اعمال چک‌لیست سلبی.
+9. **ارتقای نهایی هویت بصری پورتفولیوی پویا:** تضمین جلوه WOW Factor در صفحه اول کارفرما.
+10. **باکس هشدار Quera (`<details class="red">`):** ۵ پرچم قرمز (Red Flags) که داد می‌زنند کار شما با پرامپت تنبل ساخته شده است!
+11. **جمع‌بندی فصل پنجم:** دستیابی به هویت بصری و سیستم طراحی کامل، و آماده‌سازی برای ورود به فاز عملیاتی پیاده‌سازی و کدنویسی در فصل ۶.
+
+---
+
+## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
+- [ ] مفهوم AI Slop و ریشه‌های الگوریتمی آن به روشنی تبیین شده باشد.
+- [ ] مراجع معتبر تاییدشده کاربر (21st.dev, Curated.design, Mobbin, Pinterest) در متن به طور کامل پوشش داده شوند.
+- [ ] تکنیک سه‌مرحله‌ای استفاده از رفرنس‌های تصویری در پرامپت آموزش داده شود.
+- [ ] چک‌لیست پیشگیری از کلیشه‌ها و ارتقای پروژه پورتفولیو به سطح پریمیوم لحاظ گردد.