برومبت عربي لتخطيط موقع إلكتروني: قالب وعناصر أساسية

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

لا يضمن البرومبت وحده موقعًا مكتملًا، لكنه يساعد على تنظيم الطلب. اذكر الصفحات والجمهور والوظائف المطلوبة، ثم راجع النموذج المقترح وعدّل ما لا يناسبك.

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

يوضح الجدول معنى كل حقل في القالب وكيفية تعبئته. بعد الحصول على مخطط أو كود، اختبر الروابط والنماذج وطريقة عرض الصفحات على الهاتف، وراجع الخصوصية والأمان قبل الإطلاق.

لماذا تحتاج إلى برومت شامل لبناء موقع؟

بناء موقع إلكتروني ليس مجرد تصميم صفحة واحدة. إنه بناء نظام متكامل له هوية، هدف، وجمهور. البرومت الشامل يجبرك على التفكير في كل جوانب الموقع قبل البدء، مما يضمن أن النتيجة النهائية ستكون متماسكة واحترافية. إنه بمثابة “عقد البناء” بينك وبين الذكاء الاصطناعي.

شرح البرومت العربي الشامل

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

الوحدة (Module)	الشرح والهدف	مثال عملي (لموقع مصور فوتوغرافي)
1. الدور والهوية	نحدد هنا دور الذكاء الاصطناعي وهوية الموقع لضبط “نبرة الصوت” والتوجه العام.	الدور: “تصرّف كأنك مطور واجهات أمامية (Frontend Developer) وخبير في تجربة المستخدم (UX). مهمتك هي تصميم موقع احترافي.” الهوية: “الموقع هو معرض أعمال (Portfolio) لمصور فوتوغرافي متخصص في تصوير الطبيعة والمناظر الطبيعية.”
2. الجمهور المستهدف	من هم زوار موقعك؟ تحديد الجمهور يساعد في اختيار الألوان، الخطوط، والأسلوب المناسب لهم.	“الجمهور المستهدف هم وكالات السفر، محررو المجلات، وهواة التصوير الذين يبحثون عن الإلهام أو شراء الصور.”
3. الأسلوب البصري	هنا نرسم لوحة الألوان والخطوط والمزاج العام للتصميم. هذا هو قلب الهوية البصرية.	الألوان: “لوحة ألوان ترابية ومستوحاة من الطبيعة: أخضر غامق، بني، بيج، مع لمسة من اللون البرتقالي المحروق للأزرار.” الخطوط: “استخدم خطًا عصريًا وبسيطًا (Serif) للعناوين مثل ‘Merriweather’، وخطًا مقروءًا (Sans-serif) للنصوص مثل ‘Lato’.” المزاج العام: “بسيط، أنيق، فاخر، يركز بشكل كامل على الصور.”
4. هيكل الموقع	ما هي الصفحات الرئيسية التي سيتكون منها الموقع؟ هذا هو المخطط الأساسي للموقع.	“يتكون الموقع من 4 صفحات رئيسية: 1. الصفحة الرئيسية: لعرض أفضل الصور. 2. معرض الأعمال: مقسم إلى فئات (جبال، بحار، غابات). 3. عني: لقصة المصور وخبرته. 4. اتصل بي: لنموذج التواصل.”
5. تصميم الصفحة الرئيسية	أهم صفحة في الموقع. يجب أن تكون جذابة وتوضح هدف الموقع من أول نظرة.	“1. قسم علوي (Hero): صورة بانورامية متحركة (Slider) لأفضل 3 صور مع عنوان ‘فن التقاط روح الطبيعة’. 2. نبذة مختصرة: قسم صغير يعرض صورة شخصية للمصور ونبذة من صفحة ‘عني’. 3. أحدث الأعمال: شبكة صور (Grid) لآخر 6 صور تم إضافتها. 4. دعوة للعمل (CTA): زر كبير وواضح ‘شاهد معرض أعمالي الكامل’.”
6. الميزات والوظائف	ما هي الخصائص التفاعلية التي تحتاجها في الموقع؟	“1. معرض صور تفاعلي: عند النقر على أي صورة في المعرض، تفتح في نافذة منبثقة (Lightbox) بحجم كامل. 2. نموذج تواصل فعال: في صفحة ‘اتصل بي’، يجب أن يحتوي النموذج على حقول (الاسم، البريد الإلكتروني، الرسالة) مع تحقق من صحة الإدخال (Validation). 3. تصميم متجاوب (Responsive): يجب أن يعمل الموقع بشكل مثالي على أجهزة الكمبيوتر، الأجهزة اللوحية، والهواتف المحمولة.”
7. المخرجات المطلوبة	ماذا تريد من الذكاء الاصطناعي أن يقدم لك في النهاية؟	“المطلوب هو كود HTML و CSS و JavaScript نظيف ومنظم لكل صفحة من الصفحات المذكورة، مع تعليقات توضيحية لشرح الأجزاء المعقدة من الكود.”

كيفية استخدام البرومت المكتمل

بعد أن قمت بملء كل الوحدات في الجدول، قم بتجميعها في نص واحد متصل. سيبدو البرومت النهائي الخاص بك (لمثال المصور) كالتالي:

