كيف تبנות مواقع الويب باستخدام Claude Code · الدليل الشامل لـ Vibe Coding.

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

ما الذي ستحصل عليه في نهاية الدليل

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

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

Vercel

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

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

نصيحة للوكلاء: بعد التسجيل، عد إلى 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 · الطريقة 1 · تفريغ كل ما يدور في ذهنك (تحويل الكلام إلى نص للنموذج)

Speakly

أداة تفريغ صوتي · تتحدث، فيتكون نص منظم

أفضل برنامج لتحويل الكلام بالعبرية المحكية إلى نص مكتوب. تضغط على مفتاح اختصار في لوحة المفاتيح (عندي F-Key)، يفتح الميكروفون، تتحدث بكل ما يدور في ذهنك، ثم تترك الزر. يتم إدخال النص المنظم والدقيق تلقائياً إلى أي تطبيق تعمل معه · Claude، المحادثة، البريد الإلكتروني، Word.

نصيحة للوكلاء: المفتاح الموصى به في نظام Mac: مفتاح F-Key (Fn). في نظام Windows · يمكنك تعيين Caps Lock أو مفتاح آخر. الاختصار مريح · فقط اضغط، تحدث، واترك.

كيفية بدء مشروع جديد في Claude

موجه نموذجي · موقع لتقويم العظام مخصص حسب الطلب (للنسخ والتعديل)

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

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

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

GoFullPage

إضافة متصفح Chrome · التقاط صورة الشاشة الكاملة لموقع ويب

إضافة Chrome مجانية تلتقط الصفحة بأكملها في صورة واحدة طويلة. تضغط على أيقونة الكاميرا · يقوم بالتمرير تلقائياً عبر الموقع بالكامل، ويلتقط كل قسم، ويدمجها في صورة واحدة متصلة. يمكنك التنزيل بصيغة PNG أو PDF. مفيد بشكل خاص للحصول على الإلهام من المواقع دون الحاجة إلى التقاط 20 لقطة شاشة يدوياً.

نصيحة للوكلاء: بعد التقاط الصورة · تفتح الإضافة صفحة جديدة تحتوي على الصورة الكاملة. تضغط على أيقونة التنزيل (السهم المتجه لأسفل) وتختار PNG. الآن لديك صورة للعمل بها.

الموجه المراد إدخاله إلى 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. اعرض عليّ الخطة · ما هي الأقسام التي ستبدأ بها، بأي ترتيب، وما هي المكونات التي ستنسخها. بعد أن أوافق · انتقل إلى البناء. قم ببناء الموقع على أجزاء وليس دفعة واحدة · بهذه الطريقة سيخرج أقرب ما يكون إلى الأصل.

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

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

21st.dev

مكتبة مكونات · تصاميم فاخرة من المجتمع

آلاف مكونات واجهة المستخدم UI من مجتمع المصممين الرائدين. يتضمن كل مكون معاينة حية، كود، وزر نسخ الموجه Copy Prompt button. تضغط على الزر · يتم نسخ الموجه. تلصقه في Claude · يقوم Claude ببناء المكون في موقعك. معظم المكونات مجانية، وبعضها فاخر.

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

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

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

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

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

أين يتم تنزيل المهارات · المستودعان الرائدان

skills.sh

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

المستودع الرئيسي لمهارات المجتمع. تصفح حسب الفئات (Website و Marketing و Productivity)، وابحث عن مهارة مناسبة، وتأكد من حصولها على شصم Trust Hub Pass (والتي تعني أن الكود تم فحصه وهو آمن). يمكنك معرفة عدد تنزيلات المهارة · كلما زادت، زادت شعبيتها ومن المرجح أنها عالية الجودة.

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

agentskills.co.il

مستودع إسرائيلي بالعبرية · مهارات مخصصة للسوق المحلية

المستودع الإسرائيلي · مهارات مخصصة للوائح التنظيمية الإسرائيلية (الخصوصية، إمكانية الوصول)، للغة العبرية، وللصوق المحلي. جميع المهارات مجانية. يستحق حقاً مراجعة كل شيء قبل البدء في موقع جديد للإسرائيليين.

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

المهارات التسع الموصى بها لكل موقع جديد

يفتح لك نادي AI Master الباب: اجتماع حي كل أسبوع، تسجيلات ومجتمع. 47 شيقلاً شهرياً، إلغاء في أي وقت.

Israeli Privacy Shield

تنظيم خصوصية المواقع في إسرائيل

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

