هذا المستودع مفتوح المصدر استنسخ تصميم Claude (وهو رائع!)

CChase AI
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00يجب أن يكون تصميم Claude أعظم أداة استخدمتها على الإطلاق.
00:00:02في الواقع، إنه غير قابل للاستخدام تماماً.
00:00:05على الرغم من أنني أدفع لشركة Anthropic مئتي دولار شهرياً مقابل خطة 20X.
00:00:10أصل إلى حدود الاستخدام الأسبوعية في تصميم Claude في أقل من ساعة.
00:00:14هذا أمر محبط للغاية، ولكن لحسن حظي وحظك،
00:00:17هناك أمل لأن مستودعاً مفتوح المصدر جديداً تماماً تم
00:00:22إطلاقه للتو،
00:00:23والذي يقوم بشكل أساسي باستنساخ تصميم Claude ويحوله إلى مهارة يمكننا استخدامها.
00:00:28يُطلق عليه اسم Huashu design وهو مبني على نفس مطالبات النظام
00:00:32التي يستخدمها تصميم Claude.
00:00:33واليوم سنضعه في اختبار مواجهة مباشرة ضد تصميم Claude
00:00:37لنرى ما إذا كان هذا الشيء يستحق وقتنا فعلاً. لأنه إذا كان كذلك،
00:00:41فقد نجد مخرجاً من سجن حدود استخدام تصميم Claude.
00:00:45يحل Huashu design مشكلة أن تصميم Claude أداة مذهلة،
00:00:50ولكن لا يمكنك استخدامه لأكثر من ساعة قبل أن تصطدم بحدود
00:00:54الاستخدام.
00:00:55لذا قاموا بأخذ جميع مطالبات النظام وفلسفات التصميم الخاصة بـ
00:00:58تصميم Claude وحولوها إلى مستودع GitHub مفتوح المصدر،
00:01:02والذي هو في الأساس مجرد مهارة واحدة يمكننا تحميلها في Claude code أو codex أو
00:01:07أي وكيل برمجة حقاً، تماماً مثل تصميم Claude.
00:01:10إنه قادر على إنشاء نماذج أولية تفاعلية لتطبيقات الويب أو تطبيقات الهاتف المحمول.
00:01:13يمكننا عمل شرائح عرض، وتصميم حركي، ورسوم بيانية، وغير ذلك الكثير.
00:01:17وهو قادر على القيام بكل هذا بمهارة واحدة فقط لأنه يحتوي في الواقع على
00:01:21الكثير من الأمور التي تعمل تحت الغطاء. على سبيل المثال،
00:01:24لديه وصول إلى 20 ملفاً عميقاً بصيغة Markdown تشرح ما يجب فعله لشرائح
00:01:28العرض، وأساليب التصميم المختلفة، وأفضل ممارسات التحريك.
00:01:31لذا على الرغم من أنها مهارة واحدة من الخارج،
00:01:33إلا أنها تمتلك حق الوصول إلى ما يشبه 20 مهارة صغيرة.
00:01:35كما أن لديه وصولاً إلى عدد من المكونات والوسائط والأصول التي يمكنه الرسم
00:01:40منها عندما يقوم بالتصميم لك.
00:01:42ويحتوي على سلسلة أدوات تنفيذية كاملة.
00:01:44لذا فهو يمنحه القدرة على أخذ ملف HTML وتحويله إلى MP4 أو
00:01:50استخدام Playwright للتأكد فعلياً من أن ما صممه لك على
00:01:53الورق يعمل بالفعل في الواقع. وتماما مثل تصميم Claude،
00:01:56نحن قادرون على رؤية اختلافات مختلفة. لدينا نظام التعديل الكامل.
00:02:00وأفضل جزء هو أنه بما أنها مهارة، إذا كنت داخل Claude code،
00:02:05فإن الأمر يعتمد على ذلك الاستخدام، سواء كنت Pro 5X أو 20X،
00:02:08فأنا لست مقيداً بحد استخدام تصميم Claude
00:02:13الذي يبدو تعسفياً، ولكن لنضعه في الاختبار.
00:02:16لذا ما سنفعله هو أننا سنرى مدى جودة عمل هذا الشيء فعلياً
00:02:18من حيث تصميم صفحة هبوط من الصفر.
00:02:22ثم سنلقي نظرة على كيفية قيامه بنفس الشيء تقريباً،
00:02:24ولكن إذا منحناه أصولاً للبناء عليها مشابهة لنظام تصميم Claude،
00:02:29وأخيراً، سنرى مدى أدائه في شرائح العرض، وعلى طول الطريق،
00:02:33سنقارنه بتصميم Claude وجهاً لوجه.
00:02:36لذا يمكننا أن نرى ما إذا كان هذا يستحق العناء فعلاً. ولكن قبل القيام بذلك،
00:02:39كلمة سريعة من الراعي المفضل للجميع: أنا. ففي الشهر الماضي فقط،
00:02:43طرحت دورة Claude code المتقدمة وهي الطريقة الأولى للانتقال
00:02:46من الصفر إلى مطور ذكاء اصطناعي، خاصة إذا لم تكن من خلفية تقنية.
00:02:51أقوم بتحديث هذه الدورة كل أسبوع.
00:02:53وقد طرحت للتو وحدات نظام التشغيل الذكي لـ Claude code.
00:02:56لذا إذا كنت شخصاً يريد تعلم كيفية الاستفادة المثلى من هذه الأداة،
00:03:01فأنت بحاجة للتحقق منها. يمكنك الحصول عليها داخل Chase AI.
00:03:04بالإضافة إلى وجود رابط لذلك في التعليق المثبت. فلنبدأ.
00:03:08لذا المطالبة التي أعطيها لـ Claude code،
00:03:09والتي ستستخدم مهارة Who wash your design طوال الوقت هي استخدام
00:03:13مهارة التصميم لإنشاء صفحة هبوط لمنتج SaaS الخيالي الخاص بي "Lighthouse"،
00:03:17طالباً أي أسئلة تحتاجها قبل أن نبدأ. الآن،
00:03:21لقد أعطيت نفس المطالبة بالضبط لتصميم Claude.
00:03:24لذا يعود Who wash who بستة أسئلة تسأل عما يفعله Lighthouse، والمشترين المستهدفين،
00:03:29والانطباع العام، والأقسام المطلوبة، والاختلافات. وأنت تعلم،
00:03:34هل يجب أن ينشئ بعض المحتوى الخيالي أم لدي نصوص؟
00:03:37يجب أن يستخدم تصميم Claude أسئلة مشابهة،
00:03:40على الرغم من أنه يتعمق أكثر قليلاً ومن الواضح بسبب طبيعته الرسومية،
00:03:44فإنه يعطيني بعض الأشياء للاختيار من بينها فيما يتعلق بالتوجه المرئي
00:03:48الذي يمكنني رؤيته فعلياً. لذا بالنسبة لـ Who wash who أنا أخبره،
00:03:50لنقم بنمط تحليلي. نحن نستهدف المطور الفردي.
00:03:54قلت أنني أريد رؤية أنماط وأساليب متعددة،
00:03:57وبهذه الطريقة يمكنني مقارنة المتغيرات.
00:03:59وأريد أيضاً أن يقوم بالنصوص بنفسه. وبالنسبة لتصميم Claude،
00:04:02أخبرته بنفس الشيء تقريباً وأنني أريد أيضاً ثلاثة متغيرات
00:04:05يمكنني النظر إليها جنباً إلى جنب.
00:04:06إليكم ما توصل إليه تصميم Claude مقابل ما توصل إليه Who wash who.
00:04:11سأقوم بإيقاف تشغيل الكاميرا حتى نتمكن من إلقاء نظرة أفضل على هذا.
00:04:16لذا دعونا نلقي نظرة على ما وضعه Who wash who في صفحة واحدة.
00:04:19كان بإمكاننا جعله يقوم بثلاث صفحات منفصلة،
00:04:22لكن هذا يسمح لنا برؤية كل شيء في وقت واحد. في الواقع، أنا أتراجع عن ذلك.
00:04:25لدينا في الأعلى جهة اليمين القدرة على الاطلاع على الثلاثة جميعاً.
00:04:29لذا هذا ما حصلنا عليه مع هذه المهارة.
00:04:31هذا النموذج الأول يبدو رائعاً حقاً. أنت تعلم،
00:04:35إنه يعطينا صفحة الويب كاملة. لدينا متغيرات المحطة الطرفية،
00:04:40نفس نوع الصفقة بالإضافة إلى النسخة الورقية.
00:04:44ويمكنني رؤية الثلاثة في وقت واحد. وبصراحة منذ البداية، جيدة جداً.
00:04:49هذا أفضل بكثير مما لو كنا نستخدم Claude code بمفرده.
00:04:52حتى أننا مع مهارة التصميم الأمامية قلنا، مهلاً، رائع،
00:04:55ثلاثة متغيرات، قوية جداً. والآن دعونا ننظر إلى تصميم Claude. تجدر الإشارة إلى أن
00:04:59التصميم أعطانا التعديلات مباشرة. لن ننظر إلى ذلك الآن،
00:05:03ولكن ها هي نسخته الطرفية، أنت تعلم،
00:05:07إنه يمر عبر الأمر برمته تحريرياً مرة أخرى،
00:05:11مشابه جداً للنموذج التحريري هنا.
00:05:15مشابه جداً جداً مكانياً.
00:05:19هذا بشع جداً. هذا بالتأكيد يعطي أجواء الذكاء الاصطناعي النموذجية.
00:05:24أعتقد أن هذا له علاقة كبيرة بالتدرج اللوني.
00:05:28ثم يمكنني مقارنة الثلاثة جميعاً. الآن،
00:05:32ما أريدك أن تفعله الآن ليس التفكير، أوه،
00:05:34واحد يبدو بالضرورة أفضل من الآخر في فراغ، ولكن حقاً فقط انظر كيف
00:05:37قريبة هذه المهارة التي ننظر إليها هنا مقابل التصميم. جداً،
00:05:42جداً مشابه، وهو إبهام كبير للأعلى لمهارة Who wash who.
00:05:46الآن ما أحب القيام به بعد رؤية هذه المتغيرات الكلية هو التركيز على واحد
00:05:51محدد أحبه، ثم البدء في إجراء تعديلات عليه.
00:05:54الآن للحفاظ على التشابه إلى حد ما حتى نتمكن من إجراء مقارنة أفضل.
00:05:59سأختار النموذج التحريري في التصميم،
00:06:03والذي يعرف باسم النموذج الأول هنا في المهارة.
00:06:06وسنرى مدى جودة قيامهم بالتعديلات. الآن بالنسبة لتصميم Claude،
00:06:09التعديلات موجودة بالفعل هنا. لذا بالنسبة للتحرير،
00:06:11يمكننا التبديل بين الفاتح والداكن. يمكنني تغيير اللون المميز.
00:06:15إنه يعطيني تقريباً أي لون يمكنني التفكير فيه، وهو أمر رائع نوعاً ما.
00:06:18يمكنني تغيير العنوان الفعلي،
00:06:21ولكن بعد ذلك يتم تقسيمها بين مكاني وعالمي.
00:06:25لذا ما سأفعله هو أنني سأطلب منه توسيع التعديلات وجعلها
00:06:29فقط للتحرير. وبينما يحدث ذلك،
00:06:31قفزت إلى Claude code وقلت،
00:06:33لنذهب مع متغير النموذج وأعطه قدراً كبيراً من التعديلات.
00:06:36حتى نتمكن من مقارنته على هذه الجبهة.
00:06:38لذا قام تصميم Claude بالمضي قدماً وأضاف مجموعة من التعديلات لنا. وتجدر الإشارة،
00:06:42في هذه المرحلة، فقط مما رأيته في هذا الفيديو،
00:06:44لقد استهلكت بالفعل حوالي 15% من استخدام تصميم Claude الخاص بي. حسناً،
00:06:49على جانب المهارة،
00:06:49لقد استخدمنا 13% فقط من نافذة السياق لجلسة واحدة.
00:06:54أي 130 ألف رمز، بمعنى آخر، ليس حتى 1% من استخدامي الأسبوعي،
00:06:59بافتراض أنني على خطة 20X، لكن الفرق مذهل. على الرغم من أنه يجب أن نعلم،
00:07:03أن هذا لا يزال يعمل على التعديلات لهذا الشيء الواحد.
00:07:05لذا فهو أبطأ قليلاً وتعمل تعديلات تصميم Claude كما هو متوقع.
00:07:10التعديلات بصراحة،
00:07:12هي واحدة من الأجزاء المفضلة لدي في تصميم Claude بشكل عام.
00:07:16أعتقد أن قوة تصميم Claude ليست بالضرورة مثل، أوه،
00:07:20التصاميم مذهلة. وأعتقد أنها خطوة للأمام.
00:07:22لا تفهموني خطأ،
00:07:24ولكن الحقيقة هي أنه يمكنني بسرعة كبيرة المرور عبر مجموعة من الأشياء المختلفة
00:07:28ورؤية كيف تبدو والتكرار والتكرار والتكرار بسرعة كبيرة.
00:07:31وشيء واحد نريد معرفته هنا هو أنه بسبب طبيعة عمل تصميم Claude،
00:07:36القدرة على النقر على أشياء محددة مثل هذا والعبث بـ
00:07:36الطباعة أو ترك تعليقات محددة.
00:07:40هذا ليس شيئاً يمكننا القيام به حقاً داخل مهارة التصميم.
00:07:43بالتأكيد لا أستطيع الرسم على مهارة التصميم والقول، مهلاً، ألق نظرة على هذا.
00:07:47لنقم، أنت تعلم، بالعبث بهذا، حرك هذا إلى اليسار قليلاً،
00:07:51حرك هذا إلى اليمين قليلاً. تلك الأنواع من الأشياء.
00:07:54تحتاج إلى واجهة رسومية لذلك،
00:07:57وهو المكان الذي سيتقدم فيه تصميم Claude بوضوح.
00:07:58لذا دعونا نقارن ذلك بالتعديلات التي نحصل عليها مع Huashu design.
00:08:01لذا تجدر الإشارة،
00:08:05أن التعديلات تطابق نوعاً ما نفس أسلوب الصفحة نفسها.
00:08:07يمكنني تغيير الإعدادات المسبقة.
00:08:10يمكنني تغيير نوع عائلة العرض، وضع مظلم مختلف قليلاً.
00:08:13يمكنني تغيير اللمسات ويبدو أنه يمكنني تغيير عدد من الأشياء مثل
00:08:18كثافة التخطيط. هل لدينا شريط الثقة؟
00:08:22هل يختفي شريط الثقة؟ نعم. هذا النوع من الأشياء. لذا بالتأكيد يمكن مقارنتها.
00:08:26هل هناك العديد من التعديلات هنا كما كانت في تصميم Claude؟ لا،
00:08:30ولكنني ببساطة على بعد مطالبة واحدة من الحصول على المزيد.
00:08:32وأعتقد أن الوجبة الجاهزة الكبيرة هنا هي Claude code مع مهارة التصميم هذه.
00:08:34تتنافس بالتأكيد مع ما يمكنك الحصول عليه داخل تصميم Claude أصلياً و
00:08:38إجمالي استخدام الرموز في هذه المرحلة هو 170 ألف، لم يستخدم في الأساس أياً من
00:08:42استخدامي الأسبوعي وقد استهلكت 15% من تصميم Claude. لذا لهذا المثال،
00:08:47وهو المطالبة الخام، لا نظام تصميم، لا أصول،
00:08:51انظر إلى ما يمكنك التوصل إليه. أعتقد أن المهارة كان أداؤها رائعاً.
00:08:56لذا دعونا ننتقل إلى العرض التوضيحي التالي ونرى مدى جودة أداء هذا.
00:08:59إذا أعطيناه شيئاً للبناء عليه، نوعاً من نظام التصميم،
00:09:02نوعاً من أمثلة التصميم ووضع المهارة في الاختبار،
00:09:06لأنني أعلم بالفعل أن تصميم Claude يمكنه فعل ذلك بشكل جيد جداً.
00:09:10عندما ننظر إلى تصميم Claude وأنظمة تصميمه،
00:09:13إنه يقوم بعمل جيد جداً في القدرة على أخذ كل ما نقدمه له.
00:09:16ويمكن أن يكون ذلك مجرد قاعدة كود أو شيء من هذا القبيل وسحب الكثير من
00:09:19المعلومات، كل شيء من التباعد إلى المكونات، المقاييس، الأزرار، الأبطال،
00:09:23كل هذه الأشياء. لذا عندما أحمل نظام التصميم هذا إلى تصميم Claude،
00:09:27أعلم أنه سيكون قادراً على الحفاظ على ذلك عبر أنواع مختلفة من
00:09:31المخرجات. على سبيل المثال،
00:09:34تصميم نظام التشغيل الذكي هذا هو شيء حولته إلى نظام تصميم.
00:09:36وبينما نراه كلوحة تحكم هنا داخل تصميم Claude،
00:09:39من السهل جداً تكرار سمة التصميم تلك.
00:09:42لذا ترى هذا داخل شريحة عرض، على سبيل المثال،
00:09:45يبدو أن كل شيء جاء من نفس المكان وذلك لأن نظام تصميم Claude
00:09:47قوي جداً. الجانب السلبي هو إنشاء هذا النوع من،
00:09:50نظام التصميم يستهلك حوالي 30% من استخدامك الأسبوعي.
00:09:55لذا ما قلته لتصميم Claude كان إعادة إنشاء صفحة هبوط Lighthouse هذه
00:10:00باستخدام لوحة تحكم نظام التشغيل الذكي تلك.
00:10:00ثم أخبرت Claude code بنفس الشيء تقريباً قائلاً،
00:10:04أريد استخدام الجماليات/نظام التصميم الذي يطابق لوحة التحكم تلك.
00:10:07ثم أخبرته أين يمكنه العثور على كل تلك المعلومات داخل دليل أو مرجع منفصل.
00:10:11هذا هو تقريباً ما يستخدمه كـ
00:10:14إلهام كجماليات له.
00:10:18لذا من الواضح أن العفريت هنا يجن جنونه،
00:10:22لكن بقية الأمر منطقي إلى حد كبير. أم،
00:10:25لقد قام بإنشاء لوحة تحكم هنا أيضاً،
00:10:28وهو مشابه جداً لهذا. أعتقد أن ذلك يبدو رائعاً جداً.
00:10:33أما بالنسبة للخطوط، والألوان،
00:10:37كل ذلك يتماشى كثيراً مع ما يجب أن يفعله.
00:10:41الشكوى الوحيدة الحقيقية التي لدي هي الشخصية الصغيرة هنا.
00:10:44فقط أنا لا أعرف ما الذي يحدث،
00:10:47لكن هذا ربما يكون إصلاحاً بسيطاً نسبياً.
00:10:52الآن دعونا نرى كيف فعلت مهارة Who wash who كمرجع.
00:10:54استغرقت المهارة 11 دقيقة وحوالي 70 ألف رمز، استغرق تصميم Claude
00:10:56حوالي ثلاث دقائق، لكنه استهلك 10% من استخدامه الأسبوعي.
00:10:59وها هو ما حصلنا عليه. سأغلق الكاميرا حتى نتمكن من الرؤية بشكل أفضل.
00:11:04لذا حصلنا على Claude صغير،
00:11:08أيقونة شعار صغيرة هنا. تجدر الإشارة إلى أن
00:11:10هذا الشعار مختلف قليلاً عن العفريت هنا في الأعلى،
00:11:15ولكن مهلاً، إنه مناسب. تبدو الألوان والخطوط منطقية للوهلة الأولى.
00:11:18ولدينا عفريتنا الصغير في الأعلى هنا أيضاً بجوار Lighthouse.
00:11:22أوه، هذا يبدو رائعاً نوعاً ما. إنه مثل مؤشر صغير.
00:11:26كل هذه الأشياء تبدو مألوفة جداً من لوحة التحكم من حيث مجرد
00:11:30أوه، هذا يبدو رائعاً. إنه أشبه بشريط أخبار صغير.
00:11:35كل هذه الأشياء تبدو مألوفة جداً من لوحة التحكم من حيث
00:11:40التصميم العام. هذا الجزء يبدو غير مضبوط قليلاً هنا.
00:11:43أتمنى لو تم رفع قسم الطرفية هذا ليصبح متمركزاً مع ما
00:11:47لدينا هنا على اليسار، لكن هذا إصلاح سهل. وبشكل عام،
00:11:51جيد جداً. أود القول إنني أحببت تصميمات كلود أكثر قليلاً،
00:11:56خاصة حقيقة أنها أنشأت لوحة تحكم خاصة بها وأدرجتها هناك.
00:12:00لكن مهلاً، لقد قامت بأعمال التصميم، أليس كذلك؟ لقد استوفت المعايير.
00:12:04تتمتع بنفس الخط، ونفس الألوان.
00:12:06بالتأكيد تشعر أنها تنتمي لنفس عائلة التصميم. لذا بالنسبة لهذا الاختبار،
00:12:11أعتقد أنه فوز كبير آخر لهذه المهارة، علامة إعجاب كبيرة. نعم.
00:12:14هل استغرقت وقتاً أطول قليلاً؟ بالتأكيد.
00:12:15لكنها كانت تنشئ نظام التصميم بشكل أساسي بمفردها.
00:12:18لم يكن لديها نظام جاهز مسبقاً. هل هي بجودة التصميم؟ همم. ربما لا،
00:12:22لكنها قريبة جداً وأرخص بلا حدود. لذا أنا منبهر جداً جداً.
00:12:27الآن في اختبارنا الأخير، سنلقي نظرة على العروض التقديمية.
00:12:29لقد جعلت كلود يصممها بالفعل.
00:12:31وأنت تلقي نظرة على محاولتها الأولى الآن.
00:12:33إنها تستخدم نفس نظام التصميم وتتحدث عن منتج البرمجيات كخدمة (SaaS) الوهمي الخاص بنا.
00:12:37لذا من حيث القدرة على الالتزام بالتصميم،
00:12:41من الواضح أنها قامت بعمل جيد جداً وكل هذا يبدو
00:12:46جيداً. الشكوى الوحيدة، الرمزي الصغير في الأعلى يبدو ممطوطاً نوعاً ما.
00:12:50لكن مرة أخرى، هذا ليس أمراً يصعب القيام به.
00:12:52ما يقلقني حقاً هنا هو هل يبدو الأمر رائعاً؟ هذا رائع قليلاً.
00:12:56ألا يطابق نظام التصميم عندما يتعلق الأمر بتصميم كلود. نعم،
00:13:00لقد تمكنت من القيام بذلك في دقيقتين فقط من حيث الاستخدام بنسبة 6%.
00:13:04الآن دعونا نرى كيف يقوم "كلود كود" بذلك باستخدام المهارة.
00:13:07وهنا ما حصلنا عليه. لذا مباشرة منذ البداية، مشابه جداً للموقع الإلكتروني.
00:13:11لقد كانت قادرة للتو على الإنشاء، ولديها نفس الرمز في الأعلى،
00:13:15يظهر في الأعلى.
00:13:16ولدينا شعار "كلود كود" الخاص بنا هنا على اليمين.
00:13:20لذا هذه هي صفحة الغلاف. رقم اثنين،
00:13:23يبدو أن بعض النصوص تتداخل هنا، لكنها ليست مشكلة كبيرة.
00:13:27الصفحة الثالثة تبدو جيدة. الشريحة الرابعة. هذه مقصوصة نوعاً ما،
00:13:32لكن قد يكون ذلك قرار تصميم بالكامل.
00:13:34حصلنا على بعض النصوص المتحركة التي تبدو جيدة. وفي الشريحة الأخيرة،
00:13:38لدينا القليل من التداخل هنا مرة أخرى،
00:13:40لكن هذه مشكلات صغيرة يمكننا إصلاحها بسهولة بمطالبة واحدة.
00:13:44لذا بشكل عام، عندما نقارن بين هذين التصميمين مقابل ما حصلنا عليه بالمهارة،
00:13:49متشابه جداً مرة أخرى،
00:13:50تلك حقاً ثلاثة أشياء على التوالي اختبرناها حيث تكون المهارة قادرة على
00:13:54المنافسة مع ما نحصل عليه في التصميم.
00:13:56وأعتقد أن هذه هي النتيجة الكبيرة من هذا الفيديو.
00:13:58لدينا الآن خيار للحصول على مخرجات تصميم كلود دون أن نكون مقيدين
00:14:03بحدود الاستخدام الجامحة هذه، وهو أمر رائع للمستخدم العادي.
00:14:07الآن في فراغ، هل ما زلت أعتقد أن تصميم كلود أفضل؟ نعم، بالطبع.
00:14:12المهارة تحاكي فقط كل ما يفعله تصميم كلود.
00:14:15ويتمتع تصميم كلود بميزة أشياء معينة مثل الرسم، والتحرير، والتعليق،
00:14:19والقدرة على جعل الجميع في الفريق يستخدمون هذا الشيء.
00:14:21لذا بطبيعة واجهته الرسومية،
00:14:24يمكنه القيام بأشياء لن تكون المهارة قادرة على القيام بها أبداً. لكن بالنسبة لكثير من الناس،
00:14:29ما رأيته هنا للتو هو أكثر من كافٍ. وهي قفزة كبيرة إلى الأمام عن،
00:14:34كما تعلم، استخدام مهارة التصميم الأمامية، على سبيل المثال. وتذكر،
00:14:37المهارة يمكنها فعل أكثر من مجرد صفحات الويب وعروض الشرائح.
00:14:40يمكنها القيام بأشياء مثل تصميم الحركة، والرسوم البيانية، وجميع أنواع الأشياء.
00:14:43لذا تحقق بالتأكيد من هذا الشيء. ليس لديك ما تخسره حقاً.
00:14:46لذا هذا ما سأترككم معه يا رفاق لهذا اليوم. آمل من خلال هذا الفيديو،
00:14:50أن أكون قادراً على إضافة أداة أخرى إلى صندوق أدواتك المتوسع باستمرار. وكما هو الحال دائماً،
00:14:54أخبرني برأيك.
00:14:55تأكد من الاطلاع على تشيس إيه آي بلس (Chase AI Plus) إذا كنت ترغب في الحصول على
00:14:58دورة كلود المتقدمة وسأراك في وقت لاحق.

