عمل موقع بالذكاء الاصطناعي: دليل عملي لأصحاب المشاريع والمصممين

نعم، تستطيع عمل موقع بالذكاء الاصطناعي. منشئ المواقع بالذكاء الاصطناعي (AI Website Builder) يعطيك نسخة أولى في دقائق، ومع أداة برمجة وكيلة تستطيع بناء موقع مصمم خصيصاً لك في أيام. لكن الصفحة التي تظهر على الشاشة هي الجزء السهل. ما يجعل الموقع ينفع مشروعك هو كل ما حولها: وظيفة واضحة، ومحتوى حقيقي، وتصميم يشبهك، ولغتان مضبوطتان، ثم التفاصيل الهادئة التي لا يراها أحد حتى تفشل: السرعة والخصوصية والأمان والصيانة.

أعمل مصمماً للهويات والواجهات، وبنيت موقع أعمالي هذا بلغتيه، و Claude Code أداة في يدي. هذا الدليل هو الطريق الذي أنصح به صاحب مشروع صغير أو زميلاً مصمماً، وفيه ستتعلم:

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

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

1. حدّد وظيفة الموقع قبل أي أداة

اكتب إجابات هذه الأسئلة في صفحة واحدة:

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

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

2. المحتوى والهيكل قبل أول أمر

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

واجمع صوراً حقيقية لمنتجاتك ومكانك وفريقك. الصور الجاهزة والمولّدة تجعل موقعك يشبه كل المواقع الأخرى.

3. اتجاه التصميم: عين المصمم ما زالت مهمة

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

• شعارك وألوانك وخطوطك، وقواعد هويتك البصرية (Brand Identity) إن كانت لديك.
• موقعان أو ثلاثة تعجبك، وما الذي يعجبك فيها بالضبط.
• الإحساس الذي تريده: هادئ وفاخر، أو دافئ ومحلي، أو حاد وتقني.
• خط عربي مختار عن قصد، لا الخط الافتراضي للأداة. وقد كتبت عن اختيار خطوط الهوية والجمع بين العربي واللاتيني.

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

ثم احكم على النتيجة بعين مصمم: التسلسل البصري، والمسافات، والتباين، وحجم النص على الهاتف، وهل تبدو العربية مصممة فعلاً أم مجرد صفحة إنجليزية مقلوبة.

4. اختر طريقك: منشئ مواقع، أم منصة تطبيقات، أم Claude Code

منشئات المواقع: Wix و Framer و Durable وأمثالها

يقول Wix إنك تنتقل «من أمر مكتوب إلى موقع جاهز للعمل»، ثم تكمل التعديل بالسحب والإفلات. ووكيل Framer ينشئ صفحات وأقساماً ونصوصاً وصوراً قابلة للتعديل داخل مشروعك، مع نظام إدارة محتوى (CMS) واستضافة وإعدادات سيو في مكان واحد. أما Durable فيقدم نفسه منصة متكاملة لأصحاب الأعمال الخدمية، فيها حجوزات وقائمة عملاء بجانب الموقع. والاستضافة مشمولة في الثلاثة.

منصات بناء التطبيقات: Lovable و Bolt و v0

تولّد كوداً حقيقياً من المحادثة، وغالباً مع قاعدة بيانات وتسجيل دخول. تناسب الموقع الذي هو في الحقيقة تطبيق: حسابات، ولوحات تحكم، ومنطق خاص.

البرمجة مع وكيل: Claude Code

توجّه وكيلاً داخل مشروعك الخاص، فتملك كل ملف وتستضيف حيث تشاء. يناسب التصميم الخاص، والمواقع ثنائية اللغة المبنية كما صُممت بالضبط، والمواقع التي قد تكبر لتصبح منتجاً.

كيف تختار في دقيقة

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

وقارنت منصات البناء والأدوات الوكيلة بالتفصيل في مقارنة أدوات الفايب كودينج.

5. العربية والإنجليزية كما يجب

الموقع ثنائي اللغة موقعان يشتركان في نظام تصميم واحد، لا موقع واحد عليه زر ترجمة.

• لكل لغة عنوان خاص، مثل /ar و /en. يوصي جوجل باستخدام عناوين مختلفة لكل نسخة لغوية بدلاً من ملفات تعريف الارتباط أو إعدادات المتصفح، وينصح بعدم تحويل الزائر تلقائياً إلى لغة تخمّنها له.
• حدّد اللغة والاتجاه في الصفحة نفسها: lang="ar" و dir="rtl" على عنصر html. ويوصي W3C بعدم ضبط الاتجاه الأساسي بـ CSS.
• اربط النسختين بـ hreflang. ويشترط جوجل أن تذكر كل نسخة نفسها وكل النسخ الأخرى.
• اعكس التخطيط، لا كل شيء. المسافات والقوائم والأسهم تنعكس، أما الشعار والصور وأرقام الهاتف فلا.
• اختر نوع الأرقام مرة واحدة: أرقام غربية (0 إلى 9) أو هندية، وبالطريقة نفسها في كل الصفحات.
• راجع النص المختلط: اسم علامة إنجليزي داخل جملة عربية، والأسعار، والتواريخ، والنماذج.

والأدوات تختلف هنا. يدعم Wix Multilingual العربية والكتابة من اليمين إلى اليسار، لكن مركز مساعدته ينبّه إلى أن اتجاه الكتابة في بعض التطبيقات، مثل المتجر (Stores)، ينطبق على كل اللغات. وفي Framer إعداد اسمه Reverse layout يعكس الصفوف والشبكات تلقائياً للغات RTL، بينما تحتاج الأيقونات والمسافات الداخلية ضبطاً يدوياً. جرّب صفحاتك الحقيقية قبل أن تلتزم. وأتعمق أكثر في دليل تصميم واجهات المستخدم العربية RTL، و موقع SkillUp MENA مثال على موقع بلغتين صممته وبنيته.

