كيف تبني موقعاً إلكترونياً باستخدام Claude Code · الدليل العملي بالعربية.

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

ماذا سيكون بحوزتك في نهاية الدليل

• موقع حي على الإنترنت · مع عنوان مؤقت من Vercel (يمكن ربط نطاقك الخاص لاحقاً)
• سير عمل منظم باستخدام Claude Code · معرفة كيفية إعطاء أمر برومبت، العمل في وضع Plan Mode، ومتى يتم التأكيد
• طرق تصميم في جعبتك · إملاء حر لـ Claude، استلهام من موقع موجود، وعناصر من 21st.dev
• مهارات مثبتة على Claude · موقع يتضمن إمكانية الوصول، الخصوصية، وتصميماً متميزاً وليس ذكاء اصطناعياً عاماً
• نسخ احتياطي كامل للشفرة على GitHub · إذا تعطل أي شيء، يمكنك التراجع بنقرة واحدة
• بنية تحتية جاهزة لقاعدة البيانات في Supabase · إذا رغبت في جمع رسائل البريد الإلكتروني، الطلبات، أو أي معلومات

ما هو Claude Code ولماذا يتفوق على أي منشئ مواقع

الخطوة 1 · الأدوات الثلاث التي يجب تثبيتها قبل البدء

Vercel

النشر السحابي · الموقع حي على الإنترنت

الخيار الافتراضي لنشر المواقع. بدون Vercel، فإن الموقع الذي يبنيه لك Claude سيظل موجوداً فقط على جهاز الكمبيوتر الخاص بك في localhost:3000 · ولن يراه أي شخص آخر. بمجرد أن تقول لـ Claude 'انشر على Vercel'، فإنه يدفع الشفرة، ينشرها على السحابة، ويعيد لك عنواناً عاماً يمكن مشاركته.

نصيحة للوكلاء: بعد التسجيل، نعود إلى Claude ← Customize ← Connectors ← Browse Connectors ← Vercel ← Connect. بهذه الطريقة ينشر Claude المواقع بنقرة واحدة.

Supabase

قاعدة بيانات · ذاكرة الموقع

Postgres + Auth + Storage. بدلًا من تشغيل خادم لحفظ رسائل البريد الإلكتروني، الطلبات، أو أي معلومات · يمنحك Supabase كل ذلك بنقرة واحدة. إذا كنت تريد نموذج اتصال يحفظ جميع الاستفسارات، قائمة بريدية، أو متجراً صغيراً · فهذا هو البرنامج المسؤول عن حفظ المعلومات.

نصيحة للوكلاء: مثل Vercel · نقوم بربط الموصل في Customize → Connectors. اسم الموصل: Supabase. الحساب المجاني يكفي لـ 99% من المشاريع الشخصية.

GitHub

نسخ احتياطي للشفرة · مثل Google Drive لموقعك

يتم في GitHub حفظ جميع شفرات الموقع عبر الإنترنت. إذا تعطل شيء ما، أو إذا ارتكب Claude خطأ لا يمكن التراجع عنه، أو إذا كنت تريد العمل على الموقع من جهاز كمبيوتر آخر · يحفظ GitHub كل السجل. في كل مرة ترغب في ذلك · قل لـ Claude 'قم بالنسخ الاحتياطي إلى GitHub' وسيقوم بدفع الإصدار الأخير.

نصيحة للوكلاء: يتم حفظ المستودعات بشكل افتراضي كـ Private (خاص) · وحدك من تمتلك حق الوصول. إذا كنت تريد مشاركة الشفرة مع مطور آخر · يمكنك التغيير إلى Public بنقرة واحدة.

💡 الأدوات الثلاث معاً · تكلف صفراً من الشواقل للمبتدئين. فقط إذا كنت تريد موقعاً بترافيك عالٍ (آلاف المستخدمين في اليوم) أو قاعدة بيانات كبيرة بشكل استثنائي · فهناك خطط مدفوعة. بالنسبة لـ 99% من المشاريع الشخصية والتجارية الصغيرة · الحساب المجاني كافٍ.

