تحديث واجهتك باستخدام مكتبة مكونات حديثة

في الدروس السابقة، تعلمت بالفعل كيفية استخدام أدوات التصميم لرسم الواجهات، واستخدام AI IDE لتحويل التصاميم إلى كود، بل وأكملت مشروع واجهة أمامية كامل. لكنك ربما اكتشفت أيضًا مشكلة: الأزرار والنماذج والنوافذ المنبثقة التي تكتبها من الصفر، رغم أنها تعمل، تشعر دائمًا أن هناك شيئًا ينقصها مقارنة بـ "المنتجات الاحترافية" - الأنماط ليست موحدة بدرجة كافية، تفاصيل التفاعل ليست سلسة بدرجة كافية، والتكيف مع الشاشات المختلفة يمثل صداعًا أيضًا.

هذه هي المشكلة التي تحلها مكتبات المكونات.

مكتبة المكونات هي مجموعة من أجزاء UI المصممة والمطورة مسبقًا. الأزرار ومربعات الإدخال والقوائم المنسدلة ومربعات الحوار والجداول... عناصر الواجهة هذه التي ستستخدمها مرارًا في أي منتج، قامت مكتبة المكونات بإنشائها بالفعل، وتم التحقق منها وتحسينها من قبل عدد كبير من المستخدمين. تحتاج فقط إلى تجميعها معًا مثل لبنات البناء لبناء واجهة احترافية بسرعة.

ما ستتعلمه

1. فهم ما هي مكتبة مكونات الواجهة الأمامية، ولماذا يستخدمها التطوير الحديث تقريبًا
2. التعرف على أربع مكتبات مكونات تمثيلية، وفهم السيناريوهات التي تتميز بها كل منها
3. من خلال ثلاثة سيناريوهات تطبيقية (صفحة هبوط، صفحة منتج، إدارة خلفية)، تعلم استخدام AI IDE + مكتبة المكونات لـ Vibe Coding
4. تعلم قراءة وثائق مكتبة المكونات، والعثور على المكونات المناسبة واستخدامها بشكل صحيح وفقًا للاحتياجات

1. لماذا نحتاج إلى مكتبات المكونات؟

تخيل أنك تقوم بتجديد منزل. يمكنك صنع كرسي من الخشب بنفسك، لكن الممارسة الأكثر شيوعًا هي الذهاب إلى IKEA لشراء واحد - تصميم جميل، جودة مستقرة، تعليمات واضحة، تأخذه إلى المنزل وتجمعه فقط.

مكتبة المكونات هي "IKEA" في تطوير الواجهة الأمامية. ما تقدمه ليس أثاثًا، بل أجزاء واجهة:

الكتابة اليدوية	استخدام مكتبة مكونات
تحتاج إلى معالجة الأنماط والتفاعل والرسوم المتحركة بنفسك	جاهزة للاستخدام، الأنماط والتفاعل محسنة بالفعل
الأزرار في الصفحات المختلفة قد تبدو مختلفة	نمط عالمي موحد، يحافظ على الاتساق تلقائيًا
التكيف مع الهاتف والجهاز اللوحي يتطلب عملًا إضافيًا	معظم مكتبات المكونات تدعم التصميم المتجاوب مدمجًا
سهولة التغاضي عن إمكانية الوصول (Accessibility)	مكتبات المكونات الاحترافية تعالج بالفعل التنقل بلوحة المفاتيح وقارئات الشاشة وغيرها
سرعة التطوير بطيئة	سرعة التطوير سريعة، التركيز على منطق الأعمال

ببساطة: مكتبة المكونات تتيح لك قضاء وقتك في "ماذا تفعل"، بدلاً من "كيف ترسم".

رؤية هي الحجة: نفس المتطلب، الفرق بين استخدام مكتبة مكونات أو عدم استخدامها

الكلام وحده لا يقنع. دعنا نستخدم متطلبًا متطابقًا تقريبًا في Trae، بشكل منفصل دون تحديد وبتحديد مكتبة مكونات، لنرى الفرق في نتائج الإنشاء.

الأمر الأول: بدون استخدام مكتبة مكونات

