مهارات تصميم خرافية في Claude تحتاجها لبناء مواقع ويب مذهلة

AAI LABS
컴퓨터/소프트웨어창업/스타트업AI/미래기술

스크립트

00:00:00هناك شيء يخطئ فيه الناس.
00:00:01أصبحت النماذج أفضل بكثير في التصميم، ونراها تتحسن كل يوم.
00:00:05لكن في مرحلة ما، تبدأ كل تلك التصاميم الرائعة في أن تبدو متشابهة.
00:00:08إذن السؤال الحقيقي هو، ما الذي يجعل تصميمك متميزاً حقاً؟
00:00:12يعود الكثير من ذلك إلى المطالبات والتعليمات الصحيحة.
00:00:15وهنا تأتي أهمية المهارات، لأنه يمكن الآن حزم المهارات التي تعمل بالفعل
00:00:19في سير عمل قابل لإعادة الاستخدام يمكنك مشاركته مع أي شخص.
00:00:21لذا فقد كان الكثير من الناس يبنون مهارات للتصميم، وبعض أفضلها يأتي
00:00:25مباشرة من الفرق التي تقف وراء هذه الأدوات.
00:00:27لكن ليست كل مهارة موجودة تستحق الاستخدام، والكثير منها لا يساعد حقاً في
00:00:31تصميمك.
00:00:32للسياق، نحن شركة برمجيات وهذه قناتنا AI Labs، وفي هذه
00:00:37القناة نوضح لك كيفية تحسين العمليات باستخدام الذكاء الاصطناعي، تماماً كما قمنا بتحسين عملياتنا.
00:00:41قبل أن نغوص في بعض المهارات الأكثر إبداعاً، لنبدأ بمهارة تشكل
00:00:46أساس العديد من مهارات التصميم الأخرى.
00:00:48مهارة التصميم الأمامي من Anthropic هي المهارة التي تشكل اتجاه التصميم لموقعك
00:00:53وقد استخدمناها في الفيديو السابق أيضاً.
00:00:55بعد أن تقوم بإنشاء عدد كافٍ من الصفحات المقصودة باستخدام الذكاء الاصطناعي، تبدأ في ملاحظة نمط حيث
00:01:00تكون المواقع مختلفة جميعاً ولكنها تبدو متشابهة بطريقة ما.
00:01:03ذلك لأن النموذج تعلم من كمية هائلة من البيانات المليئة بنفس الأنماط.
00:01:07لذا عندما يضطر لاتخاذ قرار تصميم، فإنه يلجأ إلى الخيار الأكثر شيوعاً.
00:01:11لذا يستمر التصميم في الانجراف نحو نفس الخيارات الآمنة والتقليدية بغض النظر عما
00:01:16يكون عليه المشروع فعلياً.
00:01:17وهذه هي المشكلة الدقيقة التي تحلها هذه المهارة.
00:01:19فهي تهرب من تلك الخيارات الآمنة عبر إجبار النموذج على الالتزام باتجاه تصميم حقيقي قبل
00:01:24أن يكتب أي شيء.
00:01:25بدلاً من الافتراض التلقائي للمظهر الآمن الشائع، عليه اختيار اتجاه والحفاظ على الثبات
00:01:30معه.
00:01:30حتى أنها تشير إلى “خزعبلات” الذكاء الاصطناعي المعتادة مباشرة في ملف skill.md الخاص بها، وهو أساساً
00:01:36ورقة تعليمات المهارة، ليتوقف النموذج عن اللجوء إلى نفس الخطوط المفرطة الاستخدام و
00:01:41التدرجات الأرجوانية على الخلفيات البيضاء.
00:01:42وهذا الأمر مهم أكثر مما يبدو.
00:01:44لأنه عندما تبني معظم النماذج صفحة مقصودة، فإنها تحاول أن تكون صحيحة فقط.
00:01:48لكن هذه المهارة تدفعها للالتزام باتجاه تصميم معين بدلاً من ذلك.
00:01:52لذا نحن نلجأ إليها بشكل أساسي للصفحات المقصودة أو محافظ الأعمال حيث يكون التصميم بحد ذاته جزءاً
00:01:56من المنتج، لأنها تمنح النموذج وجهة نظر أقوى قبل أن يبدأ.
00:02:00ولاختبارها، جعلناها تبني صفحة مقصودة وأعطيناها متطلباتنا.
00:02:03وقد أنشأت موقعاً خالياً من خزعبلات الذكاء الاصطناعي المعتادة لأنها التزمت باتجاه التصميم
00:02:08الذي التزمت به بدلاً من الانجراف إلى الإعدادات الافتراضية المعتادة.
00:02:11في نظام تصميم AI Labs، لدينا مهارتان، كل منهما مخصصة لوظيفة منفصلة.
00:02:15هناك المهارة الوظيفية التي تبني واجهة المستخدم التي يتعين على الناس استخدامها فعلياً، مثل لوحات التحكم.
00:02:20وهناك واحدة لواجهة التسويق.
00:02:22داخل مهارة التسويق، يستخدم ملف skill.md مطالبة تسمى “اكسر الافتراضي”.
00:02:27وهي أساساً مهارة التصميم الأمامي من Anthropic.
00:02:29معدلة قليلاً فقط.
00:02:31لقد قمنا بتعديلها لأن المهارة الأصلية أصبحت قديمة قليلاً بالنسبة للنماذج الأحدث.
00:02:35كل من Opus 4.8 و Fable 5 أصدرا أدلة مطالبات توضح كيف تغيرت Clods
00:02:40وكيف أن التعليمات التي تعطيها لها تحتاج إلى تغيير أيضاً.
00:02:42لذا قمنا بدمج نسخة من ذلك في نظام التصميم الخاص بنا.
00:02:45كما ذكرنا بالفعل، مهارة تصميم Anthropic لا تعمل بشكل جيد مع واجهة المستخدم الوظيفية.
00:02:50بمجرد أن تبدأ في بناء منتجات فعلية، تتغير المشكلة تماماً.
00:02:53أنت لا تحاول فقط جعل شيء ما يبدو جيداً بعد الآن.
00:02:55أنت تحاول بناء شيء يعمل كمنتج
00:02:58مع الكثير من المكونات التي يجب أن تعمل جميعها بشكل صحيح.
00:03:01هنا تتحول الأمور من صفحات مقصودة إلى تطبيقات حقيقية.
00:03:04على سبيل المثال، في AI Labs Pro، يمكنك أن ترى أن الصفحة المقصودة لها لغة تصميم فنية أكثر
00:03:09مقارنة بالطبقة الوظيفية الفعلية للمجتمع التي تبدو مملة حقاً
00:03:14وعادية تماماً مثل أي واجهة ويب أخرى تفاعلت معها من قبل.
00:03:18وهنا يأتي دور ShadCN.
00:03:20الآن يمكن للنماذج بالتأكيد بناء لوحات تحكم بمفردها.
00:03:23لكن كل واحد من المكونات المستخدمة بشكل شائع في لوحات التحكم موجود بالفعل،
00:03:27مبني وفق معيار احترافي من قبل أشخاص حقيقيين.
00:03:29لذا لا يتعين على النموذج إنشاء مكونات من الصفر وتهيئة الرسوم المتحركة بنفسه.
00:03:34يمكنه فقط سحب المكون الجاهز الموجود مسبقاً في السجل،
00:03:38والذي هو عبارة عن مكتبة كبيرة من المكونات الجاهزة.
00:03:41هذا هو بيت القصيد من ShadCN.
00:03:43بدلاً من أن يقوم النموذج ببناء كل مكون يدوياً،
00:03:46فهو يسحب فقط من تلك المكتبة من الأجزاء التي هي بالفعل بجودة احترافية ويستخدمها في تطبيقك.
00:03:51وهذا هو السبب في أن النتيجة تبدو كمنتج حقيقي.
00:03:53لأنك لا تبدأ من مسودة أولية خشنة وتبدأ في إصلاحها ببطء.
00:03:57أنت تبدأ من أجزاء تم بناؤها بالفعل لتكون جاهزة للشحن.
00:03:59إعداد ShadCN له جزآن يعملان معاً.
00:04:02الأول هو المهارة.
00:04:03فكر فيها ككتاب قواعد.
00:04:05لدى ShadCN طريقة محددة وصحيحة لبناء الأشياء، والمهارة تحمل كل تلك القواعد.
00:04:10فوق ذلك، هي تنظر إلى كيفية إعداد مشروعك الخاص.
00:04:12لذا عندما تطلب من النموذج بناء شيء ما،
00:04:15تضمن المهارة أن النتيجة تتبع قواعد ShadCN وتناسب الطريقة التي يعمل بها مشروعك بالفعل.
00:04:20الفائدة بسيطة.
00:04:21أنت تحصل على مخرجات نظيفة من المرة الأولى بدلاً من الاضطرار للعودة وإصلاح نفس الأخطاء مراراً وتكراراً.
00:04:26الثاني هو ShadCN MCP.
00:04:29إنه في الأساس اتصال مباشر بسجل ShadCN
00:04:32الذي يسمح للنموذج بتصفح وسحب مكونات حقيقية مباشرة إلى مشروعك.
00:04:36الآن قد تفكر،
00:04:37لماذا تستخدم المهارة إذا كان MCP موجوداً بالفعل ويمنحك المكونات التي تحتاجها؟
00:04:41الجواب هو أن المهارة يتم تحميلها فقط عندما تكون مطلوبة بالفعل،
00:04:44بدلاً من أن تكون في نافذة السياق طوال الوقت مثل MCP.
00:04:48مهارة ShadCN تمنح وكيل الترميز القواعد،
00:04:50الأنماط والسياق حول مشروعك.
00:04:53معاً، تمنحها القدرة على استخدام المكونات بشكل صحيح.
00:04:56مع تطبيق عادي، تقوم ببنائه مكوناً تلو الآخر وهذا النهج يعمل بشكل جيد.
00:05:00لذا قد تتوقع أن ينتقل ذلك مباشرة إلى لوحة التحكم.
00:05:03وهو يفعل ذلك جزئياً.
00:05:04لكن لوحات التحكم لها مشكلة جوهرية مختلفة عن التطبيقات العادية.
00:05:07الأمر يتعلق أقل بالحفاظ على اتساق المكونات وأكثر بكيفية ترتيب كل المعلومات
00:05:12على الشاشة.
00:05:12وهذا يعني معرفة كيفية تجميع البيانات ومقدار ما يمكن أن يوجد على شاشة واحدة قبل أن تصبح مزدحمة جداً.
00:05:17لذا هناك مهارة منفصلة تسمى “لوحة التحكم” مصممة فقط لذلك.
00:05:21ليست من ShadCN، ولكن من مطور آخر.
00:05:23وهي تركز النموذج على ذلك الترتيب بالضبط.
00:05:26ولأنها تتفكر في ذلك الترتيب أولاً، فإن النتيجة تبدو في الواقع كأداة تحليل حقيقية
00:05:30بدلاً من كونها مزدحمة.
00:05:33UIUX Pro Max يعمل بشكل مختلف عن كل شيء حتى الآن.
00:05:36معظم المهارات تعطي النموذج بعض مبادئ التصميم وتثق به لتطبيقها.
00:05:40لكن هذه المهارة تشغل محركاً فعلياً أولاً.
00:05:43المشكلة التي بنيت حولها هي أنه حتى مع التوجيه الجيد ومجموعة صلبة من المكونات،
00:05:47لا يزال يتعين على النموذج أن يقرر أي نوع من خيارات التصميم يناسب منتجك.
00:05:51معظم المهارات تعامل التصميم كفكرة عامة واحدة عن الجودة.
00:05:54لذا ينجرف كل شيء نحو نفس المظهر بغض النظر عما تبنيه.
00:05:58وهذه هي الفجوة التي تغلقها هذه المهارة.
00:06:00عندما تطلب منه بناء شيء ما، فإنه لا يقفز مباشرة إلى الكود.
00:06:03إنه يشغل محركاً أولاً.
00:06:04خلف الكواليس، يقوم هذا المحرك بإطلاق خمس عمليات بحث في وقت واحد عبر قاعدة بياناته مفتوحة المصدر
00:06:09على موقع غيت هاب.
00:06:11إنه يسحب الأنماط التي تناسب منتجك من 161 فئة صناعية.
00:06:15ومن بين هذه الخيارات، يختار لوحة ألوان، وتنسيق خطوط، وتخطيط صفحة يناسب فعلياً
00:06:20الصناعة التي تبني من أجلها.
00:06:22ثم يقوم بتصفية أي شيء قد يبدو خاطئاً لهذا النوع من المنتجات ويسلم
00:06:26النموذج نظام تصميم مخصصاً، وهو أساساً كتاب القواعد الكامل الذي يتبعه النموذج لـ
00:06:31بناء الموقع.
00:06:32لذا تحصل على موقع ويب قوي حقاً حيث يطابق كل سمة تصميم مع فكرة موقعك.
00:06:37بدلاً من أن يخترع النموذج تصميماً ويأمل أن ينجح، فهو يبني من
00:06:41تصميم تم التفكير فيه فعلياً لحالة استخدامك الدقيقة.
00:06:44هذه المهارة مختلفة حقاً عن غيرها.
00:06:46المهارات الأخرى تمنح النموذج ذوقاً أفضل، بينما هذه تمنحه قراراً قبل أن يبدأ،
00:06:50مضبوطاً لنوع المنتج الذي تقوم بتصنيعه بالفعل.
00:06:53ولكن قبل أن نمضي قدماً، لنستمع إلى كلمة من راعينا، SciSpace.
00:06:56إذا كنت تقوم بأي نوع من البحث، فمن المحتمل أنك استخدمت ChatGPT لذلك.
00:07:00المشكلة هي أنه يخترع بثقة اقتباسات وأوراقاً لا وجود لها حتى،
00:07:04وعادة لا تكتشف ذلك إلا بعد أن يكون ذلك الاقتباس المزيف موجوداً بالفعل في ورقتك.
00:07:08SciSpace يحل ذلك، والآن يعيش مباشرة داخل ChatGPT.
00:07:12لاختباره، فتحت SciSpace، وانتقلت إلى ملف التعريف الخاص بي، واخترت تطبيق ChatGPT من هناك لـ
00:07:17ربط SciSpace.
00:07:18طلبت مراجعة أدبية، وقام ChatGPT بسحب دراسات ذات صلة من مكتبة SciSpace التي تضم أكثر من 280
00:07:24مليون ورقة حقيقية.
00:07:25كما قام بتلخيصها وقدم لي اقتباسات حقيقية قابلة للنقر بدلاً من الهلوسة.
00:07:30وكل اقتباس يرتبط مباشرة بالمصدر.
00:07:33لذا يمكنك فتح الورقة والتحقق من السطر الدقيق بنفسك بنقرة واحدة.
00:07:37في اختبارات مباشرة، حتى أنه أظهر أوراقاً أكثر صلة من أدوات مثل Elicit و ConsenSys.
00:07:42لذا إذا كنت طالباً أو باحثاً، قم بربط تطبيق SciSpace داخل ChatGPT باستخدام الرابط الأول
00:07:48في الوصف وابدأ في الحصول على أبحاث يمكنك أخيراً الوثوق بها.
00:07:52حتى الآن، كل ما أضفناه يجعل الموقع يبدو صحيحاً وهو ثابت في مكانه.
00:07:56لكن الصفحة الثابتة لا تأخذك بعيداً.
00:07:58الرسوم المتحركة مهمة في الواقع لأنها تحسن تجربة المستخدم وتزيد من مدة
00:08:04بقاء الأشخاص على الموقع. لكن المشكلة هي أن الرسوم المتحركة هي المكان الذي ينهار فيه الكود الذي يتم إنشاؤه بواسطة الذكاء الاصطناعي.
00:08:09المشكلة الفعلية هي أنه عندما تطلب من نموذج إضافة رسوم متحركة، فإنه يقوم دائماً بنفس
00:08:15الشيء تماماً حيث تنزلق الأشياء إلى العرض أثناء التمرير لأسفل الصفحة. ذلك الكشف بالتمرير هو أساساً
00:08:20الحركة الوحيدة التي يعرفها. لكنها أيضاً نفس الرسوم المتحركة الموجودة على نصف المواقع التي تم إنشاؤها بالذكاء الاصطناعي هناك،
00:08:25وهي لا تقترب حتى مما يمكن أن تفعله الحركة الحقيقية.
00:08:27وهنا يأتي دور مهارة GSAP. GSAP هي مكتبة الرسوم المتحركة التي تعمل عليها الكثير من المواقع
00:08:32الاحترافية بالفعل، وتأتي هذه المهارة مباشرة من الفريق الذي يبنيها. لذا بدلاً من أن
00:08:37يخمن النموذج كيفية عملها، فهو يعمل من الأنماط الصحيحة، ويغطي كل شيء من
00:08:42الحركة الأساسية إلى الرسوم المتحركة الأكبر التي يتم تشغيلها أثناء التمرير لأسفل الصفحة. كما أنها تتعامل مع
00:08:47جانب الأداء، وهو الجزء الذي يستهين به معظم الناس. أحد الأسباب الرئيسية لشعور رسوم الذكاء الاصطناعي
00:08:52بأنها متقطعة هو أن النموذج يحرك الأشياء عن طريق تغيير حجمها أو موقعها، وتلك التغييرات تجبر
00:08:57المتصفح على إعادة بناء الصفحة بأكملها في كل إطار. لذا توجه المهارة النموذج نحو
00:09:02نوع الحركة التي يمكن للمتصفح التعامل معها بسهولة، وهذه العادة وحدها هي التي تحافظ على سلاسة الرسوم المتحركة
00:09:07GSAP في أفضل حالاتها على الصفحات المقصودة ورواية القصص المعتمدة على التمرير، حيث يتم الكشف عن كل شيء
00:09:12كقصة، بحيث تصل التفاصيل المهمة إلى المشاهد، وهذا ما يأخذ
00:09:16موقعك من صفحة ثابتة إلى صفحة ديناميكية. ولهذا السبب في نظام تصميم AI Labs، قمنا صراحةً
00:09:22بالذكر في مهارة واجهة التسويق أنه كلما كانت هناك حاجة إلى رسوم متحركة، يجب استخدام مهارة GSAP
00:09:27لتنفيذ تلك الرسوم المتحركة على الصفحات المقصودة. هذه المجموعة التالية من المهارات ليست للأنظمة
00:09:33الكاملة. إنها إعدادات مسبقة للذوق تسقطها لدفع النموذج نحو مظهر معين من اختيارك.
00:09:38أولاً هناك واجهة المستخدم البسيطة. إنه نوع التصميم حيث بدلاً من حشر الكثير على
00:09:43الصفحة، تحافظ على الأشياء بسيطة ومفتوحة. هي التي تلجأ إليها في الصحف أو مواقع المدونات حيث تريد للمحتوى
00:09:49أن يتنفس بدلاً من أن يتصارع كل شيء لجذب الانتباه. على الجانب المعاكس تماماً هناك
00:09:54مهارة واجهة المستخدم الصناعية الوحشية التي تتجه نحو الخام والثقيل مع ذلك الأسلوب المضاد للشركات. ثم هناك
00:09:59واجهة المستخدم UX الأمامية، أداة شاملة للإعدادات الافتراضية القوية عندما لا تريد أي شيء متطرف. إنه
00:10:05الخيار الآمن لمنتج أو صفحة مقصودة لعمل تجاري تحتاج فقط إلى أن تبدو نظيفة واحترافية. وبعد ذلك
00:10:10هناك مهارة واجهة المستخدم الأمامية المميزة التي تجعل المواقع تبدو مثل صفحات مقصودة لعلامات تجارية للأزياء الفاخرة.
00:10:16لذا لا تكدس كل هذه معاً في وقت واحد. بدلاً من ذلك، تختار المهارة التي تطابق الأجواء التي تسعى إليها
00:10:21وتدعها توجه التصميم. لذا إذا كان لديك بالفعل اتجاه في رأسك، فهذه هي أسرع
00:10:25طريقة لتسليمها مباشرة للنموذج. بحلول هذه المرحلة يمكنك بناء موقع منظم جيداً،
00:10:30يتحرك بشكل جيد وله أسلوب حقيقي. لكن المواقع ذات الجودة الاحترافية تحتاج إلى أكثر من مجرد رسوم متحركة. بالنسبة
00:10:36للتطبيقات الاحترافية تحتاج إلى صور ومرئيات فيديو حقيقية. النماذج بمفردها تلتقط في الغالب صوراً للمخزون
00:10:41من الإنترنت ومعظم الوقت لا تطابق فعلياً ما تحتاجه. Higgs field هو
00:10:46ما نستخدمه لتجاوز ذلك. فهو يوصل توليد الصور والفيديو مباشرة إلى وكيلك بحيث يمكنك الطلب
00:10:51للحصول على صورة رئيسية أو مقطع خلفية مباشرة حيث تعمل دون مغادرة المحطة الطرفية.
00:10:56و Higgs field ليس مرتبطاً بنموذج واحد. لديه معظم نماذج الصور والفيديو الجيدة لذا لست
00:11:01عالقة مع نقاط قوة نموذج واحد فقط ويمكنك استخدام أي نموذج يناسبك. إذا كنت تقوم بتصوير فيديو،
00:11:06Cdance هو النموذج الذي يستحق الاستخدام لأنه أحد أفضل نماذج توليد الفيديو حالياً لذا تحصل على
00:11:12مرئيات حقيقية بدلاً من نص ثابت أو مربعات رمادية نائبة على موقعك. المهارات السابقة
00:11:17كانت كلها للويب. الآن سنغطي مهارات الهاتف المحمول حيث تنهار الكثير من واجهات المستخدم التي تم إنشاؤها بالذكاء الاصطناعي بهدوء
00:11:23لسبب بسيط. تميل النماذج إلى معاملة الهاتف كموقع ويب صغير، آخذة نفس عادات الويب
00:11:29وتقلصها. لكن الهاتف المحمول ليس ويب أصغر. إنه شيء خاص به مع قواعده الخاصة. الطريقة
00:11:35التي يحمل بها الناس الهاتف حيث يمكن لإبهامهم الوصول فعلياً، وكيف يجب أن يعمل التنقل، كلها مختلفة
00:11:40وكل منصة لها لغة تصميم خاصة بها والتي لا يتبعها النموذج عادة بشكل صحيح. هناك
00:11:45مهارات متعددة لتحسين تطوير الهاتف المحمول أيضاً. الأولى هي تصميم واجهة تطبيقات الهاتف المحمول، طبقة المبادئ.
00:11:51بمفردها، يتعامل النموذج مع قواعد التصميم الجيد للهاتف المحمول بمرونة كبيرة لكن هذه المهارة
00:11:56تخبزها فيها مباشرة. ذلك يغطي أشياء مثل منطقة الإبهام التي تبقي الأزرار الرئيسية حيث
00:12:01يمكن لإبهامك الوصول فعلياً جنباً إلى جنب مع التباعد المتسق ومجموعة محدودة ونظيفة من أحجام الخطوط بدلاً من 10
00:12:06مختلفة. وهذه هي أساساً نفس القواعد وراء التطبيقات الشهيرة مثل Airbnb، وDuolingo،
00:12:11وSpotify. لذا ينتهي الأمر بالنموذج بالتصميم بهذا الحس بدلاً من التخمين فيه. الثانية هي
00:12:16Material 3 وهي أساساً نسخة الهاتف المحمول مما فعله Shad CN للويب. إنها تمنح النموذج
00:12:21نظام تصميم جوجل الفعلي، ذلك الذي يقف وراء معظم تطبيقات Android و Pixel. لغة تصميم جوجل لها شخصية
00:12:27حقيقية. إنها جريئة وملونة مع أشكال كبيرة مستديرة وحركة نابضة تجلس في النهاية الأكثر
00:12:33تعبيرية من تصميم الهاتف المحمول. المهارة تجلب النظام الكامل للمكونات والألوان لذا تسلمها
00:12:38لوناً واحداً وهي تبني سمة متطابقة كاملة. حتى أنها تتحقق من مدى قرب تطبيقك من اتباع إرشادات جوجل
00:12:43لذا التطبيق الذي تبنيه يطابق نظام التصميم بالضبط. ولكن إذا كنت تبني بشكل كامل
00:12:48بشكل أصلي على iPhone، يمكنك استخدام مهارات Swift UI. تصميم أبل يجلس في الطرف المعاكس من جوجل.
00:12:53حيث المادة جريئة وملونة، أبل أكثر تحفظاً وتعتمد على ذلك المظهر الشفاف،
00:12:58الزجاجي الذي تسميه الآن الزجاج السائل. المهارة تسحب وثائق أبل الخاصة مباشرة من
00:13:04Xcode على جهاز Mac الخاص بك وتسلمها للنموذج كقواعد. لذا النموذج لا يخمن ما يجب أن
00:13:09يشعر به تطبيق أبل، إنه يعمل من توجيهات أبل الفعلية. وبدلاً من شيء يبدو فقط
00:13:14تقريباً مثل تطبيق iPhone، تحصل فعلياً على تطبيق يبدو أصلياً. وإذا كنت تبني لـ
00:13:18iPhone و Android في نفس الوقت، هناك مهارة Expo الرسمية. Expo هو إطار عمل لـ
00:13:23صنع تطبيق واحد يعمل على كل من Android و iOS. لذا لست تبني نفس التطبيق مرتين. إنها تغطي
00:13:29كل ما تحتاجه لتطبيق حقيقي يعمل على كليهما، من التنقل والتصميم إلى ميزات النظام الأساسي
00:13:34كلها في مكان واحد. لذا سواء كنت تبني لمنصة واحدة أو كلتيهما في نفس الوقت، هناك مهارة
00:13:39تعرف حقاً المنطقة. الآن كل المهارات وسير العمل وكل شيء آخر نبنيه ونعرضه
00:13:43لكم في هذه الفيديوهات يمكن العثور عليه في AI Labs Pro، وهو مجتمعنا. هناك ستحصل على
00:13:48الموارد، وحزم المبتدئين والمزيد جنباً إلى جنب مع مكان للتفاعل مع مجموعة من المتشابهين في التفكير
00:13:53من المهووسين، بما في ذلك فريقنا. لذا إذا وجدت قيمة فيما نقوم به وتريد دعم القناة،
00:13:58هذه هي أفضل طريقة للقيام بذلك. الرابط موجود في الوصف. هذا يقودنا إلى نهاية هذا
00:14:02الفيديو. إذا كنت تود دعم القناة ومساعدتنا في الاستمرار في صنع فيديوهات كهذه، يمكنك القيام بذلك من خلال
00:14:07استخدام زر الشكر الفائق أدناه. كما هو الحال دائماً، شكراً للمشاهدة وسأراكم في الفيديو القادم.