اختبار سريع لدعم العربية قبل أن تلتزم بأداة

قبل أن تدفع اشتراكاً في أي أداة، اصنع بها صفحة تجريبية واحدة، وجرّب عليها:

1. فقرة عربية طويلة بخطك المختار، وانظر إلى المسافة بين الأسطر وشكل الحروف المتصلة.
2. القائمة وأزرار الأسهم: هل انعكس اتجاهها؟
3. نموذج تواصل: اكتب فيه اسماً عربياً طويلاً ورقم هاتف، وتأكد أن الرسالة تصلك مقروءة.
4. التبديل بين اللغتين: هل ينقلك إلى الصفحة المقابلة نفسها، أم إلى الصفحة الرئيسية؟
5. الهاتف: افتح الصفحة على شاشة صغيرة بالعربية.

إن فشلت الأداة في هذه الخطوات البسيطة، فستتعبك في موقع كامل.

6. أساسيات السيو (SEO)

• عنوان ووصف واضحان لكل صفحة، بكل لغة، مكتوبان لقارئها.
• عنوان رئيسي واحد في كل صفحة، وعناوين فرعية منطقية، وروابط تقول إلى أين تذهب.
• نص بديل (Alt Text) للصور المهمة، ونص حقيقي بدلاً من الكتابة داخل الصور.
• عناوين صفحات نظيفة، وخريطة موقع (Sitemap)، وتوثيق الموقع في Google Search Console.
• اسم النشاط وعنوانه ورقمه بالطريقة نفسها في كل مكان، ومنها ملفك في Google Business Profile إن كنت تخدم عملاء في مدينتك.

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

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

7. السرعة وسهولة الوصول

يحدد جوجل أهدافاً واضحة في مؤشرات أداء الويب الأساسية (Core Web Vitals)، كما ينشرها موقع web.dev: أن يظهر المحتوى الرئيسي خلال 2.5 ثانية، وأن تستجيب الصفحة للمس خلال 200 ملّي ثانية، وألا يزيد اهتزاز التخطيط على 0.1، وأن يتحقق ذلك في ثلاث زيارات على الأقل من كل أربع. وعملياً: اضغط الصور واجعل مقاسها مناسباً للشاشة، وحمّل أوزان الخط التي تستخدمها فقط (الخطوط العربية قد تكون ثقيلة الحجم)، وقلّل السكربتات الخارجية، وجرّب الموقع على هاتف عادي باتصال بطيء.

ولسهولة الوصول (Accessibility)، المرجع هو إرشادات W3C المعروفة باسم WCAG 2.2. والأساسيات: تباين كافٍ بين النص والخلفية، ونص بديل للصور، وعنوان ظاهر لكل حقل في النماذج، وموقع يمكن استخدامه بلوحة المفاتيح وحدها، وتحديد اللغة الصحيحة لكل صفحة حتى تنطقها برامج قراءة الشاشة نطقاً صحيحاً.

8. النماذج والخصوصية وموافقة الكوكيز

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

انشر صفحة خصوصية تقول ماذا تجمع، ولماذا، وأين تحفظه، وكيف يتواصل معك الزائر. في السعودية نظام حماية البيانات الشخصية الذي تشرف عليه الهيئة السعودية للبيانات والذكاء الاصطناعي (سدايا)، وفي مصر قانون حماية البيانات الشخصية رقم 151 لسنة 2020، وفي الاتحاد الأوروبي تحتاج ملفات تعريف الارتباط غير الضرورية، ومنها ملفات الإحصاءات عادة، إلى موافقة الزائر قبل وضعها. والعادة الآمنة واحدة في كل مكان: لا تشغّل الإحصاءات إلا بعد موافقة الزائر، واجعل الرفض سهلاً مثل القبول. أنا مصمم لا محامٍ، فراجع الإرشادات الرسمية في سوقك.

9. الاستضافة والنطاق وأساسيات الأمان

• امتلك نطاقك (Domain). سجّله باسم نشاطك، على حساب تتحكم فيه، مع التجديد التلقائي. لا تترك مزوّد خدمة يحتفظ به نيابة عنك. وإن أردت النطاق الوطني لبلدك بدلاً من .com، فلكل نطاق وطني شروط تسجيل خاصة، فراجعها لدى الجهة المسؤولة عنه.
• فعّل التحقق بخطوتين في منصة الموقع أو الاستضافة، وعند مسجّل النطاق، وفي بريدك.
• أبعد المفاتيح السرية عن الكود. مفاتيح خدمات النماذج والخرائط والبريد مكانها إعدادات البيئة لدى الاستضافة، لا كود الواجهة ولا مستودع عام.
• استخدم HTTPS في كل الصفحات. أغلب المنصات وخدمات الاستضافة الحديثة تضبطه لك.
• راجع الصلاحيات. احذف حسابات من لم يعودوا يعملون معك.
• احتفظ بنسخ احتياطية من المحتوى وبيانات النماذج، واعرف كيف تسترجعها. وإن كان لك كود خاص، فاحفظه في مستودع Git خاص.

10. الصيانة: الموقع لا ينتهي

مرة كل شهر: أرسل تجربة من كل نموذج، وحدّث الأسعار والمواعيد والقوائم، وراجع Search Console بحثاً عن أخطاء، وطبّق تحديثات المنصة أو الحزم، وتأكد من مواعيد تجديد النطاق والخطة. مراجعة شهرية قصيرة تحفظ الموقع الصغير سليماً.

من عملي: هذا الموقع

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

الخلاصة

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

إن أردت موقعاً بلغتين مصمماً بعناية ومبنياً كما يجب، ابدأ مشروعك معي.