ساعدني في إنشاء صفحة لوحة بيانات لمساعد كتابة AI، تحتوي على:
- شريط عنوان علوي وزر تصدير
- أربع بطاقات إحصائية تعرض عدد المستخدمين والمستخدمين النشطين وعدد المستندات والإيرادات، مع عرض اتجاهات الصعود والهبوط
- رسم بياني خطي ورسم بياني دائري
- جدول قائمة المستخدمين مع وظيفة ترقيم الصفحات
- شريط تنقل جانبي على اليسار

الأمر الثاني: باستخدام مكتبة مكونات shadcn/ui

ساعدني في إنشاء صفحة لوحة بيانات لمساعد كتابة AI، باستخدام مكتبة مكونات shadcn/ui، تحتوي على:
- شريط عنوان علوي وزر تصدير
- أربع بطاقات إحصائية تعرض عدد المستخدمين والمستخدمين النشطين وعدد المستندات والإيرادات، مع عرض اتجاهات الصعود والهبوط
- رسم بياني خطي ورسم بياني دائري
- جدول قائمة المستخدمين مع وظيفة ترقيم الصفحات
- شريط تنقل جانبي على اليسار

نفس المتطلب، الفرق الوحيد هو إضافة shadcn/ui + Tailwind CSS في بداية الأمر. النتيجة التي ينشئها Trae في التناسق البصري وتفاصيل التفاعل ودرجة التحسين العامة تقع في مستوى مختلف تمامًا. هذا هو "الترقية المجانية" التي تجلبها مكتبة المكونات - تحتاج فقط إلى كتابة اسم مكتبة مكونات إضافي في الأمر.

2. التعرف على أربع مكتبات مكونات أساسية

عدد مكتبات المكونات كبير (للقائمة الكاملة انظر الملحق)، لكنك تحتاج فقط إلى التعرف على هذه المكتبات الأربع الأكثر تمثيلاً أولاً:

مكتبة المكونات	الإطار	تحديد في جملة واحدة	الموقع الرسمي
Ant Design	React	من إنتاج Ant Group، المعيار الفعلي للأنظمة الخلفية المؤسسية، تغطية المكونات واسعة جدًا	ant.design
shadcn/ui	React	لا تثبت حزمة npm، تنسخ الكود مباشرة إلى مشروعك، مبني على Tailwind CSS، أعلى درجة من الحرية في التخصيص	ui.shadcn.com
HeroUI (سابقًا NextUI)	React	الأنماط الافتراضية جميلة، الرسوم المتحركة سلسة، مناسبة لصفحات الهبوط وعروض المنتجات ذات المتطلبات العالية للجودة البصرية	heroui.com
Material UI	React	أقدم مكتبة مكونات React، تنفذ مواصفات Google Material Design، الأنضج بيئيًا	mui.com

مستخدمو Vue لديهم أيضًا خيارات غنية: Element Plus (الأكثر شعبية محليًا)، Ant Design Vue، Naive UI وغيرها، لمزيد من التفاصيل انظر الملحق.

مكتبات المكونات المختلفة تتميز في سيناريوهات مختلفة. بعد ذلك سنأخذك من خلال ثلاثة سيناريوهات تطوير حقيقية لتجربة كيفية استخدام AI IDE + مكتبة المكونات لـ Vibe Coding.

لعرض أساليب وخصائص مكتبات المكونات المختلفة، استخدمنا مكتبات مختلفة عمدًا في كل سيناريو. لكن يرجى ملاحظة: هذا فقط لجعلك ترى حلولاً متعددة، في التطوير الفعلي يمكنك استخدام الأنسب لك فقط. على سبيل المثال، إذا كنت تحب أسلوب shadcn/ui، يمكنك استخدامه لصفحات الهبوط وصفحات المنتجات وإدارة الخلفية بدون مشاكل. اختر ما تعتقد أنه جميل ومريح في الاستخدام أهم من أي شيء آخر.

3. التطبيق الأول: بناء صفحة هبوط منتج باستخدام HeroUI

