Transcript
00:00:00صدر Claude Design وغير كل شيء في عالم التصميم، ولكن في الواقع
00:00:04الأمر مجرد ضجة أكثر مما يدركه معظم الناس.
00:00:05وهذا بالضبط سبب أن ما تراه على منصة X ليس القصة الكاملة.
00:00:09إذا كنت تعتقد أن Claude Design يقوم بشيء ثوري أو أن تلك العروض التجريبية الجنونية
00:00:13المنتشرة هي دليل على أنك بحاجة للانتقال إليه، فأنت في الحقيقة مخطئ هنا.
00:00:17الأداة نفسها ليست هي السبب في أن تلك التصاميم تبدو جيدة جداً، والطريقة التي يستخدمها بها الناس
00:00:21تعمل ضدهم بصمت بطريقة لم يلحظها معظمهم بعد.
00:00:25تم تسويق Claude Design كمنتج ثوري لصناعة التصميم في اللحظة التي
00:00:29صدر فيها.
00:00:30بدأ الناس يسمونه قاتل Figma أو نهاية عصر المصممين، وكان التأثير كبيراً
00:00:34لدرجة أن أسهم Figma استمرت في الانخفاض وتأثر تقييمها.
00:00:38إنه أداة لإنشاء نماذج أولية واقعية، وهياكل أسلاك، وتصاميم، وعروض تقديمية، وأنواع أخرى
00:00:43مختلفة من التصاميم.
00:00:44لكن الحقيقة هي أنه مجرد ضجة أكثر من أي شيء آخر.
00:00:47إنه حرفياً Claude Code أُعيد تغليفه كأداة أخرى وبيعه كأداة جديدة، لأن Claude Code يمكنه
00:00:52فعل الشيء نفسه وربما أكثر.
00:00:54توجد ميزات مثل التعديل والتعليقات في Claude Design، ولكن لا يوجد شيء هنا لا يمكن
00:00:58لـ Claude Code فعله إذا منحته الأدوات المناسبة.
00:01:01وعندما نقول أن هذا هو Claude Code مُعاد تغليفه، فليس لأننا لم نختبره.
00:01:05لقد قدمنا له طلباً بسيطاً، نطلب منه إنشاء موقع إلكتروني للمجتمع وأجبنا على الأسئلة
00:01:09التي طرحها.
00:01:10لقد أنشأ تصميمين كانا مثيرين للإعجاب بحد ذاتهما وأفضل بكثير من الطريقة التي كان يستخدمها Claude
00:01:14لتوليد صفحات الهبوط سابقاً، لكنهما كانا لا يزالان يعانيان من الكثير من المشاكل.
00:01:18إصدار واحد كان مقطوعاً عند قسم الأسعار ولم يكن هناك تذييل (footer) على الإطلاق، لذا اختبرنا
00:01:23كيف سيكون أداء Claude Code مع طلب مماثل.
00:01:25استخدمنا Opus 4.7 بجهد عالٍ للمقارنة بينهما، والتصميم الذي أنتجه كان
00:01:30على قدم المساواة مع قدرات Claude Design.
00:01:32كانت هناك بعض المشاكل، مثل لون خط زر التسجيل الذي لم يتم اختياره بشكل صحيح،
00:01:37لكنه بشكل عام كان تصميماً مبنياً بشكل جيد حقاً.
00:01:39وكان هذا على الرغم من عدم وجود حزمة التصميم (design harness) ودون أي طلب خاص
00:01:43يحتوي عليه Claude Design، بل اعتمد فقط على نفسه مع تقديمنا لمدخلات شبه معدومة.
00:01:48لكن العروض التي لا بد أنك رأيتها تبدو مثيرة للإعجاب، وهناك شيء مخفي خلف
00:01:52تلك العروض.
00:01:53ما يتم تداوله على وسائل التواصل الاجتماعي مبني على الضجيج أكثر مما تفعله الأداة
00:01:57فعلياً من تلقاء نفسها.
00:01:58ينشئ الناس تصاميم باتباع سير عمل مكثف ثم يقدمونها وكأن Claude
00:02:03Design بنى كل شيء في محاولة واحدة.
00:02:05لكن يمكن تشغيل نفس سير العمل هذا في Claude Code مباشرة دون الحاجة لـ Claude Design
00:02:09على الإطلاق.
00:02:10لذا، حتى لو كان هذا المنتج مصمماً للمصممين، فيجب عليهم استخدام Claude Code بدلاً من
00:02:14Claude Design، لأنهم بهذه الطريقة سيكونون قادرين على تجربة تنويعات مختلفة، وإجراء المزيد من التجارب
00:02:19والحصول على نفس النتائج إن لم تكن أفضل من Claude Design.
00:02:22يمكنهم التكرار مرات أكثر باستخدام Claude Code بدلاً من الانقطاع فجأة،
00:02:26في اللحظة التي يبدأ فيها التصميم بالتحسن.
00:02:28البناء فوق ما هو موجود بالفعل بدلاً من البدء من جديد في كل مرة يمنحهم
00:02:32تحكماً أفضل في اتجاه كل تصميم.
00:02:35ولأن كل ما ينتجه Claude Code هو كود حقيقي، فإن ما يحصلون عليه ليس
00:02:39نموذجاً أولياً قابلاً للرمي، بل شيئاً يمكن شحنه مباشرة في المنتج دون
00:02:43إعادة بنائه بواسطة شخص آخر بعد ذلك.
00:02:45وفوق كل هذا، هناك مشكلة التكلفة مع Claude Design.
00:02:48يمكن لـ Claude Code القيام بنفس الأشياء بتكلفة أرخص بكثير بينما تم بناء Claude Design بشكل منفصل
00:02:53ويُحسب ضمن حدود تعمل أسبوعياً ولا يتم احتسابها ضمن حدودك الأخرى
00:02:57لكنه يستهلك الاستخدام بوتيرة أسرع بكثير مما تتوقع عادةً مع النماذج
00:03:02من خلال تطبيقات Claude الأخرى.
00:03:03هذا يؤثر على المصممين بشدة لأن الحصة منخفضة جداً لدرجة أنهم لا يستطيعون إجراء التجارب
00:03:08بالطريقة التي يحتاجونها، وتنفد حدودهم بعد بضع محاولات تصميم فقط.
00:03:12وهذا بالضبط ما يشتكي منه الكثير من الناس.
00:03:15عندما كان شخص ما يعمل عليه، نفدت حدود تصميمه بسرعة بعد حوالي
00:03:1920 محاولة تصميم حتى عندما كانوا على أعلى خطة مدفوعة.
00:03:23ويقول الكثيرون إنهم يصلون إلى الحد الأقصى في ساعة واحدة فقط وما زالوا ينتهون بتصميم بسيط
00:03:27يمكن تنفيذه بسهولة باستخدام Claude Code في محاولة واحدة.
00:03:31لذا فهو ليس قابلاً للاستخدام عملياً لأنهم يصلون إلى الحدود قبل أن يتمكنوا
00:03:35حتى من إنهاء سير العمل الذي يعملون عليه، مما يجعله أسوأ بكثير مقارنة بحدود Claude Code.
00:03:39حدود.
00:03:40السبب في أن عمل Claude Design يبدو مثيراً للإعجاب هو في الواقع إطلاق نموذج Opus 4.7، وليس
00:03:45الأداة نفسها.
00:03:46Opus 4.7 هو مرة أخرى أحدث نموذج مع قدرات مذهلة وأداؤه
00:03:50أفضل عبر جميع المقاييس.
00:03:52لكن الترقية التي تهم حقاً هنا هي الرؤية (vision).
00:03:54يتمتع هذا النموذج برؤية أفضل بكثير ويمكنه رؤية الصور بدقة أكبر بكثير
00:03:59مما كان قادراً عليه سابقاً.
00:04:00كان Claude Opus 4.6 قادراً على تحليل الصور بدقة 1.15 ميجابكسل بينما
00:04:074.7 قادر على تحليل 3.75 ميجابكسل.
00:04:10وهذا يعني أنه قادر على فهم التصميم من المرجع بشكل أفضل بكثير.
00:04:14إذا أعطيته تصميماً مرجعياً، فإنه يعالج ذلك المرجع بوضوح أفضل بكثير
00:04:18ويلتقط أشياء كان سيفوتها من قبل.
00:04:20مع ترقية النموذج هذه، ملأت Anthropic الفجوة الوحيدة التي كانت تفتقر إليها نماذج Claude
00:04:25والتي كانت بحاجة لعمل مكثف، وهي تصميم الواجهات الأمامية (front end design).
00:04:27هذا النموذج أكثر ذوقاً وإبداعاً عند إكمال مهمة، ومن تلقاء نفسه ينتج
00:04:31واجهات وتصاميم ذات جودة أعلى.
00:04:34لذا عندما صدر Claude Design تم الترويج له بالكثير من الضجيج بسبب تصاميمه الجنونية
00:04:38ولكن في الواقع كان النموذج هو الذي تحسن.
00:04:41لم تكن الأداة هي التي أصبحت جيدة جداً لدرجة أنها أدت إلى المرئيات المختلفة التي
00:04:45تراها.
00:04:46كان Claude Design طريقة ذكية أخرى لبيع شيء ما وخلق ضجيج حوله من قبل Anthropic.
00:04:50الآن يمكنك الحصول على نفس المزايا التي تحصل عليها في Claude Design في Claude Code 2 أو ربما
00:04:55أفضل.
00:04:56يمكنك تكرار سير عمل الأسئلة الخاص بـ Claude Design في Claude Code عن طريق إنشاء مهارة بسيطة.
00:05:00عند إنشاء مشروع في Claude Design، تعطي طلباً ويطرح الكثير من الأسئلة
00:05:04حتى يتمكن من التأكد بشكل صحيح من اتجاه التصميم.
00:05:07يطرح أسئلة أكثر بكثير مما يفعله وضع التخطيط في Claude Code، لكن المهارة يمكنها فعل الشيء نفسه تماماً.
00:05:11تحتوي المهارة على تعليمات حول كيفية تشغيل جلسة أسئلة تماماً مثل Claude Design
00:05:16باستخدام الأسئلة لسد الفجوات التي يخلقها الطلب والسؤال عما يجب بناؤه.
00:05:21تحدد المهارة متى يتم تشغيل أسئلة المتابعة وكيف يجب أن يعمل سير العمل فعلياً.
00:05:25كما تتضمن أسئلة أمثلة لتشغيل الجلسة، ومكتبة من الأسئلة، وحتى
00:05:30تخطيطات ASCII للمواقع حتى تتمكن من تحديد وضع العناصر في صفحة
00:05:34الهبوط.
00:05:35عندما تعطيه طلباً، فإنه يستخدم المهارة ويطرح أسئلة تتعلق بالفجوات التي يحددها
00:05:39تماماً مثل Claude Design.
00:05:41يطرح أسئلة متعددة عبر مجالات مختلفة وبمجرد حصوله على جميع المعلومات
00:05:45اللازمة للتنفيذ، يبدأ في البناء.
00:05:47أفضل جزء هو أنه يخرج الكود مباشرة، لذا لا يوجد تسليم من التصميم إلى الكود.
00:05:51ومع هذا النهج، يمكنك التكرار بقدر ما تريد دون القلق بشأن نفاد
00:05:55الحدود في ساعة واحدة فقط.
00:05:57كان توليد واجهة المستخدم من نفس النوع من الطلبات إلى جانب سير عمل الأسئلة المماثل في
00:06:01Claude Code مشابهاً إلى حد كبير لما ولده Claude Design.
00:06:05الفرق الرئيسي هو أن Claude Design كان له ميزة في جوانب معينة حيث جعل
00:06:09الموقع أكثر غامرة بإضافة رسوم متحركة صغيرة لجعله يبدو أكثر جاذبية.
00:06:13ولكن قبل أن نمضي قدماً، دعونا نستمع إلى كلمة من الراعي الخاص بنا.
00:06:16HeyGen ربما حاولت صنع فيديو باستخدام
00:06:18أداة ذكاء اصطناعي.
00:06:19بعد 20 دقيقة تجد نفسك تتلاعب بالجداول الزمنية، وتعيد تسجيل التعليقات الصوتية، وتصارع مزامنة الشفاه التي تبدو
00:06:24كأنها دبلجة سيئة.
00:06:25HeyGen يتخطى كل ذلك.
00:06:26HeyGen هو مولد فيديو بالذكاء الاصطناعي أطلق للتو واجهة سطر أوامر (CLI) جديدة تماماً، مما يعني أنه يمكن توليد فيديو
00:06:31لشخصية رقمية توأم بطلب واحد فقط.
00:06:34لا جداول زمنية، لا كاميرا، لا طاقم عمل.
00:06:36سجل توأمك الرقمي مرة واحدة ويتيح لك HeyGen النشر باستمرار دون إعادة التصوير،
00:06:40وتحويل النشرات الإخبارية، وPDFs، والعروض التقديمية إلى فيديوهات.
00:06:44قم بتوليد فيديوهات متعددة المشاهد ومحررة بالكامل من طلب واحد باستخدام وكيل الفيديو ثم ترجمها
00:06:48لجمهور عالمي مع مزامنة شفاه كاملة.
00:06:51ابنِ باستخدام الصور الرمزية، والأصوات، ووكيل الفيديو، والترجمة والمزيد على developers.heygen.com
00:06:56التوائم الرقمية تتطلب موافقة موثقة.
00:06:59لا يتم استخدام محتواك أبداً لتدريب النماذج العامة والمنصة بأكملها مبنية من أجل
00:07:03أمان على مستوى المؤسسات.
00:07:04ابدأ في شحن فيديوهات بجودة الاستوديو دون لمس كاميرا.
00:07:07اضغط على الرابط في التعليق المثبت وجرب HeyGen اليوم.
00:07:11معظم تصاميم التفاعل عند التمرير التي قد تكون رأيتها على X عندما كان الناس يستعرضون
00:07:15Claude Design هي مجرد مواقع تستخدم خلفيات فيديو مما يجعلها تبدو أكثر
00:07:20تميزاً وتعطي انطباعاً بأنها أكثر إثارة للإعجاب مما هي عليه في الواقع.
00:07:24معظم العروض هي غالباً مجرد طلبات منسوخة من مواقع توفر قوالب
00:07:28طلبات جاهزة للاستخدام.
00:07:29تتضمن الطلبات رابطاً لفيديو يُقصد استخدامه كخلفية إلى جانب
00:07:33تعليمات مفصلة حول كيفية تنفيذه.
00:07:36لذا فإن أي وكيل قادر على تنفيذ هذا النوع من المواقع، ليس فقط Claude Design طالما
00:07:40أنه تلقى طلبات مماثلة.
00:07:42لكن هذه مجرد طلبات عينة لمواقع العرض.
00:07:45في الواقع، يتم بناء تطبيقات على مستوى الإنتاج باستخدام مكتبات مثل Lenis التي
00:07:49تُستخدم في العديد من تطبيقات الإنتاج بالإضافة إلى GSAP التي تعد واحدة من أكثر المكتبات شعبية
00:07:54لتنفيذ رسوم متحركة سلسة تجعل تجربة الموقع أكثر غامرة بكثير
00:07:59مما كانت عليه من قبل.
00:08:00لاختبار ذلك، قمنا فعلياً بتنزيل فيديو وفي طلبنا أخبرنا Claude Code فقط
00:08:04باستخدام الفيديو كقسم رئيسي (hero section) جنباً إلى جنب مع سمات الألوان التي أردناها وقام بتنفيذ
00:08:08بقية الموقع من تلقاء نفسه.
00:08:10كان علينا تصحيحه مرة واحدة فقط حيث اضطررنا لشرح ماهية الفيديو.
00:08:14وقد دمج الأسلوب بشكل مثالي في صفحة الهبوط مما جعلها أفضل بكثير من
00:08:18الإصدار السابق.
00:08:19تم تنفيذ الموقع بشكل جيد جداً وهو أمر قوي بالنظر إلى مدى بساطة الطلب
00:08:23وشمل رسوماً متحركة وتفاعلات مختلفة جعلت هذا الجزء من الموقع
00:08:28أكثر قوة وتفاعلية مما كان عليه من قبل مع قدرات Claude.
00:08:32الآن في Claude Code يمكنك أيضاً تزويده بمزيد من الأدوات بسهولة مقارنة بـ Claude
00:08:36Design لأن Claude Code أكثر قدرة تقنياً ويمكنه تنفيذ الأشياء بسلاسة أكبر.
00:08:42يمكنك حتى استخدام مهارة مفتوحة المصدر مثل Scrollytelling التي تتيح فعلياً رسوم التمرير
00:08:46القصصية في مشروعك.
00:08:48لذا مع هذه المهارة يمكن لـ Claude تنفيذ رواية القصص متعددة المستويات بسهولة من طلب بسيط
00:08:53والعمل على إنشاء رسوم متحركة تذهب إلى عمق أكبر بكثير مما سيكون Claude Design
00:08:57قادراً على فعله بمفرده.
00:08:59أيضاً إذا كنت تستمتع بمحتوانا فكر في الضغط على زر الـ hype لأنه يساعدنا
00:09:03على إنشاء المزيد من المحتوى كهذا والوصول إلى المزيد من الناس.
00:09:07استخدام Claude Code بدلاً من Claude Design يجعل من السهل تنفيذ واجهات المستخدم لأنه مع
00:09:11Claude Code يمكنك دمج أنظمة تصميم مدمجة بسهولة عن طريق دمج مكونات
00:09:16من shadcn، aceternity أو HeroUI التي تتضمن بالفعل الكثير من الرسوم المتحركة الجاهزة.
00:09:22هذا يقلل من حاجة النموذج لمعرفة كيف يجب أن يبدو كل مكون ويتصرف
00:09:27وبدلاً من ذلك يجعله يركز على تحسين التصميم العام.
00:09:30لذا فإن الوصول إلى النتيجة أسهل بكثير مقارنة بالعمل مباشرة في Claude Design افتراضياً.
00:09:35يمكنك أيضاً استخدام مهارات تصميم الواجهة الأمامية أو مهارات متخصصة أخرى مصممة لمشروعك
00:09:39مبنية باستخدام منشئ مهارات يحلل الحالة الحالية للمشروع.
00:09:43يساعد هذا على تنفيذ الميزات بشكل أكثر فعالية دون إضاعة الوقت.
00:09:47Claude Code أكثر مرونة أيضاً لأنه يمكنك توصيل خوادم MCP به.
00:09:51على سبيل المثال يمكنك استخدام خادم MCP لـ shadcn بحيث يمكن للوكيل تثبيت المكونات المناسبة
00:09:56بمفرده بدلاً من إخباره صراحة بما يجب استخدامه وأين.
00:09:59وبالمثل يمكنك استخدام العديد من الـ MCPs التي تساعد في بناء واجهات المستخدم بشكل أكثر فعالية بدلاً من الاعتماد
00:10:04على تصميم مولد بحت.
00:10:06حتى مع نماذج مثل Opus 4.7 وأدوات مثل Claude Design، غالباً ما تكشف التصاميم المولدة مباشرة
00:10:11أنها تم إنتاجها بواسطة نموذج لأنها تميل إلى اتباع أنماط متشابهة.
00:10:16لكن استخدام مكتبات راسخة يساعد في تقليل هذه المشكلة ويجعل النتيجة تبدو أكثر طبيعية
00:10:20وأقل قابلية للتنبؤ.
00:10:22أكبر ميزة لاستخدام Claude Code بدلاً من Claude Design هي أنه يمكنك توصيله
00:10:26بـ Git.
00:10:27الآن على الرغم من أنه يمكنك توصيل GitHub بـ Claude Design أيضاً، إلا أن هناك فرقاً كبيراً
00:10:30في كيفية عمل كليهما.
00:10:31تكامل Git في Claude Design أساسي إلى حد ما.
00:10:34إنه يسمح له بشكل أساسي بجلب الملفات من مستودع GitHub متصل واستخدامها لـ
00:10:38فهم التصاميم.
00:10:39لكن غرضه محدود في الغالب بالقراءة والمرجعية.
00:10:42إنه لا يجري تغييرات على المستودع حقاً.
00:10:45Claude Code من ناحية أخرى مختلف جداً.
00:10:47يمكنه إجراء عمليات Git كاملة مثل الالتزامات (commits)، والتفريعات (branching) والمزيد.
00:10:51لذا إذا حدث خطأ ما في تنفيذك أو إذا كنت تفضل إصداراً قديماً بعد إجراء
00:10:55تغييرات، يمكنك بسهولة الرجوع إلى إصدار سابق باستخدام Git.
00:10:59هذا شيء لن تكون قادراً على فعله مع Claude Design أثناء استخدامه، مما يجعل
00:11:02Claude Code نهجاً أقوى بكثير.
00:11:04لتصميم نماذج أولية مختلفة بدلاً من الذهاب إلى Claude Design أو استخدام Figma، فمن
00:11:09الأكثر فعالية إذا قمت بعمل نماذج بالحجم الطبيعي مباشرة في HTML.
00:11:12لتجربة تنويعات مختلفة، يمكنك أيضاً الاستفادة من وكلاء متوازيين وأشجار عمل (work trees) لـ
00:11:16تقسيم المهام، مشابهة لكيفية استكشاف Claude Design للتصاميم ولكن بطريقة مُدارة بواسطة Git،
00:11:21لذا يمكنك الاحتفاظ بأفضل إصدار والتخلص من الباقي بسهولة.
00:11:24يمكنك ببساطة إعطاؤه طلباً لاستخدام وكلاء فرعيين في أشجار عمل منفصلة واطلب من كل وكيل
00:11:29تنفيذ تنويعة مختلفة من نفس التصميم.
00:11:31مع ذلك، سيقوم Claude بإنشاء وكلاء في مساحات عمل منفصلة.
00:11:35يساعدك استخدام الوكلاء المتوازيين على توفير الوقت والجهد أثناء استكشاف اتجاهات متعددة
00:11:39في وقت واحد.
00:11:40الآن بمجرد أن ينتهي كل وكيل من عمله، تحصل على تنويعات متعددة يمكنك مراجعتها
00:11:44في أي وقت واختيار أياً منها يناسب احتياجاتك بشكل أفضل.
00:11:47من هناك، يمكنك إجراء تغييرات ومواصلة بناء التطبيق بناءً على النمط الدقيق الذي
00:11:51يعجبك أكثر.
00:11:52وعلى الرغم من عدم توليدها بواسطة Claude Design، لا يزال لكل من التصاميم المولدة
00:11:57مظهر جمالي مع ملفات SVG مناسبة تم إنشاؤها بالكامل من خلال الكود لتصوير العناصر وتوازن عام
00:12:02أفضل بكثير.
00:12:04يمكنك بعد ذلك دمج إصدارك المفضل في الفرع الرئيسي (main) وإزالة أشجار العمل التي تحتوي على
00:12:08التصاميم التي لم تعجبك.
00:12:09المهارات المستخدمة هنا إلى جانب موارد أخرى متاحة في AI Labs Pro لهذا الفيديو
00:12:15ولجميع فيديوهاتنا السابقة من حيث يمكنك تنزيلها واستخدامها لمشاريعك الخاصة.
00:12:19إذا وجدت قيمة فيما نفعله وتريد دعم القناة، فهذه هي أفضل طريقة
00:12:23للقيام بذلك.
00:12:24الرابط موجود في الوصف.
00:12:25هذا يوصلنا إلى نهاية هذا الفيديو.
00:12:26إذا كنت ترغب في دعم القناة ومساعدتنا على الاستمرار في صنع فيديوهات كهذه، يمكنك القيام
00:12:30بذلك عن طريق استخدام زر Super Thanks أدناه.
00:12:33كما هو الحال دائماً، شكراً للمشاهدة وأراكم في الفيديو القادم.