00:00:00لقد أصبحت وكلاء الذكاء الاصطناعي لديكم بارعة جداً في التصميم الآن.
00:00:02لم تعد تعاني حقاً من المشكلات السابقة، حيث كانت المواقع التي تنشئها تحتوي على عناصر معطلة.
00:00:06ولكن نظراً لأن جميع النماذج قد تم تدريبها على نفس البيانات، فإن التصاميم دائماً ما تكون
00:00:10متشابهة ومكررة بشكل مفرط.
00:00:11حتى نماذج Claude تحتاج إلى أوامر خاصة لضمان عدم ارتكاب هذا الخطأ.
00:00:15Google Stitch هي أداة صُممت خصيصاً للتصميم، ويمكنها في الواقع الاندماج مباشرة
00:00:19في سير عمل Claude Code الخاص بك.
00:00:21لذا في هذا الفيديو، سنستعرض 4 طرق لاستخدام Stitch مع Claude Code، لضمان
00:00:26ألا تبدو تطبيقاتك مثل أي موقع آخر تم إنشاؤه بواسطة الذكاء الاصطناعي.
00:00:30يستخدم تحديث Stitch الجديد نظام تصميم لبناء واجهة المستخدم الخاصة بك، وهذه الأنظمة
00:00:34مبنية على جميع الميزات التي تشكل دليل واجهة المستخدم للمواقع الإلكترونية، والتي تشمل
00:00:38حقولاً مختلفة مثل الألوان، والسمات، والخطوط، وغيرها.
00:00:41يتم تشكيل هذه الميزات فعلياً باستخدام ملف design.md.
00:00:45هذا الملف هو أيضاً ما يجعل التصميم قابلاً للنقل من وكيل إلى آخر.
00:00:49يمكنك نقل ملف design.md هذا إلى أي وكيل تنفذ معه هذا التصميم، وسيقوم
00:00:54بضبط سمة التصميم بالكامل بشكل مثالي.
00:00:56السبب في نجاح ذلك هو أن الملف مخصص للتعامل مع الوكلاء.
00:00:59فهو يحتوي على لغة أكثر استهدافاً بحيث يمكنهم استيعاب غرض التصميم بسهولة.
00:01:04كما أنه يعرض جميع أنظمة التصميم مرئياً على الشاشة، لذا لا يتعين عليك فقط تفسير
00:01:08النمط باستخدام النص وحده.
00:01:10يمكنك أخذ فكرة عامة عن شكل التطبيق عند تنفيذه، من خلال النظر فعلياً
00:01:14إلى الألوان والخطوط جنباً إلى جنب.
00:01:16كلما قمت ببناء أي شيء باستخدام Stitch، فإن الخطوة الأولى التي يتخذها هي إنشاء design.md
00:01:21ونظام تصميم.
00:01:22حتى لو لم تطلب منه ذلك صراحة في أمرك البرمجي.
00:01:25بمجرد اعتماد نظام التصميم، فإنه في كل مرة ينشئ فيها أي موقع، يكون قادراً على ضمان الاتساق
00:01:30عبر صفحات متعددة وفي عمليات إعادة الإنشاء.
00:01:32هذا يحل أكبر مشكلة واجهناها أثناء العمل مع Stitch، حيث لم يكن قادراً
00:01:36على الحفاظ على اتساق التصميم كما يفعل الآن.
00:01:39ولكن بدلاً من الاعتماد على نظام التصميم الذي ينشئه Stitch من تلقاء نفسه، يمكنك إنشاء
00:01:43أنظمة التصميم الخاصة بك أيضاً.
00:01:45يمكنك ضبط السمة وفقاً لمتطلباتك، أو إذا كان لديك ملف تصميم، يمكنك ببساطة
00:01:49رفعه، وسيقوم تلقائياً بدمج ذلك الملف كنظام تصميم وعرضه
00:01:53مرئياً لك.
00:01:54الأمر المهم هو أنك بحاجة للتأكد من أن أي ملف design.md تستخدمه يتبع
00:01:58هيكلية سليمة.
00:01:59من المعروف أن هذه الهيكلية محسنة للوكلاء، وتحديداً Stitch، وتساعدهم
00:02:04على فهم الأهداف بكفاءة.
00:02:06في كثير من الأحيان نقوم بجلسات عصف ذهني لأفكار تطبيقاتنا مع Claude أو وكلاء آخرين.
00:02:09لذا إذا كنت ترغب في إنشاء تصاميم من جلسات العصف الذهني تلك في Stitch، يمكنك نقل
00:02:13نمط التصميم إلى Stitch في شكل ملف design.md.
00:02:17يمكنك إعطاء Claude هيكلية لملف التصميم يمكنك الحصول عليها من مستودع المهارات الرسمي
00:02:21من Google والذي يحتوي على جميع المهارات المتعلقة بـ Stitch.
00:02:25من الأمثلة، يمكنك الحصول على قالب ملف تصميم محسن لـ Stitch.
00:02:29لذا أياً كان الوكيل الذي تستخدمه، يمكنك تزويده بنمط الموقع الذي تريد إنشاءه
00:02:33مع القالب، بحيث يمكنه إنشاء design.md بناءً على القالب مع اتباع
00:02:38دليل النمط بشكل صحيح.
00:02:39بمجرد أن ينشئ الوكيل الخاص بك ملف design.md المفصل، يمكنك أخذه إلى Stitch ولصقه
00:02:44ببساطة في قسم design.md تحت خيار إنشاء نظام تصميم جديد.
00:02:48بمجرد الضغط على حفظ التصميم، فإنه ينشئ تصوراً مرئياً لهذا التصميم.
00:02:52بمجرد عرضه، يمكنك استخدامه وطلب من Stitch تنفيذ واجهة المستخدم باستخدام
00:02:56نظام التصميم الذي تم إنشاؤه حديثاً كقاعدة.
00:02:59يقوم Stitch بعد ذلك بتنفيذ التصميم، والذي يعكس النظام الذي أنشأته، ملتقطاً
00:03:03التنسيق الدقيق من ملف design.md.
00:03:05لذا باستخدام أنظمة التصميم هذه، يمكنك إنشاء أي عدد تريده من الصفحات بشكل تكراري، وستتبع
00:03:10كل واحدة منها نفس نمط التصميم.
00:03:12إذا كنت قد أنشأت مشاريع بالفعل على Stitch وتريد استخراج design.md لها،
00:03:16يمكنك القيام بذلك باستخدام المهارات التي أنشأتها Google.
00:03:19في المهارات التي أنشأوها، تقوم مهارة design.md بتحويل مشاريع Stitch إلى ملف design.md
00:03:25وفقاً للقالب المحسن لسير عمل Stitch.
00:03:28أيضاً إذا كنت تستمتع بمحتوانا، يرجى التفكير في الضغط على زر الإعجاب، لأن ذلك يساعدنا
00:03:32على إنشاء المزيد من المحتوى كهذا والوصول إلى المزيد من الأشخاص.
00:03:35إمكانيات Stitch مثيرة للإعجاب، ولكن لا تزال هناك فجوات في تنفيذ تجربة مستخدم جيدة
00:03:39للمجال المحدد للمواقع التي تبنيها.
00:03:42ليس من المفضل دائماً التصميم من الصفر.
00:03:44المواقع الموجودة مبنية على أنماط تعمل بالفعل للمجال المحدد الذي
00:03:48صُنعت من أجله، لذا فإن محاكاة أنماطها تساعدك على إنشاء موقع يعمل حقاً
00:03:53لمستخدميك.
00:03:54سابقاً، عند البناء بالذكاء الاصطناعي، كنا نقدم لقطة شاشة ثم نطلب من أداة التصميم
00:03:58نسخ ذلك التصميم.
00:04:00كانت تحاول محاكاة التخطيط والمكونات وكل شيء كما هو.
00:04:04لكن تحديث Stitch الجديد غير ذلك.
00:04:06مع ميزة إعادة التصميم في Stitch، لا تزال تعطيه لقطة شاشة، لكنه الآن لا
00:04:10يصادرها حرفياً.
00:04:11بل يستخدم لقطة الشاشة تلك كدليل للنمط.
00:04:12فهو يستخلص الأنماط، ومواقع المكونات، ولغة التصميم من ذلك المرجع و
00:04:17يطبقها على موقعك الخاص.
00:04:18وبذلك، أنت تبني شيئاً أصلياً فوق نمط موجود بالفعل.
00:04:22لاستخدام ميزة إعادة التصميم، ستحتاج إلى لقطة شاشة.
00:04:25لكن أخذ لقطات شاشة لكل قسم على حدة هو طريقة مملة للقيام بذلك.
00:04:28بدلاً من ذلك، استخدم أي إضافة مثل GoFullPage لأخذ لقطة شاشة للصفحة كاملة حتى تتمكن من
00:04:33تزويد مرجع النمط دفعة واحدة.
00:04:35بمجرد إعطائه لقطة شاشة للموقع الذي تريد محاكاة تصميمه، فإنه يستخدم
00:04:39تلك اللقطة كمرجع للنمط وتوزيع المكونات وينشئ واجهة مستخدم أخرى مشابهة
00:04:44لتلك الموجودة في لقطة الشاشة.
00:04:45ويستخدم إمكانيات توليد الصور في Nano Banana لإنشاء صور لمختلف الأقسام تتناسب مع
00:04:50نمط واجهة المستخدم.
00:04:51هناك طرق أخرى يمكنك من خلالها نسخ النمط من موقع إلكتروني آخر أيضاً.
00:04:54يمكنك محاكاة نمط موقع كامل عن طريق نسخ الرابط ثم من أنظمة التصميم،
00:04:59يمكنك استيراد التصميم من أي موقع كملف design.md.
00:05:03فقط قدم الرابط وسيقوم باستيراد نظام التصميم من الموقع عن طريق الزحف إليه
00:05:06والحصول على النمط وتنسيق النصوص منه.
00:05:09ولكن في كثير من الأحيان، لا يحصل Stitch على النمط الذي يدور في ذهنك.
00:05:12في هذه الحالات، يمكنك ببساطة رفع رسم تقريبي أو نموذج هيكلي (wireframe) بالنمط الذي تريده
00:05:17بالفعل.
00:05:18يمكنك أيضاً تحديد سمة التصميم التي تريد أن يستخدمها موقعك.
00:05:21من خلال المراجع وتحديد السمة، ستتطابق واجهة المستخدم التي تم إنشاؤها بواسطة Stitch مع النموذج الهيكلي
00:05:26ودليل النمط تماماً، مما يجعل الموقع متوافقاً مع متطلباتك.
00:05:31وإذا كان هناك أي شيء محدد ترغب في تعديله، يمكنك القيام بذلك باستخدام
00:05:34ميزات التوضيح والتحرير في Stitch.
00:05:36يمكنك تحديد الجزء الذي لا يعجبك وكيف تريده أن يكون، اضغط على تطبيق وسيقوم
00:05:40بتنفيذ النمط الذي طلبته.
00:05:42ولكن قبل أن نمضي قدماً، دعونا نستمع إلى كلمة من راعينا.
00:05:45Uptime Robot.
00:05:46أنت تبني باستخدام واجهات برمجة تطبيقات الذكاء الاصطناعي، سواء من OpenAI أو Anthropic أو غيرهما.
00:05:49كل شيء يبدو جيداً، الحالة 200 OK، لكن الاستجابة سيئة جداً.
00:05:52يتعطل تطبيقك ولا تكتشف ذلك إلا عندما يبدأ المستخدمون بالشكوى.
00:05:56هنا يأتي دور Uptime Robot.
00:05:57فهو يكتشف ذلك قبلهم.
00:05:59يقوم بفحص واجهات برمجة التطبيقات الخاصة بك، ويتحقق من الاستجابة الفعلية، وليس فقط رمز الحالة، وينبهك فوراً
00:06:04عبر Slack أو البريد الإلكتروني أو أي مكان تعمل فيه.
00:06:06راقب نهايات الذكاء الاصطناعي، وتتبع رصيد واجهة برمجة التطبيقات قبل نفاده، واكتشف الأخطاء قبل أن
00:06:10تتحول إلى تذاكر دعم فني.
00:06:12يمكنك حتى الحصول على صفحات حالة عامة تعرض إحصائيات التوفر المباشرة وتاريخ الحوادث.
00:06:16الإعداد يستغرق ثوانٍ فقط.
00:06:18أضف الرابط الخاص بك، حدد الاستجابة المتوقعة، اختر تنبيهاتك، وأنت الآن جاهز.
00:06:21هناك خطة مجانية مع 50 مراقباً لتجربتها.
00:06:24مراقبة واجهات برمجة التطبيقات مشمولة بـ 7 دولارات فقط شهرياً، وهو أرخص من استضافتها بنفسك.
00:06:28استخدم الكود AI Labs للحصول على خصم 10%، صالح حتى نهاية العام.
00:06:32انقر على الرابط في التعليق المثبت وابدأ البناء اليوم.
00:06:35طريقة أخرى للبناء هي ربط إمكانيات Stitch بأي من إمكانيات وكلائك
00:06:40الحالية مثل Claude Code أو أي وكيل آخر يدعم مهارات الوكلاء.
00:06:44طورت Google مهارات متعددة لهذا الغرض ووفرت مهارات تمنح إمكانيات
00:06:48إضافية للوكيل للعمل مع Stitch.
00:06:51يمكنك تثبيت أي مهارة تحتاجها باتباع الخطوات الموجودة في المستودع.
00:06:54الأهم للاستخدام في سير عملك هي مهارة Enhance Prompt (تحسين الأوامر).
00:06:58فهي تحول الأوامر الغامضة التي تقدمها إلى أوامر محسنة لـ Stitch، مما يجعلها
00:07:02بالضبط بالطريقة التي تم تحسين Stitch للعمل بها.
00:07:05فهي تحتوي على مراجع للكلمات المفتاحية الشائعة لأن Stitch يعتمد على الصفات لتحديد
00:07:09الحالة المزاجية بدلاً من الأوصاف الدقيقة للتصميم.
00:07:12بصرف النظر عن ذلك، هناك مهارة لبناء مواقع كاملة تسمى Stitch Loop.
00:07:16تسمح للوكيل باستخدام أدوات مطوري Chrome وبناء الموقع بشكل تكراري من Stitch
00:07:20باستخدام نمط حلقة مستقلة كما هو مفصل في الأمر.
00:07:23الفكرة هي الحفاظ على تتبع سليم للأوامر وتمريرها من مرحلة إلى أخرى.
00:07:28بما أن هذه المهارات تدير كل شيء بنفسها، فهذا هو أقرب سير عمل لبناء
00:07:32تطبيق بضغطة واحدة.
00:07:33ولكن قبل أن تستخدم هذه المهارات فعلياً، يجب التأكد من توصيل Stitch MCP
00:07:38لأن هذا هو ما يستخدمه Stitch في الخلفية لبناء وجلب التصاميم.
00:07:41يوجد فيديو على القناة يستعرض عملية تثبيت MCP واستكشاف
00:07:46المشكلات الشائعة في التثبيت وإصلاحها، والتي يمكنك الاطلاع عليها.
00:07:49الآن، عندما تقوم بتصدير التصميم من Stitch، سواء عبر MCP أو الكود، فإنه عادة ما يعطيك
00:07:53ملف HTML ضخماً حيث يتم وضع كل شيء في ملف واحد.
00:07:56بما أن معظم التطبيقات تعتمد على React ومنظمة كمكونات، فإن هذا يصبح عبئاً
00:08:01على الوكلاء لتعيين الـ HTML إلى React.
00:08:03لذا لتبسيط ذلك، يمكنك استخدام مهارة React component.
00:08:06فهي تحول تصميم Stitch إلى مكونات معيارية باستخدام مقاييس تحقق سليمة.
00:08:10وتستخدم سكربتات للتحقق وجلب التصاميم بحيث يمكن تعيين المكونات بسهولة.
00:08:15مع سير العمل هذا، يمكنك إنشاء ملف Clod.md يسرد سير العمل الذي تريد استخدامه.
00:08:20يجب أن يتبع هذا الترتيب.
00:08:21أولاً، تستخدم مهارة Enhance prompt لتحويل أوامرك الغامضة إلى أوامر مخصصة لـ Stitch،
00:08:26مما يضمن استلام Stitch للمدخلات بشكل صحيح.
00:08:28بعد ذلك، يجب عليه بناء التصميم باستخدام Stitch loop.
00:08:31بمجرد انتهاء البناء، يجب عليه تنفيذ التصميم في التطبيق باستخدام مكونات React.
00:08:35عندما تعطي الأمر الخاص بصفحة الهبوط التي تريد بناءها، فإنه سيتبع التعليمات
00:08:39الموضحة في Clod.md.
00:08:41يقوم أولاً بتحميل مهارة Enhance prompt، والتي تقوم بعد ذلك بإنشاء الأمر المحسن باستخدام
00:08:45المهارات والأدوات المتاحة.
00:08:47بمجرد جاهزية الأمر، سيطلب منك الإذن للانتقال إلى الخطوة التالية.
00:08:50بعد الموافقة، سيحمل مهارة Stitch loop ويستخدم Stitch MCPs لإنشاء المشروع.
00:08:56بمجرد إنشاء المشروع، يرسل الأمر الذي أنشأته مهارة Enhance prompt إلى Stitch،
00:09:00والذي يقوم أولاً بإنشاء نظام التصميم ثم التصميم الفعلي.
00:09:04ولتسهيل الصور، فإنه يستخدم ميزة توليد الصور كجزء من عملية التصميم.
00:09:08بمجرد اكتمال التصميم، ينتقل إلى الخطوة التالية باستخدام مهارة React component
00:09:12لإنشاء هيكلية قائمة على المكونات وتنفيذ التطبيق بشكل صحيح، مع تحسينه لأي إطار عمل
00:09:17تستخدمه.
00:09:18إذا قمت بتشغيل خادم التطوير، يمكنك أن ترى أن التطبيق يحاكي تماماً التصميم من
00:09:22Stitch، بما في ذلك تأثيرات التحويم على الأزرار، مما يجعل سير العمل هذا أسهل وأسرع بكثير
00:09:26لبناء تطبيقات كاملة الوظائف.
00:09:28الآن، ملف Clod.md المستخدم هنا، جنباً إلى جنب مع جميع الموارد التي تم إنشاؤها، متاح في
00:09:33AI Labs Pro.
00:09:34وهذا يشمل الموارد من هذا الفيديو، وكذلك جميع الفيديوهات السابقة، والتي يمكنك
00:09:38تحميلها واستخدامها لمشاريعك الخاصة.
00:09:40إذا وجدت قيمة فيما نقدمه وترغب في دعم القناة، فهذه هي أفضل طريقة
00:09:43للقيام بذلك.
00:09:44الرابط موجود في الوصف.
00:09:46البناء من الصفر ليس فكرة جيدة دائماً، وهذا ينطبق على المكونات أيضاً.
00:09:50واجهة المستخدم التي يتم إنشاؤها بواسطة مكونات React المجردة تكون جامدة جداً وتركز فقط على المظهر لذا
00:09:54ستحتاج إلى جهد إضافي لإضافة التفاعلات وتأثيرات الحركة.
00:09:58بدلاً من البناء من الصفر، يجب عليك استخدام مكتبات واجهة المستخدم في تطبيقاتك لأنها
00:10:02تجعل الإنشاء أسهل من خلال ميزات التفاعل المدمجة فيها والتي يمكنك
00:10:07استخدامها لجعل واجهة المستخدم الخاصة بك أكثر حيوية.
00:10:08لجعل هذا أسهل، توفر Google مهارة ShadCN UI، والتي تقدم توجيهاً أثناء
00:10:13تحويل تطبيق من Stitch إلى مكونات ShadCN.
00:10:16هذه المهارة هي في الأساس دليل مفصل حول كيفية تنفيذ هذه المكونات بشكل صحيح
00:10:21عبر التطبيق.
00:10:22بما أن ShadCN يدعم الاتصال بسجلات (registries) متعددة، يمكنك توسيع إمكانياته
00:10:26بشكل أكبر من خلال دمجها والاستفادة من ميزاتها أيضاً.
00:10:30ولكن يوصى بإعداد ShadCN MCP قبل البدء بالبناء لضمان بقاء سير العمل
00:10:35سلساً.
00:10:36لاستخدامه بفعالية، يجب عليك أيضاً إعداد ملف Clod.md وتضمين التعليمات
00:10:41بحيث كلما استخدمت Stitch MCP، فإنه يستخدم تلقائياً مهارة ShadCN لتحويل التصميم
00:10:47إلى مكونات.
00:10:48بما أنه يمكنك إضافة سجلات، يمكنك تحديد السجلات التي تريد استخدامها في مشروعك.
00:10:52على سبيل المثال، عندما كنا نبني الموقع، اخترنا Glassmorphism و Motion Primitives
00:10:57لأنهما يحتويان على مكونات تعطي شعوراً بالفخامة.
00:11:00يمكنك اختيار أي منها يناسب احتياجات مشروعك.
00:11:03إذا كنت قد أنشأت مسبقاً واجهة مستخدم في Stitch، يمكنك تحويلها إلى تطبيق باستخدام
00:11:07مكونات ShadCN.
00:11:08تحتاج فقط إلى تحديد اسم المشروع الذي تريد تنفيذه وطلب منه تنفيذه
00:11:12في التطبيق.
00:11:13سيقوم أولاً بجلب المشروع بالاسم المحدد، ثم تحميل مهارة ShadCN UI واستخدام
00:11:18أدوات ShadCN MCP جنباً إلى جنب مع السجلات التي حددتها لتنفيذ التطبيق
00:11:23بالكامل.
00:11:24بمجرد اكتمال التنفيذ، سيعكس التطبيق بالضبط ما تراه في Stitch
00:11:27ولكنه مبني باستخدام مكونات ShadCN UI.
00:11:29هذا يحدث فرقاً كبيراً لأن التطبيق الذي يتم إنشاؤه دفعة واحدة يصبح أكثر تفاعلاً
00:11:34بسبب سهولة التنفيذ.
00:11:36وهكذا نصل إلى نهاية هذا الفيديو.
00:11:38إذا كنت ترغب في دعم القناة ومساعدتنا في الاستمرار في تقديم مثل هذه الفيديوهات، يمكنك
00:11:42القيام بذلك عبر زر "شكراً" الموجود في الأسفل.
00:11:44كما هو الحال دائماً، شكراً لكم على المشاهدة وأراكم في الفيديو القادم.