الهدف
بعد هالدرس تقدر تعرّف الـ vibe coding بجملة وحدة، تقارن 5 أدوات (Lovable، Bolt، Replit، v0، Cursor) في جدول، وتقرر أيهم يناسب مشروعك.
ليش هذا الحين؟
هذا أول درس في محور أدوات الذكاء الاصطناعي. قبل ما تبني، لازم تفهم شنو هي الأدوات اللي بتستخدمها وليش تغيّر كل شي. الـ vibe coding مو مجرد trend — هو تحوّل في من يقدر يبني software.
الفكرة
Vibe coding = مصطلح اخترعه Andrej Karpathy في فبراير 2025. التعريف: تصف اللي تبيه بلغة طبيعية، والـ AI يكتب الكود.
الفرق عن الـ AI-assisted coding العادي:
- AI-assisted: أنت تكتب الكود، والـ AI يساعدك (Copilot، Cursor autocomplete)
- Vibe coding: أنت توجّه بالكلام، والـ AI يكتب كل شي
5 أدوات رئيسية:
| الأداة | الـ Use Case | مناسب لـ |
|---|---|---|
| Lovable | Full web app من prompt | المبتدئين |
| Bolt.new | Full-stack + DB | اللي يبي backend |
| Replit | Browser IDE + AI | بدون تنصيب محلي |
| v0 | React components بس | الـ UI المعزولة |
| Cursor | VS Code + AI | الـ developers |
سوّها
الخطوة الأولى: جرّب 5 أدوات (30 دقيقة)
ترى ما تحتاج تسجّل في كل واحدة — بس شوف الـ homepage وجرّب الـ free tier:
Lovable (lovable.dev): ادخل، اكتب prompt بسيط: "صفحة landing لتطبيق يتتبع العادات اليومية"، وشوف الناتج.
Bolt.new (bolt.new): نفس الـ prompt. بس هالمرة شوف كيف يبني frontend + backend معا.
Replit (replit.com): اختار Node.js template، افتح الـ AI Assistant في الـ sidebar، واطلب منه يكتب Express server بسيط.
v0 (v0.dev): اطلب component محدد: "pricing section بـ 3 plans (Free، Pro $9، Team $29)"
Cursor (cursor.sh): نزّله، افتح أي project، جرّب Cmd+K على function موجودة وشوف كيف يقترح تعديلات.
الخطوة الثانية: سوّ جدول مقارنة
افتح ملف compare.md وعبّي الجدول:
| الأداة | UX | جودة الـ Output | الـ Free tier | Lock-in | سهولة |
|--------|----|----|---|---|---|
| Lovable | | | | | |
| Bolt | | | | | |
| Replit | | | | | |
| v0 | | | | | |
| Cursor | | | | | |
الحين عبّيه بناء على اللي جربته. ترى الجواب يختلف من شخص لثاني حسب خلفيتك.
الخطوة الثالثة: اختار أداة واحدة للبداية
مو لازم تجرب الكل في نفس الوقت. اختار بناء على:
- مبتدئ كامل: ابدأ بـ Lovable — أسهل interface وأقل تقنية
- عندك خلفية web: جرّب Bolt.new — يبني full stack
- تبي تكود بعدين: ابدأ بـ Cursor — يعلّمك تشتغل مع AI وأنت تفهم الكود
ولا يهمك، الاختيار مو نهائي. تقدر تغيّر بعدين.
الخطوة الرابعة: افهم الـ trade-offs
Prototype سريع (< ساعة): Lovable ✓
Full-stack + real DB: Bolt.new ✓
بدون تنصيب على جهازك: Replit ✓
UI component معزول: v0 ✓
Long-term project جدي: Cursor ✓
كل أداة ممتازة في مكانها — المشكلة تجي لما تستخدم أداة خارج نطاقها.
الخطوة الخامسة: فهم الـ limitations
المفروض تعرف هالحقائق من البداية:
- الكود الناتج مو دايما production-ready
- الـ AI يغلط — خصوصا في business logic معقد
- بعض الأدوات تحتفظ بالكود في منصتها (lock-in) وبعضها يصدّر ZIP
- Lovable و Bolt يصدّرون كود كامل تقدر تشتغل عليه بعدين
تأكّد
- عندك جدول مقارنة مكتوب ✓
- جربت كل الـ 5 أدوات (ولو 5 دقائق لكل وحدة) ✓
- اخترت أداة واحدة للبداية ✓
إذا خرب شي
"الأداة ما فهمت promptي" — ترى الـ prompt الغامض يطلع ناتج غامض. خلك محدد: "صفحة landing لتطبيق عادات، باللون الأخضر، بـ CTA button يقول 'ابدأ مجانا'"
"الـ output رديء" — عادي، هذا طبيعي في أول مرة. iterate: أضف تعديلات محددة بدل ما تعيد من الصفر.
"ما أعرف أختار" — الحين اختار Lovable. تقدر تغيّر باجر.
شنو بعد؟
الدرس الجاي: Lovable بعمق — من أول prompt لـ app كامل بـ multi-page و design system.
النقاشات (0)
سجّل دخول للمشاركة
كون أول واحد يبدأ النقاش.