الهدف
بعد هالدرس تقدر تبني design system بسيط يغطي الألوان والمسافات والـ typography، وتضيف مكوّنات UI جاهزة من shadcn/ui — وكل الـ app يبدو consistent من أول يوم.
ليش هذا الحين؟
بنيت الـ scaffold — الحين وقت تحدد "كيف يبدو" التطبيق قبل ما تبني أي page. لو ما عندك design system، كل page تبنيها راح تختلف عن الثانية: لون هني، margin هناك، font مختلف في كل مكان. الـ design system يوفر عليك ساعات من التصليح بعدين ويعطي التطبيق احترافية من اليوم الأول.
الفكرة
الـ design system مو شي معقد — هو مجموعة قرارات تكتبها مرة وحدة وتنطبق في كل مكان.
الـ design tokens:
قيم CSS variables تحدد ألوانك ومسافاتك. بدل ما تكتب #3b82f6 في كل مكان، تكتب var(--primary) — ولو غيرت اللون، يتغير في كل التطبيق مرة وحدة.
color → CSS variable → Tailwind class → component
Tailwind + CSS variables:
Tailwind يدعم CSS variables مباشرة. تعرّف اللون في globals.css، بعدين تقول لـ Tailwind عنه في tailwind.config.ts، وبعدها تستخدمه كـ class عادية: bg-primary, text-foreground.
shadcn/ui:
مو library عادية — هو مجموعة components جاهزة تنزّلها داخل مشروعك وتملكها. مو npm install وخلاص — الكود يصير ملكك وتقدر تعدله. يستخدم Tailwind + Radix UI تحت الغطاء.
الـ components الأساسية اللي نحتاجها:
Button— في كل مكانCard— لعرض المحتوىInput+Form— للـ formsDialog— للـ modals
الـ font:
الـ font = شخصية التطبيق. Next.js يدعم Google Fonts بدون أي overhead — next/font/google يحمّل الـ font محليا.