جاري التحميل...
جاري التحميل...
يحوّل هذا البرومبت فكرة واجهة المستخدم إلى مواصفة تسليم تصميم منظّمة وجاهزة للتنفيذ، مهيّأة لمطوّري الواجهات الأمامية ووكلاء البرمجة بالذكاء الاصطناعي.
أنت مصمم منتجات خبير ومهندس معماري للواجهات الأمامية. أنشئ مواصفة تسليم تصميم كاملة وجاهزة للتنفيذ، ومهيّأة لوكلاء البرمجة بالذكاء الاصطناعي ومطوّري الواجهات الأمامية. اكتب بأسلوب منظّم، دقيق، ومبني على فهم النظام ككل. --- ### 1. نظرة عامة على النظام - هدف واجهة المستخدم - مسار المستخدم الأساسي ### 2. بنية المكوّنات - شجرة المكوّنات كاملة - العلاقات بين المكوّنات الأم والفرعية - المكوّنات القابلة لإعادة الاستخدام ### 3. نظام التخطيط - الشبكة (عدد الأعمدة، ومقياس المسافات) - سلوك الاستجابة للشاشات (من الجوال إلى سطح المكتب) ### 4. رموز التصميم - نظام الألوان (الأدوار الدلالية) - مقياس الخطوط - نظام المسافات - استدارة الزوايا / الظلال والارتفاعات البصرية ### 5. تصميم التفاعل - حالات التحويم بالمؤشر / الحالات النشطة - الانتقالات (المدة، ومنحنى الحركة) - التفاعلات الدقيقة ### 6. منطق الحالات - التحميل - الحالة الفارغة - الخطأ - الحالات الحدّية أو غير المتوقعة ### 7. إمكانية الوصول - التباين - التنقل بلوحة المفاتيح - ARIA (إذا كان مناسبًا) ### 8. مطابقة الواجهة الأمامية - هيكلة مقترحة باستخدام React/Tailwind - تسمية المكوّنات - الخصائص (Props) والتنويعات (Variants) --- ### تنسيق المخرجات: **نظرة عامة** **شجرة المكوّنات** **رموز التصميم** **قواعد التفاعل** **التعامل مع الحالات** **ملاحظات إمكانية الوصول** **مطابقة الواجهة الأمامية** **ملاحظات التنفيذ**
يحوّل أي فكرة إلى نظام واجهات نظيف وفاخر مستوحى من Apple، بمنهجية تصميم منضبطة وبنية جاهزة للتنفيذ. يركّز على التخطيط الدقيق، المسافات المقصودة، التسلسل الطباعي، والتفاعلات الهادئة لتقديم واجهات راقية وقابلة للتطبيق.
يحلّل أداء الموقع المبني ويقدّم توصيات عملية لتحسين السرعة وتجربة الاستخدام. لا يكتفي بتشغيل Lighthouse؛ بل يفسّر النتائج، يرتّب الإصلاحات حسب الأثر مقابل الجهد، ويقدّم حلولًا جاهزة يتواصل بها المصمم بوضوح مع المطورين.
يفكّك أي واجهة أو صفحة هبوط لكشف أسباب نجاحها في التحويل أو تعثّرها، عبر تحليل سلوكي وتجربة مستخدم دقيق يحوّل الانطباع العام إلى أسباب عملية واضحة.
يفحص التنفيذ مقابل مواصفات التصميم عبر المتصفحات والأجهزة والحالات الحدّية. هذا QA بصري من منظور المصمم، وليس اختبارًا وظيفيًا؛ يركز على دقة الواجهة وجودة التفاعل، ويقدّم ملاحظات مصنّفة بخطوات إعادة إنتاج واقتراحات إصلاح.
ينشئ مستند تسليم تصميم يوجّه وكلاء البرمجة بالذكاء الاصطناعي بمواصفات قابلة للتنفيذ والمعالجة آليًا، بلا غموض: كل قيمة صريحة، كل حالة معرّفة، وكل حالة حدّية لها قاعدة.
يكشف هذا البرومبت عدم الاتساق وديون التصميم لتثبيت أنظمة واجهة المستخدم وتوسيعها بثقة. ⚡ نصيحة: شغّله قبل توسيع فريق الواجهة الأمامية لتفادي تضاعف الفوضى.
استخدم هذا الموجّه دوريًا (شهريًا أو بعد إضافة ميزات كبيرة) لإبقاء CLAUDE.md متزامنًا مع الكود الفعلي. يقارن بين نظام التصميم الموثّق والكود الحالي ويحدد أي انحرافات.
يحوّل تدقيق JSON الخام من المرحلة الأولى إلى نظام توكنز منظّم ومسمّى بهرمية واضحة (أولي → دلالي → مكوّن). هنا نرتّب فوضى الكود إلى لغة تصميم محكمة، مع تحديد ما يلزم إعادة تسميته أو دمجه أو إيقافه.
صمّم صفحة لاختبار ميزات Enterprise WeChat/DingTalk تركّز على إدارة دليل الموظفين وجهات الاتصال، والتقويم والجدولة، وإرسال الرسائل واستقبالها، بواجهة سهلة الاستخدام وأنيقة وذات طابع تقني عصري.
برومبت يضع أساس مشروع تصميم موقع ويب، ويوجّه النقاش الأولي حول الفكرة، التخطيط، الهوية البصرية، والتقنيات قبل كتابة أي كود.
يساعدك هذا البرومبت على بناء موقعك صفحةً صفحة بعد برومبت الانطلاقة الأولية.
يساعدك هذا الموجّه على مراجعة التصميم وصقله بعد كل تكرار، مع اقتراح تحسينات عملية وتنفيذها.