Transcript
00:00:00التصميم الجيد مهم حقاً؛ فإذا كنت تريد عملاء، فإن مظهر موقعك هو أول ما ي
00:00:05يحكمون عليه. هناك الكثير من الأدوات التي تساعد في ذلك، وتعتبر أداة (Claude Design) واحدة من أكثر
00:00:09الأدوات قوة في الوقت الحالي. لكن التصميم الجيد لا يأتي لمجرد إعطاء توجيهات للأداة. لذلك، في
00:00:14هذا الفيديو، سنستعرض عملية من خمس مراحل يمكنك تطبيقها بنفسك باستخدام
00:00:18(Claude Design). وسواء كنت لم تفتح أداة (Claude Design) قط أو كنت تستخدمها منذ شهور، فهناك
00:00:22شيء مفيد لك هنا. إذا لم تفتحها من قبل، فلا بأس لأننا سنبدأ بماهية
00:00:27الأداة أساساً. أما إذا كنت قد صممت بها من قبل، فسنتناول كيف ندمج (Claude Design)
00:00:32مع (Claude Code) لجعلها أكثر قوة بكثير. لذا، استخدم الطابع الزمني أدناه للانتقال مباشرة إلى هناك.
00:00:37الآن، إذا كنت جديداً على القناة فأهلاً بك. نحن في الواقع شركة برمجيات وقد أنشأنا
00:00:41نظاماً كاملاً لك حول (Claude Design) بناءً على عملياتنا الداخلية. لذا دون إهدار المزيد من
00:00:47الوقت، لنبدأ الفيديو. هذا القسم مخصص فقط لمن لا يعرفون ماهية (Claude Design). لذا
00:00:52إذا كنت تعرفها بالفعل، يمكنك الانتقال إلى القسم التالي. ظهرت لأول مرة كنسخة معاينة بحثية
00:00:57عندما أطلقت (Claude) نموذج (Opus 4.7) الخاص بهم. وهي في الأساس أداة تصميم ذات واجهة سهلة الاستخدام حقاً
00:01:02تتيح لأي شخص، حتى غير التقنيين، إنشاء تصاميم جيدة بمجرد توجيهات بسيطة.
00:01:07وهي متوفرة عبر جميع الخطط المدفوعة. ولا تقتصر على مواقع الويب فحسب؛ بل يمكنك
00:01:12أيضاً تصميم شرائح العرض، والمستندات، وحتى إنشاء رسومات متحركة باستخدامها. كما تتوفر أداة (Claude Design)
00:01:17على تطبيق (Claude Desktop) وموقع (Claude) الإلكتروني. لذا لست مضطراً بالضرورة لتثبيت تطبيق سطح المكتب.
00:01:22إذا كنت تريد استخدامها على التطبيق، فما عليك سوى تنزيله، وتشغيل التثبيت، وتسجيل الدخول إلى حسابك.
00:01:27ثم تفتح الشريط الجانبي، وتنقر على (Design)، وستفتح واجهتها حيث يمكنك البدء في استخدامها.
00:01:32تمنحك أداة (Claude Design) كافة نماذج (Claude) للاختيار من بينها، حتى نموذج (Fable) وهو أكثرها كفاءة،
00:01:37على الرغم من حصولك على وصول محدود إليه. أما نموذجهم الأساسي للاستخدام العام فلا يزال (Opus)،
00:01:42وهو الأفضل للتصميم. لكن المشكلة في نماذج (Opus) هذه هي أنها تستهلك
00:01:46الكثير من الرموز (Tokens). وفي المقابل، لا يستخدم نموذج (Haiku) عدداً كبيراً منها، ولكنه قد يحتاج إلى مزيد
00:01:51من التنقيح للحصول على تصميم جيد منه. وعلاوة على ذلك، يمكنك تعيين مستوى الجهد لكل
00:01:55نموذج أيضاً. يتحكم مستوى الجهد أساساً في مدى تفكير النموذج بجدية قبل القيام بأي شيء. نحن نستخدم
00:02:01نموذج (Opus 5)، وهو أحدث نموذج حتى الآن، بمستوى جهد متوسط لمهام التصميم الخاصة بنا لأنه يتيح لنا التصميم
00:02:06بسهولة دون إهدار عدد كبير من الرموز. كما يتيح لك جلب جميع بروتوكولات (MCP) والمهارات الخاصة بك، مما يسهل
00:02:12جدا استخدام نظامك الخاص بداخله مباشرة. لمن لا يعرفون، (MCPs) هي في الأساس ما يسمح
00:02:18للوكلاء بالاتصال بأشياء خارجة عنهم، مثل الأدوات والخدمات الأخرى، بينما المهارات هي مجموعة
00:02:23من التعليمات التي توضح للوكيل كيفية أداء شيء ما بشكل أفضل مع إرشادات خطوة بخطوة والمراجع التي
00:02:28يمكنه اتباعها. والآن قبل أن تبدأ، هناك شيء واحد يجب وضعه في الاعتبار. هناك حد لعدد التصاميم
00:02:33التي يمكنك إنشاؤها. تعمل أداة (Claude Design) بحد زمني مدته 5 ساعات، ولكنه ليس مخصصاً لتصاميمك فقط. فكل ما
00:02:38تفعله على (Claude) يُحتسب ضمن نفس الحد. وداخل نافذة الـ 5 ساعات هذه، هناك حد أقصى لعدد الرموز التي
00:02:44يمكنك إنفاقها، وبمجرد نفادها، عليك انتظار انتهاء تلك الساعات الـ 5 قبل أن تتمكن من استخدامها
00:02:49مرة أخرى. وعلى الرغم من تحسنها الكبير مقارنة بما كانت عليه عند إطلاقها لأول مرة، إلا أن (Claude Design) لا تزال
00:02:53تستهلك الكثير من الرموز، لذا إذا كنت تستخدمها بكثافة، فتوقع نفاد حدودك بشكل أسرع. ولتجنب
00:02:59هذا الاستهلاك الهائل للرموز، تحتاج إلى اتخاذ بعض الخطوات قبل القفز مباشرة إلى كتابة التوجيهات.
00:03:04هذه الخطوات مهمة لأنها تضمن حصولك على التصميم الذي تريده دون إهدار
00:03:09الكثير من الرموز. أول شيء تحتاج إلى القيام به هو إنشاء ملف (design.md). هذا تنسيق
00:03:15بدأته جوجل، وهو يحتوي على كافة تفاصيل تصميم علامتك التجارية. يقوم وكيل البرمجة الذكي الخاص بك بقراءة هذا الملف
00:03:20قبل كتابة أي شيء، بحيث تكون كل شاشة يقدمها لك متوافقة مع هوية العلامة التجارية. فهو لا يضطر للتخمين أبداً،
00:03:25لذا فهو لا يحيد أبداً عن الهوية. تمتلك أداة (Claude Design) الآن ميزة تتيح لك إنشاء أنظمة تصميم.
00:03:30نظام التصميم هو في الأساس مجموعة من خيارات الأنماط التي تظهر في جميع أنحاء موقعك. فهو يحتوي على خطوطك،
00:03:35وألوانك، وكافة التفاصيل الأخرى التي يتكون منها تصميمك، ويسمح لك باستخدامها لبناء
00:03:40المزيد من التصاميم. لذلك، ستتبع جميع التصاميم المبنية باستخدام نظام التصميم نفس النمط وتبدو وكأنها
00:03:46جزء من نفس الموقع. لكن السبب الرئيسي لرغبتك في البدء بملف (design.md) محدد مسبقاً هو أن
00:03:51جميع هذه النماذج تنتج تصاميم تبدو متطابقة. إذا سمحت لأداة (Claude Design) ببناء نظام التصميم من تلقاء نفسها،
00:03:57فإنها تعود إلى الألوان والأنماط العامة التي تستخدمها نماذج (Opus) في كل مكان،
00:04:02وبسبب ذلك، ينتهي المطاف بموقعك ليبدو مثل أي موقع آخر مبني بالذكاء الاصطناعي هناك. ولكن إذا
00:04:07سلمت ملف (design.md) ليتم بناء نظام التصميم على أساسه، فسخره هذا الملف ليخبره بدقة بما تريده، بحيث يكون الأمر
00:04:12أكثر تحكماً بكثير ولا يعود إلى تلك الإعدادات الافتراضية. وكما ذكرنا من قبل، فإن
00:04:17السبب الآخر هو الاتساق. وبما أن نظام التصميم بأكمله يعتمد على هذا الملف الفردي، فإن كل صفحة تتبع
00:04:22نفس النمط تماماً، وهو ما يحافظ على مظهر موقعك متعدد الصفحات متسقاً. ولهذا الغرض، أنشأنا مهارة
00:04:27تخطط لملف (design.md) نيابة عنك. لاستخدام هذه المهارة، تقوم بتشغيلها داخل (Claude Code). و(Claude Code)
00:04:33هو أداة أخرى من إنتاج (Anthropic). وهي في الأساس أداة برمجة تعتمد على الذكاء الاصطناعي وتشغلها في سطر الأوامر (Terminal)
00:04:39ويمكنها بناء تطبيقات كاملة لك. لتثبيتها، توجه ببساطة إلى موقعهم الرسمي، وانسخ أمر
00:04:45التثبيت، وقم بتشغيل هذا الأمر في سطر الأوامر. بمجرد الانتهاء من ذلك، اكتب (claude) في سطر الأوامر،
00:04:49ويمكنك البدء في استخدامها عن طريق كتابة التوجيه الخاص بك. وبما أننا سنقوم ببناء التطبيق في (Claude
00:04:54Code)، فقد قمنا ببساطة بإسقاط هذه المهارة داخل مجلد المهارات الموجود في مجلد (.claude)، وهو في الأساس
00:04:59المكان الذي تعيش فيه جميع إعدادات ותكوينات (Claude Code). ربما لن يكون لديك هذا المجلد، ولكن يمكنك ببساطة
00:05:05إخبار (Claude Code) في مربع التوجيهات أنك بحاجة إلى تثبيت المهارات في المشروع، وسوف يقوم بإعدادها
00:05:10لك بل ويضع المهارة هناك بنفسك. لن يكون مجلد (.claude) مرئياً عندما تفتحه
00:05:15في متصفح الملفات (Finder). ويرجع ذلك إلى أن اسمه يبدأ بنقطة، والملفات التي تبدأ بنقطة تُعامل كملفات
00:05:20نظام، لذا يخفيها متصفح الملفات افتراضياً. لذا للوصول إلى هناك، تحتاج إلى محرر أكواد، وهو
00:05:25تطبيق يتيح لك رؤية جميع ملفات مشروعك في مكان واحد منظّم. المحرر الذي نستخدمه هو
00:05:31(VS Code) التابع لشركة مايكروسوفت، وهو الأكثر استخداماً بين المطورين نظراً لسهولة العمل
00:05:36به. لتثبيته، توجه إلى موقعهم الرسمي، وقم بتنزيل برنامج التثبيت الخاص بنظام التشغيل
00:05:40الذي تستخدمه، وقم بتشغيل عملية التثبيت. ثم افتح مجلد مشروعك داخله، وستكون
00:05:45قادراً على رؤية كل شيء، بما في ذلك الملفات المخفية. ثم متى شئت بناء تطبيق، يمكنك ببساطة
00:05:49استدعاء هذه المهارة باستخدام أمر الشرطة المائلة (slash command)، وهو اختصار تكتبه مسبوقاً بشرطة مائلة
00:05:54لتشغيلها وإعطائها توجيهاً يخبره بما ترغب في بناءه. يقوم بإجراء مقابلة معك ويخطط
00:05:59لهوية المنتج البصرية معك بالتفصيل، وبمجرد أن يحصل على كل شيء، يكتب
00:06:03ملف (design.md) بالكامل، ويقوم أيضاً بالتحقق من صحته وفقاً لمعايير جوجل عن طريق تشغيل البرامج النصية. هذه المهارة
00:06:09تحتوي أيضاً على مراجع مضادة للتصميم الرديء (anti-slop)، والتي تمثل كافة الأنماط الشائعة التي تكشف أن الموقع مصمم بالذكاء الاصطناعي.
00:06:15لذا فإن التخطيط لملف (design.md) أولاً هو حقاً الخيار الأفضل. أيضاً، إذا كنت تتساءل عن مكان الحصول
00:06:21على هذه المهارة، فلا تقلق، سنخبرك لاحقاً في الفيديو. الآن، التطبيق الذي نبنيه في هذا الفيديو
00:06:26هو تطبيق لإدارة المشاريع حيث تدير كافة مشاريعك البرمجية في مكان واحد. لذا للبدء،
00:06:31أولاً تعطي (Claude Code) توجيهاً يتضمن أمر الشرطة المائلة للمهارة، وتخبره عن التطبيق الذي
00:06:36تريد بناءه بشكل عام وما سيُستخدم من أجله، ويبدأ بتحليل الهوية البصرية
00:06:41لفكرتك. وبمجرد حصوله على ذلك، يبدأ بطرح الأسئلة عليك، مثل ما إذا كان لديك
00:06:46لون معين في ذهنك لموقعك. إذا كنت قد قررت بالفعل ألوان علامتك التجارية، يمكنك تقديمها،
00:06:51أو يمكنك السماح له باختيارها بنفسه. ونظراً لأنك تستخدم المهارة، فلن يلجأ إلى الألوان الرديئة افتراضياً،
00:06:55لذا لا داعي للقلق بشأن هذا المظهر العام، ولكن لا يزال من الأفضل تحديدها
00:07:00مسبقاً. ما نفعله عادةً هو استخدام موقع (coolers)، وهو موقع يولد ويعرض
00:07:05لوحات الألوان، حتى تتمكن من رؤية كيف تبدو الألوان معاً. بمجرد العثور على مجموعة ألوان
00:07:09تعجبك، يمكنك النقر على تصدير (export)، ثم اختيار خيار الأكواد (code)، وسيعطيك
00:07:14هذا النص الذي يمكنك نسخه ولصقه مباشرة في (Claude Code). سيقوم (Claude Code) بوضع هذا
00:07:18داخل ملفات (design.md) الخاصة بك نيابة عنك. بعد ذلك، سينشئ ملف (design.md) ويشغل
00:07:24بعض خطوات التحقق. ويخرج ملف التصميم بالطريقة التي وضعتها جوجل تماماً.
00:07:29الآن، تنسيق جوجل هذا سهل الفهم بالنسبة لنموذج الذكاء الاصطناعي، ولكنه صعب عليك لتتمكن حقاً من
00:07:33تخيل التصاميم التي ستُولد بناءً عليه، لذا لا يمكنك معرفة ما إذا كان هو التصميم الذي
00:07:38تريد اعتماده نهائياً أم أنه بحاجة إلى التغيير. ولكن لا تختبره داخل (Claude Design). فأنت تقوم بتوليد
00:07:43تصاميمك هناك، ولنفترض أنك لا تحبها. الآن عليك العودة إلى ملف (design.md)،
00:07:48وتغييره، وتوليد كل شيء مرة أخرى. كل جولة من هذه الجولات تكلفك رموزاً. هناك الكثير
00:07:53من الأدوات التي ستعرض لك تصوراً لملف (design.md)، وأحدها استخدمناه هو (design.md.space). أي
00:07:59منها تظهر لك شكل ملف تصميمك وكيف تتفاعل الألوان التي اختارها للمناطق المختلفة
00:08:04معاً. كما أنه يعرض تصوراً لجميع العناصر أيضاً، مما يجعل اتخاذ القرار بشأنها أسهل بكثير. الآن هذه
00:08:10مجرد طريقة واحدة لإنشاء ملف (design.md)، ولكن هناك طرق أخرى. إذا كنت لا تريد صنع واحد
00:08:15بمفردك، يمكنك ببساطة نسخ تصميم موقع ويب شهير كنموذج عينة. وبصراحة، فإن نسخ تصميم ما
00:08:19ك مرجع هو ما يفعله الكثير من الناس بالفعل. فأنت تأخذه كنقطة بداية وتجري تغييرات
00:08:24لتجعله خاصاً بك، تماماً مثل كيف أخذ الكثير من الناس مظهر (Notion) البسيط وطوروه
00:08:29ليناسب تصاميمهم الخاصة بعد إجراء بعض التعديلات. لهذا الغرض، هناك موقع يسمى (getdesign.md)، والذي يسرد
00:08:34الكثير من العلامات التجارية وكل أنماطها كملفات design.md يمكنك الحصول عليها بنفسك. وبما أن لدينا
00:08:39ملف design.md الخاص بنا بالفعل، فيمكننا المضي قدمًا باستخدام Claude Design وإنشاء نظام تصميم
00:08:44جديد منه. عندما تنشئ نظامًا جديدًا، يسأل عن تفاصيل المنتج. ولكن بما أن لديك
00:08:49ملف design.md، فإنك تقوم ببساطة بتحميله كأصل. وبعد ذلك يبدأ في توليد النظام الجديد عن طريق
00:08:55قراءة الملف، وإنشاء مهام، والعمل عليها واحدة تلو الأخرى. بعد قليل، يقوم Claude Design
00:09:00بإنشاء نظام التصميم وتصور كل شيء من أجلك، وبناء العناصر المختلفة التي ستكون
00:09:06جزءًا من التطبيق الذي يُستخدم فيه. لكي تتمكن من متابعة سير العمل هذا، ستحتاج إلى هذه
00:09:10المهارة. لقد وضعناها على GitHub وربطناها في الوصف حتى يمكنك الحصول عليها مجانًا.
00:09:14لذا لاستخدامها، ما عليك سوى إعطاء هذا الرابط لـ Claude Code وإخباره بإعداده لك وسيقوم بتثبيته
00:09:19ووضعه في مجلد .claude دون الحاجة للقيام بأي شيء. بمجرد قفل نظام التصميم
00:09:24وحين يحين وقت استخدامه بالفعل، هناك خطوة مهمة أخرى قبل أن تبدأ
00:09:29في بناء الموقع. وهي إنشاء إطارات سلكية لما تريد بناءه. الإطار السلكي هو أساسًا
00:09:34رسم تقريبي يتيح لك معرفة مكان جميع العناصر وما إذا كانت موضوعة بشكل صحيح. يمكنك
00:09:39بناء الموقع مباشرةً ولكن ذلك يتسبب في مشاكل. سيتعين عليك الانتظار طويلاً
00:09:43لأن Claude Design بطيء في إنشاء التصاميم، وإذا لم يكن التصميم هو ما تحتاجه بعد كل ذلك،
00:09:48فسيتعين عليك إعادة العمل بأكمله. للقيام بذلك في Claude Design، حدد نظام التصميم الذي
00:09:53أنشأته للتو، وحدد خيار الإطار السلكي وأعطه أمرًا يتضمن تفاصيل عدد الشاشات التي تريدها.
00:09:58بعد ذلك، يتيح لك أيضًا إنشاء خيارات متعددة لكل شاشة حتى يتمكن Claude من منحك بعض
00:10:03الأنماط المختلفة لكل شاشة للاختيار من بينها. لن يستغرق توليدها وقتاً طويلاً ويمكنك بعدها
00:10:08الاطلاع على الهيكل وتفقد جميع التغييرات التي أنشأها لنفس الصفحة. يحتوي أيضًا
00:10:12على ميزة التعليقات، لذا لتغيير أي شيء، ما عليك سوى ترك تعليق عليه. التعليق بشكل أساسي
00:10:18يرسل التفاصيل الدقيقة لهذا العنصر مع أمرك حتى يعرف Claude بالضبط المنطقة التي تحتاج
00:10:23إلى تغيير وكيفية ذلك. هذا يجعله أفضل بكثير من مجرد إعطاء أمر ودع Claude يكتشف المنطقة
00:10:28التي تقصدها بمفرده. ولإضافة تعليق، ما عليك سوى تحديد ميزة التعليق، والنقر فوق
00:10:33الشيء الدقيق الذي تريد تغييره وكتابة التغيير المطلوب. ويمكنك إضافة عدد ما تشاء من التعليقات.
00:10:38يمكنك إرسالها واحداً تلو الآخر ولكن من الأفضل تجميعها وإرسالها دفعة واحدة حتى يحلها
00:10:42معًا ويصلح كل شيء في خطوة واحدة. هذا يبقي وقت الانتظار في أدنى حد ممكن. لذا استمر في
00:10:48الضبط حتى تكون راضيًا عن الهيكل وبمجرد الانتهاء هنا، يمكنك المضي قدمًا. وإذا
00:10:52كنت تستمتع بالفيديو حتى الآن، اشترك في القناة واضغط على زر الإعجاب. هذا اللفظ الصغير
00:10:57من الدعم يعنيه الكثير بالنسبة لنا. والآن بعد أن صممت الإطار السلكي، حان وقت تصميم
00:11:03التصميم الفعلي. يمكنك أيضًا استخدام نفس التصميم لإنشاء بعض التغييرات. وبما أنك عادة
00:11:06تطلب من Claude إجراء بعض التغييرات على نفس التصميم، فإنك تختاره أولاً من بين
00:11:10ما أنشأته للتو. يتم تحديد كل صفحة من هذه الصفحات برمزها، لذا يمكنك تحديدها
00:11:15بناءً على ذلك. بعد ذلك، تمنحه أمرًا يخبره أنك تريد تحويل هذه الشاشات إلى تصميم مفصل بالكامل
00:11:20وتخبره بالاحتفاظ بالتخطيط والهيكل من الإطار السلكي مع مسافات وتدرج هرمي نظيفين.
00:11:26يقرأ Claude design بعد ذلك جميع العناصر التي أنشأها أثناء بناء نظام التصميم.
00:11:31 وباستخدام تلك العناصر، يقوم ببناء الموقع بأكمله ليخرج تمامًا وفقًا لنظام التصميم
00:11:36والإطار السلكي، تمامًا كما نحتاجه. تمامًا كما في الإطار السلكي، يمكنك التعليق وإصلاح الأشياء
00:11:41هنا أيضًا. ومن المحتمل أن تحتاج إلى الكثير من التغييرات لأنه يميل إلى عدم اختيار ألوان الأزرار بشكل صحيح.
00:11:46بعض الأزرار بحاجة لجذب الانتباه ويجب أن تكون بلون جريء لتبرز لذا يمكنك أن تطلب منه
00:11:50إصلاح تلك الأزرار. وبسبب بنائه فوق الإطار السلكي، يبدو الموقع فارغًا بعض الشيء
00:11:55بمفرده مع إضافة الأجزاء الأساسية فقط فوق الرسم التقريبي، لذا يمكنك أن تطلب منه إضافة نسيج
00:12:00وعناصر لمظهر أكثر اكتمالاً. يمكنك أيضًا تطبيق التعديلات مباشرة على التصميم، فإذا كان لديك تغيير بسيط
00:12:05مثل حذف بعض العناصر، يمكنك القيام بذلك مباشرة على التصميم دون مطالبة Claude
00:12:10بذلك. وبهذه الطريقة يتم تطبيق التغيير دون الانتظار وإهدار الرموز (Tokens) على شيء صغير.
00:12:15وبمجرد الانتهاء من إجراء التغييرات، يمكنك أن تطلب من Claude design تحسين المظهر العام،
00:12:20فيقوم بإجراء تغييرات خفية وذات مغزى على التصميم. إذن، الإصدار الأول من التطبيق
00:12:25قد انتهى الآن، ولكن هناك شيء مفقود وهو الحركات (Animations). وهي مهمة لأنها
00:12:29تجعل استخدام الموقع أفضل وتوجه العيون نحو ما يهم حقًا. أشياء مثل التمرير
00:12:35إلى العرض أو أي لمسات صغيرة أخرى تجعل الموقع يبدو أكثر حيوية. لذا من أجل ذلك، أعطينا Claude design
00:12:40أمرًا لإضافة الحركات عبر جميع الشاشات مثل التمرير إلى العرض أو أي لمسات صغيرة أخرى
00:12:45تجعل الموقع يبدو أكثر حيوية. وأخبرناه بأن تكون خفية وألا يجعل
00:12:50أي شيء مبالغًا فيه لأن ذلك قد يبدو غريبًا. بمجرد أن انتهى Claude design، يمكنك رؤية حركات
00:12:55التمرير إلى العرض والنصوص المنبثقة التي تجعل الموقع بأكمله يبدو أكثر تفاعلية بكثير. وبمجرد أن
00:13:00تكون راضيًا عن التصميم، يمكنك الانتقال إلى الخطوة التالية، وهي التسليم. لقد أصبح التصميم في Claude
00:13:05design جاهزًا الآن، وحان الوقت لبث الحياة فيه عن طريق تحويله إلى المنتج الحقيقي الذي
00:13:10سنقوم بتسليمه في النهاية. لم تكن هذه الميزة موجودة في Claude design من قبل، ولكن يمكنك الآن تصدير تصميماتك
00:13:15مباشرة إلى Claude code. وهو يستخدم بروتوكول Claude design MCP، وهو ما يسمح لـ Claude design و
00:13:21Claude code بالتحدث مع بعضهما البعض. ولا يعمل في اتجاه واحد فقط، بل يعمل في الاتجاهين. لذا يمكنك نقل
00:13:26تصميماتك من Claude design إلى Claude code وإعادتها بنفس الطريقة أيضًا. تفتح Claude
00:13:31code مرة أخرى وتلصق هذا الأمر الذي حصلت عليه من Claude design. ويبدأ بقراءة البيانات الوصفية،
00:13:36وهي أساسًا معلومات الملخص حول التصميم، ثم يسرد ملفات المشروع. وهو يقرأ نظام التصميم
00:13:42أولاً، لأنه المكان الذي يتم فيه تحديد التصميم، ثم يقرأ جميع العناصر واحدة تلو
00:13:47الأخرى. بمجرد أن يمتلك التصميم بالكامل، يبنيه في مشروعك، مع جميع الحركات الموجودة في
00:13:52Claude design. ولكن كان علينا التحقق من هذا التحويل للتأكد من تم بشكل صحيح. من الناحية المرئية،
00:13:57كل شيء بدا جديراً بالاهتمام، ولكن قد تكون هناك مشاكل داخلية عندما يتم تحويل الشيفرة البرمجية الخام من Claude design
00:14:02إلى تطبيق حقيقي. لذلك طلبنا منه مراجعة عميقة، وبدأ في التحقق من ملف design.md
00:14:08مقابل ما تم بناؤه فعليًا لمعرفة ما إذا كان الاثنان متطابقين. وقد رصدت هذه المراجعة مشاكل متعددة
00:14:12مثل مشاكل التجاوب (Responsiveness)، والتي تعني ببساطة أن التطبيق لم يكن يبدو بالشكل الصحيح على أحجام الشاشات المختلفة،
00:14:17مثل الهواتف المحمولة أو الأجهزة اللوحية. ما يصممه Claude design يميل إلى مواجهة هذه المشكلة، لأنه
00:14:22لا يزال إصدارًا مبكرًا، لذا فإن أي شيء يصممه يخرج بأفضل شكل للشيء الذي صُمم لأجله بالضبط. التصميم
00:14:27المخصص لموقع ويب سيُبدو رائعًا هناك، ولكن ليس دائمًا على أحجام الشاشات الأخرى، لذلك قمنا بتشغيل الإصلاحات،
00:14:32وبعد ذلك أصبح الجزء المرئي من التطبيق يعمل ومتجاوبًا. والآن لإنهاء هذا
00:14:36التطبيق وجعله يعمل، كان علينا ربطه بما يُسمى بقاعدة البيانات. لذا المشكلة حاليًا
00:14:41هي أنه على الرغم من أن التطبيق يعمل بكامل طاقته، وإذا نقرنا على الأزرار، فسيعمل ويضيف
00:14:46تفاصيل حول مشروع جديد. ولكن إذا فتحنا التطبيق مرة أخرى، فإن كل التقدم الذي أحرزناه في التطبيق
00:14:51سيختفي. ولهذا السبب نحتاج إلى قاعدة بيانات بحيث يتم تخزين جميع تلك البيانات داخل التطبيق ويمكن للناس
00:14:57استخدامها بالفعل. ولهذا الغرض استخدمنا Supabase. فهي واحدة من أشهر مزودي الخلفية (Backend) هناك،
00:15:02واحدة من أفضل الطرق لإدارة المستخدمين وجميع بياناتك. والآن Supabase ليس أمرًا جديدًا علينا. فنحن نستخدمه
00:15:08في كل تطبيق تقريبا نبنيه، بغض النظر عن الجهة التي نبني لها، بل إن الكثير من أدواتنا الداخلية
00:15:12تشغل إعداداتها بالكامل عليه. وذلك لأنه يرفع عنا الكثير من العمل
00:15:17الذي كان سيتعين علينا القيام به لولا ذلك. وهي أيضًا واحدة من أكثر قواعد البيانات استخدامًا، نظرًا لمدى سهولة
00:15:22اتصالها بوكلاء الذكاء الاصطناعي مثل Claude Code. تمتلك Supabase أيضًا مهارة وكيل، والتي تحتوي على
00:15:28تعليمات ونصوص وموارد يمكن للوكيل استخدامها للعمل مع Supabase بشكل أكثر موثوقية. وبهذه الطريقة،
00:15:33فهو يعرف كل ما يحتاجه لتحقيق أقصى استفادة من أدوات Supabase. لتثبيتها، عليك فقط نسخ
00:15:39أمر التثبيت وإعطائه للوكيل، وداخل تلك الحزمة توجد مهارتا. إحداهما هي
00:15:43مهارة Supabase، وهي أساسًا دليل حول كيفية استخدامها، والأخرى هي مهارة أفضل الممارسات،
00:15:48التي تحتوي على أفضل الطرق لتحسين أداء تطبيقك. بمجرد انتهاء التثبيت،
00:15:53سترى كلتا المهارات الجديدتين تمت إضافتهما إلى مشروعك. يتم تشغيل مهارة Supabase كلما كان هناك أي
00:15:58مهمة قاعدة بيانات أو تسجيل دخول، وتبدأ مهارة أفضل الممارسات في العمل إذا أردت من Claude Code جعل
00:16:04تطبيقك أسرع من خلال ذكر عبارة “optimize performance” في أمرك. كل ذلك
00:16:08مدعوم بمكتبة ضخمة من المراجع لجميع أنواع المشاكل. بمجرد تثبيت هذه المهارات،
00:16:13يمكنك إعطاء Claude Code أمرًا لبناء الخلفية وربط التصميم الحالي بها،
00:16:18بحيث يعمل التطبيق بأكمله فعليًا. الآن، لأننا لم نكن نريد أن يعمل الوكيل على بنية
00:16:22كيفية تنظيم بيانات التطبيق، فقد قمنا بإنشائها مسبقًا بأنفسنا وأضفناها إلى
00:16:27المجلد الرئيسي للمشروع. وبما أن المهارة هي مجرد حزمة من التعليمات، فلا يمكنها الوصول إلى مشروعك
00:16:32على خوادم Supabase وإجراء تغييرات هناك. إنها مجرد نصوص تخبر الوكيل بما يجب عليه فعله،
00:16:36لذا فهي لا تأتي مع أي أدوات تتيح له العمل على أشياء خارج الوكيل. ولهذا السبب فإن مهارة Supabase
00:16:41تطلب منك ربط إما واجهة سطر الأوامر (CLI) الخاصة بهم، وهي الأداة التي تشغلها من الطرفية (Terminal)،
00:16:46أو بروتوكول MCP. يمنح أي منهما الوكيل الأدوات للعمل على مشروع Supabase الخاص بك مباشرة،
00:16:51لذلك لن تقوم بأي شيء يدوياً. لقد اخترنا MCP لأنه أسهل في الإعداد،
00:16:56ولن نضطر للتعامل مع المفاتيح التي تسمح لواجهة سطر الأوامر بتسجيل الدخول إلى حسابك. لربطه،
00:17:01عليك التوجه إلى موقعهم الرسمي، ونسخ أمر التثبيت للوكيل الذي تستخدمه،
00:17:05وتشغيله في الطرفية المفتوحة في مجلد مشروعك. بعد ذلك، تقوم بتشغيل الأمر /mcp
00:17:10داخل ClaudeCode وسترى أنه متصل، ولكن لن تتمكن منใชه فوراً لأنه
00:17:15غير مسجل الدخول. لذا بمجرد اختيار مصادقة (Authenticate)، سيتم توجيهك إلى المتصفح حيث تقوم بتسجيل الدخول،
00:17:20وبعد ذلك سيتم توصيل MCP. بمجرد توصيل MCP، قام ClaudeCode بعد ذلك بتحميل المهارة
00:17:25وشرع في العمل على التطبيق. لقد أجرى الكثير من التغييرات وأجرى اختبارات مقابل طلبات قاعدة البيانات تلك
00:17:30لضمان بناء أفضل إصدار. كما حرص على تأمين وحماية جميع المناطق التي
00:17:34لا ينبغي أن تكون مخصصة لكل مستخدم، وكل ذلك بفضل تلك الإرشادات الموجودة في المهارة. ومثل هذا،
00:17:39تتولى Supabase إدارة الخلفية بأكملها من أجلك، وكل ذلك من خلال المهارة. إذن أصبح التطبيق بالكامل مبنيًا
00:17:44ويعمل فعليًا. لم يتبق سوى خطوة واحدة، وهي النشر (Deployment)، أي وضعه عبر الإنترنت
00:17:49حتى يتمكن أي شخص هناك من استخدامه. ولكننا لن نتعمق في ذلك هنا، لذا ترقبوا
00:17:53الفيديوهات القادمة حيث سنستعرضه بالتفصيل. والآن المهارة التي قدمناها هي في الواقع جزء من نظام تصميم
00:17:59أكبر نستخدمه فعليًا داخليًا في مشاريعنا. لذا إذا كنت تريد الوصول إلى هذا النظام،
00:18:04يمكنك الحصول عليه داخل مجتمعنا AI Labs Pro. وهناك أيضًا ستجد
00:18:08مهارات وموارد أخرى نعرضها في فيديوهاتنا، إلى جانب مكان للتفاعل مع
00:18:14فريقنا. لذا إذا وجدتم قيمة فيما نقوم به وتريدون دعم القناة، فهذه هي أفضل طريقة
00:18:18للقيام بذلك. الرابط موجود في الوصف. وهذا يوصلنا إلى نهاية هذا الفيديو. إذا كنت ترغب في دعم
00:18:23القناة ومساعدتنا في الاستمرار في صنع فيديوهات مثل هذه، يمكنك فعل ذلك باستخدام زر الشكر (Super Thanks)
00:18:28في الأسفل. وكما هو دائمًا، شكرًا للمشاهدة وأراكم في الفيديو القادم.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video