كيفية استخدام v0 من Vercel لبناء واجهات المستخدم

v0 هي أداة ذكية من Vercel تولد واجهات المستخدم تلقائياً باستخدام React و Tailwind CSS. تمكنك من إنشاء مكونات جاهزة للاستخدام بمجرد وصف ما تريده بالكلمات.

1. سجل الدخول إلى منصة v0. انتقل إلى v0.dev واضغط على Sign In. سجل الدخول باستخدام حساب GitHub أو Google الخاص بك. ستحتاج إلى تأكيد بريدك الإلكتروني إذا كانت هذه أول مرة تستخدم فيها الخدمة.
2. ابدأ محادثة جديدة. اضغط على زر New في الشريط الجانبي الأيسر. ستظهر لك نافذة محادثة فارغة مع مربع نص في الأسفل. هذا المكان حيث ستكتب وصفك للمكون الذي تريد إنشاؤه.
3. اكتب وصفاً دقيقاً للمكون المطلوب. اكتب وصفاً مفصلاً بالعربية أو الإنجليزية للمكون الذي تريده. مثال: 'أريد صفحة تسجيل دخول بحقول البريد الإلكتروني وكلمة المرور وزر تسجيل دخول مع تصميم عصري'. كن محدداً في الألوان والتخطيط والوظائف المطلوبة.
4. راجع الكود المولد. ستعرض v0 ثلاثة تصميمات مختلفة للمكون. اختر التصميم الذي يعجبك واضغط على Copy Code لنسخ كود React. يمكنك أيضاً الضغط على View Code لرؤية الكود كاملاً قبل النسخ.
5. عدّل على التصميم إذا لزم الأمر. إذا لم يكن التصميم مطابقاً تماماً لما تريد، اكتب رسالة متابعة تطلب التعديل. مثال: 'اجعل الزر أكبر واستخدم لون أخضر بدلاً من الأزرق'. ستولد v0 نسخة محدّثة فوراً.
6. ادمج الكود في مشروعك. انسخ الكود المولد والصقه في ملف مكون جديد في مشروع React الخاص بك. تأكد من تثبيت المكتبات المطلوبة مثل Tailwind CSS و Lucide React إذا كانت غير موجودة في مشروعك.
7. احفظ المحادثة للمراجعة المستقبلية. اضغط على أيقونة الإشارة المرجعية بجانب اسم المحادثة لحفظها في قائمة المفضلة. يمكنك أيضاً إعادة تسمية المحادثة بضغطة على القلم بجانب الاسم لتسهيل العثور عليها لاحقاً.