# Design Mode (/ar/docs/verdent-manager/core-features/design-mode)

> استخدم موجزًا نصيًا لاختيار الاتجاه البصري أولًا، ثم قم ببناء تطبيق فعلي بناءً على ذلك الاتجاه المعتمد.



Design Mode هو مسار الإنشاء القائم على التصميم أولًا من Verdent للتطبيقات الجديدة ذات الواجهة المرئية. استخدمه عندما تكون لديك فكرة بالكلمات، لكن دون تصميم نهائي أو لقطة شاشة أو دليل أسلوب أو خطة صفحات كاملة حتى الآن.

بدلًا من الانتقال مباشرة إلى الكود، يساعدك Design Mode أولًا على تحديد الشكل والإحساس المطلوبين للمنتج، ثم يحوّل الاتجاه المعتمد إلى تطبيق فعلي.

## متى تستخدم Design Mode [#متى-تستخدم-design-mode]

استخدم Design Mode عندما ترغب في إنشاء واجهة مستخدم لمنتج جديد من موجز نصي، مثل:

* تطبيق متكامل (full-stack)
* واجهة أمامية لموقع ويب أو صفحة تعريفية (landing page)
* تطبيق للهاتف المحمول
* فكرة منتج من الصفر لم يُحدَّد اتجاهها البصري بعد

## متى تتجاوزه [#متى-تتجاوزه]

تجاوز Design Mode في الحالات التالية:

* المشروع أداة بسيطة بشاشة واحدة، مثل نموذج أساسي أو تطبيق تجريبي صغير جدًا
* لديك فعلًا موجز تصميم كامل مع اتجاه أسلوبي محدد ولوحة ألوان ونظام خطوط وقائمة صفحات أو شاشات
* لديك فعلًا ملفات تصميم أو نماذج أولية أو لقطات شاشة أو دليل أسلوب يجب اتباعه مباشرة
* ترغب صراحةً في تجاوز مرحلة التصميم والانتقال مباشرة إلى الكود

<Note>
  إذا كان موجزك محددًا بالفعل بشكل كافٍ، يمكن لـ Verdent استخدامه كاتجاه مختار والانتقال مباشرة إلى تخطيط الصفحات وأعمال البناء.
</Note>

## كيف يعمل Design Mode [#كيف-يعمل-design-mode]

<Steps>
  <Step title="وصف المنتج">
    ابدأ بموجز بلغة واضحة: ما الذي ترغب في بنائه، ولمن هو موجّه، وما الذي يجب أن يقوم به، وأي مرجعيات مزاجية أو أسلوبية تمتلكها بالفعل.
  </Step>

  <Step title="اختيار الاتجاه البصري">
    يستكشف Verdent اتجاهات تصميم متمايزة حتى تتمكن من اختيار الشكل والإحساس قبل كتابة أي كود.
  </Step>

  <Step title="تخطيط الصفحات أو الشاشات">
    بالنسبة للمنتجات متعددة الصفحات أو المتكاملة (full-stack) أو الأكثر تعقيدًا، يحوّل Verdent الاتجاه المختار إلى خطة صفحات أو شاشات ومواصفة منتج بلغة واضحة.
  </Step>

  <Step title="البناء من الاتجاه المعتمد">
    بعد أن يصبح الاتجاه واضحًا، يستعيد Verdent التصميم ليحوّله إلى تطبيق فعلي، ويحافظ على ربط القرارات اللاحقة بالتصميم والمواصفة المعتمدين.
  </Step>

  <Step title="المعاينة والاستمرار">
    راجع التطبيق في المعاينة، ثم استمر بأعمال الخلفية (backend) أو الاختبار أو مزيد من التكرار حسب الحاجة.
  </Step>
</Steps>

## كيفية استخدام Design Mode في Verdent Desktop [#كيفية-استخدام-design-mode-في-verdent-desktop]

عند بدء منتج جديد في Manager، صِف التطبيق الذي ترغب في بنائه. إذا لم يكن لديك اتجاه تصميم محدد بالفعل، افتح Design Mode وسيساعدك Verdent على اختيار اتجاه بصري قبل البناء.

يمكنك الحفاظ على بساطة الموجز، لكن اجعله محددًا بما يكفي لتوجيه قرارات التصميم:

* ما هو المنتج
* من سيستخدمه
* المهمة الرئيسية التي يجب أن يساعدهم على أدائها
* الصفحات أو الشاشات أو الحالات التي تعرف بالفعل أنك تحتاج إليها

## أمثلة على الموجزات [#أمثلة-على-الموجزات]

<CardGroup cols="2">
  <Card title="صفحة تعريفية">
    قم ببناء صفحة تعريفية لتطبيق مالي شخصي موجّه للعاملين المستقلين. يجب أن تبعث إحساسًا بالهدوء والثقة وطابعًا تحريريًا، مع قسم رئيسي (hero) وأقسام للميزات والتسعير والأسئلة الشائعة.
  </Card>

  <Card title="تطبيق متعدد الشاشات">
    أنشئ متتبع عادات (habit tracker) موجّه بالأساس للهاتف المحمول لأشخاص يتعافون من الاحتراق الوظيفي (burnout). يجب أن يبعث إحساسًا لطيفًا وملموسًا، مع تعريف بالتطبيق (onboarding) وتسجيل يومي وعرض للتقدم وإعدادات.
  </Card>
</CardGroup>

## نصائح لنتائج أفضل [#نصائح-لنتائج-أفضل]

* حدد لمن يُوجَّه المنتج.
* صِف الإحساس الذي ترغب فيه، لا مجرد قائمة الميزات.
* اذكر الصفحات أو الشاشات المعروفة لديك إن وُجدت.
* شارك المرجعيات أو القيود مبكرًا إذا كانت ذات أهمية.
* اذكر ما يجب تجنبه إذا كنت تعرف فعلًا ما قد يبدو غير مناسب.
* بالنسبة للمنتجات المعقدة، توقع تأكيد قائمة الصفحات ومواصفة المنتج قبل استمرار عملية البناء الكاملة.