핵심 요약

يؤدي دمج مهارات التصميم التخصصية مثل Anthropic وShadCN وGSAP إلى تحويل مخرجات الذكاء الاصطناعي من تصاميم عامة متشابهة إلى تطبيقات ويب وموبايل ذات جودة احترافية.

하이라이트

  • تتجاوز مهارة التصميم الأمامي من Anthropic النماذج الافتراضية عبر إجبار الذكاء الاصطناعي على الالتزام باتجاه تصميمي محدد قبل بدء البرمجة.

  • تتيح مكتبة ShadCN للنماذج سحب مكونات واجهة مستخدم جاهزة بجودة احترافية بدلاً من بنائها يدوياً، مما يضمن اتساق المنتج النهائي.

  • يستخدم محرك UIUX Pro Max خمس عمليات بحث متزامنة عبر GitHub لسحب أنماط تصميمية من 161 فئة صناعية قبل توليد الكود.

  • تعالج مهارة GSAP مشاكل الأداء في الرسوم المتحركة عبر توجيه النماذج لاستخدام تحركات يسهل على المتصفحات معالجتها بسلاسة.

  • تتطلب تطبيقات الهواتف المحمولة مهارات متخصصة مثل Material 3 للأندرويد وSwift UI للآيفون لتجاوز الأخطاء الناتجة عن معاملة الهاتف كموقع ويب مصغر.

  • يربط تطبيق SciSpace داخل ChatGPT أكثر من 280 مليون ورقة بحثية حقيقية لتقديم مراجعات أدبية موثقة ومدعومة باقتباسات قابلة للتحقق.

