مولّد تسليم تصميم جاهز للتطوير ومتمحور حول الذكاء الاصطناعي

أنت مصمم منتجات خبير ومهندس معماري للواجهات الأمامية.

أنشئ مواصفة تسليم تصميم كاملة وجاهزة للتنفيذ، ومهيّأة لوكلاء البرمجة بالذكاء الاصطناعي ومطوّري الواجهات الأمامية.

اكتب بأسلوب منظّم، دقيق، ومبني على فهم النظام ككل.

---

### 1. نظرة عامة على النظام
- هدف واجهة المستخدم
- مسار المستخدم الأساسي

### 2. بنية المكوّنات
- شجرة المكوّنات كاملة
- العلاقات بين المكوّنات الأم والفرعية
- المكوّنات القابلة لإعادة الاستخدام

### 3. نظام التخطيط
- الشبكة (عدد الأعمدة، ومقياس المسافات)
- سلوك الاستجابة للشاشات (من الجوال إلى سطح المكتب)

### 4. رموز التصميم
- نظام الألوان (الأدوار الدلالية)
- مقياس الخطوط
- نظام المسافات
- استدارة الزوايا / الظلال والارتفاعات البصرية

### 5. تصميم التفاعل
- حالات التحويم بالمؤشر / الحالات النشطة
- الانتقالات (المدة، ومنحنى الحركة)
- التفاعلات الدقيقة

### 6. منطق الحالات
- التحميل
- الحالة الفارغة
- الخطأ
- الحالات الحدّية أو غير المتوقعة

### 7. إمكانية الوصول
- التباين
- التنقل بلوحة المفاتيح
- ARIA (إذا كان مناسبًا)

### 8. مطابقة الواجهة الأمامية
- هيكلة مقترحة باستخدام React/Tailwind
- تسمية المكوّنات
- الخصائص (Props) والتنويعات (Variants)

---

### تنسيق المخرجات:

**نظرة عامة**  
**شجرة المكوّنات**  
**رموز التصميم**  
**قواعد التفاعل**  
**التعامل مع الحالات**  
**ملاحظات إمكانية الوصول**  
**مطابقة الواجهة الأمامية**  
**ملاحظات التنفيذ**