الخطوة 2 · كيف تفتح مشروعاً جديداً في Claude

ترغب في إتقان Claude Code من الصفر؟

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

الخطوة 3 · الطريقة 1 · ألقِ على Claude بكل ما يدور في ذهنك

نموذج برومبت لـ Claude Code (للنسخ والتعديل)

أريد بناء موقع يتناسب مع النعال الطبية للأحذية. أريد أن يكون الموقع بأسلوبي · مستقبلي، مريح للتنفس، مع خطوط واضحة وتباين واضح للغاية. الألوان: أحادي اللون · أبيض، أسود، رمادي. لون مميز أزرق مستقبلي. أقل قدر ممكن من الفوضى البصرية. أريد صوراً لرياضيين وجنود يركضون، بحيث يفهم الناس الاتجاه. أريد تجارب عملاء · أشخاص يقيمون من Google ويوصون بالمنتج. إذا لم يكن لدي ذلك · اترك ببساطة Placeholder فارغاً لكي أملاه بنفسي. أريد زر واتساب عائماً لكي يتمكنوا من الوصول إلى ممثل بأسرع وقت ممكن. في الـ Hero · أريد صورة لنعل طبي يسبح في الفضاء. إذا لم تستطع إنشاء صورة كتلك · أنشئ برومبت لإدخاله في نموذج صور. اعمل في وضع Plan Mode. اعرض عليّ الخطة. بعد أن أوافق · انتقل إلى البناء.

🎯 مهم · نبدأ دائماً في وضع Plan Mode (زر في أسفل Claude). هذا يوفر أكواماً من الـ tokens · يعرض Claude خطة عمل قبل أن يندفع للبناء، ويمكنك التصحيح قبل أن يبذل جهداً. في وضع Plan Mode ترى جميع الألوان، الخطوط وترتيب الأقسام · ثم توافق.

الخطوة 4 · الطريقة 2 · استلهام من موقع موجود

برومبت للإدخال في Claude مع صورة الإلهام والرابط (للنسخ)

Check deeply the elements, DOM, sources. Then start to create section by section, one by one, in all aspects · HTML, CSS, JS. Reference site: [نقوم بلصق رابط موقع الإلهام هنا] [بالإضافة إلى ذلك · نسحب صورة Full Page إلى Claude] اعمل في وضع Plan Mode. اعرض عليّ الخطة · ما هي الأقسام التي تبدأ بها، بأي ترتيب، وما هي العناصر التي تقوم بنسخها. بعد أن أوافق · انتقل إلى البناء. ابْنِ الموقع أجزاءً بأجزاء، وليس دفعة واحدة · بهذه الطريقة سيخرج أقرب ما يكون إلى الأصل.

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

الخطوة 5 · الطريقة 3 · عناصر من 21st.dev (طريقة فرانكنشتاين)

سير العمل مع 21st.dev

• ندخل إلى 21st.dev ونسجل الدخول باستخدام Google (5 ثوانٍ)
• نتصفح الفئات · Hero, Buttons, Cards, Galleries, Animations
• نجد عنصراً يعجبنا · ونرى معاينة حية (Preview) في الصفحة
• نضغط على الزر الأزرق Copy Prompt في الأعلى
• نعود إلى Claude، نلصق، ونضغط Enter
• يبني Claude العنصر في الموقع · نتحقق في localhost:3000 من أنه يبدو كما أظهرته 21st

تجمع ورشة عمل Claude Code الكاملة كل شيء في مكان واحد: التثبيت، المهارات، الوكلاء وبناء المواقع. 4 لقاءات مسجلة مدى الحياة.

الخطوة 6 · المهارات · الفرق بين ذكاء اصطناعي عام وموقع متميز

⚖️ مهم بشكل خاصة · إمكانية الوصول والخصوصية. في إسرائيل، الموقع الذي لا يتوافق مع معيار إمكانية الوصول (معيار 5568) يعرض صاحبه لدعوى قضائية تصل إلى 50,000 شقل. سياسة الخصوصية إلزامية بموجب قانون حماية الخصوصية. هذه ليست 'خيارات' · بل هي التزام قانوني. المهارات تحل ذلك بنقرة واحدة.

