تسليم التصميم

# /design-handoff

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

إنشاء وثائق تسليم شاملة للمطورين من التصميم.

## الاستخدام

``` /design-handoff $ARGUMENTS ```

إنشاء مواصفات التسليم لـ: @$1

إذا تم توفير رابط Figma، استخرج التصميم من Figma. وإلا، اعمل من الوصف أو لقطة الشاشة المقدمة.

## ما يجب إدراجه

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

### مواصفات التفاعل - سلوك النقر/الضغط - حالات المؤشر (Hover) - الانتقالات والرسوم المتحركة (المدة والدالة الرياضية) - دعم الإيماءات (التمرير والضغط والضغط المطول)

### مواصفات المحتوى - حدود الأحرف - سلوك القطع - الحالات الفارغة - حالات التحميل - حالات الخطأ

### الحالات الحدية - الحد الأدنى/الأقصى للمحتوى - النصوص الدولية (السلاسل الأطول) - الاتصالات البطيئة - البيانات المفقودة

### إمكانية الوصول - ترتيب التركيز - تسميات ARIA والأدوار - التفاعلات عبر لوحة المفاتيح - إعلانات قارئ الشاشة

## المبادئ

1. **عدم الافتراض** — إذا لم يتم تحديده، سيخمن المطور. حدد كل شيء. 2. **استخدام الرموز وليس القيم** — أرجع إلى `spacing-md` وليس `16px`. 3. **إظهار جميع الحالات** — الافتراضية والمؤشر والنشطة والمعطلة والتحميل والخطأ والفارغة. 4. **شرح السبب** — "يتم طيها على الجوال لأن المستخدمين يستخدمونها بيد واحدة في الغالب" يساعد المطورين على اتخاذ قرارات جيدة.

## المخرجات

```markdown ## مواصفات التسليم: [اسم الميزة/الشاشة]

### نظرة عامة [ما تفعله هذه الشاشة/الميزة، سياق المستخدم]

### التخطيط [نظام الشبكة، نقاط التوقف، السلوك المتجاوب]

### رموز التصميم المستخدمة | الرمز | القيمة | الاستخدام | |-------|--------|----------| | `color-primary` | #[hex] | أزرار CTA والروابط | | `spacing-md` | [X]px | بين الأقسام | | `font-heading-lg` | [الحجم/الوزن/العائلة] | عنوان الصفحة |

### المكونات | المكون | المتغير | الخصائص | الملاحظات | |--------|---------|---------|----------| | [المكون] | [المتغير] | [الخصائص] | [السلوك الخاص] |

### الحالات والتفاعلات | العنصر | الحالة | السلوك | |--------|--------|--------| | [زر CTA] | المؤشر | [تغميق الخلفية 10%] | | [زر CTA] | التحميل | [مؤشر دوار، معطل] | | [النموذج] | الخطأ | [حد أحمر، رسالة خطأ أدناه] |

### السلوك المتجاوب | نقطة التوقف | التغييرات | |------------|----------| | سطح المكتب (>1024px) | [التخطيط الافتراضي] | | الجهاز اللوحي (768-1024px) | [ما الذي يتغير] | | الجوال (<768px) | [ما الذي يتغير] |

### الحالات الحدية - **الحالة الفارغة**: [ما يجب عرضه عند عدم وجود بيانات] - **النص الطويل**: [قواعد القطع] - **التحميل**: [هيكل عظمي أو مؤشر دوار] - **الخطأ**: [مظهر حالة الخطأ]

### الرسوم المتحركة/الحركة | العنصر | المحفز | الرسم المتحرك | المدة | الدالة الرياضية | |--------|--------|---------|--------|----------| | [العنصر] | [المحفز] | [الوصف] | [ms] | [الدالة] |

### ملاحظات إمكانية الوصول - [ترتيب التركيز] - [تسميات ARIA المطلوبة] - [التفاعلات عبر لوحة المفاتيح] ```

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

إذا تم توصيل **أداة التصميم**: - استخرج القياسات الدقيقة والرموز ومواصفات المكونات من Figma - صدر الموارد وأنشئ ورقة مواصفات كاملة

إذا تم توصيل **متتبع المشروع**: - ربط التسليم بتذكرة التطبيق - إنشاء مهام فرعية لكل قسم من المواصفات

## نصائح

1. **شارك رابط Figma** — يمكنني استخراج القياسات الدقيقة والرموز ومعلومات المكونات. 2. **ذكر الحالات الحدية** — "ماذا يحدث مع 100 عنصر؟" يساعدني في تحديد شروط الحدود. 3. **حدد مكدس التكنولوجيا** — "نستخدم React + Tailwind" يساعدني في تقديم ملاحظات تطبيق ذات صلة.