السيناريو: قمت بإنشاء منتج مساعد كتابة AI و تحتاج إلى صفحة هبوط جميلة لعرض ميزات المنتج وجذب المستخدمين للتسجيل. صفحة الهبوط تحتاج إلى تأثير بصري قوي، رسوم متحركة سلسة، وتبدو جيدة على الهاتف أيضًا.

لماذا اخترنا HeroUI: الأنماط الافتراضية لـ HeroUI جميلة بالفعل، مع رسوم متحركة انتقالية سلسة مدمجة، مناسبة جدًا للصفحات الاستعراضية الموجهة للمستخدم.

3.1 إنشاء المشروع

# إنشاء المشروع باستخدام CLI الرسمي لـ HeroUI
npx create-heroui-app@latest ai-writer-landing
cd ai-writer-landing
npm install

3.2 إنشاء صفحة هبوط باستخدام AI IDE

افتح AI IDE (Cursor، Trae، إلخ)، وأدخل في مربع الحوار:

ساعدني في إنشاء صفحة هبوط لمساعد كتابة AI، باستخدام مكتبة مكونات HeroUI:

**هيكل الصفحة:**
1. شريط تنقل علوي: على اليسار الشعار واسم المنتج، على اليمين ثلاثة روابط "الميزات" و"التسعير" و"حول"، وزر "ابدأ الاستخدام"
2. منطقة الشاشة الأولى: عنوان كبير "اجعل AI شريكك في الكتابة"، عنوان فرعي يقدم قيمة المنتج، زران "تجربة مجانية" و"عرض توضيحي"، وصورة منتج بالأسفل
3. عرض الميزات: ثلاث بطاقات في أعمدة، تقدم ميزات "الإكمال الذكي" و"تعديل الأسلوب" و"الترجمة متعددة اللغات"، كل بطاقة يجب أن تحتوي على أيقونة وعنوان ووصف
4. منطقة التسعير: ثلاث بطاقات تسعير (نسخة مجانية، نسخة احترافية، نسخة فريق)، النسخة الاحترافية يجب إبرازها كنسخة موصى بها
5. دعوة في الأسفل: نص جذاب، مع زر تسجيل
6. تذييل: معلومات حقوق النشر وروابط وسائل التواصل الاجتماعي

**متطلبات التصميم:**
- يجب أن تبدو حديثة واحترافية
- دعم الوضع الداكن
- يجب أن تبدو جيدة على الهاتف أيضًا

3.3 المكونات الرئيسية التي سيستخدمها AI

في الكود الذي ينشئه AI، سترى مكونات HeroUI التالية:

import {
  Navbar, NavbarBrand, NavbarContent, NavbarItem,
  Button,
  Card, CardHeader, CardBody, CardFooter,
  Divider,
  Link,
  Chip
} from '@heroui/react'

دور كل مكون:

المكون	الاستخدام	موضعه في صفحة الهبوط
Navbar	شريط التنقل العلوي	أعلى الصفحة، ثابت
Button	زر، يدعم متغيرات وألوان متعددة	أزرار CTA، أزرار التنقل
Card	حاوية بطاقة	عرض الميزات، بطاقات التسعير
Chip	تسمية صغيرة	علامات "موصى به" و"الأكثر شعبية"
Divider	خط فاصل	فصل بصري بين المناطق

3.4 التحسين التكراري

قد لا تكون راضيًا تمامًا عن الكود الأولي المنشأ، استمر في الحوار مع AI للتعديل:

ساعدني في تحسين صفحة الهبوط:

1. أضف لونًا متدرجًا للعنوان الكبير، من الأزرق إلى البنفسجي
2. بطاقات الميزات يجب أن يكون لها تأثير ارتفاع عند تمرير الماوس
3. بطاقة تسعير النسخة الاحترافية يجب إبرازها، مع إضافة حد وتسمية "الأكثر شعبية"
4. التنقل على الهاتف يجب أن يتحول إلى قائمة هامبرغر (ثلاثة خطوط أفقية)

جوهر Vibe Coding: لا تحتاج إلى تذكر API كل مكون، تحتاج فقط إلى وصف التأثير الذي تريده بلغة طبيعية، وسيجد AI المكون والطريقة المناسبة لك. عندما تواجه شيئًا غير مرضٍ، استمر في الحوار والتكرار.