Key Takeaway

يوفر مستودع Huashu design مفتوح المصدر مهارة برمجية قابلة للدمج في Claude code تُحاكي قدرات تصميم Claude بكفاءة عالية، مما يحرر المستخدم من قيود الاستخدام الأسبوعية التعسفية.

Highlights

  • يُقدم مستودع Huashu design مفتوح المصدر بديلاً لتصميم Claude عبر محاكاة مطالبات النظام الأصلية دون القيود الصارمة للاستخدام.

  • تستهلك مهارة التصميم هذه 130 ألف رمز فقط، مقارنة بـ 15% من حدود الاستخدام الأسبوعي لـ Claude عند تنفيذ مهام مشابهة.

  • تمتلك مهارة Huashu وصولاً إلى 20 ملفاً عميقاً بصيغة Markdown تغطي أفضل ممارسات التحريك، وتصميم الشرائح، وأساليب التنسيق.

  • تدعم المهارة سلسلة أدوات تنفيذية كاملة، بما في ذلك تحويل ملفات HTML إلى MP4 واستخدام Playwright للتحقق من سلامة التصاميم.

  • تُنافس مخرجات Huashu جودة تصميمات Claude الأصلية في إنشاء صفحات الهبوط، مع توفير قدرة أكبر على التكرار المستمر.

