00:00:00تعد أداة Paper ربما واحدة من أكثر أدوات التصميم إثارة حالياً للمصممين المعتمدين على الذكاء الاصطناعي،
00:00:05ومسارات العمل القائمة على وكلاء الذكاء الاصطناعي.
00:00:06وهي تتيح لك التصميم هنا على لوحة فنية ونقله إلى كود برمج،
00:00:11ولكنها تتيح أيضاً العكس تماماً.
00:00:13لذا فهو مسار عمل كامل وثنائي الاتجاه.
00:00:15سأريكم كيفية استخدامها وكيفية تثبيتها.
00:00:17وأيضاً، هذا جزء من سلسلتي للتصميم المعتمد على الذكاء الاصطناعي لمدة 30 يوماً،
00:00:22حيث ستواجه تحدياً لأخذ هذا التصميم الموجود هنا،
00:00:25والذي عملنا عليه في التحدي السابق،
00:00:27واستخدام Paper لدمج وإكمال هذا القسم من التصميم.
00:00:32قبل أن ننتقل إلى ذلك التحدي وكيفية المشاركة فيه،
00:00:36دعوني أريكم كيفية تثبيت Paper فعلياً.
00:00:38هنا في paper.design، توجه إلى قسم المستندات (Docs).
00:00:41وأول شيء تريد فعله هو تحميل تطبيق Paper لسطح المكتب، حسناً؟
00:00:46إنه مجرد تطبيق بسيط وسريع.
00:00:48بعد ذلك، هل تستخدم Cursor؟
00:00:50أم تستخدم Claude Code؟
00:00:51أم تستخدم Codex أو Copilot أو غيرهم؟
00:00:54بالنسبة لي، أنا أستخدم Claude Code.
00:00:55تثبيته سهل للغاية.
00:00:57عليك فقط نسخ هذا السطر هنا بعد كتابة Claude
00:01:00وتشغيله في واجهة الأوامر الخاصة بك (terminal)،
00:01:03ثم لصقه وسيقوم بالتثبيت.
00:01:05ستعرف أنه يعمل إذا كتبت هذا الأمر، mcp/،
00:01:10وستجد Paper ظاهراً هناك.
00:01:13يمكنك رؤية Pencil أيضاً، والذي سنغطيه هنا في المستقبل القريب.
00:01:17حسناً، هذا هو تطبيق Paper.
00:01:19يجب أن تبقيه مفتوحاً.
00:01:21وبعد ذلك، بالطبع، تقوم بفتح Cursor أو Claude Code،
00:01:24وتتأكد من اتصال بروتوكول MCP.
00:01:26إذاً، ما هي الخطوة التالية؟
00:01:27حسناً، يمكنك استخدام Paper بعدة طرق مختلفة.
00:01:31يمكنك بدء التصميم هنا باستخدام أداة الإطار (frame)،
00:01:35وإنشاء مخططك.
00:01:37لديهم منطقة مألوفة هنا.
00:01:39لذا، إذا كنت تفهم ميزة Auto Layout في Figma،
00:01:41فستفهم كيفية هيكلة المخططات من الصفر يدوياً هنا إذا أردت.
00:01:46لكننا لن نتبع هذا النهج.
00:01:48سنطلب أساساً من Claude أو أياً كان،
00:01:52سواء كنت تستخدم Cursor أو غيره،
00:01:53سنطلب منه استخدام خادم Paper MCP،
00:01:58وتصميم مخطط لنا.
00:02:00ثم سنقوم بتحسين التصميم
00:02:02وإجراء تغييرات مخصصة عليه هنا في Paper،
00:02:05ثم نقله مرة أخرى.
00:02:06والآن، سنطلب منه إنشاء مخطط
00:02:09لنوع من الشركات الوهمية.
00:02:10قبل أن أفعل ذلك، أردت إجراء تجربة سريعة في coolers.co.
00:02:14هذا الموقع موجود منذ زمن طويل.
00:02:16لكن إذا نقرت على "بدء المولد" (Start the Generator)،
00:02:18وضغطت على مفتاح المسافة،
00:02:20يمكنك الحصول على سمات (themes) مختلفة،
00:02:22أو بالأحرى التطبيق يفعل ذلك بنفسه.
00:02:24وبعد ذلك يمكنك تخصيص الألوان بنفسك إذا أردت.
00:02:28بالنسبة لي، سأستمر في البحث،
00:02:31حسناً، هذا يبدو مثيراً للاهتمام.
00:02:32هذا نظام ألوان فاتح.
00:02:33إنه مفعم بالألوان، وما إلى ذلك.
00:02:36ما سأفعله هو مجرد أخذ لقطة للشاشة.
00:02:39وهي تحتوي على أكواد الألوان في الأسفل،
00:02:41والتي يمكننا لصقها في Claude Code أو أياً كان ما تستخدمه كسياق.
00:02:46وسنطلب منه استخدام هذه الألوان لإنشاء مخطط
00:02:51عندما يقوم بتصميم مخطط لعمل تجاري وهمي.
00:02:53بالنسبة للأمر (prompt)، سأستخدم مهارة تصميم الواجهات (front-end design) هنا في Claude Code.
00:02:59عادة ما تعطي نتائج أفضل.
00:03:01لكن إذا لم تكن محدداً للغاية معها،
00:03:04فستنتج عادة نتيجة تقليدية للغاية.
00:03:08لذا سنرى ما سيصممه،
00:03:10ثم سنقوم بتحسين ذلك التصميم في Paper.
00:03:12أول شيء سأفعله هو كتابة front-end design/،
00:03:15كما ترون هنا.
00:03:17أعتقد أنها تأتي مدمجة مع Claude Code تلقائياً الآن،
00:03:19ولكن إذا لم تكن كذلك، فهناك فيديو سأضع رابطه في الوصف
00:03:22يوضح لك كيفية دمجها كمهارة.
00:03:25الآن، front-end design/.
00:03:28والآن، سأحدد الأمر.
00:03:29هذا أمر قصير جداً.
00:03:32استخدم خادم Paper MCP.
00:03:34من المهم جداً طلب ذلك.
00:03:36لتصميم مخطط SaaS عصري لشركة وهمية
00:03:39تستخدم تقنية الذكاء الاصطناعي لضمان الجودة في تصنيع المنتجات.
00:03:43يبدو الأمر مملاً.
00:03:43يجب أن يكون مصمماً لسطح المكتب ويحتوي على شريط تنقل وقسم رئيسي (hero section).
00:03:47وهذا كل شيء.
00:03:47أريدك أن تستخدم نظام الألوان.
00:03:49قيم الـ hex موضحة في أسفل كل لون مرفق في لقطة الشاشة،
00:03:53الموجودة هنا.
00:03:54ليس عليك استخدام كل الألوان.
00:03:56فقط تأكد من التباين المناسب وأن يبدو المظهر جيداً.
00:03:59هذا كل شيء.
00:04:00سأضغط على Enter،
00:04:02وسنبدأ في رؤيته وهو يخرج معلومات حول الوصول إلى خادم Paper MCP،
00:04:07ويمكننا فعلياً تشغيل Paper ورؤية ما يحدث في الوقت الفعلي.
00:04:11للأسف، هناك مشكلة في نظام Windows 11 بجهازي تحديداً،
00:04:15حيث تظهر هذه الومضات.
00:04:16لقد تواصلت بالفعل مع المؤسس،
00:04:18وأخبرته بالأمر، ومن المحتمل ألا تواجهوا هذه المشكلة.
00:04:21حسناً، وهذا ما توصل إليه.
00:04:23في رأيي، النتيجة متوسطة الجودة،
00:04:25ويمكنك حقاً ملاحظة أن
00:04:27"هذا من إنتاج الذكاء الاصطناعي" في الغالب.
00:04:30لذا سنستخدم Paper لإجراء تعديلات على هذا التصميم بصرياً،
00:04:34ثم نقله مرة أخرى.
00:04:36إذاً، ماذا سأفعل؟
00:04:37أول شيء، أريد زيادة هذا قليلاً.
00:04:39حسناً، لنترك لبعضنا بعض المساحة البيضاء هنا.
00:04:42والخطوة التالية، هي أنه يجب عليك
00:04:45الاعتياد على فهم الطبقات (layers) هنا.
00:04:48في هذا القسم، يمكنك رؤية الطبقات هنا،
00:04:51ونرى أن لدينا قسماً رئيسياً به عمودان بداخله، يسار ويمين.
00:04:56لا أريد هذا التنسيق.
00:04:57أريد فقط الحصول على منطقة مثل هذه،
00:05:01بحيث تكون عبارة عن قسم عمود واحد متمركز،
00:05:05وسيكون لدينا قسم مثير للاهتمام خلفه.
00:05:08لكن أولاً، سنأخذ هذا،
00:05:11وسنقوم بتوسيط كل النص،
00:05:15وكذلك زيادة عرض هذا العنصر.
00:05:17هنا في الأعلى، يمكنكم رؤية العرض مضبوطاً على تلقائي (auto).
00:05:20الآن، يمكننا أيضاً جعل العرض ثابتاً،
00:05:23أو نجعله يملأ الحاوية (fill the container)،
00:05:25أو نجعله ملائماً للمحتوى (fit content).
00:05:26خيار ملاءمة المحتوى هو نفسه.
00:05:28سنختار "ملء الحاوية".
00:05:29حسناً، سيملأ هذا المساحة المتاحة هنا،
00:05:33ثم سآخذ هذا،
00:05:36وهنا،
00:05:38نرى أنه معد بالفعل كحاوية flexbox بمسافة (gap) قدرها 32 بين العناصر.
00:05:44لذا، إذا قمنا بتعديل هذا،
00:05:46سترون كيف يتوزع كل شيء بعيداً عن بعضه.
00:05:48وأريد التأكد من أن كل شيء متمركز في تلك المساحة.
00:05:53الآن، لا يعمل كل شيء بشكل مثالي بعد،
00:05:55لأن علينا إجراء بعض التعديلات الأخرى.
00:05:57لذا، إذا لم تكن الأمور تتصرف كما تتوقع، استمر في الفحص أكثر.
00:06:01على سبيل المثال، هذه المنطقة.
00:06:04لنقم بتوسيطها.
00:06:06ومرة أخرى، أنا فقط أنقر على أدوات التوسيط.
00:06:08هذا نص، لذا يمكننا توسيطه.
00:06:10حسناً، هذا يسير بشكل جيد.
00:06:12هذا هنا، لنقم بتوسيط هذه العناصر.
00:06:15ثم سأقوم بتوسيط هذا أيضاً.
00:06:18حسناً، يمكنني النقر بزر الفأرة الأيمن واختيار "تأطير التحديد" (Frame Selection).
00:06:21آه، لقد نجح الأمر تلقائياً.
00:06:24لذا، عليك فقط أن تكون مستعداً للتجربة مع كل إمكانيات المخطط هذه.
00:06:30وهذا هو الحال نفسه مع Figma.
00:06:31عليك أن تفهم كيفية التعامل مع المخطط،
00:06:35لأن هذا يحاول أن يكون تمثيلاً للمتصفح الفعلي داخل اللوحة الفنية.
00:06:40لذا، قد يكون تحريك الأشياء صعباً بعض الشيء،
00:06:43وأنت لست متأكداً من كيفية عملها جميعاً.
00:06:44لذا، فقط اقضِ بعض الوقت في تعلم ذلك.
00:06:46بعد ذلك، سأقوم بأخذ لقطة شاشة لهذا،
00:06:49فقط لدمج بعض هذه الألوان بطريقة أعتقد أنها قد تكون أفضل مما تم دمجه.
00:06:55لأنكم تلاحظون أنه استخدم بعض الألوان، ولكن ليس كلها.
00:06:58هذا لا يعني أننا بحاجة إليها بالضرورة.
00:07:00لكنني أريد فقط أن أريكم عملية إجراء بعض التعديلات الإضافية هنا.
00:07:05فمثلاً، إذا أردنا أن يكون لقسم الرأس (header) لون خلفية محدد.
00:07:10سآخذ أداة التعبئة (fill) هذه،
00:07:13وسنستخدم اللون الأول في الأعلى.
00:07:15وهو FC6471.
00:07:19حسناً، يبدو هذا بشعاً للغاية، لأن النص الآن أصبح غير متناسق، أليس كذلك؟
00:07:23لذا سآخذ هذه المنطقة، ألوان التحديد.
00:07:27سنجعل هذا أبيض.
00:07:28وسنجعل اللون الأسود أبيض أيضاً.
00:07:31وربما، إذا أردنا، يمكننا الضغط على CTRL مع النقر الأيسر لتحديده،
00:07:35ثم جعله سميكاً (bold) لهذا الجزء.
00:07:37حسناً، Spectral AI.
00:07:39سأجعل هذا أسود، أو بالأحرى سأجعل الجزء الأسود أبيض.
00:07:43وهذا، أنا حقاً لا يعجبني التدرج اللوني.
00:07:45نعم، من الواضح أن لدينا دعماً للتدرجات اللونية هنا.
00:07:48ربما سأجعل هذا فاتحاً.
00:07:51هذا مجرد نوع من الشعارات الغريبة التقليدية، وهذا لا يهم.
00:07:56لست قلقاً جداً بشأنه.
00:07:57سنحركه.
00:08:00حسناً، وأخيراً هنا، التباين سيء جداً.
00:08:04ربما يمكننا جعل هذا أبيض.
00:08:11وهذا يمكن أن يصبح أسود، ثم هذا النص هنا سنجعله فاتحاً أيضاً.
00:08:20حسناً، كما ترون، من السهل والسريع جداً إجراء التعديلات.
00:08:23الآن، لنفترض مثلاً أننا نريد أخذ هذه الخلفية وإضافة شيء رائع،
00:08:29مثل نوع من تأثيرات الظلال (shader effect).
00:08:30هنا تماماً، تنقر هنا، وسترى الـ shaders.
00:08:34هذا أحد الأشياء الرائعة حقاً في هذه الأداة،
00:08:38وهو أنه يمكننا إنشاء تظليلات فريدة ومثيرة للاهتمام للغاية.
00:08:42مثلاً، هنا، حلقة الدخان هذه.
00:08:45حسناً، لنحرّب ذلك.
00:08:46سأنقر عليها.
00:08:47عندما تفعل هذا، سيضيفها كعنصر آخر في الـ DOM،
00:08:51أي نموذج كائن المستند (document object model).
00:08:53هذه أمور تخص مطوري الواجهات الأمامية وقد لا تكونوا قد سمعتم بها من قبل.
00:08:57هنا تبرز فائدة وجود خلفية تقنية.
00:09:00لذا، ما نريد فعله هو جعل موقعه مطلقاً (position absolute) هناك.
00:09:05عندما تفعل هذا، فإنه يخرج عن نموذج الصندوق التقليدي، كما يسمى.
00:09:09ويمكننا تحريك هذا الشيء في أي مكان، ولكن كن حذراً،
00:09:11لأنك إذا مررت فوق أشياء معينة، فسيضعه بداخلها.
00:09:14نحن نريد وضعه وهيكلته بحيث يكون في أقصى اليسار واليمين بالأعلى،
00:09:20ويملأ قسم الـ hero بالكامل.
00:09:23للقيام بذلك هنا، أولاً، سنضع موضع X عند الصفر،
00:09:28ثم موضع Y عند الصفر أيضاً.
00:09:31وبعد ذلك العرض، سنجعله 100%، والارتفاع 100%.
00:09:35الآن، عندما نفعل هذا، فإننا نخفي كل شيء، أليس كذلك؟
00:09:39حسناً، لسوء الحظ لسبب ما، لا يوجد Z index أستطيع رؤيته هنا.
00:09:42الـ Z index هو خاصية CSS للعناصر ذات الموقع المطلق
00:09:47حيث تتحكم في التراكم، أي مسار العناصر.
00:09:50ليس المسار، بل الترتيب.
00:09:52Debería estar debajo de todo esto.
00:09:54ولسوء الحظ، لا أرى ذلك كخيار متاح،
00:09:57ولكن يمكننا القيام بذلك بعد استيراده إلى Clod code والعودة إلى كود المتصفح، HTML و CSS،
00:10:04يمكننا إجراء هذا الإصلاح هناك.
00:10:05لكن في الوقت الحالي، يمكننا رؤية هذا إذا أجرينا التعديلات هنا في الإعدادات.
00:10:10لذا، فإن جميع المظلات (shaders) لها معايير فردية يمكن التأثير عليها هنا.
00:10:15حيث يمكنك تغيير السرعة وكل الأشياء الأخرى.
00:10:18تلاحظون هنا أن لدينا تعبئة باللون الأسود.
00:10:21الآن، إذا غيرنا هذا إلى 0%، سنتمكن من رؤية ما خلفه.
00:10:26لكن لا يمكننا حقاً رؤية المقدمة.
00:10:28حسناً، بالنسبة للمقدمة هنا، لنأخذ هذا اللون وسنختار حلقة الدخان الخاصة بنا.
00:10:36سنغير التعبئة إلى ذلك اللون.
00:10:39أوه، بل سنغير لون المقدمة إلى ذلك اللون.
00:10:43أوه، حسناً، لا يزال المظهر يبدو غريباً، أليس كذلك؟
00:10:46لذا، دعونا نغير بعض العناصر الأخرى هنا.
00:10:50لدينا الحجم، ولدينا السماكة.
00:10:54أوه، هذا مثير للاهتمام.
00:10:56لدينا نصف القطر.
00:10:58كما ترون، اللعب بهذه الإعدادات ممتع للغاية.
00:11:03هذا يبدو رائعاً في الواقع.
00:11:04سأقوم بتجربة بسيطة.
00:11:07نعم، أنا راضٍ عن النتيجة نوعاً ما.
00:11:09دعونا نجرب مظللاً (shader) مختلفاً.
00:11:11الرائع هنا هو أننا إذا غيرنا أي قيمة إلى 0% شفافية،
00:11:18سنتمكن من رؤية ما خلفها.
00:11:19بالطبع، لا أريد أن تكون هذه هي النتيجة النهائية في المتصفح.
00:11:23لذا، سنستخدم خاصية Z index بمجرد أن نتمكن من إصلاح ذلك هناك
00:11:27لأنني لا أرى مكاناً لتعديله هنا بعد.
00:11:30حسناً، سأكتفي بهذا القدر حالياً
00:11:32وسنرى كيف سيبدو بعد إصلاح مشكلة Z index.
00:11:35أعتقد أننا سنستخدم هذا الخيار هنا.
00:11:39ما نفعله هو اختياره من أجل إعادته
00:11:43إلى Cursor أو Claude code أو أي برنامج آخر.
00:11:46ثم نعود إلى واجهة الأوامر (terminal).
00:11:48إليكم ما سأقوله: استخدم خادم Paper MCP
00:11:50لتحويل التصميم المختار في Paper إلى ملفات HTML و CSS و JavaScript
00:11:53تعمل بشكل مباشر في ملف index.html.
00:11:56تأكد من ترجمة كل شيء بشكل مثالي.
00:11:58لقد أرفقت لقطة شاشة لإعدادات المظلل لضمان الدقة.
00:12:01هذا الجزء مهم لأنني تحدثت مع المؤسس
00:12:04وحالياً لا يتم نقل جميع المعلومات الضرورية،
00:12:08على الأقل في اختباراتي الأولية للمظلات.
00:12:11الآن، لنضغط على زر الإدخال ونرى النتيجة.
00:12:14حسناً، لقد انتهى الأمر.
00:12:15ها هو ذا.
00:12:16إليكم النتيجة.
00:12:17الآن، ليست نسخة طبق الأصل بنسبة 100%، خاصة المظلل
00:12:22الذي تراه في الخلفية.
00:12:24الخاص بي يبدو مختلفاً قليلاً.
00:12:28يبدو وكأنه خطوط انسيابية أكبر.
00:12:31ما عليك فعله هو مجرد أخذ لقطة شاشة هنا.
00:12:34تأكد من تصوير إعدادات التدرج اللوني (gradient)
00:12:36وإعدادات التدرج الشبكي (mesh gradient) أو أي شيء استخدمته
00:12:38وحاول تحسينه بشكل متكرر.
00:12:42أعتقد أن هذا سيتم إصلاحه قريباً جداً
00:12:44مع دمج المظلات بشكل صحيح
00:12:47وكيفية تعامل MCP مع ترجمة تلك المعلومات.
00:12:51الآن، أريدك أن تذهب إلى designcourse.com.
00:12:56الرابط موجود في الأسفل للانضمام إلى تحدي
00:13:01المصمم المعتمد على الذكاء الاصطناعي لمدة 30 يوماً.
00:13:04وأريدك أن تستخدم أداة Paper.
00:13:06هناك حساب مجاني تماماً لإكمال هذا التصميم هنا.
00:13:11هذا هو التصميم الذي عملنا عليه في التحدي السابق.
00:13:14وفي هذا القسم الداكن الذي تراه هنا،
00:13:17والذي مكتوب عليه "تصميمك هنا"،
00:13:18أريدك أن تستخدم Paper بنفس الخطوات التي قمنا بها للتو.
00:13:24قم بتحميل الملحقات الموجودة في صفحة التحدي،
00:13:27والتي تحتوي على كود HTML الذي تراه هنا
00:13:30وأكمل التصميم بالأسفل باستخدام Paper.
00:13:33هذه هي صفحة التحدي في Figma.
00:13:35يمكنك الرجوع إليها إذا أردت.
00:13:38لست ملزماً باستخدامها.
00:13:39لكن إليك التعليمات.
00:13:40فقط قم بإنشاء حساب مجاني.
00:13:42حمل ملف index.html من صفحة التحدي.
00:13:45استخدم Paper لإنهاء التصميم في المساحة الفارغة من هذا القسم.
00:13:49هذا هو المكان الذي تضع فيه تصميمك بهذا الشكل.
00:13:52يمكنك تصميمه كما تشاء وكتابة ما تريد.
00:13:54يجب فقط أن يكون متناسقاً وبدون فواصل.
00:13:56ولك الحرية أيضاً في فعل ما تريد في القسم التالي
00:13:59ولك الحرية في دمج الرسوم المتحركة والتفاعل.
00:14:02إذا فعلت ذلك، ارفع تصوير فيديو لتسليم عملك
00:14:04لأن نظامنا يدعم رفع ملفات الفيديو.
00:14:07أنا مهتم حقاً برؤية ما ستقدمونه.
00:14:09سأقوم بمراجعة حوالي 8 إلى 10 منها كما كنت أفعل دائماً،
00:14:13مراجعات بالفيديو، وسنرى ما ستبتكرونه.
00:14:16مستقبل التصميم رائع حقاً.
00:14:18نحن نعلم أن الكثير من هذه الأدوات تظهر الآن كبيئات عمل تعتمد على الذكاء الاصطناعي.
00:14:24Paper هي إحداها، و Pencil أداة أخرى، وأعتقد أننا سنرى المزيد.
00:14:28لذا، سنرى من سيتصدر المشهد.
00:14:30هل ستكون Figma؟
00:14:31لا أعرف.
00:14:32سنرى.
00:14:33سأراكم جميعاً قريباً جداً.
00:14:34وداعاً.