Israeli Accessibility Compliance

إمكانية الوصول للمواقع وفقاً لمعيار 5568

يطبق إمكانية الوصول وفقاً لمعيار 5568 و WCAG 2.1 AA. يضيف زر إمكانية الوصول، ويفحص التباين، والنص البديل، ويضمن التنقل لوحة المفاتيح. بدون هذه المهارة · التعرض لدعوى قضائية تصل إلى 50,000 شيقل.

نصيحة للوكلاء: المهارة هي نقطة بداية ممتازة، لكن المعيار الإسرائيلي صارم · يُفضل إجراء فحص يدوي إضافي بعد التثبيت لضمان الامتثال الكامل.

Hebrew Content Writer

كتابة محتوى عبري مهني

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

UI/UX Pro Max

تجربة المستخدم · 50 نمطاً، 161 لوحة ألوان

المهارة الأكثر شمولاً لتجربة المستخدم · 50 نمط تصميم، 161 لوحة ألوان، 57 زوج خطوط، وقواعد UX من رواد الصناعة. اختيار المرئيات الافتراضي لـ Claude يحصل على ترقية بمئات المرات.

OKLCH Color Engine

ألوان لا تبدو كأنها من صنع الذكاء الاصطناعي

مهارة تحسن لوحة ألوان الموقع. تستخدم مساحة ألوان متقدمة (OKLCH) لإنشاء لوحات احترافية لا تبدو وكأن الذكاء الاصطناعي بنى ذلك. ترقية فورية للجودة البصرية.

Emil Kowalski Skill

تجربة مستخدم مستندة إلى كبار المصممين

مهارة مبنية على عمل إميل كوفالسكي · أحد أبرز المصممين في العالم (Linear، Vercel). تركيزه · التفاعلات الدقيقة، الحركات الناعمة، والتفاصيل التي تحول موقعاً عادياً إلى تجربة.

Interface Details

تفاصيل تحدث فرقاً في التخطيط

مهارة مبنية على مقال لـ Jakub.kr حول التفاصيل التي تجعل الواجهة تشعر بالراحة. المسافات، استقرار الطباعة، المسافات الدقيقة، وجميع الفروق الصغيرة التي تميز بين موقع هاوٍ وموقع مميز.

Web Design Guidelines

Vercel Labs · أكثر من 250,000 عملية تثبيت أسبوعياً

مهارة لتصميم المواقع · أكثر من 250,000 تثبيت أسبوعياً. من Vercel Labs · المعيار الفعلي لتصميم المواقع بالذكاء الاصطناعي. إذا كنت ستثبت مهارة واحدة لموقع جديد · فهذه هي المهارة.

Refero Design Styles

قواعد التصميم من المواقع الرائدة

مكتبة أنماط تصميم تعتمد على المواقع الرائدة في العالم · Apple و Linear و Notion و Stripe وغيرها. تختار نمطاً ليقوم Claude بتطبيقه. طريقة سريعة للحصول على جماليات شركة عالمية.

المرحلة 6 · النشر على الهواء · الموقع حي على الإنترنت

🌐 سيكون النطاق المؤقت شيئاً مثل `my-project-xyz123.vercel.app`. إذا كنت تريد نطاقاً خاصاً بك (`mydomain.com`)، فقم بشرائه من SiteGround أو GoDaddy أو Cloudflare، واطلب من Claude ربطه بـ Vercel. هذه عملية مدتها 10 دقائق باستخدام سجلات DNS. إذا رغبت · سأقوم برفع فيديو منفصل يوضح ذلك.

ماذا تفعل بعد أن يصبح الموقع حياً

• **إرسال الرابط لعدة أصدقاء** · اطلب تعليقاتهم. الأشياء التي تراها بعد 50 مرة في الكود · يرونها بنقرة واحدة
• **استبدال جميع العناصر النائبة بمحتوى حقيقي** · صورك الخاصة، فيديو للعملاء، أرقام هواتف صحيحة
• **النسخ الاحتياطي إلى GitHub** · اطلب من Claude 'قم بعمل نسخة احتياطية لهذا الكود إلى GitHub خاص'. هكذا إذا انكسر شيء مستقبلاً · سيكون هناك ما يمكن الاستعادة منه
• **ربط نطاق خاص بك** (اختياري) · إذا كنت تريد أن تبدو احترافياً
• **إضافة تحليلات** · اطلب من Claude 'أضف Google Analytics 4 إلى الموقع'. هكذا ترى من يتصفح ومن أين

