برومبتات تصميم المواقع العربية تصبح أكثر فائدة عندما تحدد رحلة الزائر والنصوص والوظائف المطلوبة، ثم تضيف دعم RTL واختبارات الهاتف. عبارة «صمم موقعًا احترافيًا» لا تكفي لتحديد اتجاه الحقول أو طريقة عرض البريد الإنجليزي أو ما يحدث عند الضغط على زر الحجز.
تجد هنا 10 قوالب لتصميم صفحات هبوط وواجهات عربية وتحسينها في Lovable وBolt وReplit، مع تعليمات قابلة للتخصيص ومراجعة للمخرجات. الأمثلة مواصفات تحريرية؛ لا ندعي أنها نتائج بناء اختبرناها في حسابات الأدوات الثلاث. عدل الأوامر بحسب تقنية مشروعك وإمكانات المنصة.
ما الفرق بين برومبت التصميم وبرومبت بناء موقع يعمل؟
طلب التصميم يحدد الأقسام والألوان والخط والتخطيط. أما الموقع الذي يستقبل طلبًا أو يدير حسابات فيحتاج إلى سلوك واضح وتكاملات واختبار. قد ترسم الأداة نموذج تواصل وزر نجاح دون أن تصل رسالة واحدة. لذلك اذكر في الطلب ما إذا كنت تريد واجهة تجريبية أو وظيفة مرتبطة بخدمة فعلية، وراجع النتيجة على هذا الأساس.
للتعرف إلى طريقة استخدام المنصات، يمكنك البدء من شرح Lovable أو شرح Bolt أو شرح Replit. هذه المكتبة تركز على صياغة المطلوب وليست بديلًا عن إعداد مشروعك أو معرفة قيود خطتك.
وإذا لم تختر المنصة بعد، تساعدك مقارنة Lovable وBolt وReplit على فهم اختلاف بيئات البناء والتكلفة وطريقة العمل، ثم تخصيص البرومبتات للأداة المناسبة لمشروعك.
جهز هذه البيانات قبل نسخ أي برومبت
- اسم النشاط والجمهور واللغة والبلد عندما يؤثر في النص أو العملة.
- الإجراء الرئيسي: قراءة دليل، طلب عرض، حجز، أو اشتراك؛ اختر أولوية واضحة.
- المحتوى الحقيقي: العنوان والفوائد والصور والشعار الذي تملك حق استخدامه.
- الهوية: قيم الألوان واسم الخط ونبرة الكتابة، وما يلزم الحفاظ عليه في الموقع الموجود.
- نطاق هذه المرحلة: صفحة واحدة أو مكون، والخدمات التي ستؤجل ربطها.
مكتبة برومبتات المواقع العربية وواجهات RTL
1. تحويل فكرة المشروع إلى موجز واضح
استخدم هذا الطلب عند بدء مشروع في Lovable أو Bolt أو Replit. إنه يمنع القفز من فكرة مبهمة إلى شاشات كثيرة يصعب مراجعتها.
أريد تصميم [نوع الموقع] لجمهور [الجمهور والبلد] باللغة العربية. الهدف الأساسي أن يقوم الزائر بـ[الإجراء]، والمحتوى المتاح [النصوص والصور]، والأقسام المطلوبة [القائمة]. قبل كتابة الكود: لخص فهمك للمشروع، وحدد رحلة المستخدم والشاشات الضرورية، واسألني حتى 5 أسئلة عن النواقص المؤثرة. ميز بين ما سنعرضه بصريًا وما يحتاج خدمة خلفية أو حسابًا خارجيًا. انتظر موافقتي على الخطة قبل التنفيذ.
راجع النتيجة: يجب أن تشرح الخطة أين يذهب الزر الرئيسي، وما البيانات التي تجمعها الصفحة، وما الذي سيعمل فعلًا.
2. برومبت صفحة هبوط عربية تدعم RTL
هذا قالب للبداية، ثم تأتي طلبات التحسين جزءًا جزءًا. استبدل الجمهور والفوائد بنص حقيقي حتى لا تبدو الصفحة قالبًا عامًا. ولتنظيم قوالب التصميم وإعادة استخدامها داخل المحادثات، يمكنك متابعة شرح إضافة AIPRM بالعربي.
ابنِ صفحة هبوط عربية لخدمة [اسم الخدمة] موجهة إلى [الجمهور]، بهدف [الإجراء الرئيسي]. الأقسام: شريط تنقل، مقدمة بعنوان وزر رئيسي، 3 فوائد حقيقية، شرح العمل في 3 خطوات، أسئلة شائعة، ثم تواصل. اجعل لغة الصفحة ar واتجاهها rtl من جذر المستند. استخدم خطًا عربيًا مقروءًا، والألوان [الألوان المعتمدة]، ومسافات متسقة وخصائص CSS منطقية حيث تناسب. اعزل البريد والروابط والمقاطع الإنجليزية باتجاه مناسب. استخدم هذه النصوص: [المحتوى]. لا تضف شهادات عملاء أو إحصاءات أو شعارات شركات غير مقدمة. ابدأ بالواجهة فقط، ووضح ما يحتاج ربطًا لاحقًا. اجعلها قابلة للاستخدام على الهاتف دون تمرير أفقي.
راجع النتيجة: افحص العنوان والأزرار على الهاتف، وتأكد أن ترتيب التنقل والقراءة مناسب للعربية.
3. نظام تصميم عربي يحافظ على الاتساق
يصلح عندما تبدو الأزرار والخطوط مختلفة من قسم لآخر. تحديد مكون واحد للتطبيق الأول يجعل المراجعة أسهل من إعادة تنسيق الموقع دفعة واحدة.
راجع واجهة [المشروع] وأنشئ نظام تصميم صغيرًا يلائم العربية: ألوان دلالية، خط العناوين والنص، درجات الأحجام، المسافات، الزوايا، حالات الأزرار والحقول. حافظ على هوية [العلامة] والألوان [القيم]. استخدم خط [اسم الخط] مع بديل مناسب، وحمله بطريقة لا تعطل قراءة المحتوى. طبق القواعد على [المكون المحدد] أولًا، ولا تعدل الصفحات الأخرى في هذه الخطوة. أظهر حالة التركيز بلوحة المفاتيح، والأخطاء، والتعطيل عند الحاجة، وراجع قابلية قراءة النصوص الطويلة.
راجع النتيجة: قارن العنصر قبل وبعد. اسم الخط في الكود لا يكفي؛ تحقق أنه محمل ويظهر بحروف عربية سليمة.
4. إصلاح اتجاه RTL والنصوص المختلطة
اتجاه الصفحة أكثر من محاذاة النص لليمين. قد يحتاج عنوان البريد داخل فقرة عربية إلى عزل مستقل، وقد يفسد قلب كل صف ترتيب قارئ الشاشة.
راجع اتجاه العرض في [الصفحة أو المكون]. المشكلة الحالية: [وصف ولقطة إن وجدت]. تحقق من: اتجاه الجذر، ترتيب المحتوى، محاذاة الحقول، مواضع الأيقونات، الأرقام، البريد الإلكتروني، الروابط، والنص العربي المختلط بإنجليزي. استخدم bdi أو عزل الاتجاه حيث يلزم، ولا تعكس كل الأيقونات تلقائيًا؛ راجع معناها. حافظ على ترتيب DOM المنطقي والتنقل بلوحة المفاتيح. أصلح هذا النطاق فقط واذكر ما غيرته وكيف أتحقق منه.
راجع النتيجة: جرب نصًا مثل «الخطة Pro بسعر 19 USD» وبريدًا ورقم هاتف، ثم افحص القراءة والترتيب.
5. نموذج طلب واضح مع أخطاء مفهومة
الواجهة الجميلة لا تثبت أن الرسائل تصل. افصل تصميم النموذج عن ربطه بالبريد أو قاعدة البيانات، واطلب دليلًا على الاستقبال عند تنفيذ الربط.
صمم نموذج [نوع الطلب] بالعربية يتضمن [الحقول الضرورية فقط]. لكل حقل تسمية ظاهرة مرتبطة به، ونوع إدخال مناسب، وتلميح عند الحاجة. بين المطلوب والاختياري، واكتب رسائل خطأ عربية تحدد طريقة التصحيح. لا تعتمد على اللون وحده. احفظ القيم عند الخطأ ولا تعرض نجاحًا وهميًا. إذا لم توجد خدمة لاستقبال البيانات، اجعل وضع التجربة واضحًا ولا تدع أن الطلب وصل. لا تضف مفاتيح سرية في الواجهة. عدل النموذج فقط ثم اختبر الإدخال الصحيح والفارغ وغير الصالح.
راجع النتيجة: أرسل حالة فارغة وقيمة غير صالحة. عند وجود تكامل حقيقي، تحقق من وصول الطلب إلى الوجهة الصحيحة.
6. بطاقات أدوات وجدول مقارنة مناسب للهاتف
مناسب لأدلة الأدوات والمقارنات على المواقع العربية. لا تسمح للأداة بملء السعر الناقص بمعلومة قديمة كي يبدو التصميم مكتملًا.
أنشئ مكون مقارنة عربيًا لـ[العناصر] باستخدام البيانات التالية فقط: [البيانات ومعايير المقارنة]. اعرض بطاقات مختصرة تشمل الاسم، الاستخدام المناسب، القيود، والرابط الصحيح. إن استخدمت جدولًا، حافظ على عناوين الصفوف والأعمدة والعلاقات الدلالية، واجعله قابلًا للتمرير داخل حاوية محددة عند صغر الشاشة دون توسيع الصفحة كلها. لا تخترع أسعارًا أو تقييمات أو عدد مستخدمين. ضع "غير متاح" للبيانات الناقصة. اختبره بمحتوى عربي طويل.
راجع النتيجة: تحقق من تطابق كل بطاقة مع بياناتك، ومن إمكانية فهم المقارنة عند عرض ضيق.
7. تحسين صفحة موجودة للهاتف دون إعادة بنائها
أرسله بعد معاينة حقيقية وتحديد المشكلة. ذكر العرض والعنصر أو لقطة الخطأ يوفر سياقًا أفضل من «الهاتف غير جيد».
حسن استجابة [الصفحة أو المكون] عند عروض 360 و390 و768 و1280 بكسل. المشكلات المرصودة: [الوصف]. افحص النصوص الطويلة، الصور، التنقل، النوافذ والجدول. امنع التمرير الأفقي غير المقصود، واجعل الأهداف قابلة للنقر والمسافات مريحة. لا تخفِ محتوى أساسيًا لإخفاء المشكلة، ولا تغير النصوص أو الألوان المعتمدة. عدل ما يرتبط بالمشكلة فقط، ثم قدم مقارنة واختبارات نفذتها فعلًا وما بقي دون اختبار.
راجع النتيجة: اختبر الصفحة بجهاز أو محاكاة عرض، وحاول التكبير وفتح القائمة والتنقل بين الأقسام.
8. إضافة الوضع الداكن مع تباين مقروء
الحالات الثانوية مثل حدود الحقول ونص الزر المعطل أكثر عرضة للنسيان. اختبر الوضعين بدل الاكتفاء بمظهر داكن جميل في لقطة.
أضف وضعًا داكنًا إلى [المكون أو الصفحة] مع الحفاظ على الهوية [الألوان]. استخدم ألوانًا دلالية للخلفية والنص والحدود والأزرار، وراجع حالات hover وfocus وdisabled ورسائل الخطأ. تحقق من تباين النص العادي والعناصر التفاعلية، ومن بقاء الروابط مميزة. اتبع تفضيل النظام مبدئيًا إذا لم يختر المستخدم، واحفظ الاختيار عند توفر التخزين. اجعل زر التبديل قابلًا للاستخدام بلوحة المفاتيح وله اسم واضح. لا تستخدم قلب ألوان شاملًا للصور والشعارات.
راجع النتيجة: افتح الحقول والأخطاء والأسئلة الشائعة في الوضعين، وقِس التباين بأداة مناسبة.
9. نسخة إنجليزية مقيدة لواجهة عربية
استخدمه إذا كنت تفضل كتابة تعليمات البناء بالإنجليزية مع إبقاء المحتوى عربيًا. ليس مطلوبًا تبديل اللغة عندما تكون تعليماتك العربية واضحة.
Build an Arabic-first [website type] for [audience]. The main action is [action]. Use the supplied Arabic copy: [copy]. Set the document language to ar and direction to rtl. Keep a logical DOM and keyboard focus order. Use CSS logical properties where appropriate, and isolate emails, URLs and English fragments to avoid bidirectional text issues. Implement only [component or page] in this step. Preserve [existing design rules]. Do not invent testimonials, ratings, prices or client logos. Clearly distinguish working behavior from demo placeholders. Report checks actually performed and any remaining limitations.
راجع النتيجة: المعيار هو النتيجة الفعلية: اللغة والاتجاه والوظائف. كتابة RTL في الطلب لا تثبت أن التنفيذ صحيح.
10. مراجعة الواجهة قبل التفكير في النشر
هذا الطلب ينظم المراجعة؛ لا يحول الأداة إلى ضمان للجودة. ابدأ بإصلاح المشكلات التي تمنع إكمال الهدف، ثم حسّن التفاصيل البصرية.
راجع [الصفحة أو المشروع] وفق قائمة قبول: 1) اللغة العربية واتجاه RTL والنصوص المختلطة. 2) الهاتف دون تجاوز أفقي غير مقصود. 3) جميع الروابط والأزرار ومسار الإجراء الرئيسي. 4) لوحة المفاتيح، تسميات الحقول، التركيز، رسائل الأخطاء، والتباين. 5) عنوان الصفحة ووصفها وتسلسل العناوين وبدائل الصور. 6) الصور والأصول الثقيلة وطلبات الشبكة غير الضرورية. 7) أي بيانات تجريبية أو أسرار أو اعتماد خارجي. نفذ الفحوص المتاحة ثم صنف النتائج: تم اختباره، يحتاج إصلاحًا، أو لم يُختبر. لا تعلن اجتياز فحص لم تنفذه. لا تنشر المشروع ولا تربط دفعًا حقيقيًا في هذه الخطوة.
راجع النتيجة: اطلب مخرجات قابلة للفحص: رابط مكسور بعينه أو حقل بلا تسمية، بدل تقييم عام مثل «الموقع ممتاز».
مثال عملي توضيحي: صفحة طلب عرض لخدمة ترجمة
المطلوب الافتراضي: مستقل يقدم ترجمة بين العربية والإنجليزية ويريد صفحة تجمع طلبات عروض. البداية الضعيفة «اصنع موقع ترجمة احترافيًا» تترك للأداة تخمين الخدمة والأسعار والبيانات. البداية الأوضح تحدد جمهورًا من أصحاب المواقع، وهدفًا هو طلب عرض، وأقسامًا تشرح نوع النصوص ومدة الرد المتفق عليها دون اختراع تقييمات.
- استخدم البرومبت الأول لكتابة موجز: صفحة عربية واحدة، وفوائد موثقة، ونموذج يطلب الاسم والبريد ونوع النص وحجمه.
- نفذ البرومبت الثاني بمحتوى حقيقي، مع عبارة صريحة أن النموذج تجريبي إلى حين ربط الاستقبال.
- راجع النص المختلط بالبرومبت الرابع، خصوصًا البريد وزر تبديل اللغة إن وجد.
- استخدم طلب النموذج لاختبار القيم الفارغة والرسائل؛ لا تعرض «تم الإرسال» قبل نجاح خدمة الاستقبال.
- نفذ قائمة المراجعة في البرومبت العاشر، ثم افحص بنفسك مسار الطلب قبل أي نشر.
هذه خطوات عمل مقترحة، وليست تقريرًا عن مشروع منشور. إذا قررت إضافة دفع أو حسابات، فهما مرحلة جديدة تحتاج تحديد صلاحيات البيانات والاسترداد والأخطاء، لا مجرد إضافة زرين إلى التصميم.
كيف تقيم النتيجة بدل تكرار «اجعله أجمل»؟
اكتب ملاحظة ترتبط بسلوك يمكن ملاحظته: «العنوان ينكسر إلى خمسة أسطر عند عرض 360 بكسل»، أو «زر القائمة لا يستجيب بلوحة المفاتيح»، أو «رسالة الخطأ تغطي اسم الحقل». بعد التعديل أعد الحالة نفسها. تعديل محدد وتحقق محدد يساعدان على تثبيت التحسن.
في المشاريع القائمة احفظ نقطة استرجاع قبل التعديلات، واطلب تغيير مكون واحد أو مسار واحد. راجع الملفات أو الأجزاء التي تغيرت متى كانت المنصة تتيح ذلك؛ قد يؤثر تعديل عام في أنماط عدة صفحات. كذلك لا تجعل «إخفاء العنصر على الهاتف» حلًا لمشكلة قراءة إذا كان العنصر أساسيًا.
أخطاء شائعة في برومبتات تصميم المواقع
- الاكتفاء بعبارة RTL: الاتجاه يحتاج مراجعة النماذج والأيقونات والمقاطع الأجنبية وترتيب القراءة.
- جمع متجر وحجز ولوحة إدارة وتطبيق في أمر واحد: قسم البناء إلى مراحل يمكن اختبارها.
- طلب نسخة مطابقة لموقع منافس: صف احتياج المستخدم والمكونات، واستخدم هوية وأصولًا تملك حق استعمالها.
- قبول تقييمات وأسعار وشعارات افتراضية: احذفها أو استبدلها ببيانات حقيقية قبل العرض العام.
- اعتبار العرض السريع دليلًا على السرعة أو SEO: قِس الصفحة بعد البناء وافحص المحتوى والوظائف.
أدلة أخرى من مكتبة البرومبتات
إذا كانت صفحة الهبوط مخصصة لمتجر إلكتروني، فاستكمل التخطيط البصري من خلال 15 برومبتًا لوصف المنتجات وصفحات البيع، مع مراجعة المعلومات التجارية وسياسة الشحن حتى تتطابق الصفحة مع المنتج الحقيقي. ولصياغة رسالة الصفحة نفسها اطلع على برومبتات التسويق الإلكتروني، ثم راجع برومبتات السوشيال ميديا عند تجهيز منشورات الترويج للصفحة.
ولمهام أخرى أثناء التعلم والعمل، تجد برومبتات ChatGPT للطلاب وتلخيص المحاضرات، ويمكنك تجهيز صورة صفحة التعريف أو ملفك المهني باستخدام برومبتات الصور الشخصية.
وإذا كنت تبحث عن قوالب إضافية قبل تخصيص طلبك، تساعدك مقارنة مواقع البرومبتات الجاهزة على التمييز بين المكتبة والمعرض والسوق، وفحص ملاءمة القالب للأداة والمخرج المطلوب.
أسئلة شائعة
هل تصلح القوالب لـ Lovable وBolt وReplit؟
تصلح بوصفها مواصفات للمطلوب، لكن طريقة التنفيذ والأطر والتكاملات تختلف. عدل أسماء المكونات والتقنيات وفق مشروعك، ولا تتوقع ناتجًا مطابقًا بين المنصات.
هل الأفضل كتابة البرومبت بالإنجليزية؟
ابدأ باللغة التي تصف فيها الحاجة بوضوح. يمكنك كتابة المواصفات بالإنجليزية والنصوص بالعربية، لكن ذلك لا يغني عن اختبار RTL والمحتوى الفعلي.
هل يكفي وضع dir=rtl؟
هو جزء أساسي من الاتجاه، لكنه لا يحل وحده مشكلات النص المختلط والأيقونات والحقول وترتيب القراءة. افحص كل مكون وحالة استخدام.
هل البرومبت يجعل الموقع متوافقًا مع SEO تلقائيًا؟
يمكنه طلب عناوين ووصف وتسلسل واضح وبدائل صور، لكن التحقق يتطلب فحص الصفحات الفعلية وإعدادات الفهرسة والأداء. لا يوجد أمر يضمن ترتيبًا في البحث.
كيف أقلل استهلاك الرصيد عند التعديل؟
حدد السياق والنطاق والمشكلة ومعيار القبول، وراجع كل تغيير قبل طلب التالي. لا توجد نسبة توفير ثابتة؛ التكلفة تختلف بحسب الأداة والمشروع وحجم العمل.
المصادر الرسمية وطريقة إعداد الدليل
راجعنا الوثائق الرسمية في 30 أكتوبر 2026. البرومبتات التالية صيغ تحريرية أصلية قابلة للتعديل، والأمثلة موسومة بأنها توضيحية؛ لا تمثل اختبارات مستقلة لكل أداة أو ضمانًا لنتيجة ثابتة.
