vibe coding مع Claude: محادثة Claude وClaude Code والبناء من Claude

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

يغطي هذا الدليل الثلاثة، مع طلبات وحدود كل منها. وللفكرة وراء كل ذلك راجع ما هو vibe coding.

الخيار 1: محادثة Claude للأدوات الصغيرة

في تطبيق Claude العادي يمكنك طلب شيء تفاعلي فيكتبه Claude ككود يعمل بجانب المحادثة: حاسبة، أو تدريب بطاقات تعليمية، أو لعبة صغيرة، أو مخطط من بيانات تلصقها. وتغيّره بالرد.

الطلب الجيد هنا قائم بذاته:

اصنع أداة تفاعلية ألصق فيها قائمة مصروفات (واحد في كل سطر، "المبلغ، الفئة") فتعرض مخططًا دائريًا حسب الفئة وإجماليًا. أضف قائمة نموذجية لتعمل فورًا.

ممتاز لـ: الأدوات السريعة من صفحة واحدة التي تستخدمها بنفسك أو تشاركها كرابط، والتعلّم، لأنك تستطيع أن تطلب من Claude شرح كل جزء.

أين يتوقف: تعمل هذه داخل بيئة Claude. لا قاعدة بيانات دائمة خاصة بك، ولا حسابات مستخدمين، ولا نطاق مخصص، ولا مكان لتشغيل خادم. حين تكبر الفكرة عن صفحة واحدة تحتاج أحد الخيارين التاليين.

الخيار 2: Claude Code لقاعدة كود حقيقية

Claude Code هو وكيل البرمجة من Anthropic. يعمل في طرفيتك، وفي محررات مثل VS Code وJetBrains، وفي تطبيق سطح مكتب، وعلى الويب. تعطيه مهمة بلغة عادية فيقرأ مشروعك ويعدّل الملفات وينفّذ الأوامر والاختبارات ويريك ما تغيّر. وقت كتابة هذا الدليل هو مشمول في خطط Claude المدفوعة ومتاح عبر واجهة API؛ راجع موقع Anthropic لمعرفة الخطط الحالية.

تبدو جلسة vibe coding نموذجية هكذا:

أضف صفحة /bookings تسرد حجوزات المستخدم الحالي، الأحدث أولًا، مع زر إلغاء يتعطل قبل ساعتين من الحصة. استخدم أداة المصادقة الموجودة. نفّذ الاختبارات عند الانتهاء.

ممتاز لـ: المطورين والمؤسسين التقنيين الذين لديهم مشروع بالفعل، ويريدون تحكمًا كاملًا في البنية التقنية، ولا يمانعون تشغيله ونشره بأنفسهم. وهو قوي في التغييرات متعددة الملفات واتباع الأعراف الموجودة في قاعدة الكود.

حيث يتطلب جهدًا أكبر: تحتاج بيئة تطوير، وClaude Code لا يستضيف شيئًا. قواعد البيانات والأسرار والنشر والنطاقات عليك ترتيبها. ولمقارنته بأدوات المطورين الأخرى راجع Cursor مقابل Windsurf مقابل Claude Code.

عادات تنجح مع Claude Code

• اطلب خطة قبل التغييرات الكبيرة. "لخّص الخطوات والملفات التي ستمسها، ثم انتظر."
• احتفظ بملف ملاحظات للمشروع. يقرأ Claude Code ملف ذاكرة المشروع (CLAUDE.md) للأعراف، فلا تكررها.
• راجع الفروق. حتى حين تمارس vibe coding، تصفّح ما تغيّر في المناطق الحساسة: المصادقة والمدفوعات وأي شيء فيه بيانات مستخدمين.
• سجّل التغييرات كثيرًا (commit). تسهّل الالتزامات الصغيرة التراجع عن خطوة سيئة.

الخيار 3: ابنِ وانشر من Claude مع Mythex

إذا كنت تحب العمل في Claude لكنك تريد تطبيقًا حقيقيًا في النهاية، بقاعدة بيانات وتسجيل دخول وتخزين ملفات ورابط عام، فيمكنك ربط Claude بمنشئ تطبيقات بالذكاء الاصطناعي عبر MCP، البروتوكول الذي يتيح لـ Claude استخدام أدوات مستضافة في مكان آخر. (يشرحه ما هو MCP بكلمات بسيطة.)

