تخطَّ إلى المحتوى

v0 و Cursor: UI Generation والـ AI Editor

الدرس 4 من 55

الهدف

بعد هالدرس تقدر تولّد UI components بـ v0 وتدمجها في Next.js، وتستخدم Cursor بـ 3 modes لتعديل كود موجود بدون ما تكتب كل شي من الصفر.

ليش هذا الحين؟

Lovable و Bolt ممتازة للبداية. بس لما عندك project قائم وتبي تضيف component احترافية أو تعدّل كود موجود — تحتاج v0 و Cursor. هذا هو الـ workflow الاحترافي للـ AI builders.

الفكرة

v0 by Vercel:

  • يولّد React + Tailwind + shadcn/ui components
  • ما يبني app كامل — بس components معزولة
  • الناتج جاهز للنسخ في أي Next.js project
  • مجاني للاستخدام الأساسي

Cursor:

  • VS Code + AI في IDE واحدة
  • 3 modes:
    • Cmd+K: تعديل inline لـ selection محدد
    • Cmd+L: chat عن ملف أو codebase
    • Cmd+I (Composer): تعديل multi-file في مرة وحدة

محتاج مساعدة؟ راسلنا على mj@shakesbeard.net