4. التطبيق الثاني: بناء صفحة منتج باستخدام shadcn/ui

السيناريو: مساعد كتابة AI الخاص بك يحتاج إلى واجهة رئيسية بعد تسجيل دخول المستخدم - على اليسار قائمة المستندات، على اليمين المحرر، وفي الأعلى شريط أدوات. هذه صفحة منتج وظيفية تحتاج إلى UI قابلة للتخصيص بدرجة عالية.

لماذا اخترنا shadcn/ui: shadcn/ui يضع كود المكونات مباشرة في مشروعك، يمكنك تعديل أي تفصيلة كما تشاء. لنمط المنتج الذي يحتاج إلى تخصيص عميق، نموذج "امتلاك الكود" هذا هو الأكثر مرونة.

4.1 إنشاء المشروع

# إنشاء مشروع Next.js
npx create-next-app@latest ai-writer-app --typescript --tailwind --app
cd ai-writer-app

# تهيئة shadcn/ui
npx shadcn@latest init

# إضافة المكونات حسب الحاجة (ليس جميع المكونات مرة واحدة)
npx shadcn@latest add button card input sidebar sheet dialog

ما يميز shadcn/ui: كل مرة add مكون، ينسخ الكود المصدري إلى دليل components/ui/ في مشروعك. يمكنك فتح هذه الملفات مباشرة وتعديل الأنماط والسلوك.

4.2 إنشاء واجهة المنتج باستخدام AI IDE

ساعدني في إنشاء الواجهة الرئيسية لمساعد كتابة AI، باستخدام مكتبة مكونات shadcn/ui:

**التخطيط العام:**
- على اليسار شريط جانبي قابل للطي بعرض حوالي 280px:
  - في الأعلى زر "مستند جديد"
  - بالأسفل قائمة المستندات، كل مستند يعرض العنوان وآخر وقت تعديل
  - النقر بزر الماوس الأيمن على المستند يمكن إعادة تسميته أو حذفه
- على اليمين منطقة التحرير الرئيسية، مقسمة إلى جزأين علوي وسفلي:
  - في الأعلى شريط الأدوات: يمكن تعديل عنوان المستند، عرض عدد الكلمات، زر "إكمال AI"، قائمة منسدلة "تصدير"
  - بالأسفل منطقة التحرير: مربع إدخال نص كبير يملأ المساحة المتبقية

**تفاصيل التفاعل:**
- بعد النقر على "إكمال AI"، يعرض الزر حالة التحميل، ويظهر نص AI المُنشأ في أسفل المحرر (يعرض حرفًا بحرف كآلة كاتبة)
- على الهاتف يتحول الشريط الجانبي إلى درج ينزلق من اليسار
- المستند المحدد حاليًا يجب إبرازه

4.3 المكونات الرئيسية التي سيستخدمها AI

import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Card, CardContent, CardHeader } from '@/components/ui/card'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger
} from '@/components/ui/dropdown-menu'
import {
  Sheet,
  SheetContent,
  SheetTrigger
} from '@/components/ui/sheet'
import {
  Sidebar,
  SidebarContent,
  SidebarHeader
} from '@/components/ui/sidebar'

المكون	الاستخدام	موضعه في صفحة المنتج
Sidebar	شريط جانبي قابل للطي	قائمة المستندات على اليسار
Sheet	درج للأجهزة المحمولة	بديل الشريط الجانبي على الأجهزة المحمولة
DropdownMenu	قائمة منسدلة	زر "تصدير"، قائمة النقر بزر الماوس الأيمن
Dialog	مربع حوار	إعادة التسمية، تأكيد الحذف
Button	زر، يدعم variant و loading	أزرار العمليات المختلفة
Input	مربع إدخال	تعديل عنوان المستند

4.4 تخصيص أنماط المكونات

ميزة shadcn/ui تكمن في أنه يمكنك تعديل الكود المصدري للمكونات مباشرة. على سبيل المثال، إذا كنت تريد جعل حدود الزر أكثر استدارة:

ساعدني في تعديل components/ui/button.tsx،
غيّر الحدود المستديرة الافتراضية لجميع الأزرار من rounded-md إلى rounded-xl،
وأضف تأثير ظل خفيف للنسخة primary

سيقوم AI بتعديل ملف المكون في مشروعك مباشرة، بدلاً من الكتابة فوق أنماط حزمة npm - هذه هي فائدة "امتلاك الكود" في shadcn/ui.

5. التطبيق الثالث: بناء واجهة إدارة خلفية باستخدام Ant Design

السيناريو: بعد إطلاق مساعد كتابة AI الخاص بك، تحتاج إلى لوحة تحكم خلفية لعرض بيانات المستخدمين وإدارة محتوى المستندات ومعالجة الطلبات المدفوعة. جوهر نظام إدارة الخلفية هو عرض البيانات وكفاءة العمليات.

لماذا اخترنا Ant Design: Ant Design لديه أعمق تراكم في مجال الأنظمة الخلفية، المكونات العملية مثل الجداول والنماذج والرسوم البيانية جاهزة للاستخدام، مع عدد كبير من أنماط التفاعل المؤسسية المدمجة (عمليات دفعية، تصفية متقدمة، تصدير بيانات، إلخ).

5.1 إنشاء المشروع

# استخدام سقالة Ant Design Pro (تتضمن التخطيط والتوجيه والصلاحيات)
npx create-umi@latest ai-writer-admin
# اختيار قالب Ant Design Pro
cd ai-writer-admin
npm install

أو البدء من الصفر:

npx create-react-app ai-writer-admin --template typescript
cd ai-writer-admin
npm install antd @ant-design/icons @ant-design/pro-components

5.2 إنشاء لوحة تحكم خلفية باستخدام AI IDE

ساعدني في إنشاء لوحة تحكم خلفية لمساعد كتابة AI، باستخدام مكتبة مكونات Ant Design:

**التخطيط العام:**
- على اليسار شريط القوائم: لوحة البيانات، إدارة المستخدمين، إدارة المستندات، إدارة الطلبات، إعدادات النظام
- في الأعلى عرض مسار التنقل (breadcrumb)

**صفحة إدارة المستخدمين:**
- في الأعلى أربع بطاقات إحصائية: إجمالي المستخدمين، الجدد اليوم، المستخدمين النشطين، المستخدمين المدفوعين
- منطقة البحث والتصفية: البحث باسم المستخدم، اختيار نطاق وقت التسجيل، تصفية حالة المستخدم، مع أزرار "بحث" و"إعادة تعيين"
- جدول المستخدمين:
  - عرض الصورة الرمزية واسم المستخدم والبريد الإلكتروني ووقت التسجيل وخطة الاشتراك (تمييز بألوان مختلفة) والحالة والعمليات
  - عرض 20 عنصرًا لكل صفحة، دعم ترقيم الصفحات
  - يمكن تحديد المستخدمين دفعة واحدة، وتعطيل أو تصدير دفعة
  - عمود العمليات: عرض التفاصيل، تعديل، تعطيل (تأكيد ثانوي قبل التعطيل)
- النقر على "عرض التفاصيل" يفتح درجًا من اليمين يعرض معلومات المستخدم التفصيلية وقائمة آخر المستندات

5.3 المكونات الرئيسية التي سيستخدمها AI

import { PageContainer, ProLayout } from '@ant-design/pro-components'
import { ProTable } from '@ant-design/pro-components'
import { StatisticCard } from '@ant-design/pro-components'
import {
  Button, Tag, Badge, Space, Drawer,
  Popconfirm, message, Modal
} from 'antd'
import {
  UserOutlined, SearchOutlined, ExportOutlined
} from '@ant-design/icons'

المكون	الاستخدام	موضعه في الخلفية
ProLayout	إطار تخطيط الخلفية العام	هيكل الصفحة (القوائم + منطقة المحتوى)
ProTable	جدول متقدم مع بحث وترقيم صفحات وإعدادات أعمدة مدمجة	قائمة المستخدمين، قائمة المستندات، قائمة الطلبات
StatisticCard	بطاقة إحصائيات البيانات	لوحة البيانات، نظرة عامة أعلى الصفحة
Tag / Badge	تسميات الحالة	خطة الاشتراك، حالة المستخدم
Drawer	درج جانبي	تفاصيل المستخدم، نموذج التعديل
Popconfirm	مربع تأكيد منبثق	العمليات الخطيرة مثل الحذف والتعطيل

