برومبت تصميم موقع مدونة أو مجلة إلكترونية احترافية
وظيفة البرومبت
هذا البرومبت مخصص لإنشاء موقع مدونة أو مجلة إلكترونية حديثة، فاخرة، سريعة، متجاوبة مع الجوال والحاسوب، تحتوي على أقسام للمقالات، الأخبار، التصنيفات، الكاتب، البحث، الوسوم، المقالات الشائعة، النشرة البريدية، ولوحة إدارة مبدئية. يصلح للمجلات العلمية، الثقافية، التقنية، الأدبية، الإخبارية، أو المدونات الشخصية الاحترافية.
المنصة الأنسب للتنفيذ
الأفضل استخدام ChatGPT Codex أو Claude للبرمجة الكاملة، واستخدام Google Stitch أو Gemini لتوليد تصور بصري أولي للواجهة، ثم تحويل التصميم إلى كود باستخدام Codex.
تنبيه مهم
لضمان أعلى درجة ممكنة من الدقة وصحة الإخراج، يجب تزويد الذكاء الاصطناعي يدويًا بكل البيانات الموثقة المتاحة لديك قبل تنفيذ البرومبت أو ضمن نصه نفسه؛ لأن جودة المخرجات ترتبط مباشرة بجودة المدخلات، فالذكاء الاصطناعي — كأي نظام تحليلي أو برمجي — إذا بُنِي على بيانات صحيحة وموثقة ومنظمة، كانت نتائجه أقرب إلى الصحة والدقة والاعتمادية، أما إذا كانت البيانات ناقصة أو غير دقيقة أو غير موثقة، فإن المخرجات ستتأثر بذلك مهما كانت قوة النموذج.
طريقة الاستخدام
انسخ البرومبت وضعه في ChatGPT Codex أو Claude إذا كنت تريد كودًا جاهزًا، أو ضعه في Google Stitch إذا كنت تريد تصميم واجهة بصريًا أولًا. قبل التنفيذ، غيّر اسم الموقع، نوع المحتوى، الألوان، الأقسام، الشعار، وروابط الحسابات الاجتماعية حسب حاجتك. بعد ذلك اطلب من النموذج إخراج المشروع كاملًا كملفات HTML وCSS وJavaScript أو React/Next.js حسب المنصة التي تريد رفع الموقع عليها.
البرومبت الكامل الجاهز للنسخ انسخ النص التالي كما هو:
أنت الآن خبير تصميم واجهات وتجربة مستخدم UI/UX، ومهندس واجهات أمامية Front-End، ومطوّر مواقع احترافية متخصص في بناء المدونات والمجلات الإلكترونية الحديثة.
المطلوب:
إنشاء تصميم كامل ومتكامل لموقع مدونة أو مجلة إلكترونية احترافية باسم:
[اسم الموقع: اكتب الاسم هنا]
مجال الموقع:
[اكتب المجال: علمي / ثقافي / تقني / أدبي / إخباري / تعليمي / شخصي / متعدد المجالات]
الهدف من الموقع:
إنشاء منصة محتوى احترافية تسمح بعرض المقالات، الأخبار، التحليلات، الملفات الطويلة، المقالات الشائعة، التصنيفات، الوسوم، صفحات الكتّاب، والنشرة البريدية، بحيث يظهر الموقع كمنصة حقيقية جاهزة للنشر وليس كتجربة بدائية.
أولًا: الهوية البصرية العامة
صمّم الموقع بأسلوب حديث وفاخر يجمع بين البساطة والقوة البصرية. يجب أن تكون الواجهة مريحة للقراءة، منظمة، واضحة، وتناسب الزائر العربي. استخدم ألوانًا عصرية متناسقة، مع إمكانية اعتماد لوحة ألوان تجمع بين الأسود الفاخر، الأزرق الغامق، الأبيض، الرمادي الهادئ، ولمسات دافئة مثل الذهبي أو البرتقالي أو السماوي حسب طبيعة الموقع.
يجب ألا يكون التصميم مزدحمًا أو شعبيًا أو مبالغًا فيه. المطلوب واجهة تشبه مواقع المجلات العالمية الحديثة، لكن بروح عربية واضحة وخطوط عربية ممتازة.
ثانيًا: الصفحات المطلوبة
أنشئ الصفحات التالية:
1. الصفحة الرئيسية
تحتوي على هيدر احترافي، شعار الموقع، قائمة تنقل، زر بحث، قسم بطل Hero Section يعرض المقال الرئيسي، شبكة مقالات مميزة، أحدث المقالات، أكثر المقالات قراءة، تصنيفات الموقع، قسم النشرة البريدية، وقسم تعريفي مختصر عن المجلة.
2. صفحة المقال المفرد
تحتوي على عنوان المقال، اسم الكاتب، تاريخ النشر، مدة القراءة، صورة بارزة، محتوى المقال، عناوين فرعية، اقتباسات مميزة، وسوم، أزرار مشاركة، مقالات ذات صلة، وصندوق تعريف بالكاتب.
3. صفحة التصنيفات
تعرض التصنيفات بطريقة منظمة، مثل: علوم، تقنية، ثقافة، تاريخ، أدب، ذكاء اصطناعي، خرائط، دراسات، مقالات رأي. يمكن تعديل التصنيفات حسب طبيعة الموقع.
4. صفحة الكاتب
تعرض صورة الكاتب، نبذة عنه، تخصصه، حساباته، وعدد المقالات المنشورة له، مع قائمة مقالاته.
5. صفحة من نحن
تشرح هوية الموقع، رسالته، رؤيته، ونوع المحتوى الذي يقدمه.
6. صفحة تواصل معنا
تحتوي على نموذج تواصل بسيط: الاسم، البريد الإلكتروني، الموضوع، الرسالة، مع روابط الحسابات الاجتماعية.
7. صفحة البحث
تعرض نتائج البحث بطريقة منظمة مع فلاتر حسب التصنيف، التاريخ، الكاتب، والوسوم.
8. صفحة الأرشيف
تعرض المقالات حسب الشهر والسنة والتصنيف.
ثالثًا: مكونات الواجهة
يجب أن يحتوي الموقع على المكونات التالية:
– Header ثابت أو شبه ثابت عند التمرير.
– شعار واضح باسم الموقع.
– قائمة تنقل عربية واضحة.
– زر تبديل الوضع الليلي والنهاري.
– شريط بحث ذكي.
– بطاقات مقالات Article Cards.
– قسم Featured Article.
– قسم Trending / Popular.
– قسم Latest Articles.
– قسم Categories.
– قسم Newsletter.
– Footer احترافي.
– أزرار مشاركة اجتماعية.
– Breadcrumbs داخل صفحات المقالات.
– جدول محتويات تلقائي داخل المقال الطويل.
– مؤشر مدة القراءة.
– وسوم Tags.
– زر العودة للأعلى.
– تصميم متجاوب بالكامل للجوال والتابلت والحاسوب.
رابعًا: تجربة المستخدم UX
يجب أن تكون تجربة المستخدم سهلة جدًا. الزائر يجب أن يفهم مباشرة أين يقرأ المقالات، أين يبحث، أين يجد التصنيفات، وأين يتابع الموقع. لا تجعل التصميم معقدًا. يجب أن تكون المسافات مريحة، الخط واضح، حجم النص مناسب، وتباين الألوان قويًا بما يكفي للقراءة الطويلة.
خامسًا: تحسين محركات البحث SEO
راعِ العناصر التالية:
– بنية HTML دلالية Semantic HTML.
– استخدام عناوين H1 وH2 وH3 بشكل صحيح.
– إضافة Meta Title وMeta Description.
– دعم Open Graph لمشاركة المقالات.
– روابط مقالات واضحة وصديقة لمحركات البحث.
– سرعة تحميل عالية.
– صور محسّنة.
– دعم Schema.org للمقالات إن أمكن.
– قابلية الفهرسة وسهولة القراءة.
سادسًا: المتطلبات التقنية
أنشئ المشروع بإحدى الصيغتين التاليتين حسب الأنسب:
الخيار الأول:
HTML + CSS + JavaScript فقط، مناسب للرفع المباشر على GitHub Pages.
الخيار الثاني:
React أو Next.js مع Tailwind CSS، مناسب لموقع أكثر احترافية وقابل للتطوير.
إذا لم أحدد التقنية، اختر التقنية الأنسب لإنشاء موقع سريع، جميل، وقابل للنشر على GitHub Pages.
سابعًا: لوحة ألوان مقترحة
استخدم لوحة ألوان فاخرة وهادئة، مثل:
– خلفية رئيسية: أبيض ناعم أو أسود فاخر حسب الوضع.
– لون أساسي: أزرق غامق.
– لون ثانوي: ذهبي أو سماوي.
– لون النص: أسود داكن في الوضع النهاري، وأبيض ناعم في الوضع الليلي.
– ألوان البطاقات: رمادي فاتح أو زجاجي شفاف.
– أزرار CTA: واضحة ومميزة دون مبالغة.
ثامنًا: الخطوط
استخدم خطوط عربية واضحة واحترافية مثل:
– Cairo
– IBM Plex Sans Arabic
– Tajawal
– Noto Kufi Arabic
اختر الخط الأنسب للقراءة الطويلة، واجعل العناوين قوية وواضحة، والنصوص مريحة.
تاسعًا: المحتوى التجريبي
أضف محتوى عربيًا تجريبيًا واقعيًا للموقع، مثل عناوين مقالات في مجالات مختلفة:
– كيف يغير الذكاء الاصطناعي مستقبل البحث العلمي؟
– الخرائط الرقمية ودورها في فهم المدن الحديثة
– لماذا تحتاج المجلات العربية إلى تصميمات أكثر احترافية؟
– القراءة في عصر السرعة: هل ما زال المقال الطويل قادرًا على التأثير؟
– التقنية والثقافة: علاقة تتوسع كل يوم
– كيف تبني مدونة معرفية قادرة على جذب القراء؟
يجب ألا يكون النص التجريبي عشوائيًا مثل Lorem Ipsum. أريد نصوصًا عربية طبيعية.
عاشرًا: الفوتر
أنشئ Footer يحتوي على:
– اسم الموقع.
– وصف مختصر.
– روابط مهمة.
– روابط التصنيفات.
– روابط الحسابات الاجتماعية.
– حقوق النشر.
– توقيع بصري نصي: iqrao.com
يمكن وضع النص التالي:
© 2026 [اسم الموقع]. جميع الحقوق محفوظة. Designed with iqrao.com style.
الحادي عشر: الحسابات الاجتماعية
أضف أماكن مخصصة للحسابات التالية ويمكن تعديلها لاحقًا:
Facebook: [اكتب الرابط]
X / Twitter: [اكتب الرابط]
Instagram: [اكتب الرابط]
TikTok: [اكتب الرابط]
YouTube: [اكتب الرابط]
الثاني عشر: المتطلبات الجمالية
اجعل التصميم فاخرًا وحديثًا، مع بطاقات زجاجية خفيفة، ظلال ناعمة، زوايا مستديرة، أيقونات بسيطة، انتقالات سلسة، وتأثيرات Hover احترافية. لا تجعل الموقع يشبه القوالب القديمة. أريد واجهة تبدو حديثة، مرتبة، وقابلة لاستخدام حقيقي.
الثالث عشر: الاستجابة للشاشات
يجب أن يعمل الموقع بشكل ممتاز على:
– الجوال.
– التابلت.
– اللابتوب.
– الشاشات العريضة.
في الجوال يجب أن تتحول القائمة إلى قائمة جانبية أو قائمة منسدلة واضحة، وتبقى بطاقات المقالات سهلة القراءة.
الرابع عشر: المطلوب في الإخراج النهائي
أخرج لي المشروع كاملًا بصيغة منظمة.
إذا استخدمت HTML/CSS/JS:
قدّم الملفات التالية:
– index.html
– article.html
– category.html
– author.html
– about.html
– contact.html
– search.html
– archive.html
– style.css
– script.js
إذا استخدمت React/Next.js:
قدّم هيكل المشروع كاملًا، مع المكونات الأساسية، والصفحات، وملفات التنسيق، وطريقة التشغيل.
يجب أن يكون الكود نظيفًا، منظمًا، مع تعليقات بسيطة عند الحاجة، وقابلًا للتعديل للمبتدئين.
الخامس عشر: شروط مهمة
لا تنتج تصميمًا بدائيًا.
لا تستخدم نصوصًا لاتينية وهمية.
لا تجعل الواجهة مزدحمة.
لا تستخدم ألوانًا صارخة.
لا تهمل نسخة الجوال.
لا تضع عناصر لا تعمل.
لا تختصر المشروع إلى صفحة واحدة فقط إلا إذا طلبت ذلك.
لا تنسَ تضمين التوقيع النصي iqrao.com في الفوتر أو في تعليق داخل الكود.
ابدأ الآن بإنشاء المشروع كاملًا.