agentskills.co.il

مستودع المهارات الإسرائيلي باللغة العبرية

المستودع الإسرائيلي · مهارات مخصصة للتنظيم الإسرائيلي (الخصوصية، إمكانية الوصول)، للغة العبرية وللسوق المحلي. جميع المهارات مجانية. يجدر استعراض الكل قبل البدء في موقع جديد للإسرائيليين · وخاصة Israeli Privacy Shield وIsraeli Accessibility Compliance وHebrew Content Writer.

نصيحة للوكلاء: ننسخ أمر التثبيت الأسود من صفحة المهارة، نلصقه في Claude، ويقوم Claude بالتثبيت. تظهر المهارة بعد ذلك في Customize → Skills.

skills.sh

مستودع Anthropic الرسمي · آلاف المهارات

المستودع الرئيسي للمهارات من المجتمع. تصفح حسب الفئات (Website, Marketing, Productivity)، اعثر على مهارة، وتأكد من حصولها على شارة Trust Hub Pass (تم فحص الكود وهو آمن). الجدير بالذكر بشكل خاص مهارة UI/UX Pro Max · 50 أسلوب تصميم، 161 لوحة ألوان و57 زوجاً من الخطوط.

نصيحة للوكلاء: احرص دائماً على فحص شارة Trust Hub Pass قبل التثبيت · بهذه الطريقة لا تقوم بتنزيل مهارة قد تقوم بإجراءات غير مرغوب فيها على الكمبيوتر.

الخطوة 7 · النشر المباشر · الموقع حي على الإنترنت

هل تريد إتقان Claude Code من الصفر؟

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

✅ هذا هو · لديك موقع حي على الإنترنت قمت ببنائه باستخدام كلود كود، دون كتابة سطر برمجي واحد. من هنا يمكنك متابعة التحسين · إضافة صفحات، ربط نموذج العملاء المحتملين بـ Supabase، أو إضافة مدونة. أي تغيير · أخبر كلود ببساطة، وسيقوم بتنفيذه وإعادة النشر.

أدوات وروابط مفيدة

كل ما تحتاجه لبناء موقع باستخدام كلود كود · في مكان واحد

شرح معمق · طرق التصميم الثلاث، 9 مهارات موصى بها، والنشر السحابي خطوة بخطوة

دليل تثبيت كامل لـ Claude Code · نقطة البداية إذا لم تقم بالتثبيت بعد

نشر الموقع مباشرة · عنوان عام بنقرة واحدة. مجاني للمبتدئين

قاعدة بيانات للموقع · نماذج، عملاء محتملون وحجوزات. مجانية لمعظم المشاريع

مكتبة عناصر تصميم فاخرة مع موجه (Prompt) جاهز لكل عنصر

مستودع المهارات الإسرائيلي · إمكانية الوصول، الخصوصية والكتابة باللغة العبرية

الأسئلة الشائعة · كيف تبني موقعاً باستخدام كلود كود

نعم، وهذه هي الفكرة تماماً. يكتب كلود كود كل التعليمات البرمجية خلف الكواليس · أنت فقط تصف بلغة بسيطة ما ترغب في أن يكون على الموقع. لا داعي للمعرفة التقنية، تعلم لغة برمجة، أو فهم كيفية بناء المواقع. إذا كنت تستطيع وصف ما تريده · يمكنك بناء موقع.

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

الأدوات المطلوبة (Vercel, Supabase, GitHub) مجانية للمبتدئين وتكفي لـ 99% من المشاريع الشخصية والتجارية الصغيرة. التكلفة الوحيدة هي اشتراك كلود، وإذا لزم الأمر نطاق (Domain) مدفوع (بضع عشرات من الشواقل سنوياً). هذا مقارنة بآلاف الشواقل التي يكلفها الموقع لدى مبرمج.

