00:00:00مرحباً، فيديو اليوم يدور حول "Paper". تطبيق Paper هو ببساطة مثل Figma ولكن لـ Claude code أو
00:00:05Cursor. هنا يمكنك رؤية مثال. لدينا نسخة سطح المكتب من Paper تعمل، ومن ثم يمكنك
00:00:10التحكم في كل شيء عبر Claude code وهو ما تراه هنا، والأمر
00:00:14رائع حقاً لأنه يمكنك التحويل بسهولة شديدة بين مكوناتك
00:00:19والكود الخاص بك. يمكنك أن ترى شركات مثل Vercel و Z و Dub تستخدمه. لذا فإن
00:00:24الكثير من المنتجات الرائعة تستخدمه. هذا هو شكل التطبيق عند البدء.
00:00:28هذا هو المشروع التجريبي الذي ستحصل عليه للمرة الأولى. ستتمكن من
00:00:31تحميل التطبيق من paper.design/downloads ومن ثم الخطوة التالية
00:00:35التي عليك القيام بها هي تثبيت خادم MCP. إذا كنت تريد تثبيت هذا في
00:00:40Cursor، فما عليك سوى النقر على هذا الزر، وهو ما فعلته بالفعل، ولكن الآن
00:00:43سنقوم بتجربته فعلياً في Claude code. لذا سنقوم بنسخ هذا.
00:00:47سيضيف هذا خادم Paper MCP لنطاق المستخدم، مما يعني أن كل
00:00:53مشروع على الكمبيوتر يمكنه الوصول إليه. عادةً ما يتم تحديده للمشروع عند
00:00:57إضافة خادم MCP، وهنا يمكنك رؤية أن النقل محلي بالفعل. هذا
00:01:01سيقوم بالاتصال بتطبيق Paper لسطح المكتب. لذا سأقوم بتثبيته
00:01:06هنا، والآن بعد أن قمنا بتثبيته، سنقوم بفتح Claude. لقد فتحت
00:01:11أربع نوافذ هنا في Cmux. إنه ببساطة تطبيق Ghosty يعمل بأسلوب
00:01:17Tmux حيث لدينا أربع نوافذ مختلفة، لذا سنقوم ببعض
00:01:19العروض التوضيحية المختلفة. فكرت، لمَ لا نستخدم عدة نوافذ مختلفة. لذا ما سنفعله
00:01:22بعد ذلك هو نسخ هذا التوجيه (prompt) إلى الطرفية (terminal). لذا سنقوم
00:01:28بإنشاء تطبيق لتتبع المصروفات في Paper. لنرَ كيف سيبدو ذلك. يمكنك
00:01:33رؤية عرض توضيحي مثل هذا سيظهر، لكننا سنرى كيف سيبدو ذلك
00:01:36في الواقع. في هذه الأثناء، سأقوم بتشغيل بضع مهام أخرى. أنشئ لي
00:01:40صفحة هبوط تجريبية في Paper واجعلها تبهرني. لنرَ ما إذا كان سيؤدي
00:01:44عملاً جيداً. أنشئ لي لوحة تحكم لتطبيق مالي. لنقم بذلك و
00:01:48أنشئ لي نظام تصميم لتطبيق اجتماعي يشبه تويتر. سأقوم بتشغيل
00:01:53كل هذه المهام بالتوازي. في الحقيقة لا أعرف كيف ستكون النتيجة، لذا
00:01:56لنرَ كيف سيعمل ذلك. هنا يمكنك رؤية المهمة السابقة التي
00:02:00باشرناها. لدينا موجز تصميم، ولوحة ألوان. هذا Claude code يفكر
00:02:04في الأمور ويضيفها إلى تطبيق الترحيب في Paper الذي لدينا، لكن لنذهب إلى
00:02:08الأسفل. حسناً، لقد انتهى. لنرَ كيف يبدو هذا. سنقوم بالتصغير
00:02:13ونرى ما إذا كان لدينا شيء هنا. أوه، يمكننا رؤية تطبيقاتنا الأخرى
00:02:17يتم بناؤها بالفعل، وهنا يمكنك رؤية تطبيق إدخال المصروفات وهو
00:02:22رائع حقاً. التصميم متين جداً، وفي الواقع عندما قمت بتشغيله من قبل أعتقد
00:02:25أنه جاء بتطبيق مختلف قليلاً. هنا يمكنك رؤية هذه التطبيقات الأخرى
00:02:30تعمل جميعها بالتوازي، والشيء الرائع في تطبيق Paper هذا هو أنه
00:02:34ببساطة Figma. لذا كل ما اعتدت عليه في Figma ستجده
00:02:39يبدو مشابهاً جداً. هنا يمكنني الذهاب وتغيير الأشياء، ويمكنني العودة
00:02:43وإجراء بعض التعديلات. حذف قسم الرفع ووضع شيء آخر مكانه.
00:02:53لنرَ ماذا يحدث عندما نفعل ذلك، وكما ترون كل هذه المهام لا تزال
00:02:56تعمل في الخلفية. إذا عدنا إلى هنا، نأمل أن يتم حذف قسم الرفع
00:03:00هذا. يمكنك رؤية صفحة الهبوط الخاصة بنا، إنها تبدو جيدة جداً. "صمم
00:03:04بإرادة، وأنشئ بلا حدود". بالمناسبة، هنا يمكننا رؤية جميع
00:03:09المكونات الأخرى تجتمع معاً. نظام التصميم يبدو رائعاً واحترافياً للغاية.
00:03:12أشعر أنه كان بإمكانك دفع آلاف الدولارات لمصمم ليعطيك هذا
00:03:16الشيء نفسه تماماً. جميل ورائع جداً، وبالطبع يمكن تعديله بالكامل
00:03:20تماماً كما في Figma. هذا ما انتهت إليه صفحة الهبوط، و
00:03:24سنقوم بتحويل هذا إلى React بعد قليل مع Tailwind. إليكم
00:03:28لوحة التحكم، والمهمة الأخرى اكتملت أيضاً. هنا يمكنك رؤية العرض المقسم
00:03:33الذي تم تعديله أيضاً. لديك هذه التصاميم التي تبدو احترافية حقاً
00:03:36وكل ما فعلناه هو مجرد توجيهها للوجود. ولكل هذا يمكننا استخدام
00:03:42النظام البيئي الحالي للمهارات التي يوفرها لنا Claude code أو Cursor بالفعل،
00:03:46لذا يمكننا استخدام مهارة تصميم الواجهات لتصميم كل هذا إذا
00:03:50أردنا ذلك أيضاً. سأطلب الآن صفحة HTML بهذا التصميم في
00:03:54متصفحي، لنرَ كيف سيعمل ذلك، وبالعودة إلى Paper سأريكم
00:03:58بضعة أشياء أخرى. هنا لدي هذا المكون وما يمكنني فعله هو
00:04:03القيام بـ "نسخ كـ Tailwind" أو "نسخ كـ React CSS"، لذا يمكنني عادةً مجرد نسخه
00:04:08ولصقه، لكن أعتقد أن ما سنراه أيضاً بعد قليل هو أن
00:04:13Claude code يمكنه تحميل هذا لنا أيضاً، لذا سنتمكن من فتحه في المتصفح، و
00:04:17يا للهول، كما ترون لقد فعل ذلك بالفعل، هذا مذهل حقاً.
00:04:20هنا يمكنك رؤية الزر، أعني أن هذا رائع بصراحة، إذا ذهبنا و
00:04:24فحصنا الصفحة، لنرَ ما الذي نتج فعلياً. كما ترون هنا، هذا
00:04:29استخدم فقط HTML و CSS، ولكن كان بإمكاننا أيضاً جعله ينفذ ذلك باستخدام
00:04:35React و Tailwind. يمكنك بناء أشياء كما تفعل في Figma، إنه
00:04:40نفس الشيء تماماً هنا، يمكنك رؤية الجانب حيث يمكننا تغيير الأشياء وتغيير
00:04:44اللون، هذا يشبه Figma تماماً في الأساس. لكنني قمت بـ
00:04:48تجميع هذا المكون أيضاً لأنني أردت رؤية كيف سيبدو إذا
00:04:51قمت بنسخه ولصقه في تطبيق عادي. وهنا ترون أن هذا بالضبط
00:04:55ما فعله، لقد ظهر تماماً كما أردت في الأساس. وهنا يمكنك
00:05:00رؤية ما تم نسخه ولصقه، هذا هو مكون الخلفية، سأريكم
00:05:05مرة أخرى كما فعلت هذا من قبل. سأقوم بـ "نسخ كـ Tailwind"، وسأذهب
00:05:10إلى Cursor وسأقوم بلصقه، وكما ترون هذا ما أعطاني إياه.
00:05:14الآن سأتراجع عن بعض هذا، وهذا في الواقع مكون كنت قد
00:05:20لصقته من قبل لتطبيق تتبع المصروفات، يمكنك رؤية الشريط العلوي وقسم المبلغ و
00:05:26غيرها، لذا هذا في الواقع React و Tailwind لنفس الشيء الذي
00:05:29فعلناه للتو، وهنا يمكنك رؤية كود React الفعلي في تطبيقنا. هذا
00:05:34بديل آخر، هذا عندما وجهته قبل 20 دقيقة، لذا هذا هو الإصدار
00:05:40الأول، وهذا هو الإصدار الآخر حيث فعلناه باستخدام HTML و CSS عاديين.
00:05:44وكلاهما ظهرا بشكل جيد جداً. أريد فعلاً رؤية كيف ستظهر التطبيقات الأخرى إذا
00:05:49فعلنا ذلك في Claude code، لذا أنا أطلب نسخة HTML من جميع
00:05:53الشاشات التي صممناها للتو. وما فعلته أيضاً هو أنني قمت بـ
00:05:58النقر بزر الماوس الأيمن و"نسخ كـ React CSS"، وذهبت إلى Cursor ولصقته، وهذا تطبيق حقيقي.
00:06:04يمكنك رؤية أنه يعمل على localhost 3001، هذا جزء من inbox zero، مجرد صفحة
00:06:09تجريبية أضفتها، ويمكنك رؤية أن هذا يعمل بشكل مثالي أيضاً، وهو أمر
00:06:13لطيف حقاً. في المرة الأولى لم يكن متجاوباً (responsive) تماماً ولكن بخلاف ذلك فهو
00:06:18جيد جداً. هنا ترون أنه يحتاج لبعض العمل ليكون متجاوباً، لكنني أعتقد أن المفهوم
00:06:22على الأقل رائع حقاً. وهذا هو إصدار HTML الذي تم
00:06:26تحميله للتو والذي قمنا بتوجيهه أيضاً، وهذا أكثر تجاوباً نوعاً ما.
00:06:33يبدأ بمواجهة بعض الصعوبة هنا لكنه على الأقل أفضل من الإصدار الآخر.
00:06:36لذا نعم، هذا رائع جداً. الآن ما أريد أن أريكم إياه هو أنه يمكنك أيضاً جعله
00:06:41يولد صوراً. إذا ضغطت Command + I لنرَ ما إذا كان بإمكاننا فعل ذلك و
00:06:46سنطلب منه توليد صورة لنا. التوجيه الذي كتبته هو لإنشاء
00:06:50إعلان جميل لـ inbox zero، وهو مساعد بريد إلكتروني بالذكاء الاصطناعي يساعدك في الوصول إلى
00:06:54inbox zero بسرعة. يمكنك أن ترى هنا أن هناك نماذج مختلفة يمكنك استخدامها مثل Nano Banana
00:06:59Pro. لنجرب "مجموعة متنوعة" لهذا أولاً، نأمل أن يتمكن من فعل ذلك و
00:07:05نعم، كما ترون بدأ في إنشاء أربع صور، وأريد
00:07:10أن أحاول مرة أخرى لأنني فضولي لرؤية ما سيحدث إذا استخدمنا Nano Banana Pro.
00:07:14لنختر "إنشاء صورة". هناك صورة أخرى يتم إنشاؤها وآمل أن
00:07:19تظهر قريباً. أوه، هنا بدأت الإعلانات، والتي نعم، أعني أنها
00:07:25تبدو جيدة، من الواضح أنها تحتاج لبعض العمل ولكن كمحاولة أولى فهذا
00:07:29رائع جداً. لنرَ هذه، inbox zero، كما تعلمون قد تجدون مصممين
00:07:35يقدمون تصاميم أسوأ من ذلك. وبالنسبة لهذه، من بين الأربعة ربما أعجبتني هذه
00:07:39أكثر شيء. لكن نعم، كما ترون من الواضح أن ذلك كان من محاولة واحدة، ويمكنكم
00:07:43تطوير ذلك كثيراً. لنرَ ما الذي سيأتي به Nano Banana Pro، قد يكون
00:07:47الأكثر إبهاراً. نعم، "طريقك السريع للهدوء، مساعد البريد بالذكاء الاصطناعي". أعتقد
00:07:51أن هذا جيد حقاً بصراحة كمحاولة واحدة، هذا ليس جرافيك سيئاً. أجد أيضاً
00:07:55من المثير للاهتمام كيف عرف الشعار، هل التقط الذكاء الاصطناعي
00:08:00شعار inbox zero أم أنه مجرد صدفة أنه يشبه نص شعارنا تماماً.
00:08:04الآن قبل أن ننتهي، أريد أن أريكم شيئين آخرين. إذا نقرت على
00:08:09هذه الصورة وضغطت على حرف S، يمكنني إضافة تأثيرات مختلفة. هنا يمكنك رؤية
00:08:13تأثير الماء على هذه الصورة. إذا ضغطت S مرة أخرى، هناك هذا المعدن السائل. أنا
00:08:18لست متأكداً حقاً كيف يعمل هذا، ولا أعتقد أنه مرتبط بصورتنا على الإطلاق
00:08:21ولكن يمكنك أن ترى أنه يمكنك إنشاء هذه التأثيرات الرائعة حقاً ويمكنك بالفعل
00:08:24استخدامها في صفحة الهبوط الخاصة بك. إليكم نسخة أخرى من تلك الصورة التي
00:08:27أنشأناها. وهناك شيء آخر جميل وهو أن الألوان من المفترض أن تكون
00:08:33متسقة ودقيقة. تطبيق Paper يمتلك أول منتقي ألوان موحد في العالم
00:08:37مما يجعل التعامل مع الألوان سهلاً. وإذا لم يكن الناس مطلعين على هذا، فقد يكون لديك لون
00:08:41في Figma ولون آخر على موقعك وهما ليسا متطابقين تماماً. إنه
00:08:45أمر مزعج حقاً. واجهنا هذا مع درجات الأزرق في موقعنا حيث كان
00:08:48Figma يظهر شيئاً والموقع يظهر شيئاً آخر رغم أنه كان من
00:08:52المفترض أن يكونا متطابقين بناءً على كود الـ hex للون المطلوب. ولهذا
00:08:56إذا كنت ممن واجهوا هذه المشكلة مثلنا، فهذه ميزة رائعة جداً.
00:08:59والشيء الأخير الذي أريد أن أريكم إياه هو إنشاء
00:09:04نظام تصميم في Paper من قاعدة الكود الحالية لدينا. وكما ترون بدأ
00:09:08في تحليل قاعدة الكود، هذا مجرد Claude code عادي. يمكنك رؤية أنه استخرج
00:09:12خطوطنا. الآن واجهنا مشكلة لأننا على ما يبدو وصلنا للحد الأسبوعي لأداة MCP
00:09:17في هذا الفيديو لنسخة Paper Pro، لذا لا يمكننا فعلياً رؤية كيف كان
00:09:20سيبدو ذلك، ولكن باختصار، كان بإمكاننا أن نعطيه قاعدة الكود الحالية
00:09:23ونرى كيف سيبدو ذلك في Paper، ومن ثم كان بإمكاننا تعديله في
00:09:28Paper وإعادة الكود إلى مشروعنا. لذا أعتقد أن هذه ميزة رائعة حقاً.
00:09:32أعتقد أن أحد المواقف التي يتكرر فيها هذا الأمر كثيراً حيث كان سيكون
00:09:35مفيداً جداً لنا هو عندما نقوم بتصميم هذه المكونات التجريبية مثلما
00:09:39نأخذ لقطة شاشة لصفحة هبوط. عادةً ما نفعله هو الأسهل وهو
00:09:43مجرد أخذ لقطة شاشة، ولكن ما أريد فعله غالباً هو تعديل ذلك قليلاً، تعديل
00:09:47النص الموجود على الصفحة، وإخفاء بعض رسائل البريد الحقيقية الموجودة هناك. ووجود
00:09:50هذا في Figma أو Paper أسهل بكثير لأنني أستطيع الكتابة والتعديل تماماً
00:09:55حسب الحاجة، وحينها لن تكون لقطة شاشة بل يمكنني تصديرها كصورة حقيقية
00:09:58PNG أو JPEG أو أياً كانت. إليكم تطبيق تويتر الاجتماعي الذي كنا
00:10:03نبنيه، وهذه أيضاً تصاميم رائعة حقاً. على أي حال، أتمنى أن تكونوا استمتعتم
00:10:07بالفيديو، آمل ألا يكون هناك الكثير من التنقل. كنت أقوم بتشغيل عدة
00:10:10أشياء بالتوازي. هذه هي الطريقة التي أبرمج بها كثيراً هذه الأيام، وربما
00:10:14ظهر ذلك في الفيديو قليلاً، لكن نعم، أتمنى أن تجدوه مفيداً. أخبروني
00:10:17بما ستقررون بناءه باستخدام Paper. أعتقد أنها أداة مفيدة حقاً. أرى
00:10:20نفسي أقوم بالترقية للنسخة المدفوعة منها قريباً جداً أيضاً. واحرصوا
00:10:24على الاشتراك لمتابعة الفيديوهات القادمة.