“تصرّف كأنك مطور واجهات أمامية وخبير في تجربة المستخدم. مهمتك هي تصميم موقع احترافي. هوية الموقع هي معرض أعمال لمصور فوتوغرافي متخصص في تصوير الطبيعة. الجمهور المستهدف هم وكالات السفر ومحررو المجلات.
استخدم لوحة ألوان ترابية (أخضر غامق، بني، بيج) مع لمسة برتقالية للأزرار. استخدم خط ‘Merriweather’ للعناوين و ‘Lato’ للنصوص. المزاج العام بسيط وأنيق.
الموقع يتكون من 4 صفحات: الرئيسية، معرض الأعمال، عني، اتصل بي.
الصفحة الرئيسية يجب أن تحتوي على: قسم Hero بصور متحركة، نبذة مختصرة، شبكة لأحدث الأعمال، وزر دعوة للعمل.
الميزات المطلوبة هي: معرض صور تفاعلي (Lightbox)، نموذج تواصل فعال، وتصميم متجاوب بالكامل.
المطلوب النهائي هو كود HTML, CSS, و JavaScript نظيف ومنظم لكل صفحة، مع تعليقات توضيحية.”

قالب البرومت جاهز لبناء موقعك

لقد صممنا لك “قالب البرومت الشامل”. مهمتك بسيطة: انسخ هذا القالب بالكامل، ثم استبدل كل نص بين القوسين [ ] بالمعلومات الخاصة بمشروعك.

هذا القالب هو خريطة الطريق التي ستقدمها للذكاء الاصطناعي.

القالب الفارغ (جاهز للنسخ والتعبئة)

الدور والهدف:

• الدور: “تصرّف كأنك مطور واجهات أمامية (Frontend Developer) وخبير في تجربة المستخدم (UX).”
• الهدف الأساسي: “مهمتك هي تصميم موقع احترافي لـ [اكتب هنا نوع الموقع، مثال: متجر إلكتروني، مدونة، شركة].”
• اسم الموقع: “[اكتب هنا اسم موقعك المقترح].”

الهوية البصرية:

• المزاج العام: “أريد تصميمًا يتسم بأنه [اختر 3 صفات، مثال: بسيط وأنيق، عصري وجريء، دافئ وودي].”
• لوحة الألوان: “استخدم لوحة الألوان التالية:
  • اللون الأساسي: [اكتب اللون الرئيسي، مثال: #2c3e50 (أزرق داكن)]
  • اللون الثانوي (للأزرار والروابط): [اكتب اللون الثانوي، مثال: #e67e22 (برتقالي)]
  • لون الخلفية: [اكتب لون الخلفية، مثال: #ecf0f1 (رمادي فاتح)]“
• الخطوط: “استخدم الخطوط التالية:
  • خط العناوين (Headings): [اكتب اسم خط، مثال: Cairo]
  • خط النصوص (Body): [اكتب اسم خط، مثال: Tajawal]“

هيكل الموقع وصفحاته:

• “سيتكون الموقع من الصفحات الرئيسية التالية: [اذكر الصفحات مفصولة بفاصلة، مثال: الرئيسية، من نحن، خدماتنا، اتصل بنا].”

محتوى وتصميم الصفحات (املأ كل صفحة على حدة):

• تصميم الصفحة الرئيسية: “يجب أن تحتوي على الأقسام التالية بالترتيب:
  1. القسم العلوي (Hero Section): [صف ما سيظهر هنا، مثال: عنوان كبير وجذاب هو '[اكتب العنوان هنا]' مع صورة خلفية معبرة وزر 'اكتشف المزيد']
  2. قسم الخدمات/المنتجات: [صف القسم، مثال: عرض 3 خدمات رئيسية في بطاقات منفصلة، كل بطاقة تحتوي على أيقونة وعنوان ووصف قصير]
  3. قسم نبذة عنا: [صف القسم، مثال: فقرة قصيرة عن هوية الشركة مع رابط لصفحة 'من نحن']
  4. قسم آراء العملاء (Testimonials): [صف القسم، مثال: عرض 3 آراء لعملاء مع أسمائهم وصورهم]“
• تصميم صفحة [اسم الصفحة الثانية]: “[صف محتوى وتصميم هذه الصفحة بالتفصيل]“
• تصميم صفحة [اسم الصفحة الثالثة]: “[صف محتوى وتصميم هذه الصفحة بالتفصيل]“

الوظائف والميزات التقنية:

• “يجب أن يتضمن الموقع الميزات التالية:
  1. [اكتب الميزة الأولى، مثال: تصميم متجاوب بالكامل (Fully Responsive) ليعمل على جميع الشاشات]
  2. [اكتب الميزة الثانية، مثال: نموذج تواصل فعال في صفحة 'اتصل بنا' يرسل البيانات إلى بريد إلكتروني]
  3. [اكتب الميزة الثالثة، مثال: تأثيرات حركية بسيطة (Animations) عند تمرير الماوس على الأزرار والبطاقات]“

المخرجات المطلوبة:

• “المطلوب النهائي هو كود [حدد اللغات، مثال: HTML, CSS, JavaScript] نظيف ومنظم لكل صفحة، مع تعليقات توضيحية (Comments) لشرح وظيفة كل جزء من الكود.”

كيف يبدو البرومت بعد تعبئته؟

بعد أن تملأ الفراغات، ستقوم بتجميع كل النصوص في برومت واحد متكامل لتقديمه للذكاء الاصطناعي. هذا يضمن أن جميع التعليمات مترابطة وفي سياق واحد.

أنت الآن تمتلك أكثر من مجرد برومت؛ أنت تمتلك خطة عمل متكاملة… إلخ.

من التخطيط إلى الواقع

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

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

تابع: كيف تجعل الفواكه تتكلم ب ai – إنشاء فيديوهات تيك توك فيروسية