ثلاث شبكات عصبية ترسم مراجع تصميم ويب بخمسة أساليب: من التكنولوجيا المالية إلى الويب 1.0

أصبحت الشبكات العصبية أداة مفيدة لمصممي الويب. قرر كاتب مدونة StudyAI التحقق من ذلك عمليًا: فابتكر أصولًا تصميمية للويب لخمس صناعات مختلفة تمامًا، مستخدمًا ثلاثة نماذج حديثة لتوليد الصور. وجاءت النتائج متباينة.

ثلاثة نماذج في الاختبار:

Grok Image 2 وFlux 2 Pro وNano Banana Pro

اختار الكاتب ثلاثة نماذج شائعة: Grok Image 2 وFlux 2 Pro وNano Banana Pro. وطُلب من كل نموذج تنفيذ المهام نفسها: إنشاء أصول تصميم ويب وفق متطلبات دقيقة من حيث الأسلوب والألوان والطباعة والوظيفة. ولا يتعلق الأمر بتوليد صور فقط، بل باختبار مدى فهم الشبكات العصبية للمتطلبات الخاصة بمصممي الويب.

14 مثالًا في خمس صناعات

الرياضات الإلكترونية والألعاب (4 أمثلة): • لوحة HUD لألعاب الرياضات الإلكترونية من نوع إطلاق النار (minimalism مستقبلي، لمسات نيون سماوية، ملف PNG شفاف) • مخزون لعبة أدوار بأسلوب dark fantasy (إطارات ذهبية، نسيج شبيه بالرق، استلهام من Diablo) • أزرار للهواتف المحمولة لألعاب الألغاز العرضية (أشكال شبيهة بالحلوى، تدرجات لامعة) • أزرار ويب 1.0 متحركة (حواف ثلاثية الأبعاد مشطوفة، جمالية GeoCities، ورقة sprite)

التكنولوجيا المالية والمصرفية (3 أمثلة): • لوحة تحكم لبورصة عملات رقمية (الوضع الداكن، رسوم بيانية بالشموع اليابانية، glassmorphism، لوحة ألوان أحادية) • بطاقة تحويل مصرفي (واجهة neumorphic ناعمة، زوايا مستدیرة بقياس 24 بيكسل، معايير iOS) • تهيئة أولية لتطبيق استثماري (3 شاشات، أسلوب متساوي القياس، استلهام من Stripe)

حنين الويب 1.0 (مثال واحد): • لافتات متحركة بصيغة GIF بحجم 468×60 كما في العقد الأول من الألفينات (خط Comic Sans، خط Impact، عبارة «قيد الإنشاء» متوهجة، جمالية Y2K)

البيئة (3 أمثلة): • لوحة تحكم لتتبع الأثر الكربوني (واجهة ناعمة عضوية، أخضر حكيم، جمالية Patagonia) • بطاقات منتجات بيئية لسوق إلكتروني (ورق كرافت معاد تصنيعه، رسوم نباتية توضيحية) • متتبع إعادة تدوير للهاتف المحمول (تصميم مسطح مرح، تحفيز لعبي بأسلوب Duolingo)

خدمات الذكاء الاصطناعي (3 أمثلة): • واجهة محادثة لمساعد ذكاء اصطناعي (رسم متحرك للبث، مؤشر للكتابة، توهج متدرج عند الحواف) • لوحة تحكم لنموذج تعلم آلي (رسوم بيانية للخسارة والدقة، مصفوفة الالتباس، تصور لشبكة عصبية) • تهيئة أولية لمولّد صور (حقل إدخال الأوامر، قوالب أسلوب جاهزة، حلقة تقدم)

النتائج: نموذجان نجحا بامتياز وواحد تعثّر

أظهر Grok 2.0 وNano Banana Pro «حسًا بصريًا» جيدًا، وقدّما نتائج مقبولة منذ المحاولات الأولى تقريبًا. وقد فهم كلا النموذجين المتطلبات الأسلوبية جيدًا — من البساطة إلى الحنين، ومن glassmorphism إلى جمالية Y2K. وبدت النتائج احترافية وجاهزة لإدراجها في كراسة المواصفات، أو حتى لتكون أساسًا للتصميم النهائي.

أما Flux 2 Pro، فعلى الرغم من تدريبه الموثوق ومنطقه الجيد في التوليد، فقد ارتكب أخطاءً متكررة. وكانت مشكلته الأبرز في التعامل مع النصوص: فقد كتب النموذج عدة مرات بلغة غير محددة. وهذا أمر غريب، لأن Flux يعتمد على مبدأ مطابقة التدفق (flow matching) الذي يُفترض أن يتعامل جيدًا مع المنطق التسلسلي والنصوص المكتوبة. ومع ذلك، ظلت الأخطاء الملحوظة منهجية.

أظهرت الشبكات العصبية قدرة جيدة على توليد عناصر واجهات الويب بالأسلوب المطلوب. وبمساعدتها، يمكن للمصمم أن يجمّع في ساعة أو ساعتين مجموعة كاملة من المراجع لأي مشروع — من شركة ناشئة في التكنولوجيا المالية إلى موقع حنيني عن الويب 1.0. وإذا خُصّص وقت لصياغة أوامر أكثر تفصيلًا ورُصدت ميزانية لسلسلة من التوليدات، فمن الممكن الحصول على عناصر جاهزة لموقع فعلي قيد التشغيل.