타임라인

تجاوز النمطية في تصميم الصفحات المقصودة

  • تعتمد النماذج افتراضياً على الخيارات الأكثر شيوعاً مما يؤدي لتشابه التصاميم.
  • تفرض مهارة التصميم الأمامي من Anthropic اتجاهاً تصميمياً ثابتاً لمنع الانجراف نحو التنسيقات المكررة.

تتجنب هذه المهارة استخدام الخطوط والتدرجات الأرجوانية المفرطة في الاستخدام عبر ورقة تعليمات (skill.md) تمنع النموذج من اختيار الحلول الآمنة. يساعد هذا النهج في بناء صفحات مقصودة ومحافظ أعمال تبرز كمنتج فريد بدلاً من مجرد مخرجات عامة للذكاء الاصطناعي.

استخدام مكتبات المكونات الجاهزة لبناء التطبيقات

  • توفر مكتبة ShadCN مكونات مبنية مسبقاً وفق معايير احترافية.
  • تقلل هذه المكتبة من الأخطاء البرمجية عبر تجنب بناء المكونات من الصفر.

يتم دمج قواعد ShadCN ضمن مشروعك لضمان توافق النتيجة مع معايير احترافية. يعمل نظام ShadCN MCP كجسر يسمح للنموذج بسحب مكونات حقيقية مباشرة إلى المشروع، مما يوفر الوقت في إصلاح الأخطاء البرمجية ويجعل المنتج يبدو جاهزاً للشحن فوراً.

