نظام التصميم

# /نظام التصميم

> إذا رأيت عناصر نائبة غير مألوفة أو احتجت للتحقق من الأدوات المتصلة، انظر إلى [CONNECTORS.md](../../CONNECTORS.md).

أدِر نظام التصميم الخاص بك — قيّم التناسق، وثّق المكونات، أو صمم أنماطاً جديدة.

## الاستخدام

``` /design-system audit # تدقيق النظام الكامل /design-system document [component] # توثيق مكون /design-system extend [pattern] # تصميم مكون أو نمط جديد ```

## مكونات نظام التصميم

### رموز التصميم قيم ذرية تعرّف لغة النظام البصرية: - الألوان (العلامة التجارية، الدلالية، المحايدة) - طباعة النصوص (المقياس، الأوزان، ارتفاعات الأسطر) - المسافات البيضاء (المقياس، حشوة المكونات) - الحدود (الزوايا، العروض) - الظلال (مستويات الارتفاع) - الحركة (المدد الزمنية، منحنيات التخفيف)

### المكونات عناصر واجهة مستخدم قابلة لإعادة الاستخدام مع تحديدات: - المتغيرات (أساسي، ثانوي، شبح) - الحالات (افتراضي، تمرير الفأرة، نشط، معطّل، جاري التحميل، خطأ) - الأحجام (صغير، متوسط، كبير) - السلوك (التفاعلات، الحركات) - إمكانية الوصول (ARIA، لوحة المفاتيح)

### الأنماط حلول واجهة مستخدم شائعة تجمع بين المكونات: - النماذج (مجموعات الإدخال، التحقق، الإرسال) - الملاحة (الشريط الجانبي، الألسنة، الفتات) - عرض البيانات (الجداول، البطاقات، القوائم) - التغذية الراجعة (إشعارات، مربعات حوار، رسائل مضمنة)

## المبادئ

1. **التناسق على الابتكار** — النظام موجود لكي لا تعيد الفرق اختراع العجلة 2. **المرونة ضمن قيود** — يجب أن تكون المكونات قابلة للتركيب، وليس جامدة 3. **وثّق كل شيء** — إذا لم يتم توثيق شيء ما، فإنه لا يوجد 4. **الإصدار والترحيل** — التغييرات الجوهرية تحتاج مسارات ترحيل

## النتيجة — التدقيق

```markdown ## تدقيق نظام التصميم

### الملخص **المكونات المراجعة:** [X] | **المشاكل المكتشفة:** [X] | **النقاط:** [X/100]

### تناسق التسمية | المشكلة | المكونات | التوصية | |--------|----------|---------| | [تسمية غير متسقة] | [القائمة] | [المعيار المراد تبنيه] |

### تغطية الرموز | الفئة | محددة | قيم مُرمزة موجودة | |-------|-------|-------------------| | الألوان | [X] | [X] حالات من الألوان السادسة عشرية المُرمزة | | المسافات البيضاء | [X] | [X] حالات من القيم العشوائية | | طباعة النصوص | [X] | [X] حالات من الخطوط/الأحجام المخصصة |

### اكتمال المكون | المكون | الحالات | المتغيرات | التوثيق | النقاط | |-------|---------|-----------|---------|---------| | Button | ✅ | ✅ | ⚠️ | 8/10 | | Input | ✅ | ⚠️ | ❌ | 5/10 |

### الإجراءات ذات الأولوية 1. [التحسين الأكثر تأثيراً] 2. [الأولوية الثانية] 3. [الأولوية الثالثة] ```

## النتيجة — التوثيق

```markdown ## المكون: [الاسم]

### الوصف [ما هذا المكون وموعد استخدامه]

### المتغيرات | المتغير | متى يُستخدم | |--------|-----------| | [أساسي] | [الإجراءات الرئيسية] | | [ثانوي] | [الإجراءات الداعمة] |

### الخصائص / الإعدادات | الخاصية | النوع | القيمة الافتراضية | الوصف | |--------|-------|-----------------|-------| | [الخاصية] | [النوع] | [القيمة الافتراضية] | [الوصف] |

### الحالات | الحالة | المظهر | السلوك | |-------|--------|--------| | افتراضي | [الوصف] | — | | تمرير الفأرة | [الوصف] | [التفاعل] | | نشط | [الوصف] | [التفاعل] | | معطّل | [الوصف] | غير تفاعلي | | جاري التحميل | [الوصف] | [الحركة] |

### إمكانية الوصول - **الدور**: [دور ARIA] - **لوحة المفاتيح**: [سلوك Tab وEnter وEscape] - **قارئ الشاشة**: [معلن باسم...]

### يُفضّل وتجنّب | ✅ يُفضّل | ❌ تجنّب | |---------|---------| | [أفضل ممارسة] | [نمط معاكس] |

### مثال برمجي [مقطع كود مناسب للإطار العمل] ```

## النتيجة — التوسيع

```markdown ## مكون جديد: [الاسم]

### المشكلة [احتياج المستخدم أو الفجوة التي يعالجها هذا المكون]

### الأنماط الموجودة | المكون ذي الصلة | التشابه | لماذا لا يكفي | |----------------|--------|--------------| | [المكون] | [ما المشترك] | [ما الناقص] |

### التصميم المقترح

#### API / الخصائص | الخاصية | النوع | القيمة الافتراضية | الوصف | |--------|-------|-----------------|-------| | [الخاصية] | [النوع] | [القيمة الافتراضية] | [الوصف] |

#### المتغيرات | المتغير | متى يُستخدم | المظهر | |--------|-----------|--------| | [المتغير] | [السيناريو] | [الوصف] |

#### الحالات | الحالة | السلوك | ملاحظات | |-------|--------|---------| | افتراضي | [الوصف] | — | | تمرير الفأرة | [الوصف] | [التفاعل] | | معطّل | [الوصف] | غير تفاعلي | | جاري التحميل | [الوصف] | [الحركة] |

#### الرموز المستخدمة - الألوان: [أي رموز] - المسافات البيضاء: [أي رموز] - طباعة النصوص: [أي رموز]

### إمكانية الوصول - **الدور**: [دور ARIA] - **لوحة المفاتيح**: [التفاعلات المتوقعة] - **قارئ الشاشة**: [معلن باسم...]

### أسئلة مفتوحة - [قرار يحتاج مراجعة تصميمية] - [حالة حدية للحل] ```

## إذا كانت الموصّلات متاحة

إذا كان **أداة التصميم** متصلة: - دقّق المكونات مباشرة في Figma — تحقق من التسمية والمتغيرات واستخدام الرموز - استخرج خصائص المكون وهيكل الطبقات للتوثيق

إذا كانت **قاعدة المعرفة** متصلة: - ابحث عن توثيق المكون الموجود وأدلة الاستخدام - انشر التوثيق المحدّث على محرر الويكي الخاص بك

## نصائح

1. **ابدأ بتدقيق** — اعرف أين أنت قبل تقرير إلى أين تريد الذهاب. 2. **وثّق أثناء سيرك**