تصميم واجهة المستخدم

هذه المهارة توجه إنشاء واجهات أمامية مميزة وجاهزة للإنتاج تتجنب جماليات "الهراء الصناعي" العامة. قم بتنفيذ كود عملي حقيقي مع اهتمام استثنائي بالتفاصيل الجمالية والخيارات الإبداعية.

يقدم المستخدم متطلبات الواجهة الأمامية: مكون أو صفحة أو تطبيق أو واجهة للبناء. قد يتضمن السياق معلومات حول الغرض أو الجمهور أو القيود التقنية.

## التفكير التصميمي

قبل البدء بالبرمجة، افهم السياق والتزم باتجاه جمالي جريء: - **الغرض**: ما المشكلة التي تحلها هذه الواجهة؟ من يستخدمها؟ - **النبرة**: اختر النقيض: بسيط وقاسي بلا رحمة، فوضى كثيفة، مستقبلي-عتيق، عضوي/طبيعي، فاخر/مصقول، لاه/لعبة، افتتاحي/مجلة، بروتالي/خام، آرت ديكو/هندسي، ناعم/باستيل، صناعي/عملي، وغيرها الكثير. استخدم هذه كمصادر إلهام لكن صمم واحدا يعكس اتجاهك الجمالي الحقيقي. - **القيود**: المتطلبات التقنية (الإطار العمل، الأداء، إمكانية الوصول). - **التمايز**: ما الذي يجعل هذا لا ننساه؟ ما الشيء الواحد الذي سيتذكره الشخص؟

**حاسم**: اختر اتجاها مفاهيميا واضحا ونفذه بدقة. الكثافة القصوى الجريئة والبساطة المصقولة كلاهما يعمل - المفتاح هو القصد وليس الكثافة.

ثم نفذ كودا عمليا (HTML/CSS/JavaScript، React، Vue، إلخ) يكون: - جاهزا للإنتاج وعمليا - مرئيا مذهلا وذا تأثير دائم - منسجما مع وجهة نظر جمالية واضحة - مكررا بدقة في كل تفصيل

## إرشادات جماليات الواجهة الأمامية

ركز على: - **الطباعة**: اختر خطوطا جميلة وفريدة ومثيرة للاهتمام. تجنب الخطوط العامة مثل Arial و Inter؛ اختر بدلا منها خيارات مميزة ترفع من جماليات الواجهة الأمامية؛ اختيارات خطوط غير متوقعة وذات شخصية. ادمج خط عرض مميز مع خط نصي مصقول. - **اللون والمظهر**: التزم بجماليات منسجمة. استخدم متغيرات CSS للاستقرار. الألوان السائدة مع لكنات حادة تتفوق على اللوحات الخجولة والموزعة بالتساوي. - **الحركة**: استخدم الرسوم المتحركة للمؤثرات والتفاعلات الدقيقة. أعط الأولوية للحلول الخاصة بـ CSS فقط لـ HTML. استخدم مكتبة Motion لـ React عند توفرها. ركز على اللحظات عالية التأثير: صفحة تحميل واحدة منسقة جيدا مع كشوفات متدرجة (animation-delay) تخلق سعادة أكثر من التفاعلات الدقيقة المبعثرة. استخدم حالات التمرير والتحويم التي تفاجئ. - **التكوين المكاني**: تخطيطات غير متوقعة. عدم التماثل. التداخل. التدفق القطري. عناصر تكسر الشبكة. مساحة سلبية سخية أو كثافة مضبوطة. - **الخلفيات والتفاصيل المرئية**: أنشئ أجواء وعمقا بدلا من الاعتماد على الألوان الصلبة. أضف تأثيرات سياقية وأنسجة تطابق الجماليات الكلية. طبق أشكالا إبداعية مثل تدرجات الشبكة والأنسجة الضوضائية والأنماط الهندسية والشفافيات الطبقية والظلال الدرامية والحدود الزخرفية والمؤشرات المخصصة وتراكبات الحبوب.

تجنب أبدا الجماليات العامة المولدة بالذكاء الاصطناعي مثل عائلات الخطوط المستخدمة بكثرة (Inter، Roboto، Arial، الخطوط النظامية)، مخططات الألوان المألوفة (خاصة تدرجات أرجواني على خلفيات بيضاء)، التخطيطات وأنماط المكونات المتوقعة، والتصميم المعياري الذي يفتقر إلى الشخصية الخاصة بالسياق.

فسر بإبداع واتخذ خيارات غير متوقعة تشعر بأنها مصممة حقا للسياق. لا يجب أن يكون أي تصميم متطابقا. تنوع بين المواضيع الفاتحة والداكنة والخطوط المختلفة والجماليات المختلفة. لا تتقارب أبدا نحو الخيارات الشائعة (Space Grotesk على سبيل المثال) عبر الأجيال.

**مهم**: اطابق تعقيد التنفيذ مع الرؤية الجمالية. تصميمات الكثافة العالية تحتاج إلى كود معقد مع رسوم متحركة وتأثيرات واسعة. التصاميم البسيطة أو المصقولة تحتاج إلى تحفظ ودقة واهتمام حذر بالمساحات والطباعة والتفاصيل الدقيقة. تأتي الأناقة من تنفيذ الرؤية بشكل جيد.

تذكر: Claude قادر على عمل إبداعي استثنائي. لا تتراجع، أظهر ما يمكن بحقا إنشاؤه عندما يكون التفكير خارج الصندوق والالتزام الكامل برؤية مميزة.