تخصيص التصميم عبر محركات البحث الصناعية

  • يستخدم محرك UIUX Pro Max بيانات من GitHub لتحديد أنماط تصميم مناسبة للصناعة.
  • يساهم SciSpace في تحسين البحث العلمي عبر ChatGPT بتقديم اقتباسات حقيقية موثقة.

يتجاوز محرك UIUX Pro Max المفاهيم العامة للجودة عبر إجراء بحث فعلي في 161 فئة صناعية لتوليد لوحات ألوان وتنسيقات تناسب نوع المنتج بدقة. في سياق منفصل، يحل SciSpace مشكلة هلوسة الذكاء الاصطناعي في المراجع البحثية عبر الربط المباشر بـ 280 مليون ورقة أكاديمية.

تحسين الرسوم المتحركة والأداء

  • تمنع مهارة GSAP التقطع في الرسوم المتحركة عبر تحسين أداء المتصفح.
  • تتجاوز مهارة Higgs field الصور المخزنة عبر توليد مرئيات فيديو وصور مخصصة.

تتجنب المهارات المتقدمة في الرسوم المتحركة تغيير الموقع أو الحجم بشكل يؤدي لإعادة بناء الصفحة، مما يضمن سلاسة الحركة. كما يوفر دمج نماذج الفيديو المتخصصة عبر Higgs field إمكانية الحصول على مرئيات فريدة تتناسب مع المحتوى بدلاً من الصور النائبة التقليدية.

تطوير واجهات الهواتف المحمولة

  • تتطلب الهواتف المحمولة لغات تصميم خاصة مثل Material 3 وSwift UI.
  • تعمل إطارات العمل مثل Expo على توحيد التطوير لأنظمة iOS وAndroid.

لا يجب معاملة الهاتف كموقع ويب مصغر، حيث تتطلب واجهات الموبايل مراعاة مناطق وصول الإبهام ولغة التصميم الخاصة بالمنصة. تقدم المهارات المتخصصة قواعد فعلية من Apple أو Google لضمان أن تبدو التطبيقات أصلية (Native) وتعمل بسلاسة عبر مختلف الأنظمة.

커뮤니티 글

모든 글 보기