في سباق نماذج الذكاء الاصطناعي المحموم، أطلقت علي بابا نسخة معاينة من نموذجها الأقوى حتى الآن: Qwen3 Max Preview. ورغم أن الإعلانات الرسمية تركّز عادةً على أرقام البنشماركات، قررنا اختبار النموذج في مهمة عملية حقيقية يفهمها أي صانع محتوى أو مطوّر مبتدئ: بناء موقع ويب كامل بالأنيميشن انطلاقًا من برومبت واحد مكتوب بالعربية.
التجربة: من النص إلى موقع يعمل
عبر واجهة chat.qwen.ai المجانية، وباستخدام وضع Web Dev المدمج، كتبنا برومبتًا تفصيليًا بالعربية يطلب صفحة تفاعلية بأسلوب بصري محدد، مع أنيميشن متحرك ونصوص عربية باتجاه RTL. لم نستخدم أي مكتبات خارجية ولا أدوات وسيطة؛ فقط وصف نصي دقيق لما نريده.
النتيجة كانت لافتة: بدأ النموذج بتوليد مئات الأسطر من HTML وCSS وJavaScript في ملف واحد متكامل، شملت رسومات SVG مرسومة بالكود، وتأثيرات حركية معقدة باستخدام keyframes، وحتى دعمًا لخيار تقليل الحركة (prefers-reduced-motion) — وهي تفصيلة احترافية يغفلها كثير من المطورين البشر. وخلال دقائق ظهرت المعاينة الحية: موقع يعمل فعلًا، بأزرار تفاعلية وتنقّل بين المشاهد وشريط تقدّم زمني.
أين يتفوق النموذج؟
أبرز ما لفت انتباهنا ثلاث نقاط. أولًا، فهم العربية بعمق: التزم النموذج باتجاه RTL وبالخط والألوان المطلوبة دون أخطاء في عرض النصوص، وهي نقطة تتعثر فيها نماذج كثيرة. ثانيًا، الالتزام بالقيود: حين طلبنا ملف HTML واحدًا دون مكتبات خارجية، نفّذ ذلك حرفيًا. ثالثًا، جودة الأنيميشن: الحركات خرجت سلسة ومتزامنة، بمستوى يقترب مما تنتجه أدوات متخصصة.
وأين يجب الحذر؟
الإنصاف يقتضي التوقف عند التحفظات. النموذج ما زال في مرحلة Preview، أي أن أداءه قد يتغير قبل الإصدار النهائي، والشركة نفسها تشير إلى أن نسخة المعاينة نصية فقط دون قدرات الرؤية. كما أن نجاح تجربة واحدة لا يعني الاتساق؛ فنماذج توليد الكود معروفة بتفاوت نتائجها بين محاولة وأخرى، والبرومبت التفصيلي الجيد كان عاملًا حاسمًا في النتيجة — من يكتب طلبًا عامًّا من سطر واحد لن يحصل على المستوى ذاته. وأخيرًا، المشاريع الحقيقية تحتاج صيانة وتوسعة، وملف HTML واحد ضخم يصلح للنماذج الأولية أكثر مما يصلح لمنتج إنتاجي.
ماذا يعني هذا للمستخدم العربي؟
الخلاصة العملية أن حاجز الدخول إلى بناء صفحات الويب التفاعلية انخفض مجددًا، وهذه المرة بأداة مجانية تفهم العربية جيدًا. للمعلمين وصنّاع المحتوى وأصحاب المشاريع الصغيرة، صار بالإمكان تحويل فكرة إلى نموذج أولي قابل للعرض خلال جلسة واحدة، دون كتابة سطر كود.
لكن يبقى الدرس الأهم: الأداة لا تُغني عن المهارة، بل تنقلها. مهارة كتابة الكود تتراجع أهميتها النسبية، بينما تصعد مهارة صياغة البرومبت وتحديد المتطلبات بدقة — وهي مهارة تستحق أن نستثمر فيها وقتنا اليوم قبل الغد.
Qwen3 Max Preview لا “يقتل” المنافسين كما تحب العناوين أن تقول، لكنه يثبت أن المنافسة الصينية لم تعد في مقاعد المتفرجين، وأن المستفيد الأول من هذا السباق هو المستخدم النهائي
شاهد التجربة العملية من خلال الفيديو
الأوامر المستخدمة في الفيديو:
التطبيق التعليمي التفاعلي:
أنشئ تطبيق ويب تعليميًا تفاعليًا باللغة العربية للأطفال من عمر 8 إلى 12 عامًا بعنوان “مختبر جسم الإنسان”.
المحتوى:
- الجهاز الهضمي.
- القلب والدورة الدموية.
- الرئتان والتنفس.
- العظام والعضلات.
- الحواس الخمس.
متطلبات التصميم:
- اتجاه كامل من اليمين إلى اليسار RTL.
- تصميم مرح وملون لكنه غير مزدحم.
- قائمة رئيسية تحتوي على بطاقات للأقسام.
- استخدام رسومات SVG بسيطة داخل التطبيق بدل الصور الخارجية.
- واجهة مناسبة للكمبيوتر والهاتف.
التفاعل:
- عند الضغط على أحد أعضاء الجسم تظهر نافذة تشرح وظيفته.
- أضف حركات بسيطة عند فتح الأقسام.
- أضف اختبارًا من 10 أسئلة مع تصحيح فوري.
- أضف نقاطًا وشريط تقدم وشهادة تظهر عند إنهاء جميع الأقسام.
- احفظ تقدم الطالب محليًا باستخدام localStorage.
المتطلبات التقنية:
- استخدم HTML وCSS وJavaScript.
- اجمع المشروع بالكامل في ملف HTML واحد.
- تأكد من أن جميع الأزرار والتفاعلات تعمل.
- لا تستخدم مكتبات خارجية أو روابط صور قد تتوقف.
العرض التقديمي المتحرك :
أنشئ عرضًا تقديميًا متحركًا وتفاعليًا يعمل داخل المتصفح بعنوان “رحلة العميل”.
مقاس العرض:
- نسبة 16:9.
- مناسب للعرض على شاشة كبيرة.
- باللغة العربية واتجاه RTL.
يتكون العرض من 6 شرائح:
- التعرّف على المنتج.
- البحث عن المعلومات.
- مقارنة الخيارات.
- اتخاذ قرار الشراء.
- تجربة المنتج.
- الولاء والتوصية بالمنتج.
التصميم:
- خلفية كحلية داكنة فاخرة.
- عناوين بيضاء كبيرة.
- إبراز الكلمات المهمة باللون الأصفر.
- تصميم بسيط وغير مزدحم.
- استخدم أيقونات SVG نظيفة.
الحركة:
- انتقال ناعم بين الشرائح.
- ظهور العنوان أولًا ثم العناصر بالتتابع.
- تحريك الأسهم التي تربط مراحل رحلة العميل.
- إضافة عدادات ورسوم بيانية متحركة في الشرائح المناسبة.
التحكم:
- أزرار التالي والسابق.
- دعم أسهم لوحة المفاتيح.
- شريط يوضح تقدم العرض.
- زر تشغيل تلقائي وزر إيقاف مؤقت.
- زر لتشغيل العرض في وضع ملء الشاشة.
اجمع HTML وCSS وJavaScript في ملف واحد، وتأكد من عمل جميع الحركات والأزرار.
صناعة Animation :
أنشئ مشهد Animation تعليميًا يعمل داخل المتصفح بأسلوب القصاصات الورقية المصنوعة يدويًا، يشرح 5 عادات تساعد على النوم العميق.
المشاهد:
- رجل يحدد موعدًا ثابتًا للنوم.
- الرجل يطفئ الهاتف قبل النوم بساعة.
- الرجل يتجنب القهوة مساءً.
- الرجل يجعل غرفة النوم مظلمة وهادئة.
- الرجل يمارس التنفس الهادئ ثم ينام.
الأسلوب البصري:
- جميع الشخصيات والعناصر تبدو كأنها مصنوعة من الورق والكرتون.
- حواف غير منتظمة قليلًا.
- طبقات ورقية وظلال طبيعية.
- ألوان هادئة: أزرق داكن، بيج وأصفر ناعم.
- الشخصية رجل في الأربعين يرتدي بيجامة محتشمة.
الحركة:
- تحريك العناصر بطريقة Stop Motion خفيفة.
- انتقال ورقي بين كل مشهد والآخر.
- ظهور النصوص العربية بحركة بسيطة.
- مدة كل مشهد من 5 إلى 7 ثوانٍ.
- تشغيل تلقائي للمشاهد بالتتابع.
- أزرار تشغيل، إيقاف مؤقت، إعادة ومشهد سابق وتالٍ.
- شريط زمني يوضح المشهد الحالي.
استخدم SVG وCSS وJavaScript للحركة.
اجمع المشروع في ملف HTML واحد.
اجعل نسبة العرض 16:9.
لا تستخدم صورًا أو مكتبات خارجية.
