← وصفات الذكاء الاصطناعي اليوميةالصور والفيديو✓ تم التحقق 8 نوفمبر 2026

أنشئ صفحة هبوط ريترو بأسلوب الثمانينيات باستخدام الذكاء الاصطناعي في 7 دقائق

صفحة HTML/CSS جاهزة بألوان نيون وخط بيكسل وتأثير CRT - مباشرة في المتصفح، بدون تثبيت برامج

  1. 1.افتح Claude.ai، وسجّل الدخول إلى حسابك (تسجيل مجاني عبر البريد الإلكتروني). إذا كانت الخدمة غير متاحة في منطقتك، استخدم أي روبوت دردشة بديل يدعم إنشاء الأكواد - ChatGPT أو Gemini يناسبان.

    يوفر النطاق المجاني لـ Claude الوصول إلى النموذج الأساسي؛ وهذا كافٍ لإنشاء HTML/CSS.

    Claude ↗عن الأداة
  2. 2.ابدأ دردشة جديدة والصق الأمر أدناه. استبدل [TEMA] بموضوع صفحتك (مثلاً «معرض تصوير فوتوغرافي»، «صفحة هبوط لمقهى»، «إعلان بودكاست»)، واستبدل [ZAGOLOVOK] بالعنوان الرئيسي للصفحة.

    كلما كان وصف الموضوع والمحتوى أكثر تحديدًا، قلت التعديلات اليدوية المطلوبة.

    Claude ↗عن الأداة
    البرومبت
    أنشئ موقعًا ريترو من صفحة واحدة بأسلوب ألعاب صالات الثمانينيات. الموضوع: [TEMA]. العنوان الرئيسي: [ZAGOLOVOK]. أدرج: قسم رئيسي (Hero) بعنوان نيون، وقسم «من نحن»، وتذييل بمعلومات الاتصال. متطلبات التصميم: الخلفية #0A0A0F، لون البرتقالي النيون #FE9901، لون الفيروزي الحامضي #00F0FF، ونص أبيض دافئ. استخدم خط 'Press Start 2P' من Google Fonts للعناوين، وخط Monospace للنص الأساسي. أضف تأثير خطوط مسح CRT باستخدام CSS، وأزرار بأسلوب البيكسل مع ظل داخلي، وحدود بأسلوب ASCII حول الأقسام. أخرج النتيجة كملف HTML واحد مكتمل ذاتيًا مع CSS مضمّن. أدرج رابط Google Fonts. يجب أن تكون الصفحة متجاوبة بالكامل.
    ماذا يفعل هذا البرومبتالأمر باللغة الإنجليزية ليفهم Claude متطلبات التصميم بدقة أكبر. استبدل [TEMA] بموضوع الصفحة (مثلاً 'مدونة شخصية عن ألعاب الريترو')، و [ZAGOLOVOK] بالعنوان الرئيسي. لا داعي لتغيير المعلمات الأخرى (الألوان، الخطوط، التأثيرات).
  3. 3.انتظر حتى يتم إنشاء الكود (عادة 30 - 60 ثانية). انسخ كتلة HTML بالكامل - اضغط على زر Copy في الزاوية العلوية اليمنى من كتلة الكود.

    إذا تم تقسيم الكود إلى عدة كتل، انسخها تباعًا إلى ملف واحد.

    Claude ↗عن الأداة
  4. 4.افتح أي محرر نصوص (المفكرة على Windows، أو TextEdit على Mac في وضع «Plain Text»). الصق الكود. احفظ الملف باسم retro.html - الامتداد .html مهم، وليس .txt.

    في المفكرة (Notepad) عند الحفظ، اختر «All Files» في حقل «Save as type»، وإلا سيُحفظ كملف .txt.

  5. 5.انقر نقرًا مزدوجًا على الملف المحفوظ retro.html - سيفتح في المتصفح. ستظهر صفحة ريترو بلمسات نيون، وتأثير CRT، وخط بيكسل.

    يعمل الملف دون اتصال، باستثناء خط Press Start 2P - حيث يتم تحميله من Google Fonts (يلزم اتصال بالإنترنت عند أول فتح).

  6. 6.إذا لزم إجراء أي تعديل - عُد إلى دردشة Claude واكتب: «Change the background to dark purple and add a pixel-art star animation in the hero section». سيقدم Claude الكود المحدث. استبدل محتوى retro.html واحفظه مرة أخرى.

    أجرِ التعديلات واحدًا تلو الآخر - لجعل النتائج أكثر توقعًا.

    Claude ↗عن الأداة
💰 كم يكلف تطبيقهالأسعار حتى 2026-11
  • مجاناClaude Freeيوفر النطاق المجاني عددًا محدودًا من الرسائل يوميًا - وهذا يكفي لإنشاء وإجراء 1 - 2 تعديل على HTML/CSS.
جربها وكن أول من يسجل إنجازه

لماذا اليوم

1
فيديوهات من صنّاع المحتوى خلال 48 ساعة
9.5 ألف
إجمالي المشاهدات
Neural Shittelegramالقناة في الكتالوج
mycleverai.comweb
cossa.ruweb
vibecoderz.ruweb

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