OpenAI تعرض كيف يستطيع ChatGPT Images 2.0 إعادة تصميم واجهات التطبيقات

لم يعد ChatGPT Images 2.0 يعمل كمولّد صور فحسب، بل بدأ يعمل كأداة لتصميم المنتجات أيضًا. رفع كاتب ZDNet واجهتي تطبيقين من تطويره إلى النموذج، فلم يحصل على نصائح مجردة، بل على تصاميم أولية جاهزة تتضمن تحسينات محددة.

منتجان

أجرى الاختبار الكاتب في ZDNet ديفيد غيفيرتز. استخدم اشتراك ChatGPT Plus بسعر 20 دولارًا شهريًا، ورفع إلى Images 2.0 لقطات شاشة لواجهتين حقيقيتين يعمل عليهما بنفسه. الأولى تطبيق Mac يبنيه مع Claude Code منذ يناير 2026. والثانية الصفحة الرئيسية لمنتج ويب في مجال الأمن.

النقطة الجوهرية أن النموذج لم يكتفِ بوصف ما لا يعجبه، بل قدّم بدائل بصرية جديدة يمكن مناقشتها بوصفها مسودات تصميم. وبحسب الكاتب، يغيّر هذا أسلوب العمل مع الرسوميات المعتمدة على الذكاء الاصطناعي. فقد كانت هذه الأنظمة تنتج في الغالب «صورًا جميلة»، وقد تقدّم مجموعة من التوصيات العامة بشأن الواجهة. أما الآن فيفهم النموذج بنية الشاشة بصورة أفضل، ويستطيع اقتراح إعادة تصميم ذات معنى: يعيد بناء التسلسل الهرمي، ويبرز مناطق الانتباه، ويُظهر كيف سيبدو ذلك كله في الصورة النهائية المتكاملة.

أفكار لتطبيق Mac

تناولت التجربة الأولى تطبيق Mac بشاشة مزدحمة إلى حد كبير: أزرار كبيرة على اليسار، وشبكة أنماط، ولوحة تفاصيل، وعناصر تحكم انتقل بعضها جزئيًا من نسخة iPhone. طلب الكاتب من ChatGPT «جعل الواجهة أكثر جاذبية وسهولة». ولم يعجبه في البداية التصميم الكامل الذي أعاده النموذج: فقد أزال الذكاء الاصطناعي الأزرار الملوّنة المهمة لهوية العلامة، ولم يفهم تمامًا أوضاع العرض في الجزء السفلي. لكن التصميم الأولي احتوى على عدة حلول ينوي الكاتب تطبيقها فعليًا.

وهذه هي الأفكار التي أخذها الكاتب للعمل عليها:

• منطقة علوية أوضح فوق الشبكة، تجعل بنية الشاشة أسهل في القراءة
• مسافات أكبر بين الصور المصغّرة، ليبدو اختيار العناصر أنظف
• كتلة إجراءات أفضل في أسفل اليسار بدلًا من الأيقونات السابقة
• خيار مستقل للمفضلة، لم يكن موجودًا في التطبيق من قبل
• حقل Added/Updated ثابت في أسفل لوحة التفاصيل

لا يتمثل الاستنتاج الرئيسي من هذا الاختبار في أن الذكاء الاصطناعي رسم واجهة مثالية من المحاولة الأولى. القيمة كانت في أمر آخر: عمل النموذج كمراجع خارجي سريع، وجمع حزمة من الأفكار المحددة التي قد لا يلاحظها المطوّر بنفسه. والأهم أن هذا التصميم الأولي يمكن استخدامه كملخص بصري لـ Claude Code، فلا يضطر المطوّر إلى شرح النتيجة المطلوبة بالكلمات وحدها.

تصميم الويب بحسب المهمة

في الحالة الثانية، تعلّق الأمر بالصفحة الرئيسية لمنتج أمني (security). وبحسب الكاتب، كان شكلها الحالي مرتبًا لكنه بدائي إلى حد كبير، ويعود ذلك في جانب منه إلى أنه لا يحب كتابة CSS. والطريف أن التحليل بدأ هنا بالصدفة تقريبًا: فقد لصق لقطة الشاشة في ChatGPT وضغط Enter قبل أن يكمل كتابة الموجّه (prompt). فحلّل النموذج الصفحة من تلقاء نفسه، وأشار فورًا إلى المواضع الإشكالية.

«المشكلات الرئيسية هي ضعف التسلسل الهرمي البصري، وكثرة اللون الرمادي،

وطول الكتلة التمهيدية، وثلاث بطاقات متساوية في الإلحاح تحتها».

بعد ذلك اقترح ChatGPT جمالية أحدث للوحات الإدارة (admin): بطاقات بيضاء بدلًا من اللوحات الرمادية الكبيرة، وحدودًا ناعمة، ومساحة أكبر بين الأقسام، ولونًا واحدًا مميزًا للأزرار والروابط، وأسطرًا أقصر للنص الرئيسي، وتباينًا أفضل بين العناوين والنص العادي. ثم طلب الكاتب هذه المرة صورة للواجهة المحدّثة بدلًا من التحليل، فحصل على تصميم أولي جديد يمكن استخدامه خطوة تالية في العمل مع Codex.

وفي النسخة المولَّدة، ابتكر الذكاء الاصطناعي شعارًا أيضًا، لأن لقطة الشاشة الأصلية لم تتضمن شعارًا. لكن الأهم أمر آخر: فقد رتّب النموذج أولويات الصفحة بشكل مختلف. فأبرز مناطق مستقلة هي Quick Setup وNeed Help وConfigure Privacy/View Docs، أي أظهر للمستخدم نقاط دخول واضحة. وأضاف كذلك كتلة Site Status في الأسفل، وهي ميزة فكّر فيها الكاتب سابقًا لكنه أجّلها بسبب صعوبة تنفيذها في إضافات freemium.

ماذا يعني ذلك

بالنسبة للمطورين المستقلين، يبدو هذا سيناريو عمليًا جدًا: الحصول خلال دقائق على مراجعة UX ونموذج أولي معًا، وهو ما كان قد يستغرق من فريق المصممين والمطورين نحو أسبوع. لا يحلّ ChatGPT Images 2.0 محل مصمم المنتجات بالكامل، ولا يضمن نتيجة مثالية من التوليد الأول. لكن الجمع بين التحليل البصري والتصميم الأولي ثم تسليم المهمة إلى Claude Code أو Codex يختصر بوضوح الطريق من واجهة خام إلى تحسين قابل للتطبيق.