00:00:00يتطور تصميم الذكاء الاصطناعي بشكل مذهل مع كل أداة جديدة وتحديث للموديلات،
00:00:04لكن التصميم الجيد لا يأتي من مجرد الاعتماد على أداة واحدة وانتظار نتائج مبهرة.
00:00:09الأمر يتطلب دائمًا مزيجًا من الأدوات والموارد للارتقاء بالتصاميم،
00:00:12والأهم من ذلك هو استخدام الأداة المناسبة للغرض المناسب.
00:00:16حصلت أداة جوجل لتصميم الذكاء الاصطناعي “Stitch” مؤخرًا على تحديث رائع جعل تصميم واجهة المستخدم أسهل بكثير.
00:00:21كما أصدرت شركة Vercel مؤخرًا شيئًا تفوق على إضافة متصفح Claude،
00:00:26وأصبح الآن خياري المفضل لاختبار المتصفحات.
00:00:29لدينا الكثير لنتحدث عنه اليوم، لأنني لم أتوقع
00:00:32أن ينتج هذا المزيج تصميمًا بهذا الإتقان.
00:00:34أصبحت Google Stitch متاحة الآن كـ MCP لربط عميل الذكاء الاصطناعي،
00:00:39مما يتيح له إنشاء وإدارة المشاريع، بالإضافة إلى تنفيذ التصاميم عبر العميل.
00:00:43مع هذا التحديث، لم أعد بحاجة لكتابة أوامر مفصلة لـ Stitch بنفسي، بل تركت Claude يتولى ذلك
00:00:48نيابة عني. توفر الأداة ميزات متعددة مثل إدارة المشاريع والقدرة على إنشاء مشاريع جديدة
00:00:53واسترجاع كافة مشاريعك النشطة. وهي قادرة على إدارة المشاريع باستخدام شاشات العرض
00:00:57وجلب المشاريع والشاشات، كما تسمح للعميل بإنشاء تصاميم جديدة من مجرد وصف نصي.
00:01:02عملية التثبيت مشروحة خطوة بخطوة في توثيقهم الرسمي.
00:01:06يتطلب الأمر تثبيت Google Cloud SDK باستخدام curl، ولكن بما أنني أستخدم نظام Mac،
00:01:11قمت بتثبيته عبر brew وتركت الأمر له لتحميل Google Cloud CLI.
00:01:14عليك تسجيل الدخول مرتين، مرة كمستخدم ومرة كـ “تطبيق”، لأنك بحاجة إلى
00:01:19ربطه بمشروع داخل Google Cloud لتفعيل واجهة برمجة Stitch داخل ذلك المشروع،
00:01:24حيث يستخدم موارد المشروع لإنشاء التصاميم.
00:01:27بمجرد الانتهاء من العملية بالكامل، يمكنك ربط Stitch بأي محرر أكواد.
00:01:31بما أنني استخدمت Claude Code، قمت بإعداده داخله وأصبحت جميع الأدوات جاهزة للاستخدام.
00:01:35الآن، قام شخص ما بتبسيط عملية الإعداد الطويلة هذه وأنشأ Stitch MCP،
00:01:41الذي يتولى العملية برمتها. من تثبيت Google Cloud إلى إعداد المشروع،
00:01:45يتكفل بكل شيء تلقائيًا. لكنه غير رسمي، مجرد أداة تجريبية مستقلة،
00:01:50رغم أنه يعمل بشكل ممتاز حاليًا. ومهما كان ما نبنيه،
00:01:54فإن التخطيط قبل التنفيذ أمر ضروري. كنت أعمل على تطبيق لمحاكاة المقابلات التقنية
00:01:59لا يقتصر فقط على الجوانب التقنية، بل يشمل أنواعًا أخرى من المقابلات،
00:02:03وكلها موجهة للوظائف في قطاع التكنولوجيا. طوال الفيديو، اكتشفت مشاكل عديدة في طريقة
00:02:08عمل Stitch MCP وكيف ينبغي استخدامه بشكل أفضل في عملية التصميم الخاصة بي.
00:02:13لقد وضعت كل تلك القواعد داخل ملف Claude.md مع الكود المصدري لهذا التطبيق على
00:02:18AI Labs Pro. لمن لا يعرف، هو مجتمعنا الذي أطلقناه مؤخرًا لنجمع فيه
00:02:23كل مواردنا من هذا الفيديو والفيديوهات السابقة في مكان واحد، سواء كانت أوامر ذكاء اصطناعي،
00:02:28أو أوامر قابلة لإعادة الاستخدام، أو مهارات نبتكرها لمشاريعنا وغيرها الكثير. إذا وجدت قيمة في
00:02:33ما نقدمه وأردت دعم القناة، فهذه هي أفضل طريقة. الروابط في الوصف.
00:02:38أفضل تخطيط تطبيقاتي باستخدام وضع التخطيط في Claude Code لأنه يطور كل جوانب
00:02:43الفكرة العامة التي أعطيه إياها ويكتب وثيقة مفصلة، ولكن يمكنك التخطيط باستخدام أي بيئة تطوير تفضلها.
00:02:48أعطيت فكرة تطبيقي لـ Claude Code في وضع التخطيط وطلبت منه إنشاء دليل لواجهة المستخدم،
00:02:53مع الحرص ألا تبدو الواجهة مثل تصاميم الذكاء الاصطناعي النمطية التي ينتجها عادةً.
00:02:58رغم أنها كانت عملية مستهلكة للوقت، إلا أنني مررت بكل مراحل التخطيط. من المهم جدًا
00:03:03قراءة الخطة بعناية، فقد اضطررت لتعديلها لتناسب ذوقي عبر إجراء تغييرات كثيرة.
00:03:09واصلت تحسين الخطة حتى رضيت عنها تمامًا،
00:03:14وفي النهاية، حصلت على خطة مطابقة لما أريده بالضبط. بمجرد اعتماد خطة التصميم،
00:03:19حان وقت التنفيذ. صراحةً، أفضل قدرات Gemini في التصميم
00:03:24على موديلات Claude. لذا طلبت من Claude أخذ الخطة التي وضعها للتو،
00:03:29وإنشاء تصميم دقيق عبر بدء مشروع جديد باستخدام Stitch MCP. استخدم أداة MCP
00:03:35لإنشاء مشروع جديد ثم بدأ في توليد الأقسام. قام بتعريف المشروع عبر
00:03:40معرف المشروع وأرسل أمرًا مفصلاً إلى Stitch، الذي استلم الأمر وبدأ في إنشاء
00:03:45الشاشات. استخدم Gemini 3 Flash لإنشاء القسم الأول. شيء واحد لم يعجبني
00:03:50هو أنه أرسل أوامر لكل قسم من الصفحة الرئيسية بشكل منفصل بدلاً من إنشاء
00:03:55تصميم واحد طويل كما هو معتاد في تصاميم الويب. قد يسبب هذا مشكلة عند محاولة
00:04:00دمجهم معًا في تطبيق واحد. لذا طلبت من Claude إنشاء تصميم صفحة واحدة طويلة بدلاً من
00:04:05مكونات منفصلة. حينها أنتج Claude أمرًا مفصلاً للغاية استلمه Stitch واستخدمه
00:04:10لإنشاء الصفحة الرئيسية بالكامل مع الحفاظ على جميع الأفكار من نهج الأقسام المنفصلة.
00:04:15أعجبني حقًا في التصميم كيف استخدم مراجع مثل التعليقات البرمجية وأوامر الطرفية (terminal)
00:04:20ليجعله أقرب لبيئة المطورين.
00:04:25استخدمت ميزة المعاينة في Stitch للتحقق من مظهر الواجهة عبر مختلف المنصات،
00:04:30وكان قد نفذ تأثيرات تمرير (hover) سلسة. كان التصميم
00:04:34متجاوبًا ويعمل بشكل جيد على كل من الهاتف والمكتب. وبمجرد رضاي عن التصميم الذي
00:04:40أنتجه Stitch، أردت نقله إلى مشروع Next.js الذي كنت أبني فيه التطبيق بالكامل
00:04:45باستخدام Claude Code. طلبت من Claude استخدام Stitch MCP لجلب الكود الخاص
00:04:51بتصميم الصفحة الرئيسية بالكامل وتنفيذه في مشروع Next.js الجديد الذي كنت أعمل عليه.
00:04:56استخدم أداة جلب الشاشات للحصول عليها. وفرت هذه الأداة روابط لتحميل الكود،
00:05:01لذا استخدم Claude أوامر curl على تلك الروابط لاستخراج الكود. وبمجرد حصوله على HTML،
00:05:06أصبح من السهل دمجه في مشروع Next.js القائم. بدأ في دمج التصميم
00:05:11في التطبيق، لكنه أجرى التغييرات فقط على ملف صفحة tsx الرئيسية، حيث وضع كل الكود في ملف واحد
00:05:17بدلاً من اتباع هيكل المكونات الصحيح الموصى به في تطبيقات React.
00:05:22مؤقتًا، قمت بتشغيل خادم التطوير لرؤية كيف تبدو الواجهة المنفذة. كان التصميم
00:05:26مطابقًا تقريبًا لما أنتجه Stitch باستثناء وضع النص في قسم البطولة (hero section).
00:05:31لقد نفذ جميع تأثيرات التمرير، وأضاف حركات لشبكات bento وتأثير التمرير المتوازي (parallax) في الخلفية.
00:05:36ولإصلاح تكدس الكود في ملف واحد، طلبت من Claude استخدام هيكل مكونات سليم
00:05:41لتحسين النمطية. قام بإعادة صياغة الكود وتنظيمه في مجموعة من المكونات والصفحات
00:05:46المرتبة والواضحة، مما جعل التصفح أسهل. بمساعدة Claude Code وStitch،
00:05:51أنشأت تطبيقًا كاملاً بطابع يجسد روح المطورين مع جمالية واجهة الأوامر.
00:05:57ومع ذلك، لا تزال هناك بعض مشاكل الواجهة؛ فعلى سبيل المثال، يجب أن تكون لوحة الكود
00:06:02قابلة للتحرير لأن هذا هو المكان الذي سيكتب فيه المستخدمون الكود أثناء جلسات المقابلات.
00:06:08أيضًا، يجب أن يظهر السؤال في الأعلى لأن مكانه الحالي يسبب تجربة مستخدم سيئة.
00:06:14لاختبار التطبيق، استخدمت متصفح العميل (Agent Browser) من Vercel. وهي أداة سطر أوامر مصممة
00:06:19لعملاء الذكاء الاصطناعي، مبنية بلغات Rust وNode.js، مما يجعلها أسرع بكثير من أدوات
00:06:24أتمتة المتصفحات التقليدية. التثبيت بسيط، فقط قم بتشغيل أمر التثبيت وسيتم تثبيته عالميًا
00:06:29على نظامك. وهي تقتصر حاليًا على المتصفحات المبنية على Chromium ولا تتوفر لمتصفحات Firefox أو Safari.
00:06:34يوفر متصفح العميل ميزات أفضل من إضافة Chrome الخاصة بـ Claude، أو Playwright أو Puppeteer،
00:06:40أو أدوات التطوير الأخرى. وذلك لأن إضافة Chrome تعتمد على تشغيل متصفح كامل،
00:06:44وأخذ لقطات شاشة، ورسم خرائط البكسلات بصريًا، ثم التنقل في الواجهة. في المقابل،
00:06:50متصفح العميل هو أداة سطر أوامر تعمل كأوامر bash وتتعامل مع “لقطات لحظية” (snapshots) بدلاً من
00:06:55لقطات الشاشة. في الأساس، اللقطة اللحظية هي شجرة سهولة الوصول للصفحة بأكملها
00:07:00مع معرفات (selectors) لتحديد المكونات الفردية. يستخدم العميل هذه المعرفات للتنقل في الصفحة
00:07:05بكفاءة. كما أنه لا يشارك الجلسة مع متصفحك الحالي ويعمل في متصفح منفصل،
00:07:10لذا لن يتمكن من القيام بإجراءات تتطلب جلساتك النشطة، على عكس إضافة Claude
00:07:14التي تعمل داخل متصفحك الخاص ويمكنها القيام بأعمال نيابة عنك. إذا أردت
00:07:19رؤية الأوامر المتاحة، يمكنك مراجعة مستودع GitHub، الذي يحتوي على قائمة مفصلة بجميع
00:07:24الأوامر الأساسية. توضح هذه الأوامر كيفية التنقل في الواجهة، واستخدام المعرفات، ومحاكاة التحكم بالماوس،
00:07:30وإدارة ملفات تعريف الارتباط والتخزين، وحتى مراقبة نشاط الشبكة. بالنسبة لتطبيقي، أضفت ملف Claude.md
00:07:35ووجهته لاستخدام أدوات متصفح العميل لجميع أنواع الاختبارات. كما طلبت منه استخدام
00:07:40أمر المساعدة (help) إذا لم يعرف كيفية استخدام أي أمر. يمكنك الحصول على هذه القواعد
00:07:45مع إرشادات سير العمل الكاملة في AI Labs Pro أيضًا. ورغم أن هذه الأداة هي أداة أتمتة متصفح خفية (headless)،
00:07:50يمكننا تشغيلها في الوضع الظاهر عبر تفعيل خيار “headed”، الذي يظهر نافذة المتصفح
00:07:55لنراها وهي تعمل. طلبت من Claude استخدام المتصفح في الوضع الظاهر لاختبار واجهة التطبيق.
00:07:59استخدم أولاً أمر المساعدة لرؤية كافة الأوامر المتاحة ثم فتح المتصفح.
00:08:05واتبع نهجًا مشابهًا لما اقترحناه مع استخدام متصفح Claude، وهو أخذ
00:08:09لقطة لحظية كاملة للصفحة بدلاً من لقطات شاشة مجزأة كما تفعل إضافة Chrome في Claude،
00:08:14مما سرع عملية الاختبار بشكل ملحوظ مع الحفاظ على نفس مستوى الدقة.
00:08:19قام العميل بالعديد من الإجراءات، حيث تنقل في التطبيق بالكامل واختبر
00:08:24ميزات متعددة عبر مختلف الواجهات وفحص التنسيق البصري. وأتم عملية الاختبار
00:08:29بالكامل في أربع دقائق فقط، بينما كانت أدوات الأتمتة الأخرى ستستغرق وقتًا
00:08:34أطول بكثير لأنها تعتمد على أشجار سهولة الوصول، وليس على نهج لقطات الشاشة.
00:08:39كما اكتشف أن محرر الكود يحتاج ليكون قابلاً للتعديل ونفذ هذا الإصلاح فورًا.
00:08:43ثم اختبر ذلك في المتصفح عبر أخذ لقطة لحظية، وإيجاد معرف المحرر واستخدام
00:08:48وظائف النقر والكتابة في متصفح العميل لتعديل جزء من الكود ليرى إن كان
00:08:53قد تم تنفيذه بشكل صحيح. بهذا نصل إلى نهاية هذا الفيديو. إذا كنت ترغب في دعم القناة
00:08:57ومساعدتنا في مواصلة تقديم مثل هذه الفيديوهات، يمكنك ذلك عبر الانضمام إلى AI Labs Pro.
00:09:02كالعادة، شكرًا للمشاهدة وأراكم في الفيديو القادم.