5.4 الاستمرار في التكرار: إضافة لوحة بيانات

ساعدني في إنشاء صفحة لوحة بيانات:

1. أربع بطاقات إحصائية في الأعلى: إجمالي المستخدمين، إجمالي المستندات، عدد استدعاءات API اليوم، الإيرادات الشهرية، كل بطاقة تعرض القيمة والتغير الدوري (صعودًا أم هبوطًا)
2. رسمان بيانيان في المنتصف:
   - على اليسار: رسم بياني خطي لنمو المستخدمين خلال آخر 7 أيام
   - على اليمين: رسم بياني دائري لتوزيع خطط الاشتراك
3. في الأسفل: جدول سجل آخر العمليات، يعرض الوقت والمستخدم ونوع العملية والتفاصيل

استخدم مكونات Ant Design للتخطيط، يمكن استخدام Ant Design Charts للرسوم البيانية

نصيحة Vibe Coding لإدارة الخلفية: هيكل صفحات الخلفية ثابت نسبيًا (جدول + بحث + نافذة منبثقة)، مناسب جدًا للإنشاء الدفعي بواسطة AI. يمكنك أولاً جعل AI ينشئ صفحة "إدارة المستخدمين" كنموذج، ثم تقول "أشر إلى هيكل صفحة إدارة المستخدمين، ساعدني في إنشاء صفحة إدارة المستندات"، وسيقوم AI بإعادة استخدام نمط التخطيط نفسه.

6. تعلم قراءة الوثائق: "دليل الاستخدام" لمكتبة المكونات

في Vibe Coding، سيكتب AI معظم الكود، لكن عندما تكون نتيجة AI غير صحيحة، أو عندما تريد ضبط سلوك مكون معين، قراءة الوثائق هي أسرع طريقة للحل.

باستخدام Ant Design كمثال، عنوان وثائقه هو: https://ant.design/components/overview-cn

العملية القياسية لقراءة الوثائق:

1. توضيح المتطلب: مثل "أحتاج الجدول ليدعم تحديد الصفوف"
2. البحث في الوثائق: ابحث عن "Table" للدخول إلى صفحة مكون الجدول
3. عرض الأمثلة: كل مكون في الوثائق لديه أمثلة تفاعلية متعددة، ابحث عن مثال "قابل للتحديد"
4. نسخ الكود: انسخ كود المثال إلى مشروعك
5. عرض جدول API: في أسفل الصفحة ابحث عن التكوين الكامل لخاصية rowSelection

يمكنك أيضًا إرسال رابط الوثائق مباشرة إلى AI IDE: "أشر إلى rowSelection API في https://ant.design/components/table-cn، ساعدني في إضافة وظيفة تحديد دفعي لجدول المستخدمين". توفير رابط الوثائق لـ AI سيجعل الكود المُنشأ أكثر دقة.

دليل سريع لعناوين وثائق مكتبات المكونات:

مكتبة المكونات	عنوان الوثائق
Ant Design	https://ant.design/components/overview-cn
shadcn/ui	https://ui.shadcn.com/docs/components
HeroUI	https://heroui.com/docs/components
Material UI	https://mui.com/material-ui/all-components/
Element Plus	https://element-plus.org/zh-CN/component/overview.html

7. الخلاصة

تغطي السيناريوهات التطبيقية الثلاثة أكثر احتياجات تطوير الواجهة الأمامية شيوعًا:

السيناريو	مكتبة المكونات الموصى بها	الخصائص الرئيسية
صفحة الهبوط / صفحة العرض	HeroUI	أنماط افتراضية جميلة، رسوم متحركة سلسة، تأثير بصري قوي
صفحة منتج وظيفية	shadcn/ui	كود قابل للتحكم بالكامل، تخصيص عميق مرن
نظام إدارة الخلفية	Ant Design	مكونات عملية غنية، جداول ونماذج جاهزة للاستخدام

