الدليل‹التصميم
التصميممبتدئ‏٨ دقائق قراءة

حوّل محادثة إلى تصميم

صِف الشاشة التي تريدها في المحادثة، فيبحث شريك التصميم بالذكاء الاصطناعي ويخطّط ثم يبني صفحة قابلة للتحرير على لوحة تكبير وتحريك. كرّر بالحوار، وأضف صفحات متعدّدة، ووجّه المساعد خطوة بخطوة.

كيف تعمل

وحدة التصميم في مايندلاب هي لوحة من المحادثة إلى التصميم. بدلاً من سحب العناصر يدوياً، تصِف ما تريده بلغة طبيعية، فيتولّى شريك تصميم بالذكاء الاصطناعي البحث والتخطيط ثم يبني صفحة حقيقية وقابلة للتحرير أمامك. كل شيء يجري على لوحة قابلة للتكبير والتحريك، حتى تتمكّن من التصغير لرؤية المسار كاملاً أو التكبير على تفصيل واحد.

تبدأ كل جلسة تصميم بمحادثة. تكتب ما يدور في ذهنك، وقد يطرح المساعد سؤالاً توضيحياً أو اثنين، ثم يبني الشاشة. من هناك تكرّر — لا تعيد البناء من الصفر في كل مرة.

💡
نصيحة.فكّر في المحادثة بصفتها سجلّ نواياك. كلما كان وصفك أوضح للجمهور، والغرض، والحالة المزاجية، اقترب أول تمرير من رؤيتك وقلّ عدد دورات التكرار.

وصف الشاشة

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

text
A landing page for a meditation app aimed at busy professionals.
Hero with a calm headline and a single call to action, a three-card
"how it works" section, social proof from testimonials, and a footer
with newsletter signup. Calm, spacious, lots of breathing room.

إن ترك وصفك خياراً مهماً مفتوحاً — مثل عدد الأعمدة أو نبرة الصياغة — فقد يطرح المساعد سؤالاً توضيحياً قبل أن يبني. أجب في المحادثة، وسيواصل من هناك.

اللوحة القابلة للتحرير

ما يبنيه المساعد ليس صورة ثابتة — إنها صفحة حيّة على اللوحة. كبّر، وصغّر، وحرّك الرؤية للتنقّل بين الأقسام. حدّد أي عنصر للتفاعل معه مباشرة، أو اطلب تغييراً في المحادثة لينفّذه المساعد بالنيابة عنك.

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

يمكنك ترك تعليقات على مناطق محدّدة من التصميم لتدوين الملاحظات أو التنسيق مع زملائك، وعندما تكون الصفحة جاهزة يمكنك تحويلها إلى تطبيق ويب حقيقي.

التكرار بالحوار

القوة الحقيقية للوحة من المحادثة إلى التصميم تكمن في التكرار. لا يلزمك الاحتفاظ بكل شيء صحيحاً من المحاولة الأولى — تبني نسخة، ثم تصقلها رسالة تلو الأخرى. يحتفظ المساعد بسياق المحادثة، فتُبنى كل رسالة فوق ما سبق.

text
Tighten the spacing in the hero and make the headline two lines.
Now try a darker, more premium palette.
Move the testimonials above the "how it works" section.
Add a sticky header that appears after the user scrolls past the hero.

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

ℹ
ملاحظة.كل تكرار مهمّ يمكن التقاطه بصفته نسخة، حتى تتمكّن من المقارنة والعودة لاحقاً. راجع دليل الإصدارات والسجلّ لمعرفة كيفية لقطة كل مرحلة من تصميمك.

صفحات متعدّدة

نادراً ما يكون التصميم شاشة واحدة. على اللوحة نفسها، يمكنك بناء صفحات متعدّدة وترتيبها جنباً إلى جنب — صفحة رئيسية، وصفحة تسعير، ولوحة تحكّم، وحالة فارغة — حتى ترى المنتج بأكمله في لمحة واحدة.

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

المساعد: البحث والبناء

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

هذا يعني أنه يمكنك العمل على مستوى عالٍ من النيّة ('أريد لوحة تحكّم تشعر بالثقة لكن دون ازدحام') وترك المساعد يترجم ذلك إلى تخطيط ملموس. ثم تصقل التفاصيل من هناك.

1
البحث
يفسّر المساعد طلبك في سياق نوع المنتج والجمهور، ويستنتج الأنماط والبنية المناسبة بدلاً من أن يطلب منك تحديد كل تفصيل.
2
التخطيط
قبل البناء، يضع المساعد خطة للشاشة — الأقسام، وترتيبها، والمحتوى الذي يملؤها — حتى يكون أول تمرير منظّماً لا عشوائياً.
3
البناء
يصيّر المساعد صفحة حيّة وقابلة للتحرير على اللوحة. من هناك، الزمام بيدك: حرّر مباشرة، أو كرّر بالحوار، أو احفظ نسخة، أو حوّل التصميم إلى تطبيق ويب.
💡
نصيحة.إن كنت لا تعرف بالضبط ما تريده بعد، اطلب من المساعد أن يقترح اتّجاهاً. يمكنه بناء نقطة انطلاق معقولة تتفاعل معها، وهو ما يكون غالباً أسرع من البدء من صفحة فارغة.
الخطوات التالية
→ العودة إلى الدليل