تشغّل Mythex خادم MCP. بعد ربطه يستطيع Claude إنشاء مشروع Mythex، وكتابة الكود في بيئة سحابية خاصة معزولة، وتشغيل معاينة حية، وربط قاعدة بيانات وتخزين ملفات، ونشر التطبيق. تتضمن كل نتيجة رابطًا لمشاهدة المشروع حيًا في Mythex.

كيف تربط

1. في Mythex افتح إعدادات الحساب وانسخ رابط MCP: https://mcp.mythex.ai/mcp.
2. في Claude اذهب إلى Settings → Connectors → Add custom connector، والصق الرابط واضغط Connect.
3. تُفتح صفحة Mythex. سجّل الدخول إن لزم واختر السماح بالوصول. لا يوجد مفتاح API لتنسخه.
4. عد إلى Claude واطلب ما تريد.

يستطيع أي شخص الربط على أي خطة؛ أما أدوات البيئة المعزولة فتحتاج Mythex Pro ($25 شهريًا). يبقى استخدام Claude على خطة Claude الخاصة بك، ويأتي وقت البيئة المعزولة والمعاينات والاستضافة من أرصدة Mythex. والشرح الكامل في بناء تطبيقات Mythex من Claude أو Cursor أو Codex.

طلب أول لتجربته

باستخدام Mythex، أنشئ مشروعًا جديدًا: نظام إدارة علاقات عملاء (CRM) بسيط لاستوديو التصميم الصغير الخاص بي. جهات اتصال بالاسم والشركة والبريد والهاتف والمرحلة (عميل محتمل، نشط، سابق) وملاحظات. عرض لوحة حسب المرحلة أسحب فيها جهات الاتصال بين الأعمدة، ومربع بحث. أضف قاعدة بيانات لتبقى البيانات، وتسجيل دخول لأكون الوحيد الذي يراها. شغّل المعاينة وأرسل لي الرابط عندما تعمل.

ثم كرّر في المحادثة نفسها، تغييرًا واحدًا في كل مرة:

في مشروع Mythex، أضف تاريخ "المتابعة التالية" إلى جهات الاتصال وقائمة في الشاشة الرئيسية بالمتابعات المستحقة هذا الأسبوع. تحقق منه في المعاينة.

انشر الـ CRM وأعطني الرابط الحي.

ممتاز لـ: من يفكرون جيدًا في Claude ويريدون النتيجة مستضافة، بقاعدة بيانات، دون إعداد خوادم. ويمكنك أيضًا التبديل: ابدأ في Claude وتابع في محادثة Mythex، أو العكس، لأنه المشروع نفسه.

أيها تستخدم؟

نصائح صياغة تهم أكثر مع Claude

يتبع Claude التعليمات المفصلة عن كثب، وهذا سلاح ذو حدين.

• قل ما لا يجب تغييره. "أبقِ التخطيط والألوان؛ غيّر التحقق من النموذج فقط."
• أعطه تعريفًا للإنجاز. "الإنجاز يعني أن جهة اتصال جديدة تُحفظ وتظهر على اللوحة وتنجو من التحديث."
• اطلب منه فحص عمله. في Claude Code يعني ذلك تشغيل الاختبارات؛ وفي Mythex يعني فحص المعاينة الحية أو تشغيل اختبار متصفح.
• اطلب شرحًا بكلمات بسيطة حين لا تفهم تغييرًا. فهذا أسرع طريق لتعرف ما يفعله تطبيقك.

في ورقة طلبات vibe coding لدينا 30 طلبًا تعمل في أي من الإعدادات الثلاثة.

ملاحظات أمان للثلاثة

• لا تلصق مفاتيح API أو كلمات مرور حقيقية في محادثة Claude. في Mythex تذهب الأسرار إلى إعدادات أسرار المشروع، ويرى Claude أسماءها لا قيمها.
• تحقق من من يرى ماذا قبل النشر. "هل يستطيع مستخدم مسجَّل فتح سجلات مستخدم آخر؟" هو أول سؤال يُطرح.
• راجع الكود الحساس. Claude مبرمج قدير، لكن vibe coding يعني أنك لا تقرأ كل سطر، فاختر الأسطر المهمة. راجع هل vibe coding آمن؟.

وإن كنت تستخدم ChatGPT أيضًا فيغطي الدليل المرافق vibe coding مع ChatGPT وCodex. وإن فضّلت تخطي الإعداد كله، فافتح منشئ التطبيقات بالذكاء الاصطناعي وصف تطبيقك هناك.

الأسئلة