00:00:00لماذا لا تزال عملية تسليم التصميم للمطورين هي الجزء الأكثر تعقيدًا عند البناء باستخدام الذكاء الاصطناعي؟
00:00:04قد تظن أنه بحلول هذا الوقت ستكون هناك طريقة سلسة لتصميم شيء ما،
00:00:06ثم تعديله، ليتم تحديث الكود تلقائيًا.
00:00:08لكن كل أداة جربها فريقنا إما تهتم بالتصميم أو بالكود، ولم تجمع بينهما أبدًا.
00:00:13أدوات مثل Stitch و Bolt تعتمد على تحويل الأوامر النصية إلى كود، ولا توجد لوحة تصميم يمكنك العودة إليها وتعديلها.
00:00:17أما Figma MCP فهو للقراءة فقط، حيث يمكن للذكاء الاصطناعي سحب التصاميم منه ولكنه لا يستطيع التصميم عليه.
00:00:22وإذا كنت تستخدم وكيل برمجة مباشرة، فإن كل تغيير في التصميم يعني إعادة كتابة الأوامر من الصفر.
00:00:26لذا عندما بدأ Pencil.dev في الانتشار مدعيًا أنه جسر ثنائي الاتجاه بين
00:00:31التصميم والكود، لفت ذلك انتباهنا. ولكن عندما بدأنا في البناء باستخدامه فعليًا،
00:00:35لم يكن الجسر سلسًا كما توقعنا. وما بدأ كمجرد اختبار لأداة ما، تحول
00:00:40إلى تعمق فريقنا بشكل أكبر مما خططنا له لجعل سير العمل هذا فعالاً حقًا.
00:00:44من المحتمل أنك سمعت بالفعل عن Pencil.dev،
00:00:47أداة التصميم الجديدة بالذكاء الاصطناعي التي اكتسبت شعبية كبيرة لدى المصممين مؤخرًا.
00:00:51إنها في الأساس جسر بين أدوات التصميم الشهيرة المتخصصة في التصميم
00:00:56وأدوات التطوير بالذكاء الاصطناعي المصممة لتنفيذ أنماط التصميم تلك.
00:01:00فهي تتصل بجميع بيئات التطوير المتكاملة القائمة على الوكلاء وتتضمن العديد من الميزات التي
00:01:04تجعل سير العمل من التصميم إلى الكود أكثر سلاسة، مثل إنشاء المكونات،
00:01:08ودعم مكتبات واجهة المستخدم، والإنشاء التلقائي لفئات CSS.
00:01:11بالنسبة لمستخدمي Figma، قد تكون هذه الواجهة هي الأقرب إليها.
00:01:15الأداة مجانية حاليًا، وقد قام فريقنا بتحميلها لاختبارها.
00:01:18حصلنا على تطبيق سطح المكتب ومعه خيارات للاتصال بجميع منصات الذكاء الاصطناعي
00:01:23التي قمنا بتثبيتها. قمنا بربطها بـ Claude Code لأنها كانت أداة عملنا الأساسية،
00:01:27ويستخدم Pencil.dev منصات برمجية للذكاء الاصطناعي مثل Claude Code و Codex بشكل خفي للقيام بمهامه.
00:01:32بمجرد تثبيت تطبيق سطح المكتب، تم تكوين MCP تلقائيًا لـ Pencil.dev
00:01:36وظهرت جميع الأدوات في Claude Code على الفور. والآن بعد الإعداد،
00:01:41أصبحت جميع نماذج OpenAI و Anthropic متاحة في الدردشة.
00:01:46اخترنا نموذج Opus 4.6 من بين جميع النماذج. تملك هذه الأداة قدرات تصميمية قوية،
00:01:51حيث تحفظ ملفات التصميم بصيغة .pen داخل مجلد المشروع،
00:01:56وهي صيغة تعتمد على JSON يمكنك تتبع إصداراتها باستخدام Git أيضًا. لكن الميزة
00:02:01التي تميزها حقًا هي قدرتها على العمل كجسر ثنائي الاتجاه بين
00:02:06وكيل البرمجة والتصميم داخل التطبيق. لكن الأمر لم يكن تمامًا كما توقعناه
00:02:10فيما يخص المزامنة ثنائية الاتجاه. كنا نظن أن Claude أو أي وكيل ذكاء اصطناعي سيقوم بمزامنة
00:02:16التصميم مع الكود والعكس تلقائيًا، لكن الأمر لم يعمل هكذا. كان علينا أن نأمره يدويًا بالمزامنة
00:02:21لأنه لا يزامن التصميم مع الكود تلقائيًا، حيث كان يحلل التصميم قسمًا بقسم
00:02:26وينفذه في ملف HTML. لقد طابق التصميم الموجود على اللوحة تمامًا،
00:02:32لكننا اعتقدنا أن تكرار ذلك بعد كل تعديل في التصميم يمثل عبئًا كبيرًا.
00:02:37كان فريقنا يعمل على صفحة هبوط لاستوديو توجيه إبداعي صممناها مسبقًا
00:02:41باستخدام pencil.dev المرتبط بـ Claude Code، ومما رأيناه، كان الموقع رائعًا
00:02:46بلمسات إبداعية واضحة كما خططنا لها تمامًا. قمنا بتنفيذ التصميم
00:02:51باستخدام Claude مرة واحدة وربطه بمشروع Next.js الذي نعمل عليه، ولكن كانت هناك
00:02:56عناصر كثيرة في الصفحة لم تعجبنا وبحاجة لتعديلات. كنا بحاجة لتغيير
00:03:01أشياء كثيرة في المشروع بشكل متكرر، لكن لم نتمكن من العودة لـ Claude ومطالبته بالمزامنة
00:03:06مرارًا وتكرارًا مع المشروع المنفذ لأنها مهمة مكررة. لذا قمنا
00:03:10بإنشاء سكربت لحل هذه المشكلة. استخدم هذا السكربت عدة مكتبات JavaScript
00:03:15مخصصة لمراقبة تغييرات الملفات. كما تضمن فترات انتظار لمنع Claude من العمل
00:03:20بشكل متكرر مما يستهلك الرموز (tokens) ويؤدي للوصول لحدود الجلسة. الغرض الأساسي
00:03:25من السكربت هو مراقبة ملف .pen الذي يحتوي على التصميم، وكلما حدث
00:03:29تغيير في الملف، يقوم بتشغيل Claude CLI مع أمر يوضح كيفية المزامنة مع المشروع.
00:03:34لكن تمت إضافة فترة الانتظار لخلق فاصل زمني بين كل عملية حفظ حتى لا يزامن
00:03:39كل التغييرات الصغيرة دفعة واحدة. لاستخدامه، كل ما علينا فعله هو تشغيل أمر npm run sync
00:03:44ليبدأ العمل فورًا في مراقبة ملف .pen الخاص بتصميمنا. وإذا عدلنا
00:03:49أي شيء والسكربت يعمل، بمجرد الضغط على مفاتيح حفظ الملف، يتم تفعيل
00:03:54Claude CLI تلقائيًا ويبدأ بمزامنة هذا التغيير مع المشروع دون أن نطلب منه
00:03:59ذلك صراحة. ولكن قبل استخدام هذا السكربت، يجب القيام بخطوة مسبقة، وهي ضبط
00:04:04جميع التصاريح المطلوبة لإجراء التعديلات، مثل القراءة والكتابة واستدعاءات أدوات MCP،
00:04:10عن طريق إضافتها في ملف settings.json داخل مجلد .claude، لأنه بدون ذلك سيتوقف
00:04:15Claude عند طلب التصريح إلى الأبد، ولن يتمكن من إجراء التغييرات في المشروع
00:04:20أو إتمام عملية التنفيذ بشكل صحيح. مع تشغيل هذا السكربت، أصبح الأمر أسهل
00:04:24لأننا لم نعد بحاجة لطلب المزامنة يدويًا مع المشروع. فكل تعديل
00:04:29كان يراقبه السكربت ويرسله تلقائيًا لـ Claude للتنفيذ. هذا السكربت مع
00:04:34الكود المصدري لهذا التطبيق متاح في AI Labs Pro. لمن لا يعرف،
00:04:39هو مجتمعنا الذي أطلقناه مؤخرًا حيث تحصل على قوالب جاهزة للاستخدام يمكنك ربطها
00:04:43بمشاريعك مباشرة لهذا الفيديو وللفيديوهات السابقة. إذا كنت تستفيد مما نقدمه وتريد
00:04:48دعم القناة، فهذه هي الطريقة الأفضل. الرابط في الوصف. إحدى
00:04:52قدرات Claude Code هي استخدام نظام الوكلاء المتعددين، مما يسرع وينجز العديد من
00:04:57المهام بالتوازي. فكرنا: لمَ لا نجرب إعداد الوكلاء المتعددين مع pencil.dev؟ وبما أنه
00:05:02متصل كـ MCP على أي حال، حاولنا استخدام عدة وكلاء لتنفيذ Next.js، بحيث يعمل
00:05:07كل وكيل على جانب مختلف من التطبيق في وقت واحد. استخدامه مع Claude Code سهل المهمة
00:05:12لأنه يستطيع الوصول لجميع ملفات التوثيق كـ context، مثل الـ PRD ودليل واجهة المستخدم
00:05:18التي نعدها عادةً قبل البدء. كنا بحاجة لتنفيذ باقي صفحات الموقع بدلاً من مجرد
00:05:23صفحة هبوط واحدة. طلبنا منه القيام بهذه المهمة ووزعنا كل جانب من جوانب
00:05:28التطبيق الذي أردنا بناءه على وكيل مختلف. بدأنا بالاستكشاف واستدعينا
00:05:33أدوات mcp المتعددة. وبما أننا نملك خمس صفحات، قام Claude بإنشاء خمسة وكلاء، وجعل
00:05:39كل واحد يعمل على صفحة مخصصة. وبعد فترة وجيزة، تم إنشاء النسخة الأولية
00:05:44من تصميم التطبيق. قام بإنشاء جميع الصفحات المطلوبة وتأكد من مطابقة التصميم
00:05:48لصفحة الهبوط باستخدام نفس الخطوط والأنماط. بمجرد انتهاء التصميم، ضغطنا
00:05:54على Command + S لحفظ الملف، فتدخل السكربت تلقائيًا لتنفيذ التصميم في التطبيق
00:05:58لتسريع العملية اليدوية. في تلك المرحلة، ورغم أن الموقع بدا متماسكًا، إلا أنه كان ينقصه شيء ما.
00:06:03لم تكن هناك حركة في الصفحة، وكان بحاجة لتأثيرات تمرير (scroll animations) لتوجيه العين
00:06:08عبر ما كان مجرد تنسيق ثابت. لذلك لجأنا لـ GSAP، وهي مكتبتنا المفضلة
00:06:14بسبب رسوميات الـ JavaScript القوية وسهولة تنفيذ الرسوم المتحركة المعقدة. ولهذا
00:06:19كتبنا أمرًا نصيًا مفصلاً للغاية بصيغة XML. استخدمنا XML لأن نماذج Claude
00:06:26مصممة لتعمل بشكل أفضل مع الأوامر المنظمة بصيغة XML، مما يسهل عليها فهم التعليمات.
00:06:31تضمن الأمر تفاصيل المهمة والتبعيات المطلوبة والملاحظات الهامة،
00:06:36مع استهداف كل عنصر وتحديد سلوك كل قسم بدقة داخل
00:06:41الوسوم الخاصة بها. عندما أعطينا هذا الأمر لـ Claude Code، أضاف الكثير من
00:06:46المكونات مع حركات GSAP وقام بتثبيت المكتبة نفسها. وبمجرد اكتمال هذا الجزء
00:06:51من التنفيذ، فحصنا الموقع. مع إضافة الرسوم المتحركة، أصبح الموقع أكثر حيوية
00:06:56وتفاعلية. تجربة استخدام الموقع بالكامل أصبحت مختلفة تمامًا عن النسخة
00:07:00السابقة التي كانت ثابتة وبدون أي حركة. هذا الأمر النصي متاح أيضًا
00:07:04في مجتمعنا AI Labs Pro حيث يمكنك تحميله واستخدامه في مشاريعك. وأيضًا إذا كنت
00:07:09تستمتع بمحتوانا، فكر في الضغط على زر الإعجاب لأنه يساعدنا على تقديم المزيد
00:07:14والوصول لجمهور أكبر. والآن، رغم إضافتنا لتأثيرات التمرير البصرية باستخدام
00:07:19GSAP، أضفنا طبقة أخرى بـ Lenis فوق تمرير GSAP الأولي. Lenis هي مكتبة
00:07:25تمرير سلس مفتوحة المصدر، وتعد من أشهر الأدوات لخلق تجربة تصفح أكثر انغماسًا.
00:07:30قد تتساءل لمَ نستخدم مكتبة أخرى بينما نملك بالفعل رسوم تمرير معدة بـ GSAP؟
00:07:35السر هو أن Lenis و GSAP يكملان بعضهما. GSAP تتحكم فيما يحدث عند
00:07:39التمرير، بينما تتحكم Lenis في شكل وملمس عملية التمرير نفسها. بدون Lenis،
00:07:44يقفز التمرير بين المواضع، أما معها فتبدو الصفحة انسيابية وتظهر حركات GSAP بشكل طبيعي أكثر.
00:07:49لذا وضعنا أمرًا نصيًا مفصلاً آخر لهذه المهمة، واتبعنا نفس نهج XML
00:07:54كما فعلنا مع GSAP. ركز أمر Lenis على تحسين رسوم التمرير الموجودة
00:07:59والتي أضفناها في الخطوة السابقة. حدد الأمر التبعيات وجميع التعليمات
00:08:04وتضمن وصفًا دقيقًا للعناصر وكيفية وضع الحركات وكيفية عملها،
00:08:09منتهيًا بالقواعد المنظمة. أعطينا هذا الأمر لـ Claude Code وتركناه يجري تعديلات
00:08:13كثيرة على كامل المشروع. بمجرد تنفيذ كل شيء، فحصنا الموقع وكان التحسن
00:08:18ملحوظًا. التغيير الأهم كان إضافة التمرير الأكثر سلاسة، مما جعل التنقل
00:08:23عبر الموقع تجربة أكثر متعة وانغماسًا. بعد بناء الموقع وتجهيزه بجميع
00:08:28الميزات، بقيت الخطوة الأخيرة وهي التأكد من مطابقته لمعايير تجربة المستخدم قبل اعتماده.
00:08:32لهذا الغرض، أنشأنا مهارة باستخدام أداة إنشاء المهارات أسميناها UX Audit.
00:08:38تستهدف هذه المهارة فحص جودة عناصر واجهة المستخدم، ومراجعة جوانب الموقع المختلفة
00:08:44والتأكد من التزام كل شيء بمعايير تجربة المستخدم (UX). وتضمنت عدة مراحل
00:08:49مثل جمع السياق وتحليل قائمة التدقيق المكونة من تسع نقاط، ومرحلة التقرير
00:08:54حيث تعطي درجة بناءً على معايير محددة. كما شملت مراجع لقائمة تدقيق UX
00:08:59التي تحتوي تفاصيل النقاط التسع، وسكربتات Python مخصصة لاكتشاف
00:09:04مشاكل تجربة المستخدم برمجياً، تلك المشاكل التي قد تغفل عنها العين البشرية.
00:09:08بمجرد تشغيل مهارة التدقيق، جمعت كل المشاكل وحددت مشكلتين حرجتين وعدة مشاكل
00:09:14رئيسية وثانوية. كانت المشاكل الحرجة تتعلق بتباين الألوان. وصنف مقياس الدرجات
00:09:19الموقع في المستوى C بسبب المشاكل المكتشفة. قدمت المهارة جميع التغييرات المطلوبة بالتفصيل،
00:09:24وبعد تحديدها، طلبنا منه تنفيذ الإصلاحات. وبعد إجراء جميع التغييرات،
00:09:29رغم أن شكل الموقع قد لا يبدو مختلفًا تمامًا، إلا أنه شهد تحسنًا هائلاً في سهولة الاستخدام،
00:09:34مما جعله أسهل في التنقل ومتوافقًا مع معايير WCAG أيضًا. وعند تشغيل مهارة التدقيق
00:09:40مرة أخرى، تحسن تصنيف الموقع من C إلى B، مما يعني إصلاح جميع المشاكل الرئيسية وبقاء القليل من الثانوية.
00:09:45بهذا نصل لنهاية هذا الفيديو. إذا كنت ترغب في دعم القناة ومساعدتنا
00:09:50على الاستمرار في تقديم مثل هذه الفيديوهات، يمكنك ذلك عبر زر شكراً أدناه. وكالعادة،
00:09:55شكراً للمشاهدة وأراكم في الفيديو القادم.