ملخص سير عمل Vibe Coding:

1. اختيار مكتبة المكونات المناسبة وفقًا للسيناريو
2. وصف هيكل الصفحة والتفاعل الذي تريده باستخدام AI IDE
3. ينشئ AI الكود الأولي، وتعاين التأثير
4. الاستمرار في التعديل التكراري بلغة طبيعية
5. عند مواجهة مشاكل تفصيلية، راجع وثائق مكتبة المكونات

تمرين

اختر أيًا من السيناريوهات التالية، واستخدم AI IDE + مكتبة المكونات للإنجاز من الصفر:

1. استخدم HeroUI لإنشاء صفحة هبوط استعراضية لمشروعك السابق (مثل صور هوجورتس)
2. استخدم shadcn/ui لبناء واجهة رئيسية لتطبيق ملاحظات (شريط جانبي + محرر)
3. استخدم Ant Design لبناء لوحة تحكم خلفية بسيطة لإدارة المحتوى (قائمة مقالات + نموذج إنشاء مقال جديد)

---

الملحق: نظرة عامة على المزيد من مكتبات المكونات

بالإضافة إلى المكتبات الأربع الأساسية المقدمة في النص الرئيسي، هناك عدد كبير من مكتبات المكونات الممتازة في بيئة الواجهة الأمامية. فيما يلي قائمة مصنفة حسب الإطار لتسهيل الاختيار وفقًا لمتطلبات المشروع.

بيئة Vue

مكتبة المكونات	النجوم	مقدمة	سيناريوهات التطبيق
Element Plus	~27k	مكتبة مكونات Vue 3 مؤسسية من فريق Eleme، الأكثر استخدامًا محليًا، بيئة صينية ممتازة	أنظمة إدارة الخلفية
Vuetify	~41k	مكتبة مكونات Vue الأكثر شعبية لـ Material Design، 80+ مكون، وثائق شاملة	مشاريع بأسلوب تصميم Google
Ant Design Vue	~21k	مكتبة مكونات Vue 3 بناءً على نظام تصميم Ant، معايير تصميم موحدة	أنظمة خلفية مؤسسية
Naive UI	~18k	مكتوبة بـ TypeScript، تخصيص السمات قوي للغاية، لا تعتمد على معالج CSS مسبق	مشاريع ذات متطلبات تصميم فريدة
Quasar	~27k	كود واحد لبناء تطبيقات SPA و SSR و PWA والأجهزة المحمولة وسطح المكتب	مشاريع متعددة المنصات
Vant	~24k	مكتبة مكونات خفيفة للأجهزة المحمولة من فريق Youzan، تغطي الاحتياجات الشائعة للتجارة الإلكترونية	صفحات H5 للأجهزة المحمولة
PrimeVue	~14k	90+ مكون، تدعم سمات متعددة (Material، Bootstrap، إلخ)	تحتاج مكونات غنية وسمات متعددة
Arco Design Vue	~3k	من إنتاج ByteDance، جودة مكونات عالية، وضع داكن مدمج	منتجات خلفية
TDesign Vue Next	~2k	من إنتاج Tencent، لغة تصميم موحدة، تغطي السيناريوهات الشائعة لسطح المكتب	بيئة Tencent أو المشاريع المؤسسية

بيئة React

