00:00:00هذا هو Pencil، أداة تصميم تعتمد على الرؤية الفنية، تقوم بتحويل الأوامر من أي مساعد ذكاء اصطناعي
00:00:05إلى تصميمات جذابة بصرياً تظهر أمام عينيك مباشرة، ويمكنك تعديلها تماماً كما في Figma.
00:00:10وهي تدعم المكونات، ومجموعات واجهة المستخدم (UI kits)، ومتغيرات CSS، وهي مجانية تماماً.
00:00:15ولكن مع وجود Sketch والآن أداة Figma الجديدة لبروتوكول MCP التي يبدو أنها تفعل شيئاً مشابهاً،
00:00:19هل Pencil أداة سيستخدمها المصممون حقاً؟
00:00:22اضغط على زر الاشتراك ولندخل في التفاصيل.
00:00:24ليس سراً أن الذكاء الاصطناعي ليس مذهلاً في التصميم بعد.
00:00:28أعني، ألقِ نظرة على هذا.
00:00:30وعلى الرغم من أن إضافة المهارات باستخدام أحدث النماذج يساعد فعلاً،
00:00:33إلا أنك أحياناً ترغب في تعديل التصميم أو الحصول على موافقة العميل قبل البدء في البرمجة.
00:00:38وهنا يأتي دور Pencil.
00:00:40إنها أداة تصميم مدفوعة بالوكلاء الذكيين تعمل محلياً في بيئة التطوير (IDE) الخاصة بك أو كتطبيق مستقل.
00:00:46وهي أداة تصميم مثالية للأشخاص الذين يحبون استخدام Claude Code مثلي.
00:00:51لذا دعونا نلقي نظرة على عرض تجريبي سريع.
00:00:52إليكم أداة Pencil بكامل تألقها.
00:00:54إذا سبق لك استخدام Figma، فستشعر أنها مألوفة جداً مع وجود الخيارات هنا على اليسار
00:00:59وبعض الخيارات المحددة لمساحة العمل أو الإطار هنا على اليمين.
00:01:03هذا هو الملف الأول الذي ستراه بمجرد الانتهاء من إعداد Pencil.
00:01:07وبدلاً من المرور بالخطوتين الأولى والثانية،
00:01:09سأنتقل مباشرة إلى الخطوة الثالثة لتشاهدوا ما يحدث.
00:01:12الآن، هذا هو الأمر (Prompt) هنا،
00:01:14ويمكنك النقر على “تشغيل” لتنفيذ هذا الأمر داخل نافذة الدردشة هنا.
00:01:18ولكن ما سأفعله في الواقع هو استخدام Claude Code في نافذة الأوامر (Terminal)،
00:01:22والذي يحتوي على مهاراتي، وخوادم MCP الخاصة بي، وكل ما اعتدت عليه
00:01:26لكي تستفيد أداة Pencil من كل ذلك.
00:01:29سأنسخ هذا الأمر، وداخل Claude Code -بالمناسبة، عيد ميلاد أول سعيد له-
00:01:33سأقوم بلصق الأمر وسأخبره باستخدام خادم Pencil MCP
00:01:37فقط لأكون في الجانب الآمن.
00:01:39بشكل أساسي، يطلب هذا الأمر من Pencil تصميم لوحة تحكم لمنصة إدارة مركبات جوالة
00:01:44باستخدام المكونات المتاحة.
00:01:45وهي المكونات الموجودة هنا في مجموعة Lunaris UI kit.
00:01:50إذا عدت إلى الإطار، يمكنك رؤية أنه ينشئ لوحة التحكم لي في الوقت الفعلي.
00:01:56وإذا عدنا إلى Claude Code، يمكننا رؤية ما يفعله بالضبط.
00:01:59إنه يستخدم أداة Pencil MCP للتصميم الجماعي لملء شريط التنقل.
00:02:05لقد انتهى بالفعل من الخطوة الأولى، وهي إعداد هيكل التخطيط الرئيسي.
00:02:08وإذا عدت إلى Pencil، يمكنك رؤية التصميم يُضاف ويُعدل في الوقت الفعلي.
00:02:13والآن بعد أن انتهى Claude، يمكننا المضي قدماً وتغيير التصميم مباشرة.
00:02:17أريد فقط أن أقول إنني منبهر جداً بما تمكن من فعله
00:02:20بداية من اختيار الأيقونات الصحيحة إلى استخدام الألوان المناسبة وشكل الأزرار الأنيق هنا
00:02:25وصولاً إلى هذه الأزرار الرائعة.
00:02:27لقد لاحظت أن عبارة “عرض 10 سجلات” قريبة جداً من الحافة.
00:02:31لذا سأنقر عليها هنا ثم أقوم بتغيير الهوامش (Padding) قليلاً.
00:02:34وهذا هو الجمال في Pencil.
00:02:36أي شيء تريد تغييره في التصميم، يمكنك فعله تماماً كما في Figma،
00:02:40لكنك لست مقيداً بمجموعة واجهة المستخدم هذه.
00:02:42في الواقع، هناك الكثير من المجموعات التي يمكنك الاختيار منها، مثل Shadcn و Lunaris و Halo و Nitro،
00:02:48وهناك المزيد أيضاً.
00:02:49لأنني إذا نقرت على Shadcn، سترون أن لدي المزيد من الخيارات في منطقة التنسيق
00:02:54لتغييره إلى الوضع الداكن، وتغيير بعض السمات، مثل اللون الأصفر للأزرار،
00:02:58وحتى تغيير الخلفية العامة.
00:03:01ولكن هناك أيضاً مجموعات واجهة مستخدم يمكنني استخدامها لتوجيهي في تصميمي.
00:03:05على سبيل المثال، لنقم بشيء من الصفر تماماً.
00:03:08سأنقر هنا، وافتراضياً يستخدم الدردشة،
00:03:11لكن يمكنني نسخ هذا ونقله إلى نافذة الدردشة.
00:03:13ولكن قبل ذلك، سأذهب إلى “ملف” ثم “جديد” للحصول على صفحة بيضاء.
00:03:17بعد ذلك، سأعطي هذا عرضاً يزيد عن 800، ربما 1024، وأجعل الارتفاع أطول قليلاً.
00:03:24الآن، سأقوم بتحديد الإطار، وأطلب من Claude استخدام دليل الأنماط.
00:03:28وبمجرد الانتهاء، سأعطيه أمراً لإنشاء موقع إلكتروني
00:03:32لمخبز فرنسي بستايل بوهيمي، مع جلب الصور من Unsplash وهكذا.
00:03:36سأضغط على Enter لنرى ما سينتجه.
00:03:39ليس لدي أدنى فكرة عما أتوقعه، فلننتظر ونرى.
00:03:42الآن، ولأنني أستخدم مهارة “Superpower”،
00:03:45فقد طرح عليّ بعض الأسئلة المتابعة حول الموقع.
00:03:47والآن بدأ العمل.
00:03:49لقد اقترح في الواقع إطاراً أعرض من الذي وضعته في البداية.
00:03:52سأقوم بتسريع الفيديو لتسير الأمور بشكل أسرع قليلاً.
00:03:55والآن يبدو أن Claude قد انتهى من الصفحات الثلاث التي قال إنه سينشئها.
00:03:59وإذا نظرنا إلى التصميمات، فهي تبدو مبهرة حقاً.
00:04:02أعني، نعم، هناك أشياء هنا قد أغيرها،
00:04:06ولكن إذا رأيت هذا على موقع ويب، فلن أفترض أنه تم إنشاؤه بواسطة الذكاء الاصطناعي
00:04:10بداية من الشعار إلى الصور المستخدمة إلى التخطيط بالكامل.
00:04:14هذا يبدو رائعاً حقاً.
00:04:16ولست قلقاً بشأن العيوب البسيطة
00:04:17لأن كل ما علي فعله هو النقر المزدوج على ما أريد تغييره.
00:04:20وهنا يمكنني سحب النص بهذا الشكل وتعديله قليلاً.
00:04:24وها قد تم الأمر. لقد تم إصلاحه تقريباً.
00:04:26سأطلب من Claude تحويل هذا التصميم إلى موقع ويب يعمل بشكل كامل.
00:04:30وها هو ذا. هذا هو الموقع.
00:04:32الآن، لم أتوقع منه إضافة خلفية الخبز هذه.
00:04:35بما أنها لم تكن موجودة في التصميمات الأصلية، ولكن لا بأس.
00:04:38لننزل إلى الأسفل.
00:04:39لقد طابق كل شيء تقريباً بنسبة 100%، وهذا أمر مثير للإعجاب.
00:04:44لنذهب إلى صفحة “قصتنا”، ممتازة.
00:04:47تبدو تماماً كما في التصميمات مع النصوص الجميلة والخطوات الثلاث
00:04:52وحقيقة أنهم يستخدمون فقط المكونات التي يأكلونها، وهو أمر رائع جداً.
00:04:56كل الصور في مكانها الصحيح، وحتى القائمة تبدو مبهرة حقاً.
00:05:00أعجبني الخط الأفقي الذي أضافه في نهاية كل عنصر.
00:05:04الآن، الجمال في هذا التصميم هو أنه أُنشئ بواسطة الذكاء الاصطناعي،
00:05:07لذا يمكنني ربطه بأي قاعدة بيانات لدي. وبذلك يستخدم بيانات حقيقية.
00:05:10يمكنني استخدام أي أدوات MCP أو مهارات أخرى لتحسين جودة الموقع.
00:05:15ناهيك عن أنه إذا كان لدي تصميمات جاهزة بالفعل في Figma،
00:05:18فيمكنني الذهاب إلى “ملف” واستيرادها من Figma لاستخدامها في Pencil أيضاً.
00:05:22لقد أضفت رابطاً لهذا الموقع في الوصف لتتمكنوا من تجربته بأنفسكم.
00:05:25لقد استمتعت حقاً بتحويل الأوامر المختلفة إلى تصميمات واقعية
00:05:29ورؤيتها تُبنى أمام عيني مع القدرة على تعديلها لاحقاً، شعور سحري حقاً.
00:05:35ناهيك عن أن ملفات Pencil هي ملفات JSON خالص،
00:05:38لذا يسهل على وكيل الذكاء الاصطناعي فهمها وترجمتها إلى كود برمجى.
00:05:42ولكن بقدر ما هو رائع، فإن Pencil ليس مثالياً بعد.
00:05:46لقد واجهت مشكلة في دردشة البناء، والتي لسبب ما لم تبدُ مستجيبة.
00:05:50طبقة التحميل التي تظهر عند إنشاء ملفات جديدة لم تكن تختفي أحياناً إلا إذا حفظت أو أعدت تشغيل Pencil،
00:05:56وشعرت ببعض البطء عند القيام بإجراءات معينة.
00:05:59لكن بصراحة، أعتقد أن هذه أشياء بسيطة يعمل الفريق على حلها الآن على الأرجح،
00:06:04بالإضافة إلى القدرة على إنشاء أو استيراد مجموعات واجهة مستخدم مخصصة مثل تلك الموجودة في Tailwind Plus.
00:06:11ودعوني أذكركم بأن هذه الأداة مجانية تماماً للاستخدام حالياً.
00:06:15لذا اذهبوا واستفيدوا منها لأن هذا لن يدوم للأبد بما أنها مدعومة برأس مال مخاطر.
00:06:19الآن، أنا لست مصمماً. نعم، مفاجأة، مفاجأة.
00:06:22وعلى الرغم من أنني لم أجرب أداة MCP الخاصة بـ Figma أو تلك الخاصة بـ Sketch، مما رأيته عبر الإنترنت،
00:06:28يبدو أن Pencil أسهل بكثير في الإعداد بسبب تكامله السلس مع العديد من الأدوات.
00:06:34وبالحديث عن السلاسة، إذا أردت يوماً أن يقوم Claude Code بتصميم واجهات مستخدم في سطر الأوامر فورياً بدلاً من،
00:06:39دعنا نقول، برمجتها يدوياً، فشاهد هذا الفيديو حول Claude Canvas،
00:06:42والذي سيوضح لك بالضبط كيف تفعل ذلك.