vibe-coding-college-specs/chapters/05-design-and-ux/07-lesson-design-systems/spec.md

مشخصات درس‌نامه: سیستم طراحی (Design Systems & Component Ecosystems)

• شناسه در سیلابس: L5.8
• فصل: فصل ۵: طراحی تجربه و هویت محصول (Ch 5)
• نوع محتوا: 📘 درس‌نامه متنی
• زمان تقریبی مطالعه: ۱۵ دقیقه
• پیش‌نیازهای مستقیم: L5.7 (کامپوننت‌ها، وضعیت‌ها و انیمیشن)

---

۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy)

دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند:

• درک کند (Understand): سیستم طراحی (Design System) چیست و چرا بدون آن، یک پروژه بزرگ ساخته‌شده با هوش مصنوعی تدریجاً به یک «هیولای فرانکنشتاین» با ده‌ها رنگ و دکمه ناهماهنگ تبدیل می‌شود.
• تحلیل/ارزیابی کند (Evaluate): سیر تحول کتابخانه‌های رابط کاربری از نسل بوت‌استرپ (Bootstrap) و متریال یو‌آی (Material UI) تا پارادایم انقلابی shadcn/ui و Tailwind (مالکیت کامل کدها در پروژه) را مقایسه کند.
• به‌کار ببندد (Apply): معماری توکن‌های طراحی (Design Tokens) را بر اساس استانداردهای Aura Design Systems (https://www.aura.build/design-systems) برای استخراج متغیرهای تم تیره و روشن پیاده‌سازی کند.
• به‌کار ببندد (Apply): سند مشخصات طراحی مارک‌داون اختصاصی design.md (بر پایه https://getdesign.md/design-md) را در ریشه پروژه پورتفولیو قرار دهد تا هوش مصنوعی را مجبور به استفاده از توکن‌های از پیش‌تعیین‌شده نماید.

---

۲. محدوده و مرزهای محتوا (Scope & Boundaries)

آنچه باید پوشش داده شود (In-Scope):

1. سندرم هیولای فرانکنشتاین در وایب کدینگ:
   • وقتی با هوش مصنوعی چند صفحه مختلف می‌سازید، در صفحه اول دکمه آبی و گرد است، در صفحه دوم بنفش و تیز، و در صفحه سوم خاکستری!
   • سیستم طراحی منبع واحد حقیقت بصری است که جلوی این چندپارگی را می‌گیرد.
2. سیر تحول کتابخانه‌های کامپوننت وب:
   • نسل اول (بوت‌استرپ - Bootstrap): کلاس‌های سنگین یکپارچه با ظاهر یکنواخت و قدیمی سال ۲۰۱۲.
   • نسل دوم (Material UI و کتابخانه‌های پکیجی): کامپوننت‌های آماده کامل در قالب پکیج‌های حجیم npm که تغییر ظاهر آن‌ها طاقت‌فرسا و قفل‌شده بود.
   • نسل سوم و حاکم فعلی (shadcn/ui + Tailwind CSS): کامپوننت جعبه سیاه نیست؛ کدهای تک‌تک اجزا (Button, Card, Modal, Input) مستقیماً درون پوشه components/ui/ پروژه شما کپی می‌شوند و شما و ایجنت هوش مصنوعی مالک ۱۰۰٪ آن‌ها هستید.
3. معماری توکن‌های طراحی با الهام از Aura (aura.build/design-systems):
   • جریان تبدیل توکن‌ها:
     • متغیرهای ریشه CSS در فایل سراسری (--background, --foreground, --primary, --card, --radius).
     • نگاشت متغیرها به کلاس‌های کلاسیک Tailwind (bg-background text-foreground border-border).
     • استفاده در کامپوننت‌ها به طوری که با یک سوییچ تم، تمام رنگ‌های کل سایت همزمان تغییر کنند.
4. تدوین فایل design.md برای هوش مصنوعی (getdesign.md/design-md):
   • ساخت فایلی سبک در ریشه پروژه که راهنمای هوش مصنوعی باشد:
     • پالت رنگی مجاز، فواصل مجاز (گرید ۸ پیکسلی)، فونت مجاز (وزیرمتن و اینتر) و سبک کامپوننت‌ها.
     • ارجاع به @design.md در پرامپت‌های ادیتور Cursor و جلوگیری از اختراع کدهای سلیقه‌ای تصادفی نظیر p-[17px] یا bg-[#2a4d69].
5. سیستم کامپوننت‌های پروژه محوری (پورتفولیوی پویا):
   • گونه‌های استاندارد دکمه (Button Variants: پیش‌فرض، ثانویه، خط‌دور، شبحی).
   • کارت استاندارد پروژه با کادر شیشه‌ای و شعاع گردی ۱۲ پیکسلی (rounded-xl).
6. کال‌اوت‌های Quera:
   • <details class="violet">: چرا مدل shadcn/ui به پرطرفدارترین رویکرد در دنیای ایجنت‌های مدرن تبدیل شد؟
   • <details class="green">: فایل design.md؛ بیمه‌نامه یکپارچگی ظاهری پروژه شما در برابر شیطنت‌های مدل‌های زبانی.

آنچه نباید وارد آن شویم (Out-of-Scope):

• نصب فنی دستورات CLI شادسی‌ان (در فصل ۶ به صورت عملی در کدبیس اجرا خواهد شد).
• توسعه پکیج‌های سازمانی منتشرشونده در رجیستری npm.

---

۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms)

اصطلاح انگلیسی	معادل فارسی مصوب	توضیح یک‌خطی ساده
Design System	سیستم طراحی	مجموعه یکپارچه‌ای از قوانین، توکن‌ها و کامپوننت‌های قابل‌استفاده مجدد برای ساخت رابط کاربری
shadcn/ui	شادسی‌ان یو‌آی	مجموعه کامپوننت‌های مدرن متن‌باز که کدهای آن مستقیماً در پوشه پروژه شما کپی و سفارشی‌سازی می‌شود
Design Tokens	توکن‌های طراحی	متغیرهای استاندارد مرکزی برای مقادیر رنگ، فاصله، شعاع و سایه‌ها در سراسر اپلیکیشن
design.md	سند مشخصات طراحی	فایل مارک‌داون راهنما برای ایجنت‌های هوش مصنوعی جهت رعایت خطوط قرمز طراحی سیستم
Component Variants	گونه‌های کامپوننت	حالت‌ها و نسخه‌های مختلف ظاهری یک جزء (مانند دکمه اصلی، دکمه حاشیه‌دار، دکمه خطر)

---

۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders)

راهنمای ایجنت نویسنده: تمام تصاویر باید در پوشهٔ images/ قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:

1. تصویر کاور درس: images/cover.png
   • موضوع: کاور مدرن با تم تیره و یک پالت سازمان‌یافته سه‌بعدی از کامپوننت‌های شیشه‌ای منظم، دکمه‌ها، چیپ‌ها و سوییچ‌های هماهنگ سیستم طراحی.
2. سندرم هیولای فرانکنشتاین در برابر سیستم طراحی: images/frankenstein-vs-design-system.png
   • موضوع: تصویر مقایسه‌ای: سمت چپ دکمه‌ها و کادرهای نامتقارن و ناموزون در برابر سمت راست مجموعه یکدست، هارمونیک و چشم‌نواز.
3. خط زمانی تحول کتابخانه‌های فرانت‌اند: images/ui-libraries-evolution.png
   • موضوع: اینفوگرافیک تاریخی: بوت‌استرپ ۲۰۱۲ \rightarrow متریال یو‌آی ۲۰۱۸ \rightarrow انقلاب شادسی‌ان و تیلویند در عصر هوش مصنوعی.
4. پایپ‌لاین توکن‌ها در Aura Design Systems: images/design-tokens-pipeline.png
   • موضوع: فلوچارت اتصال: توکن‌های متغیر CSS در فایل سراسری \rightarrow کلاس‌های تیلویند \rightarrow خروجی یکپارچه کامپوننت‌ها.
5. نمونه فایل design.md در ریشه پروژه: images/design-md-in-editor.png
   • موضوع: اسکرین‌شات تمیز از فایل مارک‌داون راهنمای طراحی باز شده در ادیتور در حال هدایت ایجنت هوش مصنوعی.

---

۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (README.md)

1. تیتر اصلی: # سیستم طراحی: پایان دوران هیولای فرانکنشتاین در رابط کاربری
2. مقدمه: چرا سایت‌های ساخته‌شده با هوش مصنوعی بعد از چند روز شبیه به چهل‌تکه می‌شوند؟
3. جدول کاور درس
4. سیستم طراحی چیست و چه مسائلی را حل می‌کند؟: خلق زبان بصری واحد و ابدی.
5. سیر تحول کتابخانه‌های فرانت‌اند (از Bootstrap تا shadcn/ui):
   • چرا دیگر کامپوننت‌های پکیج بسته npm محبوب نیستند؟
   • راز آزادی عمل با کپی کدهای کامپوننت در پوشه پروژه.
6. باکس نکته Quera (<details class="violet">): فلسفه بنیادین مالکیت کد در معماری shadcn/ui.
7. توکن‌های طراحی در Aura (aura.build/design-systems):
   • استخراج پالت‌های متغیر معنایی و مدیریت تم تیره.
8. سند مشخصات طراحی design.md (getdesign.md/design-md):
   • چگونه سلیقه هوش مصنوعی را با یک فایل مارک‌داون مهار کنیم؟
   • درج قوانین تایپوگرافی، فواصل گرید و گونه‌های دکمه.
9. سیستم طراحی اختصاصی پورتفولیوی پویا: کالبدشکافی گونه‌های دکمه و کارت‌ها.
10. باکس آرامش‌بخش Quera (<details class="green">): بیمه‌نامه هماهنگی پروژه با دستور @design.md.
11. جمع‌بندی درس‌نامه: مجهز شدن به سیستم طراحی و ورود به درس نهایی فصل: مبارزه با زباله هوش مصنوعی (AI Slop).

---

۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)

• ضرورت سیستم طراحی در جلوگیری از تولید رابط‌های کاربری چندتکه تبیین شده باشد.
• مقایسه تحلیلی نسل‌های کامپوننت (Bootstrap, Material UI, shadcn/ui) ارائه گردد.
• مرجع Aura و معماری توکن‌های معنایی رنگ و فواصل در متن شرح داده شود.
• مفهوم و کاربرد فایل design.md برای هدایت ایجنت‌های هوش مصنوعی مستند شود.