هذا أمر جنوني... المواجهة التي أنهت الجدل بين Google Stitch وClaude Design
AAI LABS
Computing/SoftwareSmall Business/StartupsPhotography/ArtInternet Technology
Transcript
00:00:00لطالما كان Gemini النموذج الأفضل عندما يتعلق الأمر بالتصميم، على الرغم من عدم تساويه في مجالات أخرى،
00:00:05خاصة مع أداة التصميم Stitch التي استخدمناها عدة مرات في سير عملنا.
00:00:09لقد أصبح هذا أفضل عندما أصدرت Stitch تحديثها 2.0 مع ميزات جديدة متعددة،
00:00:14مما دفعها إلى الأمام أكثر. لكن Anthropic تقدمت أيضًا ودخلت مجال التصميم مع
00:00:19إصدار Opus 4.7 وClaude design اللذين أحدثا تأثيرًا جعل الناس يبدأون في تسميته
00:00:24نهاية Figma. لكن السؤال الحقيقي هو أيهما أفضل حقًا؟ لذا ومن أجل حسم هذا الأمر،
00:00:30سنضعهما تحت الاختبار عبر فئات متعددة، وفي النهاية، ستعرف أيهما
00:00:34يستحق مكانًا في سير عملك. يمتلك كل من Claude design وGoogle Stitch الكثير من الميزات
00:00:39التي تميزهما عن بعضهما البعض. تم إصدار Claude design بجانب Opus 4.7 وسرعان ما
00:00:45اكتسب شهرة كـ “قاتل فيجما” بسبب ميزاته التفاعلية. لقد أصبح النموذج
00:00:49نفسه أفضل بكثير في التصميم، ومع أداة التصميم الخاصة بهم، تحسنت تصاميمهم كثيرًا.
00:00:54من ناحية أخرى، يتواجد Google Stitch منذ فترة ولم يكن جيدًا بما يكفي حتى أصدرت جوجل
00:00:58Gemini 3، النموذج الأفضل بشكل لا يصدق في التصميم مقارنة بجميع النماذج الأخرى. لذا
00:01:04بالاقتران مع Stitch، تحسنت التصاميم بشكل ملحوظ. الآن دعونا نرى أين
00:01:08يتفوق كل منهما بالفعل. يمتلك Claude design ميزة تتيح لك إنشاء عرض تقديمي باستخدام
00:01:13ميزاته وكتابة ملاحظات المتحدث بداخله أيضًا. لكن Stitch لا يملك شيئًا كهذا
00:01:17لأن Stitch مخصص لواجهة المستخدم فقط ولا يوفر أي ميزات لتصاميم أخرى غير واجهات الهواتف والويب.
00:01:23في Claude design، يمكنك أيضًا الإشارة إلى مشاريعك الأخرى التي تريد أن يتبع التصميم
00:01:28نمطها من خلال ربط مستودع GitHub الخاص بك، مما يسمح لـ Claude باستيراد أنماط التصميم
00:01:32منه وإنشاء التصاميم التالية بناءً عليها. يتعامل Stitch مع هذا بشكل مختلف قليلًا، فهو يستخدم
00:01:37أنظمة التصميم لنفس المهمة حيث يمكنك نسخ نظام التصميم من مواقع ويب أخرى
00:01:42عبر تزويد الرابط الخاص بها فقط في Stitch، ومن هناك يستورد النمط الدقيق و
00:01:46ينشئ نظامًا يتم استخدامه في التصاميم اللاحقة. عندما يتعلق الأمر بإجراء التغييرات، يتيح لك Claude design
00:01:51إعادة التوجيه بالأوامر، ولكن يمكنك أيضًا النقر مباشرة على المنطقة التي تريد تغييرها وستظهر
00:01:56في تصميمك. يمكنك التعليق مباشرة على أي شيء تريد تغييره ومن ثم
00:02:00يبدأ بتطبيق التغييرات مباشرة عليه. يمكنك تجميع التعليقات وإرسالها إلى Claude
00:02:04دفعة واحدة. يسلك Stitch طريقًا آخر هنا، حيث لا يمكنك إجراء تغييرات مباشرة عليه باستثناء
00:02:09تغيير النصوص. لذا إذا كنت تريد أي تغيير مثل اللون أو حجم الخط، يجب عليك إضافة تعليق على المنطقة التي
00:02:14تحددها أو وضع إشارة عليها ثم إرسال التعليق إلى Gemini ليدمج تغييراتك.
00:02:19المدخلات الصوتية هي نقطة خلاف أخرى. يتيح لك Claude design استخدام صوتك لكتابة الأمر
00:02:24بدلاً من الكتابة بلوحة المفاتيح. ولكن هذه هي النقطة التي يتفوق فيها Stitch لأن ميزة القماشة الصوتية في Stitch هي
00:02:28أساسًا محادثة مباشرة تجريها مع النموذج حيث تخبره بكل شيء عن التصميم الذي
00:02:33تريد إنشاءه ويقوم بطرح أسئلة تتعلق بالتصميم وينشئ التصميم لك،
00:02:37كل ذلك يحدث بشكل حواري. يحتوي Stitch أيضًا على ميزة المعاينة المباشرة في لوحة منفصلة حيث
00:02:42يمكنك رؤية كيف يبدو تصميمك على سطح المكتب والجوال والجهاز اللوحي والتفاعل مع التصميم مباشرة.
00:02:47لا يملك Claude design ميزة المعاينة هذه بشكل منفصل. بدلاً من ذلك، يعرض واجهة المستخدم في
00:02:52نفس اللوحة حيث يمكنك التفاعل مع العناصر مباشرة بدلاً من الذهاب إلى شاشة معاينة
00:02:57أخرى، ولكن لا يمكنك التحقق من استجابتها كما يمكنك مع Google Stitch. تم تصميم
00:03:01Claude design أيضًا للعمل مع الفرق، لذا فهو يتيح لك مشاركة مشروع بأذونات متعددة مثل
00:03:06أذونات التحرير والتعليق بشكل منفصل، وهو ما لا يتوفر في Stitch. في Stitch، يمكنك فقط مشاركة
00:03:11المشروع وترك الجميع يعملون عليه بدلاً من الحصول على أذونات منفصلة مثل Claude design.
00:03:15لذا، على الرغم من حقيقة أن Stitch مشروع أكثر نضجًا وأن Claude design مشروع
00:03:20تم إصداره مؤخرًا فقط، إلا أننا سنمنح النقاط لـ Claude design في الميزات. يعتبر
00:03:24Claude design منتجًا أحدث يتوفر فقط في خطط Pro وMax وTeam وEnterprise الخاصة بـ Claude.
00:03:30أما Stitch، فهو متاح مجانًا بغض النظر عن الخطة، ويستخدم فقط نظام
00:03:35لذا، من حيث سهولة الاستخدام، يوفر Stitch رصيدًا أكبر بكثير.
00:03:40إنه يسمح بـ 400 رصيد تصميم يومي و15 رصيد إعادة تصميم يومي، لذا تحصل على الكثير من الأرصدة للاستخدام
00:03:46حتى في يوم واحد، والأرصدة الشهرية أكثر من ذلك. عادةً ما يكلف التصميم البسيط الواحد ثلاثة
00:03:51أرصدة، ويمكن أن يختلف ذلك مع التعقيد وكذلك عدد الأجيال، لذا ستتمكن من الحصول على الكثير
00:03:56من التصاميم منه. يمتلك Claude design حدودًا منفصلة تمتد لأسبوع. هذا الحد لا
00:04:00يؤثر على حدود Claude Code الأخرى، لذا يمكنك استخدام ميزات Claude الأخرى بحرية حتى لو
00:04:05انتهت حدود التصميم. ولكن كما تحدثنا في الفيديو السابق، فإن هذا الحد غير قابل للاستخدام فعليًا
00:04:10لأنه لا يمنحك حرية التجربة وسينفد قبل أن تتمكن من استخدامه في أي
00:04:15بناء جوهري، وهذا يزداد سوءًا إذا كنت في خطة Pro لأنها تسمح لك فقط
00:04:20بتجربة عدد قليل من التصاميم قبل أن تنفد. لذا إذا كنت تريد حقًا الاستفادة من
00:04:24Claude design، فستحتاج إلى التبديل إلى خطط Max الخاصة بهم. لذا بمقارنة التكاليف لكليهما، فإن Stitch
00:04:29هو الفائز الواضح وبفارق كبير لأنه على الأقل يتيح لك تجربة التصاميم وهو ما لا يوفره
00:04:34Claude design. لقد اختبرنا كلتا الأداتين على نفس الأمر مع نبذة مختصرة عن نمط الموقع و
00:04:39الأقسام التي أردناها. أنشأ Claude design قائمة المهام كما يفعل Claude Code عادةً وبدأ
00:04:44في العمل. وبينما كان Claude design يستغرق وقته، أعطينا نفس الأمر بالضبط لـ Google Stitch.
00:04:49أول شيء فعله Stitch هو إنشاء نظام التصميم مع تصور كل شيء بدءًا من الألوان إلى
00:04:54أيقونات الطباعة والأزرار. حتى قبل أن ينتهي Claude design، كان Stitch قد انتهى. لقد بنى صفحة
00:04:59هبوط مستخدمًا نفس النمط من نظام التصميم الخاص به مع توازن تام بين الألوان الأساسية و
00:05:04الثانوية. استغرق Claude design وقتًا أطول بكثير وبعد انتهائه بدأ في العمل عبر
00:05:09خطوات التحقق. كل جزء من عمل Claude design كان تفاعليًا بخلاف صفحة Stitch الثابتة.
00:05:15في تشغيله الأول، قدم لنا خيار القرار بين ألوان اللمسات والسمة الرئيسية
00:05:20بحيث يمكننا إجراء تغييرات بسيطة بأنفسنا بدلاً من إعادة الطلب. في اختبار جودة التصميم، سنعطي
00:05:25Google Stitch النقاط لأن تصميمه كان أفضل بكثير من الآخرين. لقد استخدم Stitch
00:05:30لوحة الألوان بإبداع لتناسب النمط وتلائم أجواء التطبيق، بينما شعرت خيارات Claude design
00:05:34بأنها عامة وتفتقر إلى العمق. أيضًا من حيث السرعة، يتفوق Stitch هنا أيضًا لأن
00:05:39Claude design يستغرق وقتًا طويلاً جدًا في كل تصميم. كلما احتاج Claude design لإضافة صور فإنه ينشئ ملفات SVG
00:05:45ويدمجها في التصميم. ما لم توفر أصولًا خاصة بك، فإنه يعتمد على توليد
00:05:50ملفات SVG بالكامل. من ناحية أخرى، تمتلك جوجل Nano Banana، نموذج توليد الصور الخاص بها. لذا
00:05:55يدمجها Stitch مباشرة في المنتج وحتى إذا لم تخبره صراحة، فإنه يستخدم توليد الصور
00:06:00لكل الأقسام في التصميم والنتائج تصبح أفضل بكثير. بغض النظر عن مدى
00:06:05جودة ملفات SVG، لا يمكنها منافسة نموذج الصور. لذا في هذه الحالة، Google Stitch
00:06:10هو الفائز الواضح. لا يُعرف Stitch حقًا بالرسوم المتحركة لأن تركيزه الوحيد منصب على التصميم
00:06:16ولكننا ما زلنا نحاول رؤية كيف سيتعامل معها. لقد حاول إضافة بعضها لكن الرسوم المتحركة لم تكن
00:06:21مرئية مباشرة وكان يمكن معاينتها فقط في علامة تبويب منفصلة، وقد ولّد فقط
00:06:26تأثير الظهور عند التمرير في قسم واحد من الصفحة. لكن عندما أعطينا نفس المهمة لـ Claude design، فقد أضاف العديد من
00:06:32الرسوم المتحركة مثل شريط متحرك أسفل قسم البطولة. كما تم إضافة تأثير الظهور عند التمرير ولكنه كان
00:06:37أكثر تناسقًا وتم تطبيقه بشكل صحيح على كل مكون، وليس فقط قسم البطولة. إن Claude design
00:06:43أفضل بكثير في الرسوم المتحركة من Stitch لأنه يستخدم مكتبات مشهورة مثل shaders وهو قادر
00:06:48على إنشاء رسوم متحركة تفاعلية أكثر تتغير سلوكياتها مع حركة الماوس والنقرات.
00:06:54لذا من حيث الرسوم المتحركة، Claude design هو الفائز الواضح. أيضًا إذا كنتم تستمتعون بمحتوانا
00:06:59ففكروا في الضغط على زر التشجيع (hype) لأن ذلك يساعدنا على إنشاء المزيد من المحتوى كهذا والوصول إلى
00:07:04المزيد من الناس. لاختبار مدى فهم كل منهما للتطبيق والتعامل مع التغييرات، طلبنا منهما إنشاء
00:07:09صفحات التسجيل وتسجيل الدخول فوق التطبيق الموجود بالفعل. أكمل Stitch التصميم أولاً، مستخدمًا
00:07:14نفس نظام التصميم لكل صفحة ونفذ نفس الترويسة والتذييل في كل واحدة. كان بإمكاننا
00:07:19مشاهدة كيفية تدفقهما مع ميزة النموذج الأولي ورؤية كيف يتصل كل زر بالآخر.
00:07:24كان تنفيذ Claude design ملائمًا لفكرة التطبيق بشكل أكبر وفهم ما كان مطلوبًا
00:07:28بشكل أفضل. لقد بنى صفحة تسجيل الدخول بإبداع، وفي صفحة التسجيل ذهب أبعد من ذلك
00:07:33ونفذ أنماطًا متعددة للحسابات. أردنا أيضًا أن نرى مدى جودة دمج كل منهما
00:07:38للتغييرات. في Claude design، أضفنا التعليقات فقط وأرسلناها معًا وبدأ في تنفيذها.
00:07:44في Stitch، كان علينا وضع إشارات على المناطق التي أردنا فيها تغييرات ولكن التغيير لم يكن بالضبط
00:07:49ما أردناه. لقد أضاف تذييلاً في المكان الخطأ بعد الاقتباسات مباشرة وكان ذلك غريبًا.
00:07:54بشكل عام، التكرار مع Stitch ليس سهلاً لأنه لكل تغيير مطلوب فإنه ينشئ شاشة جديدة
00:07:59وعند نقطة معينة تصبح الشاشات مزدحمة للغاية. يعتبر Claude design تجربة أفضل بكثير لأن
00:08:04التغييرات تنعكس مباشرة على التصميم وبما أنه يفهم التطبيق فإنه ينفذها بشكل صحيح
00:08:09دون الخروج عن النمط. لذا من حيث التكرار في التصميم، فإن Claude design هو بالتأكيد
00:08:14الطريقة الأفضل. لكل أداة نظام تصميم خاص بها. بالنسبة لـ Claude design، يحدد نظام التصميم
00:08:20هويتك التجارية لأن هذه الأداة مخصصة للفرق التي تعمل على مجموعات العلامات التجارية. يمكنك إضافة وصف لها
00:08:25جنبًا إلى جنب مع الخطوط والشعارات والأصول وكل شيء آخر، وينشئ نظامًا كاملاً يمثل
00:08:30نمط علامتك التجارية. بالنسبة لـ Stitch، نظام التصميم هو ملف لا يحدد هوية العلامة التجارية ولكن بدلاً من ذلك
00:08:36يمثل تصميمًا معينًا. هذا الملف غير مقتصر على Stitch، يمكنك تصديره واستخدامه في
00:08:41أي وكيل وسيتم فهمه وتنفيذه مباشرة. كما ذكرنا سابقًا، يمكنك استيراد
00:08:46أنظمة التصميم من مواقع الويب الأخرى أو إنشاء أنظمة خاصة بك. لقد جعل Stitch ملف design.md مفتوح المصدر
00:08:52والذي يحتوي على أوامر npm للتثبيت والتنسيق المناسب. كل نظام تصميم يخدم غرضًا
00:08:57مختلفًا ولكننا نفضل نظام جوجل لأنه يسمح بالتبديل بين المنصات بسهولة ولا
00:09:02يقيدك بـ Stitch. الآن بعد أن اختبرنا التصاميم حان الوقت للحديث عن كيفية
00:09:07تسليم التصميم ليصبح كودًا برمجيًا لكل منهما. كما ذكرنا سابقًا، يوفر Claude design خيارات تصدير أكثر
00:09:13مع التحكم في الأذونات. يتيح لك التصدير بصيغة pdf وشرائح وحتى التصدير إلى القماش (canvas) لكي
00:09:18تواصل تصاميمك هناك بشكل أكبر. لكن نمط التسليم الذي نستخدمه في الغالب هو التسليم إلى Claude Code
00:09:23لأن هذا هو المكان الذي نطور فيه تطبيقاتنا أكثر من غيره. لذا بنسخ أمر واحد ولصقه
00:09:28داخل Claude Code سيقوم بنسخ التصميم وتنفيذه في التطبيق. من ناحية أخرى، يمتلك Google Stitch
00:09:33أنماط تسليم أفضل بكثير. يمتلك Stitch بروتوكول MCP يمكن من خلاله ربطه بـ
00:09:39وكيلك البرمجي والسماح له بإرسال أوامر لـ Stitch لإنشاء التصاميم وسحب التصاميم منه لتنفيذها
00:09:44في التطبيق. لا يمتلك Claude design أي تكامل مع MCP لذا نحن نحب MCP الخاص بـ Stitch لأنه
00:09:49يعمل بالعكس بمعنى أن الوكلاء البرمجيين يمكنهم طلبه بلغة مخصصة لـ Stitch ونحن
00:09:53لا نضطر للقلق بشأن صياغة الأوامر المناسبة ومع ذلك نحصل على التصاميم التي نريدها. يتيح لك Stitch أيضًا
00:09:58التصدير ككود مضغوط (zip) ولكن لديك خيارات أخرى أيضًا. يمكنك إما تصديره إلى Google AI studio
00:10:04حيث يمكنك بناء تطبيقك أكثر باستخدام موارد الاستوديو وFirebase المدمج مباشرة
00:10:09في التطبيق أو يمكنك تصديره مباشرة إلى Figma لكي تعمل مع أشخاص آخرين هناك. نحن نستخدم
00:10:14تصدير MCP أكثر من غيره لأنه بهذا التكامل لا نضطر للقلق بشأن التسليم والوكلاء
00:10:19البرمجيون يتعاملون مع الأمر بأنفسهم بسهولة. كما يتيح لك التصدير كوثيقة متطلبات منتج (PRD) يمكنك تسليمها إلى
00:10:25أشخاص آخرين أو وكلاء برمجيين مما يتيح لهم تنفيذ التطبيق بسهولة دون أي مشكلة. لذا من حيث نمط
00:10:30التسليم، يعتبر Stitch فائزًا واضحًا. هذا يوصلنا إلى نهاية هذا الفيديو. إذا كنتم ترغبون في دعم
00:10:35القناة ومساعدتنا على الاستمرار في صنع فيديوهات مثل هذا فيمكنكم فعل ذلك باستخدام زر الشكر الفائق أدناه.
00:10:40كما هو الحال دائمًا، شكرًا لكم على المشاهدة وسأراكم في الفيديو القادم.