مستويات تصميم الذكاء الاصطناعي الثلاثة... القليلون فقط يصلون إلى المستوى 2
AAI LABS
Computing/SoftwarePhotography/Art
Transcript
00:00:00إذا كنت تتابع هذه القناة منذ فترة، فربما تعلم أننا غطينا الكثير
00:00:03من سير عمل التصميم والأدوات. لقد كنا نختبرها جميعاً لشهور ووصلنا أخيّاً إلى معرفة
00:00:08لماذا يمكن لنفس النموذج أن يمنحك شيئاً يبدو مخصصاً بالكامل أو شيئاً يبدو فوراً
00:00:13بأنه مُولّد بالذكاء الاصطناعي. يعود الأمر إلى ثلاثة مستويات. المستوى الأول هو تصميم صفحة واحدة و
00:00:19هناك شيء واحد يتخطاه معظم الناس وهو السبب الرئيسي في أن ناتجهم يبدو تقليدياً. المستوى
00:00:23الثاني هو حيث تتوقف عن تصميم الصفحات وتبدأ في تصميم الأنظمة، وسير العمل هنا
00:00:28مختلف تماماً. والمستوى الثالث هو كيف نختبر التصاميم ضد بعضها البعض لنصل إلى الإصدار
00:00:34الذي يعمل بالفعل، وهو الجزء الذي نستخدمه في كل مشروع حقيقي الآن. إذن المستوى الأول يدور حول
00:00:39إنشاء تصميم جيد لصفحة واحدة. هذا هو المستوى الذي يدرّسه معظم الناس لأنه
00:00:44أساس كل تصميم جيد. تحدثنا في فيديو سابق عن كيف أن قدرة التصميم في نموذج Opus 4.7
00:00:50قد تحسنت كثيراً واختفى الكثير من هراء الذكاء الاصطناعي الذي اعتدنا رؤيته. سابقاً عندما
00:00:55كنا نعطيه توجيهاً بسيطاً مثل إنشاء صفحة هبوط، كان يأخذ مباشرة
00:00:59السمة الأرجوانية والبيضاء ويبني كل شيء حولها. هذا النمط المحدد أصبح أفضل. ولكن
00:01:04مثل أي نموذج ذكاء اصطناعي آخر، فإن هذا النموذج يتقارب أيضاً نحو أنماط آمنة. ومن خلال كل اختباراتنا و
00:01:09تجريبنا له، وجدنا أنه يميل افتراضياً إلى نمط معين في كل مرة. لذا الآن كلما
00:01:15رأينا هذا النمط، يكون دليلاً قاطعاً على أن الموقع جاء من Opus 4.7 وهي مسألة وقت فقط
00:01:21قبل أن يصبح الهراء التالي للذكاء الاصطناعي. لذا نحتاج إلى طرق أخرى لجعل هذا الموقع يبدو أفضل.
00:01:25الآن هذا المستوى يعود غالباً إلى هندسة التوجيهات وكيف نحدد التطبيق لأنه
00:01:30إذا قمت بنظم توجيهك بشكل صحيح، يمكنك ببساطة إنشاء التطبيق بضربة واحدة بالكامل. يجب أن يبدأ التوجيه
00:01:35بغرض الموقع الذي تسعى لبنائه، ثم اذكر الأمور غير القابلة للتفاوض، مثل
00:01:39الأشياء الدقيقة التي تريدها في التطبيق وكيف تريد أن تبدو عناصر واجهة المستخدم. بعد ذلك، تحدد
00:01:44نظام الألوان. هنا نستخدم OKLCH، وهو أساساً مقياس للخفة، والصفاء اللوني، ودرجة اللون.
00:01:49استخدام OKLCH بدلاً من RGB أو HSL المعتاد أفضل لأنه يمثل الألوان بالطريقة التي
00:01:55تدركها العين البشرية بالفعل، لذا فهو يتعامل مع الخفة والتوازن بشكل أفضل. كما أنه ينشئ
00:01:59تدريجات ألوان أكثر سلاسة، بخلاف رموز النظام الست عشري التي قد تنتج تدريجات تبدو غير متناسقة. والآن، بمجرد تحديد
00:02:04نظام الألوان، يتعين عليك أيضاً ذكر تدفقات التباين. يُعد التباين عاملاً بالغ الأهمية
00:02:08في تصميم واجهات المستخدم لأنه ينشئ بالفعل تدرجاً هرمياً يوجه عينيك نحو الأشياء التي
00:02:13تستحق الاهتمام. بدون تباين صريح، يتعامل النموذج مع كل عنصر على أنه بنفس الأهمية،
00:02:18مما يجعل من الصعب تشكيل التسلسل الهرمي البصري. وللتأكد من ألا يبدو الموقع وكأنه
00:02:22هراء ذكاء اصطناعي، عليك أيضاً التحكم في الطباعة من خلال التوجيه، بحيث تحدد الخطوط المحظورة
00:02:27بسبب ارتباطها بهراء الذكاء الاصطناعي وتلك التي يجب استخدامها في مناطق مختلفة من التصميم. خطوط مثل Inter و Geist
00:02:33أصبحت مؤشرات واضحة لهراء الذكاء الاصطناعي لأن كل وكيل يلجأ إليها افتراضياً، لذا فإن ذكرها
00:02:38صراحة يجبر النموذج على البحث في مكان آخر. ثم تحدد تخطيط وإقاع الموقع،
00:02:42ولكن عليك أولاً معرفة التماثل وعدم التماثل. التخطيطات المتماثلة تحتوي على مكونات
00:02:47موضوعة بالتساوي على الشبكة بمظهر متوازن، وهو ما يناسب التصاميم المهنية والمستقيمة
00:02:51أكثر. ولكن لمظهر أكثر فنية، اختر عدم التماثل لأنه يمنحك مجالاً أكبر
00:02:56للتجريب. وهو جيد بشكل خاص عندما تحتاج إلى استخدام المساحات الفارغة حيث يتيح ذلك للتصميم
00:03:01أن يتنفس. نوع المنتج الذي تبنيه يحدد أيهما يناسب بشكل أفضل. ثم حدد جميع الأقسام
00:03:06التي تريدها، والمواد التي ستستخدمها، وكيف يجب أن يتصرف الموقع بطريقة متجاوبة مع الشاشات. والجزء الأهم
00:03:11هو ذكر الأنماط المعاكسة. هذه هي سمات هراء الذكاء الاصطناعي مثل زر الحث على اتخاذ إجراء البسيط والمتمركز،
00:03:17وأيقونات Lucid، والتدرجات ذات التصميم الزجاجي. لذا بمجرد أن تعطي هذا التوجيه لـ Claude Code أو
00:03:22أياً كان الوكيل الذي تستخدمه، فسوف يحلل تطبيقك ويمر عبر تفاصيل التنفيذ. ثم سيقوم
00:03:27ببناء التطبيق تماماً كما وصفه التوجيه، مع عدم التماثل بسبب الهدف الفني والاستخدام السليم للمساحات الفارغة.
00:03:34لذا فإن المستوى الثاني يتعلق بالحفاظ على نفس التصميم عبر كل صفحة من صفحات الموقع لأن معظم التطبيقات المولدة بالوكلاء
00:03:40تتفكك لحظة مغادرتك لصفحة الهبوط. غالباً عند إنشاء تطبيقات كاملة باستخدام الوكلاء، قد
00:03:45تكون واجهت هذا بالضبط. صفحة الهبوط تكون جيدة في الغالب، ولكن عندما تنتقل إلى صفحات أخرى،
00:03:50فهي لا تتبع نمط واجهة المستخدم بتناسق كما ينبغي. تخلص لوحة التحكم في النهاية بأساليب أزرار
00:03:55مختلفة، وتباعد مختلف، وطباعة مختلفة، وكأن الوكيل نسي أنه كان يبني
00:04:00نفس التطبيق. تبدو الصفحات الأخرى في النهاية وكأنها ليست حتى جزءاً من نفس الموقع وهذا يكشف
00:04:05أن الموقع تم إنشاؤه بواسطة وكيل. في بعض الأحيان يصمد التصميم على صفحات المصادقة، ولكن بعد ذلك على
00:04:10لوحة التحكم، ينكسر النمط تماماً. لذا من أجل ذلك، تحتاج إلى إنشاء أهم ملفين،
00:04:15Claude.md و Design.md. هذان الملفان هما ما يحافظ على اتساق التصميم عبر الموقع بأكمله.
00:04:21في Claude.md، وكما تحدثنا مرات عديدة، تضع فقط معلومات مشروعك وليس التصميم.
00:04:27يرجع هذا إلى أن الملف يظل مُحمّلاً في الجلسة طوال الوقت ومحتوى التصميم هناك سيعمل فقط على
00:04:32شتات انتباه الوكيل عندما يعمل على شيء آخر، ولكنه يظل الملف الرئيسي لأنه يحافظ على
00:04:37سياق المشروع الذي يوجه التصميم الجيد. أما بالنسبة للتصميم نفسه، فنحن بحاجة إلى ملف منفصل
00:04:42يذكر كل شيء يخص النظام المرئي، والتخطيط، والألوان، والطباعة، وكل التفاصيل التي غطيناها في المستوى 1.
00:04:47يجب أن يكون ملف Design.md هو النوع الذي يمكن لأي وكيل التقاطه وفهم النظام المرئي
00:04:52منه فوراً. تماماً كما في المستوى السابق، تحتاج إلى تحديد نظام الألوان بـ OKLCH هنا أيضاً.
00:04:57لإنشاء هذين الملفين، أعطينا Claude code توجيهاً مفصلاً يغطي ما يحتاجه كل ملف وقام بتوليد الملفين لنا.
00:05:03ملف Claude.md قصير، يحتوي فقط على تفاصيل المشروع. أما Design.md فهو أطول مع كل تفصيلة وصغيرة، بما في ذلك رموز الألوان،
00:05:09وخيارات الطباعة، وكل شيء آخر. ولكن هذه ليست نهاية ملف Design.md. نحن بحاجة إلى الاستمرار في
00:05:15تحسينه بمرور الوقت. لذا نضع سطراً في البداية، نخبر فيه الوكيل بإضافة أي قيمة تصميم جديدة
00:05:20يجدها إلى هذا الملف. بهذه الطريقة، تبدأ كل جلسة من نسخة أكثر تحسيناً لنظام التصميم
00:05:25مقارنة بالنسخة التي سبقتها. ولكن مجرد ترك Claude ينشئ ملف Design.md لا يكفي،
00:05:30لأن ما يولده لا يتبع أفضل الممارسات بشكل صحيح. لقد قامت جوجل بإتاحة نموذجها المفتوح المصدر
00:05:35لملف Design.md. يحتوي القالب أيضاً على أوامر للتحقق المتبادل من ملف Design.md الخاص بك
00:05:40مقابله والإبلاغ عن أي أخطاء. لذا يمكنك ببساطة توجيه وكيلك للتكرار باستخدام تلك الأوامر
00:05:46لإتقان ملف Design.md. ولا تزال هذه ليست نهاية المستوى 2. لتوليد تصاميم جيدة بما يكفي في
00:05:51هذا المستوى، تحتاج أيضاً إلى مراجعتها تدقيقياً مقابل مبادئ التصميم الحالية. من أجل ذلك، هناك
00:05:56العديد من المهارات مفتوحة المصدر التي تقوم بذلك بالضبط. يمكنك استخدام أي منها، لكننا نستخدم مهارة VersaLab،
00:06:00لأنه بدلاً من تضمين جميع المبادئ برمجياً داخل المهارة، تشير إلى مصدر خارجي
00:06:06يقومون بصيانته بنشاط. لذا تظل المبادئ مواكبة لأحدث الممارسات الحالية بدلاً من
00:06:11أن تكون مجمدة عند ما كان يُعتبر الأحدث وقت كتابة المهارة لأول مرة. تقوم بتثبيت هذه المهارة
00:06:16في المشروع، وتشغيلها، ويخرج تصميمك في شكل أفضل بكثير مما كان عليه من قبل. ولكن قبل أن
00:06:21ننتقل إلى الأمام، فلنستمع إلى كلمة من الراعي. لقد بدأت مؤخراً في استخدام ZillysCloud ودعوني أخبركم
00:06:25بالسبب. تعمل معظم تطبيقات RAG بشكل جيد مع عدد قليل من المستندات، ولكن في اللحظة التي تدخل فيها بيانات حقيقية،
00:06:30تبدأ في الانهيار لأن الإعداد لم يتم تصميمه للتعامل مع هذا النوع من الأحمال.
00:06:35Milvus هي قاعدة بيانات المتجهات مفتوحة المصدر الأكثر حصولاً على النجوم على GitHub بأكثر من 44,000 نجمة،
00:06:40وهي مصممة للتعامل مع هذا النوع من الأحمال، لكن الاستضافة الذاتية تعني إدارة البنية التحتية بنفسك.
00:06:46لذا يأتي دور ZillysCloud، النسخة المُدارة بالكامل مع نفس واجهة برمجة التطبيقات التي تكون أسرع بنسبة
00:06:51تصل إلى 10 مرات، ويمكنك إعدادها في دقائق دون تغيير سطر واحد من الكود.
00:06:56لذا قمنا بتشغيل استعلام بحث دلالي على ZillysCloud، والنتائج ذات صلة حقاً لأنه
00:07:00يفهم المعنى وليس فقط الكلمات الرئيسية، ووقت الاستجابة فوري تقريبا حتى مع مجموعة بيانات كبيرة.
00:07:05قمنا أيضاً بتشغيل استعلام توصية بناءً على مقالة واحدة. فوجد المقالات الخمس الأكثر تشابهاً
00:07:11عبر مجموعة البيانات بأكملها مرتبة حسب التشابه في أقل من ثانية. وتتتبع لوحة التحكم أداء
00:07:16الكتلة، واستخدام التخزين، ومقاييس البيانات بما في ذلك أعداد المجموعات والكيانات في الوقت الفعلي. لا توجد حاجة لبطاقة ائتمان،
00:07:21فقط انقر فوق الرابط في التعليق المثبت وقم بتجربة ZillysCloud مجاناً.
00:07:27إذن المستوى الثالث يتعلق باختبار التصميم برمجياً، بنفس الطريقة التي يتحقق بها المهندسون من
00:07:31الكود باستخدام TDD. الآن نعلم أنه لا يمكنك كتابة اختبارات مرئياً بالطريقة التي تفعلها مع الكود. مع الكود،
00:07:36توجد مدخلات ومخرجات واضحة لكل شيء. التصميم ليس لديه ذلك لأنه أكثر ذاتية
00:07:41ولا يمكن قياسه كمياً مثل الكود، ولكن لمجرد أنه ذاتي فهذا لا يعني أننا لا نستطيع كتابة
00:07:46اختبارات له. السبب في نجاح TDD للكود هو أن الاختبار يثبت ما يجب أن يكون عليه السلوك،
00:07:51ويجب أن يلبي التنفيذ هذا التثبيت. نفس الفكرة تنطبق على التصميم ولكن مع أنواع مختلفة
00:07:57من المثبتات. في التطبيق الذي كنا نبنيه، كانت الخطوة الأولى هي نفس السابق، لإنشاء ملفات
00:08:01clod.md و design.md قبل حتى التفكير في التنفيذ. الآن يجب دائماً كتابة الاختبارات
00:08:05قبل الكود، وبهذه الطريقة يمكن اختبار التنفيذ فعلياً مقابلها. إذا كتبنا الاختبارات
00:08:12بعد التنفيذ، يتكاسل الوكيل. فهو يكتب فقط حالات اختبار تتقارب نحو
00:08:17الكود الحالي، لأن هذا الكود موجود بالفعل في سياقه. كتابة الاختبار أولاً تجبر
00:08:22التنفيذ على ملاءمة الاختبار بدلاً من ملاءمة الاختبار للتنفيذ. لذا نستخدم ملفات التصميم
00:08:27كمصدر موثوق للاختبارات لأن هذه الملفات تحتوي على جميع الأنماط المعاكسة التي يمكننا
00:08:32التحقق منها برمجياً. كل نمط معاكس في design.md يصبح حالة اختبار. كل قاعدة ألوان،
00:08:37كل قيد تباعد، وكل اختيار طباعة يحصل على فحص برمي. لقد أعطينا Claude Code
00:08:44توجيهاً مفصلاً لكتابة حالات الاختبار مع تحديد كل قسم يجب أن يركز عليه. وأيضاً إذا كنت
00:08:49تستمتع بمحتوانا، ففكر في الضغط على زر الإعجاب لأنه يساعدنا في إنشاء المزيد من المحتوى مثل
00:08:54هذا والوصول إلى عدد أكبر من الناس. بمعاونة توجيهك، سيقوم بكتابة جميع حالات الاختبار لتصميم
00:08:59التطبيق. إنه يكتب أنواعاً متعددة من الاختبارات. هناك اختبارات ثابتة، والتي تتحقق مباشرة من
00:09:04الأنماط المعاكسة التي ذكرناها في التوجيه. ثم هناك الاختبار المرئي، والذي يستخدم أساساً
00:09:09Playwright في الخلفية ويشغل اختبارات الانحدار لجعل الموقع أفضل تدريجياً. وسوف يقوم أيضاً
00:09:14بكتابة حالات اختبار للمكونات الأخرى والدوال المساعدة مثل المسح والتقرير. الآن هذه الاختبارات
00:09:19تتحقق من الأنماط المعاكسة الثابتة، لكن اختبار التصميم يحتاج إلى شيء آخر. من أجل ذلك، هناك
00:09:24أداة أخرى تسمى Visly Test، وهي أساساً واجهة سطر أوامر تجري TDD لواجهات المستخدم. الطريقة التي تعمل بها هي
00:09:28أنها تشغل TDD محلياً، حيث يمكنك التحقق من التصميم أثناء تغير الكود. لذا يمكنك مراقبة
00:09:34الفروق بنفسك بدلاً من الاعتماد على المراقبة الذاتية للوكيل. تحصل أيضاً على فرق أفضل مع
00:09:39البيانات الوصفية وتفاصيل أخرى، مما يجعل المراجعة أسرع. بدون هذه البيانات الوصفية، أنت تقارن فقط لقطتي شاشة
00:09:44جنباً إلى جنب وتأمل أن تلاحظ الفرق. معها، يخبرك Visly بدقة بليكسلات التي تغيرت
00:09:49وبأي مقدار. لاستخدامها، قم أولاً بتثبيت سطر الأوامر عن طريق تشغيل أمر التثبيت من
00:09:54الوثائق. بمجرد إعدادها وتهئتها، تصبح جاهزة للعمل. الآن فقط افتح Claude code وأخبره باستخدام
00:10:00TDD وتنفيذ أي جزء من واجهة المستخدم تريده باستخدام Visly CLI كوسيط اختبار. عندما
00:10:05تشغل أمر TDD الخاص بـ Visly، يبدأ خادم محلي ويراقب تغيرات لقطات الشاشة. لإرسال
00:10:10لقطات الشاشة، يكتب Claude أساساً اختبارات منفصلة باسم Visly. تستخدم هذه الاختبارات آليات
00:10:16التقاط الشاشة في Playwright لدفع الصور إلى العارض على الخادم. من هناك، يمكنك الموافقة أو رفض
00:10:21التصميم وعرض الفروق التي تقارنه بالإصدار السابق. كل فرق مرفوض يصبح ملاحظات
00:10:27يستخدمها الوكيل لضبط التمريرة التالية. على مدار تكرارات قليلة، يتقارب التصميم نحو ما تريده فعلياً
00:10:32بدلاً مما يعتقد الوكيل أنك تريده. الآن يمكن العثور على التوجيهات المستخدمة هنا في AI Labs Pro
00:10:37لهذا الفيديو ولجميع فيديوهاتنا السابقة حيث يمكنك تنزيلها واستخدامها لمشاريعك الخاصة.
00:10:43إذا وجدت قيمة فيما نقفع وتريد دعم القناة، فهذه هي أفضل طريقة للقيام بذلك. الروابط
00:10:47في الوصف. هذا يوصلنا إلى نهاية هذا الفيديو. إذا كنت ترغب في دعم القناة
00:10:52ومساعدتنا في الاستمرار في صنع فيديوهات مثل هذه، يمكنك فعل ذلك باستخدام زر الشكر المتوفر أدناه. وكما
00:10:57دائماً، شكراً لمشاهدتكم وأراكم في الفيديو القادم.
00:11:02وكالعادة، شكراً على المشاهدة وأراكم في الفيديو القادم.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video