105 lines
11 KiB
Markdown
105 lines
11 KiB
Markdown
# مشخصات درس‌نامه: سیستم طراحی (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` برای هدایت ایجنت‌های هوش مصنوعی مستند شود.
|