مكتبة المكونات	النجوم	مقدمة	سيناريوهات التطبيق
Material UI (MUI)	~95k	التنفيذ الأقدم لمواصفات Google Material Design، المكونات الأشمل، البيئة الأكثر نضجًا	بناء تطبيقات مؤسسية بسرعة
Ant Design	~94k	من إنتاج Ant Group، مكونات عملية عالية الجودة مدمجة، موقع مهيمن في مجتمع المطورين الصينيين	أنظمة خلفية مؤسسية
shadcn/ui	~83k	يُنسخ الكود إلى المشروع بدلاً من تثبيت npm، مبني على Radix UI + Tailwind CSS، قابل للتحكم بالكامل	مشاريع تحتاج تخصيصًا عاليًا
Chakra UI	~39k	تركز على تجربة المطور، API بسيط، دعم إمكانية الوصول مدمج	تطوير نماذج أولية سريع
Mantine	~28k	100+ مكون و 50+ hooks، تشمل مكونات متقدمة مثل منتقي التاريخ ومحرر النصوص الغني	تحتاج حل شامل جاهز للاستخدام
Headless UI	~27k	مكتبة مكونات بدون أنماط من Tailwind Labs الرسمية، تدعم React و Vue في نفس الوقت	استخدام مع Tailwind CSS
HeroUI	~24k	مبني على Tailwind CSS + React Aria، أنماط افتراضية جميلة، رسوم متحركة سلسة	مشاريس تسعى للجودة البصرية
Radix UI	~17k	مكتبة بدائية لمكونات بدون أنماط، تركز على إمكانية الوصول وسلوك المكونات، الأساس لـ shadcn/ui	بناء نظام تصميم مخصص

بيئة shadcn/ui الموسعة

بالإضافة إلى مكتبات المكونات العامة المذكورة أعلاه، ظهرت عدد كبير من المكتبات الموسعة بناءً على فلسفة shadcn/ui، توفر خيارات متمايزة لسيناريوهات محددة. هذه المكتبات الموسعة تعتمد أيضًا نموذج "نسخ الكود إلى المشروع"، مما يمنح المطورين تحكمًا كاملاً في الكود المصدري.

مكتبة المكونات	مقدمة	سيناريوهات التطبيق
Aceternity UI	200+ مكون بجودة الإنتاج، تركز على مكونات بصرية مميزة مثل البطاقات المتوهجة والتدرجات النصية والكرة الأرضية ثلاثية الأبعاد	صفحات هبوط عالية الجودة، منتجات SaaS
Tailark UI	مجموعة كتل مكونات لمواقع التسويق، عرض المنتجات وشهادات العملاء وأزرار CTA وغيرها من الوحدات عالية التكرار	صفحات هبوط تسويقية، مواقع منتجات رسمية
UI Tripled	مكونات تفاعلية ديناميكية بناءً على Framer Motion، رسوم متحركة للنوافذ المنبثقة والتنقل والبطاقات	أدوات إبداعية، معرض أعمال شخصي
Neobrutalism UI	أسلوب الوحشية الجديدة، حدود سميكة، تباين عالي، ألوان زاهية	مواقع علامات تجارية شخصية، مشاريع إبداعية
REUI	967+ نمط تجميع مكونات لسيناريوهات أعمال حقيقية	خلفية مؤسسية، نماذج معقدة
Cult UI	تحسين أدق للتفاعل/المرئيات، مكونات مركبة مثل جداول البيانات ولوحات التصفية	مشاريع تجارية عالية الجودة
Kibo UI	مكونات أعمال متقدمة، منتقي ألوان، محرر نصوص غني، رفع ملفات	لوحات تحكم خلفية، منتجات أدوات
Kokonut UI	100+ مكون + 7+ قوالب كاملة، أسلوب نظيف وبسيط	مواقع SaaS الرسمية، مدونات، تجارة إلكترونية
Commerce UI	مخصصة لسيناريوهات التجارة الإلكترونية، بطاقات المنتجات، سلة التسوق، نماذج الدفع	منصات التجارة الإلكترونية
shadcnblocks	1373 كتلة UI + 13 قالب كامل، أكثر الموارد شمولاً	جميع السيناريوهات
Shoogle	منصة تجميع وبحث في بيئة shadcn/ui	البحث السريع عن الموارد
Discover All Shadcn	دليل موارد تجميعي	البحث السريع عن الموارد

لماذا تختار امتدادات shadcn/ui؟ هذه الامتدادات ترث فلسفة shadcn/ui "ملكية الكود"، مع تخصيص عميق لسيناريوهات محددة. في عصر Vibe Coding، تتيح لك العثور بسرعة على مكونات تلبي متطلبات التصميم، والخروج من التجانس لمكتبات UI السائدة، وإنشاء منتجات أكثر تمايزًا.