ما الذي يمكن بناءه باستخدام Vibe Coding · 8 أفكار

8 مشاريع يتم إنشاؤها باستخدام Claude Code في 45 دقيقة

• **صفحة هبوط للعمل التجاري** · قسم رئيسي قوي، شرح عن المنتج، تجارب العملاء، زر CTA للواتساب
• **موقع معرض أعمال** · معرض مشاريع، قصة شخصية، اتصال. ذو صلة بالمستقلين وصانعي المحتوى
• **Lead Magnet** · صفحة تقدم هدية (دليل، قائمة تحقق)، تجمع عناوين البريد الإلكتروني، وترسل عبر Make إلى RavMaser
• **موقع فعالية** · تفاصيل الفعالية، عداد تنازلي، تسجيل، خريطة
• **متجر صغير** · كتالوج منتجات، الدفع عبر Stripe أو Cardcom
• **موقع اشتراك أو دورة تدريبية** · تسجيل المستخدمين، الوصول إلى المحتوى، مساحة شخصية. على Supabase
• **لوحة تحكم داخلية للعمل** · رسوم بيانية، بيانات، إجراءات سريعة. لمكتبك
• **موقع للعملاء** · أنت تبني وتتقاضى أجراً. مع 21st.dev والمهارات · لن يصدق العميل أن هذا ليس مصمماً محترفاً

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

نعم، يفهم Claude العبرية بشكل ممتاز. يمكنك التحدث معه بالعبرية، والكتابة بالعبرية، والمواقع التي يبنيها تخرج بعبرية احترافية. الجانب الوحيد الذي تواجهه أحياناً تحديات معه هو اتجاه النص من اليمين لليسار RTL · خاصة عند خلط الإنجليزية داخل نص عبري. تساعد مهارة Hebrew Content Writer بشكل خاص في ذلك.

اشتراك Claude الأساسي (20 دولاراً شهرياً) يكفي لبناء موقع واحد. مع اشتراك Pro (100 دولار شهرياً) يمكنك بناء عدة مواقع في اليوم. الأدوات الثلاث (Vercel و Supabase و GitHub) مجانية. المهارات مجانية. باختصار · يكلفك الموقع الاحترافي بضع ساعات عمل ليس إلا. تحل المهارات إمكانية الوصول والخصوصية بنقرة واحدة.

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

نعم. بعد نشر الموقع على Vercel، تقول لـ Claude 'لدي نطاق mydomain.com اشتريته من X. اربطه بمشروع Vercel'. سيقوم بتوجيهك لتحديث سجلات DNS لدى مزود النطاق (SiteGround أو GoDaddy أو Cloudflare). تستغرق العملية 10 إلى 20 دقيقة، وبعدها يصبح الموقع حياً على نطاقك.

WordPress أو Wix أو Webflow · تختار قالباً جاهزاً، تسحب العناصر، وتكون مقيداً بما يسمح به النظام. يبدو الموقع 'قالباً'. Vibe Coding · يكتب Claude كوداً مخصصاً لموقعك. لا توجد قيود على العناصر أو التصميم أو الوظائف. هل تريد رسماً متحركاً فريداً؟ ميزة لم ترها في أي مكان؟ تكامل خاص؟ · سيقوم Claude ببنائه. بالإضافة إلى ذلك · الكود لك، وأنت مالكه، ولا يوجد ارتباط بمزود محدد (vendor lock-in).

نعم. تقول لـ Claude 'أضف للموقع متجراً يحتوي على 5 منتجات، مع ربط بـ Cardcom أو Stripe'. يقوم ببناء المتجر، عربة التسوق، صفحة الدفع، ويربطه بواجهة برمجة تطبيقات الدفع. تحتاج إلى فتح حساب لدى مزود الدفع، وتمرير مفاتيح الربط إلى Claude، وهو يكمل كل شيء.

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

نعم. خياران · 1) استخدام Supabase لتخزين رسائل البريد الإلكتروني، ثم الاتصال بـ RavMaser أو Resend أو Mailchimp عبر Make أو واجهة برمجة تطبيقات مباشرة. 2) وضع نموذج يتصل مباشرة بأداة النشرة الإخبارية الخاصة بك. تقول لـ Claude 'أضف للموقع نموذج بريد إلكتروني يتصل بـ RavMaser'. وهو يتولى الجانب التقني بالكامل.

💪 هل تريد مرافقة على طول الطريق؟