انتقل للمحتوى
بيت الذكاء الاصطناعي العربي مجتمع • تعلّم • أدوات • فرص
آخر الأخبار ابدأ مجانًا

في زيرو (v0.dev) هو أداة ثورية لتوليد واجهات المستخدم (UI/UX) تم تطويرها بواسطة شركة Vercel.

جرّب الأداة
السعر
—
دعم العربي
غير مقيّم بعد
الأفضل لـ
واجهات الويب

إيه هي v0؟

في زيرو (v0.dev) هو أداة ثورية لتوليد واجهات المستخدم (UI/UX) تم تطويرها بواسطة شركة Vercel. تعتمد الأداة على الذكاء الاصطناعي لتحويل الأوصاف النصية إلى واجهات ويب تفاعلية وجميلة ومكتوبة بأكواد حقيقية (React و Tailwind CSS)، مما يسمح بإنشاء تصاميم مواقع الويب في ثوانٍ.

مين بيستخدمها؟

مطورو الواجهات الأمامية (Frontend Developers)لتسريع كتابة الأكواد الخاصة بالعناصر وتجاوز مرحلة التصميم المبدئي.
مصممو UI/UXلتوليد أفكار ونماذج أولية (Prototypes) سريعة ومشاركتها مع العملاء قبل البدء بالتصميم اليدوي.
رواد الأعمال والمؤسسونلإنشاء صفحات هبوط (Landing Pages) أو واجهات لتطبيقاتهم بسرعة لاختبار السوق.

الميزات الأساسية

التوليد من النص (Text to UI)اكتب وصفاً (مثال: 'بطاقة تسعير لثلاث باقات') وسيقوم ببناء الواجهة فورا.
دعم الأكواد الجاهزة للإنتاجيولد أكواداً نظيفة وعصرية باستخدام مكتبات حديثة (React, Tailwind, Shadcn UI).
التطوير التكراري (Iterative Design)يمكنك النقر على أي جزء من التصميم وطلب تعديله (مثال: 'اجعل هذا الزر أحمر').
النسخ المباشريمكنك نسخ الكود البرمجي المولد ولصقه مباشرة في مشروعك (VS Code أو Cursor).

هتستخدمها في إيه؟

  1. بناء لوحة تحكم (Dashboard) معقدة

    الطلب: 'أنشئ لوحة تحكم لموقع تجارة إلكترونية تحتوي على رسم بياني للمبيعات وجدول لآخر الطلبات القادمة'. النتيجة: واجهة مبنية بالكامل.

  2. إنشاء نماذج تسجيل دخول تفاعلية

    طلب نموذج تسجيل الدخول يدعم 'التسجيل بواسطة جوجل' والوضع الليلي (Dark Mode).

  3. تصاميم صفحات الهبوط (Landing Pages)

    بناء قسم (Hero Section) مع عنوان كبير وصورة وزري استدعاء (Call to Action).

أمثلة لسير العمل

النمذجة السريعة
  1. اكتب الفكرة في v0
  2. اختر أفضل تصميم من الـ 3 مقترحات
  3. اطلب تعديلات في الشات الجانبي
  4. انسخ కود الـ React لمشروعك المحلي لتنفيذه.

الإيجابيات

  • يوفر ساعات وأياماً من تصميم وكتابة أكواد الـ CSS و HTML المعقدة.
  • التصاميم المولدة عصرية جداً ومتجاوبة (Responsive) بشكل تلقائي وتناسب الهواتف الذكية.
  • تكامل مذهل مع بيئة عمل React (المفضلة لأغلب المطورين اليوم).

السلبيات

  • ينتج الواجهة (الشكل الخارجي) فقط، ولا يبرمج 'المنطق الخلفي' (Backend) أو قواعد البيانات.
  • مقيد بالأنماط والمكتبات التي دُرب عليها (Tailwind و React/HTML بشكل أساسي).
  • المشاريع المعقدة جداً التي تتطلب ترابطاً بين عشرات الصفحات يصعب بناؤها كلياً به.

إزاي تستخدم v0 صح؟

  1. الدخول للموقع افتح v0.dev وسجل الدخول بحساب Vercel أو Github.
  2. كتابة الوصف (Prompt) في صندوق البحث، اكتب بالتفصيل ما تريد تصميمه.
  3. الانتظار والاختيار سيبدأ النظام ببناء الواجهة أمام عينيك، وسيعرض لك نسخاً لتختار الأفضل.
  4. التعديل (Refine) استخدم صندوق المحادثة السفلي لتطلب تغيير الألوان، أو إضافة قسم جديد.
  5. استخراج الكود (Export) اضغط على زر (Code) لترى الكود البرمجي، وقم بنسخه واستخدامه في تطبيقك.

اختبار العربية

لم نختبر هذه الأداة مع العربية بعد. التقدير الظاهر أعلاه رأي المحرر، وليس نتيجة اختبار.

إمتى تفكر في أداة تانية؟

  • إذا كنت تريد برمجة تطبيق كامل (واجهات + منطق برمجي وقاعدة بيانات) عن طريق الدردشة، فكر في (Lovable أو Bolt.new أو Cursor).
  • إذا كنت مصمماً تبحث عن أداة تصميم تعتمد على الطبقات والرسم اليدوي الدقيق، استخدم (Figma).

أسئلة شائعة

هل يدعم اللغات والاتجاه من اليمين لليسار (RTL)؟

يمكنك أن تطلب منه في الـ Prompt أن 'يجعل الواجهة تدعم اللغة العربية والـ RTL'، وسيقوم بإضافة أكواد CSS المناسبة لدعم ذلك.

هل الكود المولد آمن ويمكن استخدامه تجارياً؟

نعم، الكود ملك لك وهو آمن ومبني على مكتبات مفتوحة المصدر (Open-source) ويمكنك استخدامه في مشاريعك التجارية.

أسئلة عن الأداة

اسأل عن الأداة

لا توجد أسئلة عن هذه الأداة بعد. اسأل الأعضاء عن تجربتهم معها.

شارك: شارك عبر واتساب شارك عبر تليجرام شارك عبر لينكدإن