12 KiB
12 KiB
مشخصات درس‌نامه: ایده‌پردازی با 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):
- پدیده شوم AI Slop در دنیای وب:
- در سال‌های اخیر اینترنت پر شده از هزاران وب‌سایت شبیه به هم: پس‌زمینه تیره با گرادیان کلیشه‌ای بنفش و آبی، تیترهای بادکنکی «قدرت هوش مصنوعی را آزاد کنید!»، کارت‌های تکراری و حس تصنعی شدید.
- چرا هوش مصنوعی به خودی خود اسلاپ تولید می‌کند؟ چون مدل بر اساس «میانگین» میلیون‌ها دیتای اینترنت آموزش دیده و میانگین وب، معمولی و سطحی است!
- پادزهر اسلاپ: سلیقه انسانی و نمونه‌های مرجع باکیفیت:
- هوش مصنوعی در خلاء خلاق نیست؛ اگر شما به او مرجع باکیفیت ندهید، او به حالت میانگین خسته‌کننده بازمی‌گردد.
- گنجینه مراجع طراحی طراحان پیشتاز جهان:
- پلتفرم 21st.dev (https://21st.dev/): پلتفرم مشهور به «npm مهندسان طراحی»؛ مخزنی خیره‌کننده از کامپوننت‌های مدرن متحرک، کارت‌های تعاملی، گردهای شیشه‌ای و دکمه‌های مغناطیسی ساخته‌شده با Tailwind و React که با یک کلیک می‌توان پرامپت یا کد آن‌ها را به ادیتور داد.
- پلتفرم Curated.design (https://curated.design/): کاتالوگی الهام‌بخش از شاهکارهای وب با جلوه شگفت‌انگیز (WOW Factor)، تایپوگرافی‌های جسورانه و چیدمان‌های بدون نقص.
- پلتفرم Mobbin (https://mobbin.com/): برای الگوهای جریان واقعی و پنل‌های تنظیمات استاندارد.
- پینترست (Pinterest): برای بافت‌ها، ترکیب رنگ‌های مینیمال و بروتالیسم مدرن.
- تکنیک سه‌مرحله‌ای پرامپت ضد اسلاپ (Anti-Slop Prompting):
- گام ۱ (انتخاب بنچ‌مارک): یافتن یک کامپوننت چشم‌نواز در 21st.dev یا یک اسکرین‌شات از Curated.design.
- گام ۲ (ارسال تصویر و الگوی مرجع به ایجنت): «این تصویر کارت نمونه را ببین؛ من می‌خواهم کارت‌های نمایش پروژه پورتفولیو دقیقاً با همین کیفیت تمیز، کادر ظریف، فونت خوانا و هاله نوری ملایم ساخته شود.»
- گام ۳ (اعمال چک‌لیست قرمز): ممنوعیت گرادیان‌های بنفش کلیشه‌ای، استفاده از رنگ‌های عمیق اسلیت/زینک، فواصل استاندارد و متن‌های واقعی و انسانی.
- ارتقای ویترین پروژه محوری (پورتفولیوی پویا):
- تبدیل کارت‌های پروژه و هدر معرفی به اثری متمایز، سنگین، باوقار و مدرن که در همان نگاه اول کارفرما را تحت تاثیر قرار دهد.
- کال‌اوت‌های 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/قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:
- تصویر کاور درس:
images/cover.png- موضوع: کاور مدرن با تم تیره که دو نیمه را نشان می‌دهد: سمت چپ یک طرح کدر و کلیشه‌ای بی‌روح هوش مصنوعی و سمت راست درخشش یک طراحی هنرمندانه و اصیل با المان‌های لوکس.
- مقایسه طراحی اسلاپ با طراحی اصیل و مدرن:
images/ai-slop-vs-premium-ui.png- موضوع: اینفوگرافیک مقایسه‌ای: سایت پر از گرادیان بنفش و متون کلیشه‌ای در برابر پورتفولیوی شیک با تایپوگرافی سنجیده و فضای تنفس‌دار.
- گشت‌وگذار در گنجینه 21st.dev:
images/twentyfirst-dev-library.png- موضوع: اسکرین‌شات تمیز از محیط پلتفرم 21st.dev با نمایش کامپوننت‌های خیره‌کننده، کارت‌های متحرک و دکمه کپی کد برای ایجنت.
- ویترین شاهکارهای وب در Curated.design:
images/curated-design-gallery.png- موضوع: نمایی از گالری Curated.design با وب‌سایت‌های دارای عامل شگفتی (WOW Factor) و پالت‌های رنگی جذاب.
- چرخه سه‌مرحله‌ای پرامپت ضد اسلاپ:
images/anti-slop-prompt-cycle.png- موضوع: دیاگرام چرخشی: ۱. انتخاب رفرنس باکیفیت
\rightarrow۲. ارسال تصویر با پرامپت قیددار به ایجنت\rightarrow۳. بررسی چک‌لیست قرمز و خروجی پریمیوم.
- موضوع: دیاگرام چرخشی: ۱. انتخاب رفرنس باکیفیت
۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (README.md)
- تیتر اصلی:
# ایده‌پردازی با AI و پرهیز از AI Slop: چگونه محصولی بسازیم که روح داشته باشد؟ - مقدمه: چرا ۹۰٪ سایت‌های تولیدشده با هوش مصنوعی در سال‌های اخیر شبیه به هم و غیرقابل تحمل شده‌اند؟
- جدول کاور درس
- کالبدشکافی زباله هوش مصنوعی (AI Slop): چرا مدل‌ها به طور پیش‌فرض کارهای پیش‌پاافتاده می‌سازند؟
- نقش سلیقه و متصدی‌گری انسانی (Curation): بازگرداندن خلاقیت به صندلی راننده.
- جعبه‌ابزار الهام طراحان پیشتاز جهان:
- پلتفرم خارق‌العاده 21st.dev: بازار کامپوننت‌های زنده فرانت‌اند.
- گالری لوکس Curated.design: دیدن استانداردهای روز دیزاین وب.
- قدرت Mobbin و Pinterest در کشف ایده‌های نو.
- باکس نکته Quera (
<details class="violet">): استفاده مستقیم از کامپوننت‌های 21st.dev در پرامپت‌های ادیتور Cursor. - فرمول سه‌مرحله‌ای پرامپت‌نویسی ضد اسلاپ:
- انتخاب بنچ‌مارک، تزریق تصویر و اعمال چک‌لیست سلبی.
- ارتقای نهایی هویت بصری پورتفولیوی پویا: تضمین جلوه WOW Factor در صفحه اول کارفرما.
- باکس هشدار Quera (
<details class="red">): ۵ پرچم قرمز (Red Flags) که داد می‌زنند کار شما با پرامپت تنبل ساخته شده است! - جمع‌بندی فصل پنجم: دستیابی به هویت بصری و سیستم طراحی کامل، و آماده‌سازی برای ورود به فاز عملیاتی پیاده‌سازی و کدنویسی در فصل ۶.
۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
- مفهوم AI Slop و ریشه‌های الگوریتمی آن به روشنی تبیین شده باشد.
- مراجع معتبر تاییدشده کاربر (21st.dev, Curated.design, Mobbin, Pinterest) در متن به طور کامل پوشش داده شوند.
- تکنیک سه‌مرحله‌ای استفاده از رفرنس‌های تصویری در پرامپت آموزش داده شود.
- چک‌لیست پیشگیری از کلیشه‌ها و ارتقای پروژه پورتفولیو به سطح پریمیوم لحاظ گردد.