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

مشخصات درس‌نامه: ایده‌پردازی با 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) در متن به طور کامل پوشش داده شوند.
• تکنیک سه‌مرحله‌ای استفاده از رفرنس‌های تصویری در پرامپت آموزش داده شود.
• چک‌لیست پیشگیری از کلیشه‌ها و ارتقای پروژه پورتفولیو به سطح پریمیوم لحاظ گردد.