قبل عقد من الزمن، كان الناس يتجادلون حول XD مقابل Figma، مع وجود عدد قليل من المعجبين المتحمسين الذين ما زالوا يدعمون Photoshop. ثم جاء المطورون الذين قالوا "لماذا التصميم عندما يمكنك البدء من الصفر؟"
لقد تغير مسار النقاش برمته الآن.
لدينا الآن أدوات تصميم بالذكاء الاصطناعي من جوجل (مع غرزة) إلى جانب تصميم كلود من الأنثروبيك بصرف النظر عن فيجما ميك المضي قدماً. يخوض المصممون بحذر في مجال الذكاء الاصطناعي بينما يتساءل المطورون مجدداً "لماذا التصميم عندما يمكنك استخدام الذكاء الاصطناعي؟"
أي أداة أفضل؟ وهل هي مفيدة للمصممين؟ قررنا أن نفعل ما نجيده، وهو وضعها جميعًا جانبًا، واختبار كيفية عملها.
أدوات الذكاء الاصطناعي | Unboxedالجزء الأول
قمنا بتقسيم الاختبار إلى جزأين:
- أنشئ صفحة واحدة بدون أي نظام تصميم
- أنشئ تطبيقًا متعدد الأجزاء مع أنظمة تصميم جاهزة، وسجل تاريخي، واختيار النموذج
في الجزء الأول، اختبرنا سهولة الاستخدام، والوقت المستغرق، وأي أسئلة أو توجيهات متابعة مطلوبة، وتجربة المستخدم، وواجهة المستخدم، والمحتوى. إليكم نتائج الاختبارات.
كيف يعمل؟
تصميم كلود
لبدء استخدام Claude Design، انتقل إلى claude.aiاختر "تصميم" وأدخل تفاصيل مشروعك.
يُتيح لك برنامج Claude Design إنشاء نماذج أولية، وعروض تقديمية، وإنشاء قوالب جاهزة، وغير ذلك. ولأغراض اختبار الجزء الأول، استخدمنا نماذج أولية. واستخدمنا نظام تصميم عالي الدقة ونظام التصميم الافتراضي.
بمجرد اختيار "إنشاء"، سيُطلب منك تقديم معلومات حول تصميمك. يمكنك المساعدة عن طريق إرفاق أنظمة التصميم، أو لقطات الشاشة، أو قاعدة التعليمات البرمجية، أو حتى ملف Figma (.fig).
لديك خيارات لإدخال الصوت أو تغيير النموذج. لأغراض هذا الاختبار، استخدمنا نموذج Claude Sonnet 4.6 الافتراضي.
غرزة
انتقل إلى stitch.withgoogle.comسجّل الدخول (باختيار "تجربة" أو إدخال أي نص مطلوب)، ثم اختر التطبيق أو الموقع الإلكتروني وأدخل النص المطلوب. لديك خيار تحديد النموذج (اخترنا النموذج الافتراضي 3 Flash، ولكن يمكنك اختيار 3.1 Pro، أو إعادة التصميم، أو توليد الأفكار). يتوفر وضع العرض المباشر وإمكانية إرفاق لقطة شاشة أو رسم تخطيطي أو صورة توضيحية.
يمكنك استخدام نظام تصميم أو البدء بملف تصميم.md أيضًا.
بمجرد إنشاء التصميم، يقوم برنامج ستيتش بإنشاء أنظمة التصميم، ورسم خرائط المكونات، وإنشاء تدفق تجربة المستخدم، ثم عرض ملف التصميم.
فيجما ميك
بمجرد تسجيل الدخول إلى فيجمااختر "إنشاء" كخيار، ثم أدخل مباشرةً ما تريد إنشاءه. لديك خيارات لاختيار النموذج (نريد النموذج الافتراضي)، بالإضافة إلى خيارات أخرى مثل Claude Sonnet 4.6 وClaude Opus 4.7 وGemini 3 Flash وGemini 3.1 Pro.
يمكنك إرفاق نظام تصميم (أو مجموعة أدوات التصميم كما يسميها فيجما الآن)، وتحديد ما إذا كنت ترغب في إنشاء موقع ويب أو تطبيق أو مكون أو عرض مرئي. كما يمكنك إرفاق الصور والملفات إذا لزم الأمر.
الوقت المستغرق
تصميم كلود
بعد إدخال التعليمات القياسية لبرنامج Claude Design، بدأ البرنامج بطرح مجموعة من الأسئلة التكميلية (انظر لقطات الشاشة أدناه) في غضون 15 ثانية تقريبًا (حوالي 8 أسئلة تتراوح بين اسم الشركة والأقسام وأنماط التصميم). بعد ذلك، قام البرنامج بمعالجة المخرجات في غضون 4 دقائق أخرى، أي ما مجموعه 4 دقائق و15 ثانية. أما برنامج Stitch، فيعمل على التعليمات المُعطاة ويُنشئ نظام تصميم ثم يُخرج الموقع في دقيقة و40 ثانية. بينما يعمل برنامج Figma Make على التعليمات المُعطاة ويُنتج المخرجات في دقيقتين و35 ثانية.
واجهة المستخدم/تجربة المستخدم
يبدو أن إنتاج كلود يتفوق بشكل ملحوظ على ما ينتجه برنامجا Figma Make أو Stitch. ولعلّ أحد أسباب ذلك هو الأسئلة الإضافية التي يطرحها كلود، والتي تُسهم في تحسين التصميم. يتميز الناتج النهائي بطابع عصري، بألوان هادئة وحدود ناعمة، على عكس تصميم Stitch ذي الشكل المربع.
في برنامجي Claude وFigma Make، ستلاحظ استخدامًا أفضل للتفاعلات وحالات التمرير وغيرها من عناصر التحكم. كما يوفر Claude أدوات تحرير فائقة (بدون ذكاء اصطناعي) مقارنةً ببرنامجي Figma Make وStitch.
انقر هنا لعرض النموذج الأولي
انقر هنا لعرض النموذج الأولي
انقر هنا لعرض النموذج الأولي
محتوى
يتفوق كلود في هذه المهمة بفضل عناوينها الأفضل، وتضمينه نقاط بيانات وتوضيحات نموذجية. كما يقدم برنامج Figma Make بعض نقاط البيانات، بينما يستخدم برنامج Stitch لغة أكثر رسمية. وللإنصاف، كان ذلك جزءًا من المطلوب، ويمكن لوم كلود على مخالفته للتعليمات.
عناصر التحكم في الإخراج
تصميم كلود
يُتيح لك برنامج كلود تعديل الأقسام، والرسم، والتعليق. يمكنك تحديد أي بطاقة أو قسم، وستظهر لك خيارات لتغيير نوع الخط، والمسافة بين العناصر، والشفافية، ونصف قطر الحواف. كما يُتيح لك كلود إجراء تعديلات عامة، مثل تغيير نوع الخط، أو ألوان التمييز، أو حتى تخصيص المظهر العام - مع أننا لم نلحظ فرقًا ملحوظًا في هذه التعديلات.
غرزة
يتيح لك برنامج Stitch التعديل عن طريق تحديد عنصر وتحريره باستخدام الذكاء الاصطناعي أو تحرير النص. كما يمكنك تعديل نظام التصميم الذي أنشأه البرنامج.
فيجما ميك
يتيح لك Figma Make نسخ التصميم إلى Figma (وهو أمر مفيد عند الانتقال من النموذج الأولي إلى التصميم النهائي). يمكنك تحديد أي قسم وتعديل خصائصه مثل نوع الخط ولونه وحجمه ومحاذاته وتباعده، أو تعديلها باستخدام موجه الأوامر.
سهولة الاستخدام
يتبع برنامج Claude توجيهًا بسيطًا في اللوحة اليسرى، ويُخرج النتائج في المنتصف، وهو ما يفعله برنامج Figma Make أيضًا. هذا أمرٌ مألوفٌ لدى معظمنا. توجد عناصر التحكم في الإخراج إما في اللوحة اليسرى أو في الأعلى. يستغل Claude المساحة بشكلٍ أفضل حيث يُظهر لوحةً يمنى عند تحديد أي كائن أو حاوية. بينما يُظهر Figma Make نفس الشيء أسفل التحديد.
في هذا الصدد، يتبع برنامج Stitch نهج GenSpark بشكل أكبر، حيث تكون المخرجات عبارة عن لوحة رسم متصلة. وبالتالي، توجد عناصر التحكم أيضًا على لوحة الرسم، مع وجود عنصر تحكم علوي وآخر في اللوحة اليمنى. كما أن إعادة التوجيه تتم في اللوحة المركزية، بينما تتم المعالجة في اللوحة اليسرى. من هذا المنطلق، قد يكون استخدام Stitch وفهمه صعبًا بعض الشيء، وقد يكون مربكًا لكثرة عناصر التحكم (يبدو أقرب إلى برامج Adobe بنوافذها وعلامات تبويبها المتعددة).
ما هو الأنسب لك؟ يعتمد ذلك على ما تخطط له. إذا كنت لا ترغب في التفكير أو إنشاء نظام تصميم خاص بك، فربما يكون Stitch أو Figma Make خيارًا مناسبًا للبدء. أما إذا كانت لديك فكرة عما تريده، فإن Claude Design قد يكون نقطة انطلاق جيدة. وإذا كنت مدير منتج، فقد يكون Claude خيارًا أفضل. أما كمصمم مبتدئ، فسيمنحك Figma Make المرونة اللازمة للتنقل بين Figma وMake. والسؤال الأهم: هل يمكنك إنشاء موقع جاهز للإنتاج بالكامل باستخدام أدوات الذكاء الاصطناعي؟ قد يختلف رأي مصممينا، وسيشيرون إلى مشاكل واضحة (يبدو الموقع بسيطًا للغاية، والأيقونات جاهزة، والرسوم المتحركة ستُحسّن تجربة المستخدم). تابعونا في مقال آخر حول دور الذكاء الاصطناعي في التصميم، وتحديات الاعتماد عليه فقط.
تذكر أيضًا: أن الرموز التي يوفرها كلود للتصاميم محدودة للغاية، ويتجه فيجما ميك في الاتجاه نفسه. في التجربة الحالية، استهلك كلود 27% من استخدام التصميم الأسبوعي، بينما استهلك فيجما ميك 50 رمزًا من أصل 3000 رمز شهريًا، واستهلك ستيتش 5 رموز من أصل 400 رمز يوميًا.
ترقبوا الجزء الثاني حيث نستكشف أدوات الذكاء الاصطناعي بشكل أعمق، ونأمل أن يوفر لنا Figma و Anthropic المزيد من الرموز لإجراء اختبار شامل (تلميح، تلميح، Anthropic، Figma).