الندوة 2 من 7

أول موقع بـ Claude Code

من مجلد فارغ إلى صفحة هبوط تعمل على جوالك: التجهيز، وملف التعريف، والخطة، والبناء، وفن التعديل.

نزار كامل مدير تسويق أداء · يبني أنظمته بـ Claude Code
نزار كامل
قبل أن نبدأ

من مجلد فارغ إلى صفحة تعمل على جوالك

من الندوة 1

  • Claude Code مطوّر يعمل داخل مجلد مشروعك
  • تكلّمه بالعربي، وهو يكتب الكود ويشغّله ويصلحه
  • الطلب الجيد: سياق، هدف، قيود، شكل النتيجة

هدف اليوم

صفحة هبوط لعيادة أسنان، مبنية أمامكم خطوة بخطوة.

وتخرج وأنت تعرف كيف تعدّلها دون أن تفسدها.

1

التجهيز

مرة واحدة فقط، ثم لا تفكر فيه مجدداً.

أربع خطوات من التطبيق إلى أول رسالة

  1. افتح تطبيق Claude

    على الديسكتوب، وسجّل الدخول بحساب Pro

  2. اختر تبويب Code

    هنا يعمل Claude Code داخل التطبيق

  3. اختر مجلد المشروع

    المجلد الذي أنشأته لموقعك على جهازك

  4. اكتب أول رسالة

    بالعربي، كما تكلّم موظفاً جديداً

المجلد هو حدود العمل

Claude يرى ما داخل المجلد الذي تختاره ويعمل عليه. اجعل لكل مشروع مجلداً مستقلاً، ولا تختر سطح المكتب كله أو مجلد المستندات.

البديل

التثبيت من الطرفية، لمن يفضّلها

Terminal
# ويندوز: افتح PowerShell والصق
> irm https://claude.ai/install.ps1 | iex

# ماك: افتح Terminal والصق
> curl -fsSL https://claude.ai/install.sh | bash

# تأكد من التثبيت، ثم ادخل مجلد مشروعك وشغّله
> claude --version
> cd Desktop/my-site
> claude

Claude يستأذنك قبل أن يعدّل أو ينفّذ

يطلب الإذن لـمثالقرارك
تعديل ملف داخل المشروعتعديل index.htmlوافق بعد قراءة اسم الملف
إنشاء ملف أو مجلد جديدstyle.css · مجلد imagesوافق
تشغيل أمرتشغيل معاينة محليةوافق إن فهمت الغرض، وإلا فاسأل
حذف خارج المجلدملفات المستندات وسطح المكتبارفض
كلمات المرور والمفاتيححساب بنكي · مفتاح APIارفض، وأدخلها بنفسك

القاعدة: لا تضغط «موافق» على شيء لم تقرأه. سؤال «ماذا سيفعل هذا الأمر؟» مقبول دائماً.

2

ممّ يتكوّن الموقع

ثلاثة أنواع من الملفات، وتشبيه واحد يكفي.

الموقع بيت: هيكل، وشكل، وكهرباء

HTML الهيكل الجدران والغرف العناوين والنصوص والصور والأزرار CSS الشكل الدهان والأثاث الألوان والخطوط والمسافات والترتيب JS الحركة الكهرباء القوائم والنوافذ وما يتفاعل مع الزائر

لا تحتاج أن تكتب أياً منها. تحتاج أن تعرف أين تطلب التعديل: المحتوى في HTML، والشكل في CSS.

هذا كل ما في موقعك الأول

my-site مجلد المشروع index.html الصفحة المحتوى والهيكل: العناوين والنصوص والأزرار style.css التصميم الألوان والخطوط والمسافات وشكل الجوال script.js التفاعل القوائم والحركة. اختياري في صفحة بسيطة images/ الصور الشعار وصور العيادة، مضغوطة الحجم CLAUDE.md تعريف المشروع تعليماتك الثابتة له، لا يراها الزائر
3

CLAUDE.md

تكتب التعريف مرة، ويقرؤه Claude كل مرة.

CLAUDE.md هو ملف التعريف الذي يقرؤه Claude في بداية كل جلسة.

مثل الإحاطة التي تعطيها لموظف جديد في يومه الأول

مثال: ملف عيادة ابتسامة

CLAUDE.md
# عيادة ابتسامة لطب الأسنان · جدة
## النشاط
عيادة أسنان عائلية: تنظيف، تقويم، تبييض، زراعة.
## الجمهور
عائلات في جدة، تبحث من الجوال وتحجز عبر واتساب.
## الهوية
- لون واحد: أزرق بحري، للأزرار والروابط فقط
- خط واحد: IBM Plex Sans Arabic
## القواعد
- عربي بالكامل، والاتجاه من اليمين لليسار (RTL)
- صمّم للجوال أولاً، ثم الشاشات الكبيرة
- لا إيموجي في أي نص
- أرقام حقيقية فقط: لا تخترع أسعاراً ولا تقييمات ولا أعداد مرضى

لا تبدأ من صفحة بيضاء: /init

  1. اكتب /init داخل مجلد المشروع
  2. Claude يقرأ المجلد وينشئ CLAUDE.md مبدئياً
  3. اقرأه وعدّله: أضف نشاطك وجمهورك وقواعدك
  4. المجلد فارغ؟ صف نشاطك له، واطلب أن يكتب الملف
مثال طلب بعد /initأضف إلى CLAUDE.md قسماً باسم «القواعد»: الموقع عربي واتجاهه RTL، والتصميم للجوال أولاً، ولا إيموجي، ولا أرقام إلا من ملف prices.txt. لا تغيّر بقية الملف.
4

اطلب الخطة قبل البناء

مراجعة الخطة أرخص بكثير من تصحيح البناء.

Plan Mode