في منشئ المواقع أنت محدد بالقوالب والعناصر التي تسمح بها المنصة. مع كلود كود لا حدود · أي ميزة رأيتها على موقع رائد يمكنك طلبها وسيقوم كلود ببنئها، ويبقى الموقع ملكاً لك بالكامل (الكود محمي على GitHub). بالإضافة إلى ذلك، فإن التحكم في التصميم أكثر دقة بكثير · يمكنك تغيير كل تفصيل في محادثة عادية.

فقط إذا أضفت ذلك. يجب أن يمتثل الموقع الإسرائيلي لمعيار إمكانية الوصول ת״י 5568 وقانون حماية الخصوصية، وإلا فهناك عرضة لدعوى قضائية تصل إلى 50,000 شيكل. الحل هو تثبيت مهارات مخصصة (مثل Israeli Accessibility Compliance و Israeli Privacy Shield من مستودع agentskills.co.il) · يقوم كلود بتنفيذ إمكانية الوصول، سياسة الخصوصية ولافتة ملفات تعريف الارتباط (Cookie banner) تلقائياً.

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

هذا الدليل هو الأساس. في ورشة عمل Claude Code نبني كل شيء من الصفر، خطوة بخطوة، معاً · التثبيت والإعداد، بناء المهارات، وكيل واتساب مباشر، وجلسة مكافأة كاملة حول بناء المواقع بـ 3 طرق (Vibe Coding, Inspiration, 21st.dev). 4 جلسات مسجلة مع وصول مدى الحياة، وجميع المهارات والموجهات جاهزة للنسخ واللصق. إذا كنت تريد بناء مواقع باستخدام كلود كود بالشكل الصحيح · فهذا هو المكان المناسب للبدء.

الأسئلة الشائعة

هل يمكن بناء موقع باستخدام كلود كود دون معرفة البرمجة؟

نعم، وهذه هي الفكرة تماماً. يكتب كلود كود كل التعليمات البرمجية خلف الكواليس · أنت فقط تصف بلغة بسيطة ما ترغب في أن يكون على الموقع. لا داعي للمعرفة التقنية، تعلم لغة برمجة، أو فهم كيفية بناء المواقع. إذا كنت تستطيع وصف ما تريده · يمكنك بناء موقع.

كم من الوقت يستغرق بناء موقع باستخدام كلود كود؟

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

كم تكلفة بناء موقع باستخدام كلود كود؟

الأدوات المطلوبة (Vercel, Supabase, GitHub) مجانية للمبتدئين وتكفي لـ 99% من المشاريع الشخصية والتجارية الصغيرة. التكلفة الوحيدة هي اشتراك كلود، وإذا لزم الأمر نطاق (Domain) مدفوع (بضع عشرات من الشواقل سنوياً). هذا مقارنة بآلاف الشواقل التي يكلفها الموقع لدى مبرمج.

ما الفرق بين كلود كود ومنشئ مواقع مثل Wix؟

في منشئ المواقع أنت محدد بالقوالب والعناصر التي تسمح بها المنصة. مع كلود كود لا حدود · أي ميزة رأيتها على موقع رائد يمكنك طلبها وسيقوم كلود ببنئها، ويبقى الموقع ملكاً لك بالكامل (الكود محمي على GitHub). بالإضافة إلى ذلك، فإن التحكم في التصميم أكثر دقة بكثير · يمكنك تغيير كل تفصيل في محادثة عادية.

هل الموقع المبني باستخدام كلود كود متوافق مع القانون في إسرائيل؟

فقط إذا أضفت ذلك. يجب أن يمتثل الموقع الإسرائيلي لمعيار إمكانية الوصول ת״י 5568 وقانون حماية الخصوصية، وإلا فهناك عرضة لدعوى قضائية تصل إلى 50,000 شيكل. الحل هو تثبيت مهارات مخصصة (مثل Israeli Accessibility Compliance و Israeli Privacy Shield من مستودع agentskills.co.il) · يقوم كلود بتنفيذ إمكانية الوصول، سياسة الخصوصية ولافتة ملفات تعريف الارتباط (Cookie banner) تلقائياً.

ماذا تفعل إذا قام كلود بكسر شيء ما في الموقع؟

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