Transcript
00:00:00"الذكاء الاصطناعي لا يملك ذوقاً، وهذا خطؤك أنت."
00:00:03السبب في أن مخرجاتك المرئية متواضعة للغاية
00:00:05هو أن مطالباتك متواضعة للغاية.
00:00:08أنت لا تستخدم نوع المصطلحات،
00:00:10واللغة والتسميات
00:00:11التي يستخدمها المصمم الحقيقي.
00:00:13لكن لحسن حظنا، وجدت حلاً.
00:00:16اسمه Impeccable.
00:00:17وهو مستودع مفتوح المصدر على GitHub
00:00:20والذي يُعتبر لكل الأغراض مهارة واحدة
00:00:23يمكننا استيرادها إلى Cloud Code
00:00:25لتحل هذه المشكلة بالضبط.
00:00:27إنه يزود Cloud Code بلغة تصميم
00:00:29تعلمه كيف يبدو التصميم الجيد حقاً
00:00:32بينما تخبره أيضاً بنوع التصميمات السيئة التي يجب تجنبها.
00:00:36واليوم لن أريكم فقط كيف تعمل هذه المهارة،
00:00:39بل سنستخدمها لبناء موقع إلكتروني جديد تماماً
00:00:42ولتحرير أحد مواقعي الموجودة بالفعل.
00:00:45لذا بنهاية هذا الفيديو، لن يكون لديك أي عذر
00:00:48عندما يتعلق الأمر بإنشاء تصميمات واجهة أمامية متواضعة.
00:00:51إذن Impeccable هو مستودع مفتوح المصدر على GitHub
00:00:54يمنحنا مهارة واحدة
00:00:55تسمح لنا بإنشاء تصميمات واجهة أمامية
00:00:58ليست سيئة.
00:01:00الآن هي مهارة واحدة،
00:01:01لكن هذا تقليل من شأنها قليلاً
00:01:03لأن هذه المهارة الواحدة تتضمن 23 أمراً مختلفاً.
00:01:07تحتوي على سبعة ملفات مرجعية خاصة بالمجال.
00:01:10تخبرنا بنوع الأنماط السلبية التي يجب تجنبها
00:01:13وتسمح لنا حتى بتعديل الأشياء داخل متصفحنا.
00:01:17لذا فهذه في الواقع أداة قوية جداً.
00:01:20هذه ليست مجرد مهارة تصميم واجهة أمامية
00:01:22تستمر لبضع فقرات
00:01:24حول ما يجب أن يفعله Cloud Code.
00:01:26لكن هذا التعقيد قد يكون مربكاً بعض الشيء
00:01:28لأن هناك حرفياً 23 أمراً مختلفاً
00:01:31تقوم بعدد من الأشياء المختلفة
00:01:34فيما يتعلق بتصميمك.
00:01:35الآن هي تفصلها جميعاً هنا داخل المستودع،
00:01:37لكن الحقيقة هي أنك لن تتذكرها جميعاً.
00:01:40ولكن هناك شيئان يساعدان في هذا الأمر.
00:01:42أولاً، من الواضح أن Cloud Code سيقوم بعمل جيد
00:01:44في تحديد أي منها يجب عليك استخدامه.
00:01:46ولكن ثانياً، لديهم موقع إلكتروني كامل
00:01:49يوضح لنا أيضاً ما تفعله كل واحدة من هذه المهارات الـ 23.
00:01:53لذا فإن GitHub يربط بالموقع الإلكتروني،
00:01:54وهو impeccable.style.
00:01:56والشيء الرائع هو أنه لكل مهارة قابلة للتطبيق،
00:01:59يمكننا رؤية كيف يبدو الشيء من قبل،
00:02:02وهو Cloud Code العادي،
00:02:03وكيف يبدو بعد
00:02:05استخدام أمر impeccable المحدد.
00:02:07إذن الأمر رائع جداً.
00:02:09الآن Impeccable لديه حقاً سبع ركائز للتصميم،
00:02:12الطباعة، اللون، التصميم المكاني، الاستجابة،
00:02:15التفاعلات، الحركة، وكتابة تجربة المستخدم.
00:02:17إذن فهو لا يقتصر فقط على الألوان وأشياء كهذه.
00:02:21إنه شامل جداً.
00:02:22وهنا، يمكننا التمرير عبر
00:02:25كل هذه الأوامر المختلفة.
00:02:27وكما قلت، رؤية كيف تبدو
00:02:29باستخدام المهارة وبدون استخدام المهارة.
00:02:31لذا إذا كنت تقول، مهلاً، ماذا يفعل هذا بالضبط؟
00:02:34هل يمكنني رؤيته أثناء العمل؟
00:02:35حسناً، هذا هو المكان المناسب للقيام بذلك.
00:02:37يتضمن الموقع أيضاً دراسة حالة
00:02:39توضح كيف أنشأوا هذا الموقع
00:02:40بواسطة Impeccable وصورة واحدة.
00:02:42وأعتقد أنه يبدو رائعاً جداً.
00:02:43وأخيراً، يعرضون هذا الوضع المباشر،
00:02:45الذي سنلعب به قليلاً،
00:02:47وهو في مرحلة ألفا،
00:02:48ويسمح لنا فعلياً بالعبث بموقعنا الإلكتروني
00:02:51عبر المتصفح كما تحدثت سابقاً.
00:02:53الآن هو يحتوي أيضاً على إضافة لمتصفح Chrome وواجهة سطر أوامر (CLI)،
00:02:56ولكن لأكون صادقاً،
00:02:56نحصل على حوالي 99% من القيمة من خلال المهارة.
00:02:59لذا هذا ما سنركز عليه اليوم.
00:03:01الآن لتثبيت هذا الشيء، هو سطر واحد من التعليمات البرمجية،
00:03:04والذي كل ما عليك فعله هو نسخ هذا،
00:03:06والذهاب إلى جهازك الطرفي ولصقه.
00:03:07الآن، عندما يتعلق الأمر باستخدام Impeccable،
00:03:09هناك حقاً طريقان يمكن اتباعهما.
00:03:11أحدهما هو Greenfield،
00:03:12حيث نقوم ببناء موقع إلكتروني من الصفر،
00:03:14والثاني هو تحرير موقع موجود.
00:03:17الآن، اليوم سنقوم بكل من هذين الأمرين وأكثر
00:03:20لأنني لن أريكم فقط
00:03:22كيفية البناء من الصفر،
00:03:23سأريكم أيضاً كيف يبدو الأمر
00:03:25عندما نبني من الصفر مع نوع من الصور المرجعية
00:03:27مع لوحة مزاجية (mood board)، إذا جاز التعبير.
00:03:30بعد أن نفعل ذلك، سنذهب بعد ذلك إلى موقعي الفعلي
00:03:33وسنرى ما يفكر فيه Impeccable بشأنه
00:03:36وما نوع الأشياء الرديئة التي يمكننا تحسينها في عملي الخاص.
00:03:41أخيراً، سنلقي نظرة على Impeccable Live،
00:03:43الذي لا يزال في مرحلة ألفا،
00:03:44ونرى مدى جودة هذا الشيء حقاً كما هو اليوم.
00:03:48ولكن قبل أن نغوص في البناء الفعلي،
00:03:50كلمة سريعة من راعي البرنامج المفضل للجميع، أنا.
00:03:54الشهر الماضي أصدرت دورة Cloud Code المتقدمة (Masterclass)،
00:03:56وهي الطريقة الأولى للانتقال من الصفر إلى مطور ذكاء اصطناعي (AI Dev)،
00:03:59خاصة إذا لم تكن من خلفية تقنية.
00:04:02أقوم بتحديث هذه الدورة كل أسبوع،
00:04:05لذا فهي أفضل مكان لمعرفة
00:04:07كيفية استخدام هذه الأداة الجامحة بالفعل.
00:04:10نركز على حالات استخدام حقيقية.
00:04:12لقد أصدرت للتو خطة درسي الكاملة
00:04:13عن نظام التشغيل الوكيل (Agenic OS) في Cloud Code.
00:04:16لذا إذا كنت ترغب في الحصول عليها،
00:04:18يمكنك العثور عليها داخل Chase AI Plus.
00:04:20هناك رابط لذلك في التعليق المثبت.
00:04:23لذا دعونا نبدأ،
00:04:24وسنبدأ بمشروع Greenfield.
00:04:27لذا سنقوم ببناء موقع إلكتروني من الصفر.
00:04:29الآن، مرة أخرى، هناك الكثير من الأوامر،
00:04:31يمكن أن يصبح الأمر مربكاً بعض الشيء.
00:04:32إذا كنت تبدأ شيئاً من الصفر،
00:04:35أقترح البدء بـ impeccable craft،
00:04:39لأنه سيتضمن
00:04:41بعض هذه الأوامر الفرعية مثل impeccable teach.
00:04:44الآن، ماذا تعني كل هذه الأشياء؟
00:04:45حسناً، impeccable craft تعني تقريباً
00:04:48أنها ستمر عبر نسختها الخاصة من وضع التخطيط (plan mode)
00:04:50وتسأل عن موقعنا، منتجنا،
00:04:53ما الذي نحاول بناءه حقاً.
00:04:55وفي تلك العملية، ستنشئ ملفين.
00:04:59ستنشئ ملف product.markdown
00:05:01وملف design.markdown.
00:05:02الآن، ملف design.md هو تقريباً نفس الشيء
00:05:07الذي رأيناه في Google Stitch.
00:05:09تتذكرون Google Stitch، أليس كذلك؟
00:05:11أداة التصميم المجانية من Google.
00:05:13لديك نظام التصميم بالكامل هذا،
00:05:14ولديك ملف design.md هذا،
00:05:16وهو ملف markdown متعمق للغاية،
00:05:20يخبر الذكاء الاصطناعي بكيفية بناء شيء ما.
00:05:21هذا الهيكل الكامل لملف design.md
00:05:24يصبح نوعاً ما معياراً صناعياً، إذا جاز التعبير.
00:05:27أنت ترى هذا في كل مكان هذه الأيام.
00:05:29وImpeccable يتبع هذا النهج.
00:05:31لذا فهو سيجري مقابلة معنا بشكل أساسي
00:05:32ويكتشف ما الذي نبنيه
00:05:34وكيف نريد أن يبدو.
00:05:36وبمجرد إجراء المقابلة،
00:05:37سيقوم بالمضي قدماً وبناء صفحة الهبوط لنا.
00:05:39لذا داخل Cloud Code،
00:05:41أنا في دليل جديد يسمى impeccable-test.
00:05:44الأمر هو impeccable-spacecraft.
00:05:47والمطالبة هي لنقم ببناء صفحة هبوط
00:05:49لمنتج SaaS الخاص بي الوهمي Lighthouse.
00:05:51إنها منصة تحليلات للمؤسسين المنفردين/الفرق الصغيرة.
00:05:54اسألني أي أسئلة تريدها.
00:05:56هذه تقريباً نفس المطالبة
00:05:58التي قدمتها لـ Huashu Design في الفيديو الأخير.
00:06:01إذا لم تشاهد ذلك، فافعل ذلك بالتأكيد،
00:06:03وهو في الأساس استنساخ لتصميم Cloud.
00:06:06لذا سيكون من المثير للاهتمام معرفة
00:06:08كيف يصمد Impeccable أمام نظام التصميم ذلك.
00:06:11وإذا لم تكن قد شاهدت ذلك الفيديو،
00:06:13سأضعه في الرابط أعلاه.
00:06:14لذا فقد عاد بـ 13 سؤالاً.
00:06:16الأربعة الأولى كلها حول المنتج،
00:06:18مثل من هو العميل الفعلي؟
00:06:19كيف تصف Lighthouse؟
00:06:21ما هي عقلية الزائر؟
00:06:22وما هو CTA (دعوة للعمل) الأساسي؟
00:06:23ما هي الغاية الفعلية من صفحة الهبوط هذه؟
00:06:25الأسئلة القليلة التالية كلها حول الصوت والمظهر
00:06:28قبل أن ينتقل إلى النطاق.
00:06:29هل نقوم فقط بـ Hero (القسم الرئيسي)؟
00:06:30تصفح كامل، لقطات شاشة حقيقية؟
00:06:32هل لديك أي أصول أخرى لي؟
00:06:34وما يعجبني هنا هو عمق الأسئلة.
00:06:36هذه أسئلة أكثر مما طرحه Huashu Design علينا
00:06:40في الفيديو الماضي.
00:06:41وهذا قريب جداً من كمية الأسئلة
00:06:43التي ستحصل عليها من شيء مثل Claude Design.
00:06:44هذا متعمق جداً وأحب رؤية هذا.
00:06:46لذا ما سأفعله هو أنني سأقوم بملئها.
00:06:49سأبقيها قياسية نوعاً ما.
00:06:50لن أضطر إلى فعل أي شيء جنوني.
00:06:52وسنطلب تصفحاً كاملاً.
00:06:53إليك ما قدمه لنا Impeccable في محاولته الأولى
00:06:56مع توجيهات بسيطة للغاية.
00:06:57كل ما فعلناه حقاً هو الإجابة على أسئلته.
00:06:59لم نعطه أي أصول أو حتى أمثلة.
00:07:01الآن، على الفور،
00:07:02لا أعتقد بالتأكيد أنه عمل ذكاء اصطناعي رديء منذ البداية عندما أرى هذا،
00:07:05على الرغم من أنك بدأت ترى هذا اللون الكريمي
00:07:08والخط ذو الزوائد (Serif) في كل مكان في هذه التصميمات
00:07:11الحديثة للواجهة الأمامية، خاصة أشياء مثل Claude Design.
00:07:13أنا أحب لوحة التحكم (dashboard) هذه التي توصل إليها،
00:07:16أحبها بالتأكيد.
00:07:18يعجبني أنني لا أرى فقط الصناديق الأربعة القياسية،
00:07:20التي تراها في كل موقع إلكتروني
00:07:23مصمم بواسطة الذكاء الاصطناعي.
00:07:25هذا الجزء يبدو جيداً جداً.
00:07:26لدينا الاقتباس، الأسعار الكاملة،
00:07:30ثم نوعاً ما، مهلاً، تفضل بإعطائنا بريدك الإلكتروني.
00:07:32إذاً، كخطوة أولى، الأمر جيد جداً.
00:07:35ولكن ما أحب فعله حقاً في الآونة الأخيرة
00:07:37عندما يتعلق الأمر بتصاميم الويب الخاصة بي باستخدام "Claude code" هو
00:07:40أنني لا أكتفي بمخرجات واحدة كهذه.
00:07:44لذا ما قمت به وأخبرت به "Impeccable" المعروف بـ "Claude code" هو
00:07:47أنني لا أريد تخطيطاً واحداً للموقع.
00:07:50كما ترون هنا، كان هذا هو الإصدار الأول الذي قدمه لي.
00:07:52أريد رؤية ثلاثة متغيرات مختلفة يمكنني الاختيار من بينها.
00:07:56وأريدها جميعاً أن تكون مختلفة تماماً.
00:07:59علاوة على ذلك، أريد أن أكون قادراً على التنقل بينها جميعاً
00:08:01وأن أراها جميعاً جنباً إلى جنب.
00:08:03لذا أريد رؤية نوع من التخطيطات الكلية
00:08:05قبل أن نتعمق حقاً في التفاصيل الدقيقة
00:08:08ونبدأ باللعب بالمكونات.
00:08:09وهكذا قدم لي "Impeccable" هذا.
00:08:11لدينا التخطيط التحريري الذي نظرنا إليه للتو.
00:08:15وقد أنشأ تخطيطاً أسماه "مبتل" (Drenched) هنا.
00:08:17بالتأكيد أسلوب مختلف، مع الكثير من الألوان.
00:08:20ثم كان لدينا الأسلوب الوحشي (Brutalist).
00:08:22إليكم نظرة على التخطيط "المبتل"،
00:08:24إنه مختلف بالتأكيد.
00:08:26سأقول إن هناك بعض التداخل هنا في المقدمة،
00:08:29لكن هذا يبدو مختلفاً تماماً عن معظم مخرجات الذكاء الاصطناعي.
00:08:34بينما نستعرض، كما تعلمون، أنا أحب نوعاً ما جرأة
00:08:39هذا الموقع، رغم أنني لا أعرف الألوان حقاً.
00:08:43لكنني سأقول إنني أحب هذا التخطيط الوحشي.
00:08:44إنه بتدرجات الرمادي حقاً،
00:08:46لكنني أحب كيفية ترتيب الأرقام.
00:08:48أحب كيف أن الصناديق تبدو متداخلة.
00:08:52مثل أن الخطوط لا تتطابق تماماً.
00:08:54في الواقع، أنا أحب هذا التخطيط كثيراً.
00:08:56أعتقد أن هذا يبدو رائعاً جداً ومختلفاً للغاية.
00:08:58لذا أعتقد أن ما سنفعله هو أننا سنعتمد
00:09:02هذا التخطيط في الوقت الحالي.
00:09:04وفقط لكي تعرفوا، هذا الأمر المتعلق بالتصاميم الثلاثة
00:09:07ورؤيتها جميعاً في وقت واحد،
00:09:08ليس شيئاً متأصلاً في "Impeccable".
00:09:12هذا شيء أقوم به أنا.
00:09:13هذا مجرد مطالبة (Prompt) واحدة.
00:09:14وأقترح بشدة أن تفعلوا هذا بغض النظر عن نوع
00:09:17التصاميم أو المهارات التي تستخدمونها.
00:09:19أعتقد أن هذا شيء التقطته من "Stitch"
00:09:23لأن "Google Stitch" يجعل من السهل حقاً
00:09:25القيام بهذا النوع من الأشياء حيث يمكنك رؤية
00:09:26كل هذه الاختلافات المختلفة في نفس الصفحة
00:09:29والمقارنة والتباين بينها.
00:09:30وبالنسبة لي شخصياً، يجب أن أرى هذه الأشياء المرئية
00:09:33لأعرف أي فكرة عن المكان الذي أريد الذهاب إليه.
00:09:37لذا أقترح بشدة أن تفعلوا ذلك.
00:09:38لا يتعين عليك القيام بثلاثة.
00:09:39يمكنك القيام بستة، يمكنك القيام بمليون.
00:09:41وأيضاً عندما تطلب من "Claude code"
00:09:42القيام بهذا النوع من الأشياء، فقط أخبره:
00:09:44أريد أن أكون قادراً على رؤية الثلاثة في نفس الصفحة.
00:09:47أريد أن أكون قادراً على فتحها بملء الشاشة واحداً تلو الآخر.
00:09:50ويمكنك أيضاً أن تطلب منه أن يعطيك مجموعة
00:09:53من خيارات التخطيط الكلية المختلفة،
00:09:55ثم يمكنك فقط الاختيار من بينها
00:09:57ثم اطلب منه إنشاء هذه التصاميم.
00:09:57لأنه من الواضح أن إنشاءها يستغرق بعض الوقت.
00:09:59إذاً الآن بعد أن أصبح لدينا صفحة هبوط نحبها،
00:10:01حان الوقت للبدء في تحرير بعض الأشياء،
00:10:03وهنا يأتي دور "Impeccable Live" الجديد.
00:10:06لذا كل ما علينا فعله هو قول:
00:10:07هيا، لنشغل "Impeccable Live" على هذه الصفحة الوحشية.
00:10:10الآن، بمجرد تشغيل ذلك الأمر،
00:10:12سيخبرك "Claude code" بأن وضع "Live" مفعل.
00:10:14يجب أن يعطيك رابطاً للمضيف المحلي (localhost)
00:10:18الذي تحتاج إلى أن تكون عليه، أو يمكنك فقط تحديث متصفحك.
00:10:20وهكذا من الداخل، يمكنك الآن رؤية
00:10:22بينما أتحرك بالتمرير، يتم تمييز الأشياء.
00:10:26وفي الأسفل هنا، لدينا بعض الأشياء أيضاً.
00:10:29أولاً وقبل كل شيء، لدينا ملف "design.md".
00:10:32إنه يظهر الشريط الجانبي على الجانب الأيمن.
00:10:35وإذا ضغطت على "raw"، يمكنني رؤية كل ما تم إنشاؤه بالفعل.
00:10:39الآن، إذا قمت بالنقر فوق مكون معين
00:10:41مثل هذا النص الأساسي، تظهر بعض الخيارات.
00:10:45أولاً، لدينا "free form"، وهو:
00:10:47مهلاً، سأعطيها مطالبة نصية،
00:10:50أو لدي وصول إلى كل أوامر
00:10:52"Impeccable" المختلفة.
00:10:54لذا: "bolder" (اجعلها أكثر جرأة)، "quieter" (اجعلها أكثر هدوءاً)، "distill" (للتكثيف)، "polish" (للصقل)، "adapt" (للتكيف).
00:10:56كل هذه مجرد جزء من أوامر "Impeccable" الـ 23
00:11:00التي كنا نتحدث عنها سابقاً.
00:11:02لذا دعنا نقول أنني أفعل شيئاً مثل "bolder".
00:11:04لذا "bolder" هي في الأساس مطالبة مصممة مسبقاً.
00:11:09وإذا نظرنا هنا داخل توثيق "Impeccable"،
00:11:12فإن ما ستفعله "bolder" هو جعل التصميم أكثر جرأة.
00:11:15إذن هذا هو الوضع قبل، وهذا هو الوضع بعد.
00:11:18إنه يجعل الأمر يبدو أكثر بروزاً قليلاً.
00:11:21لذا التعريف الدقيق هو أنها تدفع التصاميم الآمنة
00:11:26نحو التأثير دون الانزلاق إلى الفوضى،
00:11:28وهي توضح متى يجب استخدامها وكيف تعمل وكل هذه الأشياء.
00:11:31لذا إذا قمنا بتطبيق "bolder" على هذا، ولنكون صادقين،
00:11:32أشعر أن هذا التصميم جريء بالفعل بما فيه الكفاية.
00:11:34لا أعرف ما إذا كان هذا هو الخيار الأفضل.
00:11:35يمكنني تحسين ذلك بشكل أكبر.
00:11:37لذا يمكنني القيام بـ "bolder" بالإضافة إلى أي مطالبة أريدها.
00:11:40لنفترض أنني كتبت "add color" (إضافة لون).
00:11:43لدي بعد ذلك هذا الشيء هنا الذي يقول
00:11:46ثلاث مرات، أربع مرات، مرتين.
00:11:47هذا هو عدد المتغيرات التي سيعرضها لي.
00:11:50ثم نضغط على "go".
00:11:51لذا فهذا بطريقة ما يشبه نسخة مصغرة
00:11:56مما كنا نفعله هنا من حيث المتغيرات
00:11:58حيث أقول: حسناً، اعطني هذا الشيء الواحد.
00:12:00دعنا نغيره، أرني المتغيرات.
00:12:03الآن نقوم بذلك على مستوى مصغر
00:12:06ويمكننا أن نكون أكثر تحديداً
00:12:08فيما يتعلق بما نبحث عنه، أليس كذلك؟
00:12:09في هذه الحالة، نحن نقوم بـ "bolder".
00:12:10كان بإمكاننا اختيار أي من تلك الخيارات الاثني عشر
00:12:13وهذا ما توصل إليه.
00:12:14نعم، جريء جداً مقارنة بالخيارات الأخرى.
00:12:17هذا هو المتغير الأول، والمتغير الثاني،
00:12:21أكثر هدوءاً قليلاً،
00:12:22ثم المتغير الثالث جامح قليلاً، أليس كذلك؟
00:12:25أيضاً هذه القدرة على ضبط المتغير.
00:12:27لذا إذا نقرت على "tune"،
00:12:30يمكننا تغيير التباعد.
00:12:31على سبيل المثال، كيف تريد أن يبدو هذا الشيء الجامح؟
00:12:36كيف تريد أن تبدو الألوان؟
00:12:39لذا مرة أخرى، إذا كنا نفكر في الفيديو الأخير الخاص بي
00:12:42أو نفكر في تصميم "Claude"، مثل التعديلات،
00:12:44مرة أخرى، هذا يشبه تماماً التعديلات الدقيقة
00:12:47وهذا ينطبق على جميع المتغيرات.
00:12:50إخفاء المفتاح، إظهار المفتاح، لذا هناك الكثير الذي يمكننا القيام به.
00:12:53لنفترض أننا نريد المضي قدماً في هذا.
00:12:54لذا إذا كنت أريد المضي قدماً في ذلك، فماذا سأفعل؟
00:12:56علي فقط الضغط على "accept" (قبول) وسيتم تطبيقه الآن.
00:13:00الآن إذا ضغطت على "accept" وحدث خطأ كهذا،
00:13:02فقط تحقق من "Claude code"،
00:13:03فهو يقوم أساساً بتطبيق تغييراتك وإعادة تحميلها.
00:13:06وهذا ما يبدو عليه الأمر مع تفعيل التغييرات.
00:13:09الشيء الوحيد الذي لم أتحدث عنه هو "detect" (اكتشاف).
00:13:10لذا إذا ضغطت على "detect" هنا، فما سيبحث عنه
00:13:13هو محاولة معرفة ما إذا كان هناك أي "عشوائية" (slop) للذكاء الاصطناعي هنا؟
00:13:17هل يكتشف أي من هذه الأنماط العكسية
00:13:19التي تحدثنا عنها سابقاً؟
00:13:20الآن، لأن هذا تم إنشاؤه بالكامل باستخدام "Impeccable"،
00:13:24أشك بشدة في أنه سيجد أي شيء
00:13:26ولهذا السبب لا نرى أي شيء يظهر.
00:13:28لكننا سنرى لاحقاً عندما نلقي نظرة على موقعي الإلكتروني الخاص،
00:13:31إذا كان هذا هو الحال.
00:13:32لكن هذه هي الطريقة التي يعمل بها النظام الحي.
00:13:34وأعتقد أن هذا الجزء رائع حقاً وهو ما يميزه،
00:13:37أعتقد، عن مهارات تصميم الواجهة الأمامية والمستودعات الأخرى
00:13:41التي رأيتها في الماضي،
00:13:42خاصة حقيقة أنه يمكننا إنشاء متغيرات إضافية.
00:13:45أنا متحمس جداً لكوني قادراً على رؤية
00:13:47كل هذه المتغيرات المختلفة في وقت واحد
00:13:49وتعديلها على هذا المستوى الدقيق جداً.
00:13:52لذا أنا أحب هذا، لكن مرة أخرى، إنه في مرحلة ألفا.
00:13:54لذا، قد تواجه بعض الأخطاء.
00:13:57هناك القليل من الأشياء
00:13:59التي تبدو خشنة بعض الشيء في التعامل،
00:14:01مثل إعادة التحميل التي رأيتها للتو، ولكن مهلاً،
00:14:03أعتقد أن هذا رائع جداً.
00:14:04لذا تحقق بالتأكيد من هذا إذا كنت تستخدم "Impeccable".
00:14:07لا تجعله ينشئ التصميم وينتهي الأمر عند ذلك.
00:14:09ادخل إلى "Live" والعب بهذا.
00:14:11الآن، بمجرد أن تصل بصفحة الويب إلى المكان الذي تحبه،
00:14:13هناك المزيد من الأوامر التي يمكنك تشغيلها.
00:14:16لذا يمكننا تشغيل شيء مثل "polish"
00:14:18حيث يقوم بتمريرة نهائية لنظام التصميم.
00:14:20يمكننا القيام بشيء مثل "harden"
00:14:22حيث سيلقي نظرة على الحالات المتطرفة والأخطاء
00:14:24ويتأكد من أن كل شيء يعمل.
00:14:25كما قلت، هذا متطور جداً جداً
00:14:28وعميق جداً من حيث عدد الأوامر التي يمكننا تشغيلها.
00:14:30ولكن من أجل الوقت، ما سنفعله الآن
00:14:33هو أنني سأوضح لك كيفية البناء من الصفر،
00:14:35ولكن هذه المرة سنستخدم
00:14:38أساساً لوحة مزاجية أو نموذجاً أولياً
00:14:40لنوع الرؤية التي نريد دفعها إلى "Impeccable".
00:14:43لأنني أريد أن أرى كيف يبدو هذا
00:14:45عندما نقوم بنسخ ما كانت عليه دراسة حالتهم،
00:14:48لأن ما فعلوه هو أنهم أخذوا هذه الصورة،
00:14:50وضعوها في "Claude Code"، ثم في "Impeccable"،
00:14:52ثم، حسناً، أنشأوا هذا الموقع،
00:14:53وكانوا قادرين على الحصول على شيء
00:14:54بدا رائعاً جداً.
00:14:55لذا ذهبت وأنشأت بعض الصور
00:14:58التي تطابق الجمالية التي استخدمها "Impeccable" في دراسة حالتهم،
00:15:02لكننا نستخدم "Lighthouse" بدلاً من ذلك،
00:15:04حتى نتمكن على الأقل من الحصول على اختبار
00:15:07يعتبر نوعاً ما مقارنة مباشرة.
00:15:09لذا أنا أحب هذا التصميم، لذا أعتقد أننا سنمضي به.
00:15:11تماما مثل ذي قبل، أقوم بتشغيل "Impeccable craft" كمهارة.
00:15:15ثم طلبت مني سلسلة مشابهة من الأسئلة كما في السابق،
00:15:18وقد قيل لي أساساً فقط التزم
00:15:21بنوع المزاج والأجواء
00:15:22التي حصلت عليها من الصورة التي أعطيتك إياها.
00:15:24إذاً هذا هو ما خرجت به،
00:15:26وبصراحة، إنه يترك شيئاً مرغوباً فيه.
00:15:29أعتقد أن مجرد رمي هذا النوع من اللوحة المزاجية عليها
00:15:33وقول: "مهلاً، لننشئ موقعاً إلكترونياً من هذا"،
00:15:35لقد كافحت.
00:15:37أعتقد أنها بذلت قصارى جهدها.
00:15:38على سبيل المثال، لا نزال نحصل على لوحة التحكم، ولديها الألوان،
00:15:41لكنها ليست بجودة ما ابتكروه
00:15:43لأني أعتقد أنني منحتها ذلك العنصر الوحيد فقط
00:15:46ولم أدرج أصولًا إضافية
00:15:48فلم تقم حقًا بتقسيمه بنفس الطريقة
00:15:51التي فعلتها Impeccable في دراسة الحالة الخاصة بهم
00:15:52لكن قد تكون مشكلة في صياغة الأوامر.
00:15:55ولكن حتى مع ذلك، يمكنك رؤية هيكل
00:15:57شيء قد ينجح هنا.
00:15:59أعجبتني حقًا الطريقة التي صمموا بها لوحة التحكم.
00:16:01لذا بالتأكيد ليست مبهرة كما أعتقد
00:16:05مثل تلك الأولية التي أنشأناها في البداية
00:16:09ولكن مهلًا، قررت تجربتها.
00:16:11والآن دعونا نرى كيف سيكون أداؤها عند تعديل موقع موجود بالفعل.
00:16:14سنستخدم موقعي الإلكتروني، موقع وكالتي للذكاء الاصطناعي الفعلي
00:16:18وسنقوم بتشغيل بضعة أوامر عليه.
00:16:21سنستخدم مستند Impeccable
00:16:23حتى يتمكن من الهندسة العكسية لملف design.md
00:16:26من الكود، ثم سنقوم بأشياء مثل تشغيل التدقيق
00:16:29وإجراء تقييم، وسنقوم بالفعل بتنفيذ الأمر المباشر مجددًا
00:16:32على موقعي الفعلي ونرى نوعًا ما
00:16:36ما هي الإعلانات التي يمكننا صنعها.
00:16:37للعلم، هذا هو الموقع الإلكتروني لوكالتي للذكاء الاصطناعي.
00:16:41لدي قسم رئيسي تقليدي نوعًا ما.
00:16:43أنتقل إلى الخدمات، وأتحدث عن فلسفتي
00:16:47لكيفية تنفيذنا للذكاء الاصطناعي
00:16:49قبل وجود نوع من الدعوة لاتخاذ إجراء
00:16:51مكان حيث يمكن للناس ملء معلوماتهم
00:16:54إذا كانوا يرغبون في العمل معي.
00:16:55لدي بعض الصفحات الإضافية مثل مدونتي
00:16:57لكننا سنكتفي بالصفحة الرئيسية في الوقت الحالي.
00:17:00إذًا أول شيء فعلته هو أنني قلت
00:17:02لنقم بتشغيل مستند Impeccable على قاعدة الكود هذه
00:17:05ونرى ما لدى Impeccable لتقوله عن موقعي الحالي.
00:17:08إنه يمر عبر قاعدة الكود بأكملها
00:17:11وسيقوم بإنشاء ملف design.md لما لدينا بالفعل
00:17:16ومن ذلك الأساس
00:17:18يمكننا البدء في تعديل الأشياء.
00:17:19إذًا بعد أن مرت Impeccable عبر قاعدة الكود
00:17:21كتبت ثلاثة ملفات تشبه أساسًا
00:17:23السياق الاستراتيجي لما يجري.
00:17:26إنها تتحدث عن المكاسب، والهدف الأساسي
00:17:29لكنها تتحدث أيضًا عن سبعة انتهاكات مختلفة وجدتها.
00:17:33إذًا الكرة الزرقاء، تقول إن نماذج بطاقات الخدمات
00:17:37هي في الأساس حزمة من القصاصات الفنية
00:17:40شبكة بطاقات مقصودة.
00:17:43إنها تكره تأثير الزجاج المصنفر، لذا فهي لا تحبه.
00:17:47تقول إننا قمنا بتحميل خط معين، لكننا لم نستخدمه أبدًا
00:17:50بالإضافة إلى أشياء أخرى.
00:17:53لذا كانت هناك بعض الميزات
00:17:54الموجودة في الكود بشكل أساسي
00:17:55لكنها لا تظهر في واجهة المستخدم الفعلية.
00:17:58وبعض المشاكل في بعض الألوان.
00:18:02تتحدث أيضًا عن الفجوة الاستراتيجية
00:18:04لعدم وضعي لنفسي، للشخص، تشيس
00:18:07على الموقع نفسه كثيرًا على الإطلاق، وهو أمر عادل.
00:18:10الآن يمكننا الحصول على تقييم أعمق
00:18:12إذا قمنا بتشغيل أمر التقييم.
00:18:15فلنقم بذلك الآن.
00:18:16أخبرتها أن تشغل أمر التقييم.
00:18:18لم أكتب كلمة التقييم بشكل صحيح حتى.
00:18:20أخبرتها أن تشغل أمر التقييم على الصفحة المقصودة.
00:18:23إذًا قامت بتشغيل تقييمها وكان الحكم هو أنها
00:18:25نعم، تقترب من كونها "رطانة ذكاء اصطناعي".
00:18:27أعطتني درجة صحة تصميم عبر 10 أشياء مختلفة
00:18:33وكل واحدة كانت من أصل أربعة
00:18:34ولم أحصل على أكثر من ثلاثة في أي منها
00:18:37لكنني لم أحصل على أي واحد، فهذا جيد.
00:18:39الإجمالي كان 25 من أصل 40، وهو ما يصنف كمقبول.
00:18:43بالنسبة للحمل الإدراكي، أعطتني خمسة من ثمانية، وهو فشل.
00:18:46تقول إن حركة الخلفية تتنافس مع المحتوى.
00:18:51نعم، أعتقد أنها هادئة نوعًا ما
00:18:54لكنني أرى من أين جاءت بهذه الفكرة.
00:18:56يوجد هنا اثنان من الدعوات لاتخاذ إجراء بوزن متساوٍ وبأولوية غامضة.
00:19:00يحتوي قسم الخدمات على أربعة مخططات بصرية مختلفة
00:19:03جنبًا إلى جنب مع بعض الأشياء الأخرى.
00:19:05وانطباعها العام هو أن لديه هيكلًا جيدًا
00:19:08لكنه يمكن أن يقدم المزيد.
00:19:10ثم في النهاية، تقوم نوعًا ما بتفكيكها
00:19:11إلى ثلاثة أماكن مختلفة قبل أسبوع.
00:19:14لذا بصراحة، أعجبني هذا التقييم.
00:19:16هذا متعمق للغاية ويعطينا الكثير لنعمل عليه
00:19:19ويصبح محددًا جدًا بشأن ما تعتقد أنه خطأ.
00:19:22الآن، ما إذا كنت أتفق مع بعضه أم لا
00:19:24أعتقد أن هذا بجانب الموضوع
00:19:26لكنه يمنحنا أشياء للتفكير فيها.
00:19:29كما تعلم، لن أفترض بشكل أعمى
00:19:31أن كل ما تخبرني به صحيح
00:19:32لكن يمكننا المرور بهذه النقاط، أو إذا أردت
00:19:35يمكنني المرور بكل هذه.
00:19:36أنا مثل، حسنًا، لنغير هذا وذاك.
00:19:37إذًا لنرى ما سيحدث إذا قمنا بـ B
00:19:40وقلنا إننا نريد نوعًا ما أن نلعب
00:19:42بما تسميه انضباط الزخرفة
00:19:44ونرى التغييرات التي تجريها.
00:19:46وبعد أن نرى التغييرات التي تجريها
00:19:48سنقفز إلى الجلسة المباشرة
00:19:51تمامًا كما فعلنا مع أول صفحة مقصودة بنيناها
00:19:54ونعبث بها.
00:19:55إذًا لنلقِ نظرة على بعض التغييرات التي أجرتها.
00:19:57وكانت التغييرات دقيقة للغاية.
00:19:59إذًا يمكننا أن نرى هنا في قسم الخدمات
00:20:03هذه هي النسخة المحدثة.
00:20:04لقد قاموا نوعًا ما بتهدئة الألوان وأبقوها
00:20:07على مجرد لون تيراكوتا برتقالي وأبيض.
00:20:09ستلاحظ أنه لم يعد هناك نوع من الضباب الأزرق
00:20:13في أسفل اليسار.
00:20:14للعلم، هذه هي السابقة
00:20:17حيث كان لديك نوعًا ما هذا الأزرق في أسفل اليسار
00:20:18ثم أزرق ثم أخضر.
00:20:20لذا فهي تبقيها على لونين فقط، أليس كذلك؟
00:20:23نوع من الأبيض، حسنًا في الواقع ثلاثة ألوان
00:20:25أود أن أقول الأبيض، الرمادي، ثم البرتقالي.
00:20:28يمكنك أيضًا رؤية ذلك هنا في قسم النهج.
00:20:32إذًا بينما أتجاوز البطاقات، لا يزال لدينا ذلك التوهج البرتقالي
00:20:36ولكن في الأصل كان هناك بعض البرتقالي هنا في الأسفل.
00:20:41كان لديها نوعًا ما خط البطاقة في الأعلى
00:20:43وهي تعتقد أن ذلك نوع من أنواع رطانة الذكاء الاصطناعي.
00:20:47وهذا هو مدى تغييرات انضباط الزخرفة.
00:20:51لذا فهي دقيقة، ولديها بعض التغييرات الأخرى
00:20:53التي تريد تجربتها أيضًا.
00:20:54لها علاقة بنوع من الثقة والتحويل
00:20:56وربما إضافة أشياء مثل صور الرأس.
00:20:58لكن ما سننتقل إليه الآن
00:21:00هو الدخول إلى الوضع المباشر.
00:21:02إذًا دعونا نلقي نظرة على الموقع الآن في الوضع المباشر.
00:21:05إذًا لنقل أنني أردت تغيير هذه البطاقات قليلًا
00:21:08وتمامًا مثل السابق، ماذا سأفعل؟
00:21:10يمكنني القيام بذلك بحرية أو يمكنني المضي قدمًا
00:21:13واختيار أحد هذه الأوامر المحملة مسبقًا.
00:21:17إذًا لنحاول "الإبهار" لهذا الأمر.
00:21:19ثم سنمضي قدمًا ونذهب لثلاثة متغيرات.
00:21:22وما يفعله الإبهار هو أنه يضيف بعض الشخصية الفعلية
00:21:26لذلك المكون الخاص.
00:21:27إليك نظرة على بعض المتغيرات التي أعطتنا إياها.
00:21:30إذًا هذا أكبر قليلًا
00:21:32لديه نوع من هذا الشيء هنا على اليمين.
00:21:35إنه يغير النص الفعلي هنا.
00:21:37ويضيف هذا الشيء الصغير أيضًا.
00:21:40ومن الواضح أننا نمتلك الألحان
00:21:43للعبث بها أيضًا.
00:21:45من المفترض أن يكون هذا رقمًا، إنه خارج قليلًا.
00:21:49إذًا نعم، تقريبًا نفس السيناريو بالضبط
00:21:53مثل أول موقع قمنا بإنشائه.
00:21:55أعتقد أن هذا الشيء المباشر لـ Impeccable
00:21:57هو في الواقع أقوى أداة لديها على الإطلاق.
00:22:00حقيقة أنه يمكننا إجراء هذه التعديلات الدقيقة
00:22:02من واجهة رسومية بشكل أساسي
00:22:04بدلًا من الاضطرار للقيام بكل شيء في سطر الأوامر.
00:22:06لذا أنا سعيد برؤية أنه تقريبًا
00:22:08نفس الإعداد بالضبط
00:22:09حتى عندما نستخدم قاعدة كود موجودة بالفعل.
00:22:12بشكل عام، أحببت Impeccable حقًا.
00:22:13أعتقد أنها مهارة يجب عليك إضافتها بنسبة 100% إلى مجموعتك
00:22:17وبالتأكيد اختبرها عندما تقوم بجولتك القادمة
00:22:20من تصميم الواجهة الأمامية
00:22:21سواء كان ذلك لموقع ويب تنشئه من الصفر
00:22:23أو لشيء موجود بالفعل.
00:22:26وبنسبة 100% جرب الأداة المباشرة.
00:22:29هذا شيء أضافوه للتو
00:22:31أعتقد قبل حوالي أسبوع.
00:22:32وأعتقد أنه مُميز كبير
00:22:34عن كل هذه الأشياء الأخرى.
00:22:35أعتقد عندما تجمع هذه التعديلات الدقيقة
00:22:38مع نوع من التخطيطات الكلية التي أخبرتك بالقيام بها
00:22:41عبر المطالبات في البداية
00:22:43أعتقد أن لديك سير عمل قويًا حقًا.
00:22:45كما هو الحال دائمًا، أخبرني برأيك.
00:22:47رابط هذا المستودع سيكون في الوصف بالأسفل.
00:22:49هناك أيضًا الرابط في التعليق المثبت لـ Chase AI+
00:22:52إلى اللقاء.
00:22:55وبجانب ذلك، سأراك لاحقًا.