يفكّر ويقترح أولاً، ولا يلمس ملفاً حتى توافق

طلب ماذا تريد خطة يقرأ ويقترح ولا يعدّل مراجعتك توافق أو تعدّل بناء ينفّذ ما وافقت عليه تعديل الخطة

في تطبيق الديسكتوب

اختر وضع Plan من قائمة الأوضاع قبل أن ترسل طلبك.

في الطرفية

اضغط Shift + Tab حتى يظهر وضع plan mode.

بناء حي

الطلب الأول: صفحة هبوط العيادة

الطلب كما نكتبه الآن، في وضع Planاقرأ CLAUDE.md أولاً. ابنِ صفحة هبوط واحدة لعيادة ابتسامة، بهذه الأقسام بالترتيب: (1) واجهة فيها عنوان واضح وزر «احجز عبر واتساب». (2) الخدمات الأربع، بطاقة لكل خدمة. (3) الأسعار من ملف prices.txt فقط. (4) الأطباء: الاسم والتخصص وصورة من مجلد images. (5) الموقع: العنوان ورابط خرائط Google. (6) زر واتساب ثابت أسفل الشاشة على الجوال. صمّم للجوال أولاً بعرض 375px، واتجاه RTL. استخدم index.html و style.css فقط. اعرض الخطة قبل أن تكتب أي ملف.
أقسام مرقّمة بترتيبها مصدر الأرقام محدد الجوال أولاً ملفات محددة خطة قبل الكتابة

البناء الحي: خمس محطات

  1. الطلب

    الطلب السابق، في وضع Plan

  2. الخطة

    نقرأها معاً ونحذف ما لم نطلبه

  3. البناء

    نوافق، ونتابع الملفات وهي تُكتب

  4. المعاينة

    نفتح الصفحة ونفحصها بعرض الجوال

  5. التعديل

    ملاحظة واحدة، ثم معاينة من جديد

المحطتان الأخيرتان حلقة: معاينة، ثم تعديل، ثم معاينة، حتى ترضى عن الصفحة.

شاهد ما بُني، على عرض الجوال

افتح الملف

انقر مرتين على index.html في المجلد، فيفتح في متصفحك مباشرة.

اطلب معاينة

قل لـ Claude: «شغّل معاينة محلية للموقع وافتحها». في تطبيق الديسكتوب تظهر المعاينة داخل التطبيق.

افحص بعرض الجوال

في المتصفح اضغط F12 ثم زر وضع الجوال، واختر عرضاً قريباً من 375px.

احكم على الصفحة من عرض الجوال أولاً. شاشة الكمبيوتر تخفي أغلب المشاكل.

5

فن التعديل

الصفحة الأولى سهلة. التعديل هو المهارة الحقيقية.

ملاحظة واحدة محددة في كل مرة

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

أرفق صورة شاشة كلما أمكن: الصورة تختصر وصف المشكلة، و Claude يقرؤها.

أخطأ؟ ارجع خطوة، ولا تبدأ من الصفر

الواجهة نقطة رجوع الخدمات نقطة رجوع Git نقطة حفظ دائمة الأسعار نقطة رجوع تعديل أفسد الصفحة عشرة تعديلات دفعة واحدة رجوع

نقاط الرجوع التلقائية

Claude Code يحفظ نقطة رجوع مع كل طلب. اضغط Esc مرتين، أو اكتب /rewind، واختر النقطة.

نقطة حفظ في Git

بعد كل مرحلة ناجحة اطلب: «احفظ commit في Git باسم: الأسعار جاهزة». نسخة دائمة لا تضيع بإغلاق الجلسة.

وفّر على نفسك أسبوعاً

خمسة أخطاء يقع فيها كل مبتدئ

الخطأماذا يحدثالعلاج
طلب عامصفحة عامة تشبه آلاف الصفحاتأقسام بترتيبها، ومصادر، وقيود
عشرة تعديلات مرة واحدةينفّذ بعضها ويفسد غيرهاملاحظة واحدة، ثم معاينة
لا يوجد CLAUDE.mdتعيد شرح نشاطك في كل جلسةاكتبه أولاً، وحدّثه مع كل قاعدة جديدة
قبول كل الصلاحيات بلا قراءةأوامر لا تعرف ماذا فعلتاقرأ السطر، واسأل عمّا لا تفهمه
نسيان الجوالصفحة ممتازة على الكمبيوتر فقطافحص بعرض 375px بعد كل تعديل

ستة أوامر تكفيك اليوم

/init

ينشئ CLAUDE.md مبدئياً من محتوى المجلد.

/clear

مهمة جديدة؟ ابدأ بمحادثة نظيفة. CLAUDE.md يبقى.

/rewind

ارجع إلى نقطة سابقة في المحادثة والملفات.

/model

اختر النموذج. للبناء نستخدم Opus.

Esc

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

Shift+Tab

في الطرفية: بدّل الأوضاع حتى تصل إلى Plan.

قبل الندوة القادمة

ابنِ صفحتك أنت

  1. اكتب CLAUDE.md لنشاطك: النشاط، الجمهور، الهوية، القواعد
  2. خذ طلبك من الندوة 1 واطلب خطة لصفحة من 3 أقسام
  3. راجع الخطة ثم ابنِ، وعدّل بملاحظة واحدة في كل مرة
  4. افحصها بعرض الجوال والتقط صورة شاشة

أحضر معك

صورة شاشة لصفحتك على عرض الجوال، وسؤالاً واحداً واجهك أثناء البناء.

الهدف: 3 أقسام تعمل على الجوال، لا موقع كامل.

الندوة القادمة

موقع احترافي بعيد عن AI slop

كيف تجعل موقعك يبدو مصمَّماً بعناية، لا مولَّداً على عجل.

أسئلة؟nezarkamel.com