التصميم المفتوح (Open Design): لماذا تخلى 40 ألف مطور عن Claude Design؟
BBetter Stack
컴퓨터/소프트웨어창업/스타트업AI/미래기술
Transcript
00:00:00هذا هو OpenDesign، وهو بديل مفتوح المصدر لـ Claude Design يتيح لك استخدام أي وكيل
00:00:05أو نموذج قمت بتثبيته مسبقاً لإنشاء نماذج أولية كاملة للويب، وتطبيقات الهاتف المحمول، وحتى شرائح
00:00:11العرض التقديمي بصيغة HTML. مع وجود 72 نظام تصميم بجودة العلامات التجارية، ويبقى كل مشروع على جهازك،
00:00:17لذا لا يتم إرسال أي شيء إلى السحابة. لكننا نعلم بالفعل أن Claude Opus 4.7 جيد جداً في التصميم
00:00:23الأمامي، لذا لا يبدو من المنطقي السماح للمستخدم باختيار أي نموذج يريده، بما أن معظمها
00:00:27قد تكون سيئة حقاً في التصميم، اشترك لنكتشف ذلك.
00:00:33تم إصدار Claude Design من Anthropic في وقت سابق من الشهر الماضي وكان ناجحاً بشكل فوري. لقد منح الناس
00:00:38القدرة على صنع تصميمات رائعة المظهر باستخدام نموذج مبهر، كما منح الناس
00:00:43بديلاً لأدوات مثل vZero والأدوات المشابهة. لكنه أداة سحابية مغلقة، محصورة في
00:00:49نموذج واحد، وسيكلفك 20 دولاراً شهرياً لاستخدامه، مما يعني ببساطة أنه ليس متاحاً للجميع.
00:00:54لذا، بعد 11 يوماً، أطلق توم وفريق Nexa بديلاً مفتوح المصدر حظي بشعبية كبيرة.
00:01:00إنه يذكرني بنوع ما بـ OpenCode القادم من Claude code، والآن OpenDesign يأتي من Claude
00:01:05Design. ما هو الشيء التالي الذي ستصنعه Anthropic والذي سيضعه شخص ما بكلمة “مفتوح” (Open) قبله؟
00:01:09ولكن كيف تستطيع هذه الأداة مفتوحة المصدر إنشاء تصميمات بجودة Claude Design؟ حسناً،
00:01:14هذا لأن هناك أمرين يعملان معاً. الأول هو أنظمة التصميم. يحتوي OpenDesign على العديد منها
00:01:18مع مواصفات كاملة للعلامة التجارية، والطباعة، والتباعد، ورموز الألوان المستوحاة من علامات تجارية مثل Linear،
00:01:24Stripe، وSpotify. الثاني هو المهارات. الكثير والكثير من المهارات لكل نوع من المخرجات. لذا، مهارة لوحة المعلومات
00:01:30تعرف كيفية تخطيط الرسوم البيانية، ومهارة العرض التقديمي تعرف كيفية هيكلة الشرائح. حتى أن هناك قائمة تدقيق
00:01:35مناهضة للذكاء الاصطناعي مضمنة في كل مطالبة، وقبل أن تولد أي شيء، تسألك عن جمهورك،
00:01:41والنبرة، ومحتوى العلامة التجارية. إذا كنت قد شاهدت الفيديو الخاص بي عن Impeccable، فسيبدو هذا مألوفاً جداً،
00:01:45لكنه مختلف، وسنناقش الاختلافات لاحقاً في الفيديو. لكن في الوقت الحالي،
00:01:49دعونا نستعرض عرضاً توضيحياً بسيطاً. للبدء، يمكنك إما تنزيل OpenDesign لنظام macOS أو
00:01:54Windows، أو استنساخ المستودع وتثبيته باستخدام Docker، أو تشغيله من المصدر، وهو ما قررت القيام به
00:01:59بما أن المشروع قيد التشغيل، يمكنني زيارة هذا المنفذ في متصفحي، مما يوصلني إلى واجهة المستخدم هذه،
00:02:04التي تبدو مربكة نوعاً ما لشخص غير معتاد على Claude Design، لكن دعونا نستعرضها.
00:02:08إذا نقرت هنا في الأسفل، يمكنك أن ترى أنه التقط أدوات الوكيل (agent harnesses) التي قمت بتثبيتها بالفعل،
00:02:13مثل Claude Code وCodex وOpenCode. وإذا نقرت على Claude Code ومررت للأسفل،
00:02:17يمكننا اختيار النموذج. افتراضياً، سيختار النموذج المحدد في CLI، ولكن يمكنني اختيار
00:02:21واحد هنا. يمكنني فعل الشيء نفسه مع Codex، لكن Codex يسمح لي بتغيير مجهود التفكير،
00:02:26وهي لمسة لطيفة. لكنني سأختار OpenCode. سأمرر للأسفل وأغير النموذج
00:02:31إلى GLM 5.1. هنا أيضاً، يمكنني اختيار الذاكرة، أي التعليمات التي ستضاف
00:02:36لكل مطالبة، وموفري الوسائط. افتراضياً، التقط مفتاح OpenAI الخاص بي، وسيستخدم
00:02:41GPT Image 2 لتوليد الصور. ولكن يمكنني أيضاً توصيل مفتاح 11 labs API الخاص بي للقيام بأشياء مثل
00:02:46تحويل النص إلى كلام أو مؤثرات صوتية مختلفة للرسوم المتحركة التي قد تكون لديك على موقعك الإلكتروني. ثم
00:02:50هنا، يمكنني عرض جميع المهارات المتاحة. يمكنني عرض جميع أنظمة التصميم،
00:02:54التي سنستعرضها لاحقاً. ويمكنني حتى اختيار حيوان أليف، وهو شيء يفعله Codex.
00:02:58بشكل أساسي، لدينا الكثير من الخيارات هنا، لكنني سأغلق هذا وأبدأ في التصميم. سأعطي
00:03:03مشروعي اسماً ثم أختار نظام تصميم. الآن، إذا لم تكن لديك أي فكرة عما هي أنظمة التصميم هذه،
00:03:08يمكنك النقر على علامة تبويب نظام التصميم لعرضها جميعاً، وهناك الكثير منها.
00:03:13لكنني استعرضتها قبل تسجيل الفيديو، وأعتقد أنني أحب نظام Miro، الذي يبدو
00:03:17كهذا ويعطي تفاصيل عن رموز التصميم، بالإضافة إلى معلومات في ملف التصميم MD.
00:03:22لاحظ أنني في علامة تبويب النموذج الأولي، ولكن هناك أيضاً قطع أثرية (artifacts) حية للأشياء التي تريد تحديثها
00:03:27بناءً على البيانات المتغيرة، أو شريحة عرض لإنشاء شرائح HTML، أو البناء من قالب.
00:03:33لذا يمكنني النقر على علامة تبويب القوالب هنا واختيار قالب أريده. الآن سنكتفي
00:03:38بـ Prototype (النموذج الأولي) والنقر على إنشاء. من هنا، ننتقل إلى صفحة أخرى حيث يمكننا إعطاؤه
00:03:42مطالبة. سأجرب شيئاً فريداً هنا. حالياً لدي تطبيق بحث عن قنوات يوتيوب الخاص بي
00:03:47يعمل، وأريد إنشاء نسخة ذات مظهر أفضل بكثير. لذا ما سأفعله
00:03:52هو إعطاؤه هذا الرابط ومعرفة ما إذا كان GLM قادراً على البحث في علامات التبويب و
00:03:57المدخلات واستخدام ذلك في تصميمه. هنا أعطيته مطالبة لإنشاء موقع ويب بسيط ومصمم جيداً
00:04:02لمنتج يمكنني استخدامه للبحث عن قنوات يوتيوب. لقد أعطيته أيضاً رابط
00:04:07الموقع لزيارته باستخدام متصفح الوكيل (agent browser) أو أي أداة يراها مناسبة. وبهذه الطريقة يمكنه
00:04:12عرض المدخلات وتصفح جميع الصفحات. دعونا نرى ماذا سيفعل. الآن سألني بعض
00:04:15الأسئلة حول النبرة المرئية، وسياق العلامة التجارية، وبعض الأشياء الأخرى، والتي سأجيب عليها.
00:04:20ثم سنواصل عملية التصميم ونلقي نظرة على هذا. لقد تمكن من تشغيل أمر curl
00:04:24لفتح الموقع باستخدام Chrome. والآن يستخدم متصفح الوكيل للاتصال بالموقع. لذا لم
00:04:29أفتح أي شيء من هذا أو أذهب إلى الرابط وهو يتصفح الموقع في المتصفح. يمكننا رؤية المزيد من
00:04:34أوامر متصفح الوكيل لفهم كيفية عمله. حسناً. في هذه المرحلة، لا يزال يعمل.
00:04:38لم ينتهِ تماماً بعد. لا يزال لديه بعض الأشياء ليقوم بها، لكنني أحب اتجاه سير الأمور.
00:04:43أعجبتني صفحة البحث التي أنشأها مع الفلاتر المتقدمة هنا في الأسفل، ويمكنني التبديل
00:04:48بين عناوين الفيديو واسم القناة للبحث. لدينا نتائج البحث، التي تبدو
00:04:52مبهرة للغاية وتستخدم بيانات من الموقع الفعلي. لذا لست متأكداً مما فعله،
00:04:57إذا كان قد قام بكشط البيانات وحفظها في مكان ما، لكن هذه بيانات فعلية باستثناء الصور المصغرة المفقودة. لدينا أيضاً
00:05:01صفحة المفضلة. لذا إذا وضعت شخصاً في المفضلة هنا، فهذا هو المكان الذي سيذهب إليه ويمكنني إنشاء
00:05:06رسالة بريد إلكتروني للاتصال بهم أو إزالتهم. وهناك أيضاً صفحة مخفية هنا. على سبيل المثال،
00:05:11إذا ضغطت على X، فسينتهي الأمر بشخص ما في هذه الصفحة. ويبدو أنه بعد حوالي 20 دقيقة. نعم.
00:05:17GLM 5.1 ليس أسرع نموذج. كل شيء انتهى. وهكذا إليكم ما أخبرني به.
00:05:23لقد أعطاني جميع الملفات الخمسة التي صنعها. وأعتقد أنه قام بتصدير كل شيء إلى موقع
00:05:28مؤقت. لذا ما يمكنني فعله الآن هو إعطاؤه مطالبة أخرى. لذا إذا أردت إضافة وضع مظلم،
00:05:33يمكنني القيام بذلك، ولكن يمكنني أيضاً النقر على “إنهاء حزمة التصميم”، والتي ستقوم بدمج
00:05:37كل شيء في ملف MD تصميم واحد. لذا النص المنسوخ، ونظام التصميم، وأي قطع أثرية
00:05:42تم إنشاؤها، بشكل أساسي هذه الصفحات الخمس. يمكنني أيضاً النقر على مشاركة للتصدير بتنسيقات مختلفة.
00:05:48ويمكنني حتى تصدير ملف HTML مستقل وإعطاؤه لـ Claude Code لتنفيذه في مشروعي الفعلي
00:05:53وحتى نشره على Vercel أو Cloudflare pages، وهي لمسة لطيفة جداً.
00:05:57إذن، هذه نظرة عامة سريعة على Open Design. هل يستحق الاستخدام؟ حسناً، إذا كان لديك بالفعل
00:06:02وكيل برمجة مثبتاً وتدفع مقابل اشتراك في Claude، فمن البديهي
00:06:07تجربته. إن الجمع بين أنظمة التصميم والمهارات يعني أنه يمكنه بالفعل إنتاج شيء
00:06:12لائق جداً بغض النظر عن الأداة أو النموذج. ولكن كيف يقارن بشيء مثل Impeccable؟
00:06:16حسناً، شخصياً، أفضل الطريقة التي يخطط بها Impeccable. فهو يسألك عن كل شيء مقدماً
00:06:22ويصمم نماذج أولية مختلفة باستخدام نموذج صور، يمكنك اختياره والتكرار من هناك.
00:06:27لذا يمكنك تقريباً ألا تكون لديك أي فكرة عما تريد أن يبدو عليه التصميم في البداية،
00:06:32ولكن ينتهي بك الأمر بشيء لائق جداً. بينما مع Open Design، يجب عليك نوعاً ما
00:06:37معرفة القليل عن التصميم قبل البدء. أعني، هو يسألك عن نظام التصميم الذي تريده قبل
00:06:42أن تبدأ، وأنا أعلم أن النموذج يمكنه توليد واحد، لكن حقيقة أنه يسألك تعني أنه موجه
00:06:48لشخص يعرف أكثر قليلاً عن التصميم. لكن يجب أن أعترف، Open Design لديه واجهة مستخدم رائعة،
00:06:53مما يمنحك خيار رؤية طرق العرض المتجاوبة، والتصدير إلى أي مكان تريده، وإضافة مهارات، وأدوات MCP،
00:06:58وحتى حيوانات أليفة، وهو أمر لطيف لشخص معتاد على استخدام واجهة مستخدم Codex أو تطبيق سطح المكتب Claude.
00:07:04وقد قام بعمل رائع في تصميم تطبيق باستخدام GLM 5.1، وهو ليس أفضل نموذج للتصميم
00:07:10موجود. لذا إذا أردت تصميم شيء بسرعة نسبياً وكان لدي القليل من الفكرة
00:07:15عن الاتجاه الذي أردت الذهاب إليه، فبالتأكيد سأجرب Open Design. ولكن إذا كنت لا تمانع
00:07:19إنفاق القليل من المال، فإن Plot Design جيد جداً. أعني،
00:07:22انظر إلى ما كان قادراً على فعله بنفس المطالبة تماماً.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video