لم يعد إنشاء صفحة موقع احترافية حكرًا على المبرمجين ومصممي الويب. فبفضل نماذج الذكاء الاصطناعي مثل ChatGPT وClaude وGemini، أصبح بإمكان أي شخص يملك فكرة واضحة أن يحصل على صفحة موقع جاهزة بلغة HTML وCSS خلال دقائق، ثم ينشرها على الإنترنت مجانًا. وفي هذا الشرح العملي سنبني معًا صفحة هبوط بسيطة لمطعم أو مشروع صغير، ونتعلم كيف نكتب الطلب الصحيح للذكاء الاصطناعي، وكيف نعدل الكود، وكيف ننشر الصفحة لتصبح متاحة للجميع.
أكبر خطأ يقع فيه المبتدئون هو كتابة طلب عام مثل "اصنع لي موقعًا". فالذكاء الاصطناعي سيعطيك عندها صفحة عامة لا تشبه مشروعك. لذلك قبل أن تبدأ، حدد بوضوح: ما اسم المشروع؟ ومن جمهوره؟ وما الأقسام التي تحتاجها، كالتعريف والخدمات وطرق التواصل؟ وما الألوان والطابع العام الذي تريده؟ وهل الصفحة بالعربية وتحتاج إلى اتجاه من اليمين إلى اليسار؟
إليك مثالًا على طلب جيد يمكنك نسخه وتعديله حسب مشروعك:
لاحظ أن الطلب يحدد كل شيء تقريبًا: نوع الملف، واللغة، والاتجاه، والخط، والأقسام، والألوان، والتجاوب مع الجوال. وكلما كان الطلب أدق، كانت النتيجة أقرب لما تريد من المحاولة الأولى.
سيعطيك الذكاء الاصطناعي ملفًا كاملًا، لكن من المفيد أن تفهم هيكله الأساسي حتى تستطيع تعديله لاحقًا. هذا مثال مختصر لبنية الصفحة التي ستحصل عليها:
السطر الثاني مهم جدًا للمواقع العربية، فالخاصية dir="rtl" تجعل اتجاه الصفحة من اليمين إلى اليسار. ووسم viewport يجعل الصفحة تظهر بشكل صحيح على الجوال. أما قسم style فيحتوي على التنسيقات، ويمكنك تغيير الألوان فيه بسهولة عبر تعديل الرموز مثل #556b2f.
بعد الحصول على النسخة الأولى، لا تطلب صفحة جديدة كل مرة، بل اطلب تعديلات محددة في المحادثة نفسها، مثل: "اجعل زر اطلب الآن أكبر وأضف له تأثير عند المرور"، أو "أضف قسمًا لآراء الزبائن"، أو "أضف خريطة جوجل لموقع المطعم". وهذه الطريقة تحافظ على ما أعجبك، وتغير فقط ما تريد تحسينه.
ولتجربة الصفحة على جهازك، افتح برنامج المفكرة أو أي محرر نصوص مثل VS Code، والصق الكود، واحفظ الملف باسم index.html، ثم افتحه بالمتصفح. وإذا ظهرت مشكلة، انسخ وصفها أو رسالة الخطأ وأرسلها للذكاء الاصطناعي ليصلحها.
بعد أن تصبح صفحتك جاهزة، يمكنك نشرها مجانًا بطرق عدة. أسهلها خدمة Netlify Drop، حيث تسحب المجلد الذي يحتوي ملف index.html إلى الصفحة، فتحصل فورًا على رابط يمكنك مشاركته. وهناك أيضًا GitHub Pages، الذي يتيح استضافة الصفحات الثابتة مجانًا مع إمكانية ربط نطاق خاص بك لاحقًا.
انتبه إلى أن الذكاء الاصطناعي قد يضع صورًا من روابط غير موجودة، فاستبدلها بصورك الخاصة أو بصور من مواقع مجانية موثوقة. وراجع النصوص بنفسك، لأن الذكاء الاصطناعي قد يضيف معلومات غير دقيقة عن مشروعك. ولا تضع في الكود أي كلمات مرور أو مفاتيح سرية، لأن ملفات HTML يمكن لأي زائر قراءتها. وإذا كان موقعك يحتاج إلى قاعدة بيانات أو تسجيل دخول أو دفع إلكتروني، فهنا تحتاج إلى مطور محترف أو منصة جاهزة، لأن الصفحات الثابتة لا تكفي لذلك.
يمكنك اليوم بناء صفحة موقع جميلة ومتجاوبة بالذكاء الاصطناعي خلال أقل من ساعة، حتى لو لم تكتب سطر كود في حياتك. السر في كتابة طلب واضح ومفصل، ثم التعديل التدريجي بالمحادثة، وأخيرًا النشر عبر خدمة مجانية. جرب الآن مع فكرة مشروعك، وشاركنا رابط صفحتك.
هل بنيت موقعًا بالذكاء الاصطناعي من قبل؟ وما الأداة التي استخدمتها؟ شاركنا تجربتك.
الخطوة الأولى: جهّز فكرتك قبل أن تكتب الطلب
أكبر خطأ يقع فيه المبتدئون هو كتابة طلب عام مثل "اصنع لي موقعًا". فالذكاء الاصطناعي سيعطيك عندها صفحة عامة لا تشبه مشروعك. لذلك قبل أن تبدأ، حدد بوضوح: ما اسم المشروع؟ ومن جمهوره؟ وما الأقسام التي تحتاجها، كالتعريف والخدمات وطرق التواصل؟ وما الألوان والطابع العام الذي تريده؟ وهل الصفحة بالعربية وتحتاج إلى اتجاه من اليمين إلى اليسار؟
الخطوة الثانية: اكتب طلبًا مفصلًا
إليك مثالًا على طلب جيد يمكنك نسخه وتعديله حسب مشروعك:
لاحظ أن الطلب يحدد كل شيء تقريبًا: نوع الملف، واللغة، والاتجاه، والخط، والأقسام، والألوان، والتجاوب مع الجوال. وكلما كان الطلب أدق، كانت النتيجة أقرب لما تريد من المحاولة الأولى.
الخطوة الثالثة: افهم الكود الذي تحصل عليه
سيعطيك الذكاء الاصطناعي ملفًا كاملًا، لكن من المفيد أن تفهم هيكله الأساسي حتى تستطيع تعديله لاحقًا. هذا مثال مختصر لبنية الصفحة التي ستحصل عليها:
HTML:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>بيت الزيتون | أكلات فلسطينية</title>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Cairo', sans-serif; margin: 0; background: #f7f1e3; color: #3b3a30; }
header { background: #556b2f; color: #fff; padding: 40px 20px; text-align: center; }
.btn { background: #d4a373; color: #fff; padding: 12px 28px; border-radius: 8px; text-decoration: none; }
.menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; padding: 20px; }
.dish { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
</style>
</head>
<body>
<header>
<h1>بيت الزيتون</h1>
<p>طعم البيت الفلسطيني في كل طبق</p>
<a class="btn" href="tel:+970000000000">اطلب الآن</a>
</header>
<section class="menu">
<div class="dish"><h3>مسخن</h3><p>خبز طابون مع البصل والسماق وزيت الزيتون</p><b>35 شيكل</b></div>
<div class="dish"><h3>مقلوبة</h3><p>أرز مع الباذنجان والدجاج والمكسرات</p><b>40 شيكل</b></div>
</section>
</body>
</html>السطر الثاني مهم جدًا للمواقع العربية، فالخاصية dir="rtl" تجعل اتجاه الصفحة من اليمين إلى اليسار. ووسم viewport يجعل الصفحة تظهر بشكل صحيح على الجوال. أما قسم style فيحتوي على التنسيقات، ويمكنك تغيير الألوان فيه بسهولة عبر تعديل الرموز مثل #556b2f.
الخطوة الرابعة: عدّل بالمحادثة لا من الصفر
بعد الحصول على النسخة الأولى، لا تطلب صفحة جديدة كل مرة، بل اطلب تعديلات محددة في المحادثة نفسها، مثل: "اجعل زر اطلب الآن أكبر وأضف له تأثير عند المرور"، أو "أضف قسمًا لآراء الزبائن"، أو "أضف خريطة جوجل لموقع المطعم". وهذه الطريقة تحافظ على ما أعجبك، وتغير فقط ما تريد تحسينه.
ولتجربة الصفحة على جهازك، افتح برنامج المفكرة أو أي محرر نصوص مثل VS Code، والصق الكود، واحفظ الملف باسم index.html، ثم افتحه بالمتصفح. وإذا ظهرت مشكلة، انسخ وصفها أو رسالة الخطأ وأرسلها للذكاء الاصطناعي ليصلحها.
الخطوة الخامسة: انشر صفحتك مجانًا
بعد أن تصبح صفحتك جاهزة، يمكنك نشرها مجانًا بطرق عدة. أسهلها خدمة Netlify Drop، حيث تسحب المجلد الذي يحتوي ملف index.html إلى الصفحة، فتحصل فورًا على رابط يمكنك مشاركته. وهناك أيضًا GitHub Pages، الذي يتيح استضافة الصفحات الثابتة مجانًا مع إمكانية ربط نطاق خاص بك لاحقًا.
أخطاء شائعة وكيف تتجنبها
انتبه إلى أن الذكاء الاصطناعي قد يضع صورًا من روابط غير موجودة، فاستبدلها بصورك الخاصة أو بصور من مواقع مجانية موثوقة. وراجع النصوص بنفسك، لأن الذكاء الاصطناعي قد يضيف معلومات غير دقيقة عن مشروعك. ولا تضع في الكود أي كلمات مرور أو مفاتيح سرية، لأن ملفات HTML يمكن لأي زائر قراءتها. وإذا كان موقعك يحتاج إلى قاعدة بيانات أو تسجيل دخول أو دفع إلكتروني، فهنا تحتاج إلى مطور محترف أو منصة جاهزة، لأن الصفحات الثابتة لا تكفي لذلك.
خلاصة
يمكنك اليوم بناء صفحة موقع جميلة ومتجاوبة بالذكاء الاصطناعي خلال أقل من ساعة، حتى لو لم تكتب سطر كود في حياتك. السر في كتابة طلب واضح ومفصل، ثم التعديل التدريجي بالمحادثة، وأخيرًا النشر عبر خدمة مجانية. جرب الآن مع فكرة مشروعك، وشاركنا رابط صفحتك.
هل بنيت موقعًا بالذكاء الاصطناعي من قبل؟ وما الأداة التي استخدمتها؟ شاركنا تجربتك.