← وصفات الذكاء الاصطناعي اليوميةالعمل✓ تم التحقق 28 أغسطس 2026

أنشئ تطبيق ويب جاهزاً ببرومبت واحد باستخدام Claude Code و Fable

صف فكرتك بجملة واحدة - احصل على كود جاهز ودليل تفاعلي خطوة بخطوة في 10 دقائق.

  1. 1.ثبّت Node.js (إصدار LTS) من الموقع الرسمي إذا لم يكن مثبتاً. تحقق من التثبيت بأمر node -v في الطرفية - يجب أن تظهر النسخة.

    إذا لم تكن الخدمة متاحة في منطقتك مباشرة، استخدم VPN أثناء التحميل.

    Node.js ↗
  2. 2.ثبّت Claude Code عالمياً عبر npm. افتح الطرفية ونفّذ أمر التثبيت، ثم أكمل المصادقة باتباع التعليمات في الوحدة الطرفية.

    Claude Code مجاني لمشتركي Claude Pro و Max. بدون اشتراك ستحتاج خطة مدفوعة - راجع قسم التكلفة.

    Claude Code ↗عن الأداة
    البرومبت
    npm install -g @anthropic-ai/claude-code
    ماذا يفعل هذا البرومبتهذا الأمر يثبّت أداة Claude Code عالمياً. لا تحتاج لتغيير أي شيء - نفّذه كما هو في الطرفية.
  3. 3.أنشئ مجلداً فارغاً للمشروع، انتقل إليه في الطرفية وشغّل Claude Code بالأمر claude. عند أول تشغيل، اتبع التعليمات على الشاشة لربط حساب Anthropic.

    إذا لم تكن الخدمة متاحة في منطقتك، ستحتاج VPN للمصادقة.

    Claude Code ↗عن الأداة
    البرومبت
    mkdir my-app && cd my-app && claude
    ماذا يفعل هذا البرومبتينشئ مجلد my-app ويدخله ثم يشغّل جلسة Claude Code التفاعلية. يمكنك استبدال اسم المجلد بأي اسم.
  4. 4.الصق البرومبت التالي في جلسة Claude Code. سيُنشئ بنية المشروع والمنطق والملفات في خطوة واحدة.

    Claude Code سينشئ الملفات في المجلد الحالي تلقائياً. لا حاجة لنسخ الكود يدوياً.

    Claude Code ↗عن الأداة
    البرومبت
    أنشئ تطبيق ويب من صفحة واحدة باسم «[APP_NAME]» يقوم بما يلي: [DESCRIBE_WHAT_IT_DOES]. استخدم HTML و CSS و JavaScript عادية في ملف index.html واحد. اجعل الواجهة نظيفة ومتجاوبة. أضف عنواناً «[APP_NAME]»، ونموذج إدخال، ومنطقة نتائج. أضف تحقق أساسي للمدخلات.
    ماذا يفعل هذا البرومبتالبرومبت يطلب من Claude Code إنشاء تطبيق ويب من صفحة واحدة. استبدل [APP_NAME] باسم تطبيقك (مثلاً Task Tracker)، و[DESCRIBE_WHAT_IT_DOES] بوصف ما يفعله التطبيق (مثلاً: يتيح للمستخدم إضافة مهام ووضع علامة مكتمل وحذفها). اترك باقي النص كما هو - سينشئ Claude ملف index.html في المجلد الحالي.
  5. 5.افتح موقع Fable، اضغط Get Started وسجّل الدخول عبر Google أو البريد الإلكتروني. الخطة المجانية تتيح إنشاء أدلة عامة.

    لا تُدخل بيانات شخصية أو دفع في خدمات خارجية دون داعٍ. Fable يُستخدم لتسجيل الشاشة.

    Fable ↗
  6. 6.ابدأ تسجيل الشاشة في Fable، افتح ملف index.html في المتصفح (بنقرة مزدوجة)، اعرض عمل التطبيق - أَدخل بيانات وأظهر النتائج. أوقف التسجيل وانشر الدليل، ثم انسخ الرابط.

    قبل التسجيل، أغلق التبويبات التي تحتوي معلومات شخصية - فقد تظهر في التسجيل.

    Fable ↗
💰 كم يكلف تطبيقهالأسعار حتى 2026-08
  • مجاناNode.jsمجاني بالكامل للتحميل والاستخدام.
  • اشتراكClaude Codeيتطلب اشتراك Claude Pro ($20/شهر) أو Max ($100/شهر)؛ بدون اشتراك يمكن استخدامه عبر API مع دفع مقابل الرموز. لا توجد خطة مجانية.
  • مجاناFableالخطة المجانية تتيح إنشاء أدلة تفاعلية عامة؛ توجد خطط مدفوعة للفرق.
جربها وكن أول من يسجل إنجازه

لماذا اليوم

2
فيديوهات من صنّاع المحتوى خلال 48 ساعة
2
قنوات المصدر
6.2 ألف
إجمالي المشاهدات
Nate Herk | AI Automationyoutubeالقناة في الكتالوج
Борис опятьtelegramالقناة في الكتالوج
Anthropic Docsweb
Fableweb
Anthropic Pricingweb

خدمات الذكاء الاصطناعي تتغير بسرعة - قد تختلف الواجهات والحدود المجانية عما هو موصوف.