Timeline

مشكلة حدود الاستخدام وبديل Huashu

  • يُعد تصميم Claude أداة قوية لكنها مقيدة بحدود استخدام أسبوعية تُستنفد في أقل من ساعة.
  • يعتمد Huashu design على مطالبات النظام الأصلية لتصميم Claude ويحولها إلى مهارة قابلة للاستخدام مع وكلاء البرمجة.
  • يعمل هذا المستودع كمهارة قابلة للتحميل في Claude code، مما يتيح تجاوز قيود الاستخدام الافتراضية.

على الرغم من دفع اشتراكات شهرية باهظة تصل لـ 200 دولار، يواجه المستخدمون حواجز زمنية في الاستخدام. جاء Huashu كحل مفتوح المصدر يحاكي الفلسفة التصميمية لـ Claude. لا يعمل Huashu كأداة منعزلة، بل كمهارة يمكن دمجها مباشرة في مسارات عمل وكلاء البرمجة الحاليين.

مقارنة مباشرة في تصميم صفحة هبوط

  • تنتج المهارة نتائج تصميمية قريبة جداً من جودة Claude في بناء صفحة هبوط من الصفر.
  • استهلكت مهارة Huashu أقل من 1% من حد الاستخدام الأسبوعي مقارنة بـ 15% لميزة Claude الأصلية.
  • تفتقر مهارة Huashu إلى الواجهة الرسومية التفاعلية المباشرة التي تسمح بالرسم والتعليق اليدوي على التصميم.

تم اختبار كلتا الأداتين في إنشاء صفحة هبوط لمنتج خيالي. أظهرت النتائج تطابقاً مكانياً وبصرياً كبيراً بين المهارة وتصميم Claude الأصلي. رغم أن التعديلات في المهارة تتطلب مطالبة نصية بدلاً من التفاعل الرسومي، إلا أنها وفرت الموارد بشكل مذهل.

أنظمة التصميم وعروض الشرائح

  • تتمكن المهارة من استيعاب وفهم أنظمة التصميم المعقدة لإنتاج مخرجات متسقة بصرياً.
  • تتطلب المهارة وقتاً أطول للإنشاء (11 دقيقة) مقارنة بـ Claude (3 دقائق) لكن بتكلفة رمزية أقل بكثير.
  • تعتبر مهارة Huashu خياراً كافياً وفعالاً للمستخدم العادي الذي يحتاج إلى عروض تقديمية وتصاميم حركية متقدمة.

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

Community Posts

View all posts