أنشئ تطبيق ويب عاملاً من الصفر بطلب واحد: مقارنة بين Codex و Claude Code
في 10 دقائق احصل على نموذجين جاهزين لنفس التطبيق واختر الأداة التي أداءت بشكل أفضل
- 1.صغ فكرة التطبيق في جملة واحدة. مثلاً: «متتبع عادات مع تقويم وشريط تقدم». سجلها - سترسل نفس الطلب إلى كلتا الأداتين لمقارنة عادلة.
اختر فكرة بسيطة: قائمة مهام، محول عملات، لعبة مصغرة. كلما كانت الفكرة أكثر تحديداً كانت النتيجة أفضل.
- 2.ثبّت Claude Code إن لم يكن مثبتاً بعد. افتح الطرفية ونفذ أمر التثبيت. بعد التثبيت شغّل claude في مجلد المشروع وسجّل الدخول عبر المتصفح بالرابط الذي يظهر في الطرفية.
يعمل Claude Code على macOS و Linux و Windows (عبر WSL). يحتاج Node.js إصدار 18+. إذا كانت الخدمة غير متاحة في منطقتك - استخدم VPN عند تسجيل الدخول.
Claude Code ↗عن الأداة - 3.أنشئ مجلد مشروع فارغ، افتح فيه الطرفية وشغّل Claude Code بالأمر claude. عندما تظهر سطر الإدخال التفاعلي، الصق الطلب أدناه مع استبدال [YOUR APP IDEA] بفكرتك من الخطوة 1.
سيقوم Claude Code بإنشاء الملفات وتثبيت التبعيات وتشغيل خادم التطوير تلقائياً. راقب الطرفية - قد يطلب إذناً لتنفيذ الأوامر، أجب بـ y (yes).
Claude Code ↗عن الأداةالبرومبتأنشئ تطبيق ويب كامل وعامل: [YOUR APP IDEA]. استخدم React مع Vite. أنشئ جميع المكونات والأنماط والمنطق اللازمة. يجب أن يعمل التطبيق باستخدام `npm install && npm run dev` ويعمل في المتصفح فوراً. أضف واجهة مستخدم نظيفة وعصرية باستخدام Tailwind CSS. تأكد من عدم وجود أي أخطاء.
ماذا يفعل هذا البرومبتالطلب باللغة العربية يطلب من Claude Code إنشاء تطبيق ويب كامل وعامل حسب فكرتك باستخدام React + Vite + Tailwind CSS، بحيث يعمل بالأمر npm install && npm run dev. استبدل [YOUR APP IDEA] بوصف تطبيقك. - 4.انتظر حتى ينهي Claude Code توليد الملفات والتثبيت. افتح المتصفح على العنوان http://localhost:5173 - تحقق إن كان التطبيق يعمل. التقط لقطة شاشة للنتيجة واحفظها. أغلق Claude Code (Ctrl+C).
إذا لم يبدأ خادم التطوير تلقائياً، نفذ npm run dev يدوياً. تذكّر كم تعديلاً أدخلت يدوياً - هذا معيار للمقارنة.
Claude Code ↗عن الأداة - 5.الآن ثبّت OpenAI Codex CLI. في الطرفية نفذ الأمر npm install -g @openai/codex. بعد التثبيت أنشئ مجلداً فارغاً جديداً للنموذج الثاني، ادخل إليه وشغّل codex. سجّل الدخول عبر حساب OpenAI بالرابط من الطرفية.
يتطلب Codex CLI إصدار Node.js 18+. للتسجيل يحتاج حساب OpenAI. إذا كانت الخدمة غير متاحة في منطقتك - استخدم VPN.
OpenAI Codex CLI ↗ - 6.في واجهة Codex الصق نفس الطلب المستخدم مع Claude Code (من الخطوة 3) مع نفس استبدال [YOUR APP IDEA]. انتظر انتهاء التوليد، شغّل npm install && npm run dev وافتح http://localhost:5173.
قد ينشئ Codex الملفات بطريقة مختلفة - أحياناً عبر وضع «sandbox». إذا عرض تطبيق التغييرات - وافق (approve).
OpenAI Codex CLI ↗البرومبتأنشئ تطبيق ويب كامل وعامل: [YOUR APP IDEA]. استخدم React مع Vite. أنشئ جميع المكونات والأنماط والمنطق اللازمة. يجب أن يعمل التطبيق باستخدام `npm install && npm run dev` ويعمل في المتصفح فوراً. أضف واجهة مستخدم نظيفة وعصرية باستخدام Tailwind CSS. تأكد من عدم وجود أي أخطاء.
ماذا يفعل هذا البرومبتنفس الطلب باللغة العربية: إنشاء تطبيق ويب كامل وعامل باستخدام React + Vite + Tailwind CSS. استبدل [YOUR APP IDEA] بنفس الفكرة المستخدمة في الخطوة 3 - هذا مهم للمقارنة العادلة. - 7.قارن النموذجين حسب ثلاثة معايير: 1) هل عمل دون تعديلات يدوية، 2) مدى أناقة الواجهة، 3) مدى مطابقة منطق التطبيق لفكرتك. سجّل الفائز في كل نقطة - وهذا سيكون اختيارك للأداة في المشاريع المستقبلية.
احتفظ بمجلسي المشروع - قد يفيدان كقوالب. إذا لم تتمكن إحدى الأداتين من تشغيل التطبيق أصلاً، فهذه أيضاً نتيجة مهمة للمقارنة.
- اشتراكClaude Codeمشمول في اشتراك Claude Pro بـ $20/شهر أو Claude Max بـ $100/شهر؛ توجد حدود لعدد الطلبات حسب الباقة.
- اشتراكOpenAI Codex CLIيتطلب اشتراك ChatGPT Plus ($20/شهر) أو الوصول عبر API مع دفع حسب الاستخدام؛ الحدود الدقيقة تعتمد على الباقة - راجع صفحة أسعار OpenAI.
- مجاناNode.js + npmبيئة تشغيل ومدير حزم - مجاناً، يثبَّت مرة واحدة على الحاسوب.
لماذا اليوم
خدمات الذكاء الاصطناعي تتغير بسرعة - قد تختلف الواجهات والحدود المجانية عما هو موصوف.