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