هنمشي بنفس الترتيب اللي في الفيديو: خطة ← بناء ← مراجعة ← نشر. كل خطوة فيها الطلب جاهز تنسخه، وإنت هتشوف إيه بعدها.
قبل ما تبدأ
- اشتراك Claude Pro أو أعلى (20$ في الشهر، أو 17$ في الشهر لو سنوي). المجاني مفيهوش Claude Code، بس فيه طريق ببلاش تحت.
- كمبيوتر Windows 10 (1809 أو أحدث) أو Mac (macOS 13 أو أحدث)، و4 جيجا رام، ونت.
- حساب Netlify ببلاش (هتعمله في خطوة النشر).
- 5 دقايق تفكير في مشروعك: الاسم، بتعمل إيه، لمين، رقم الواتساب، ولونين بتحبهم.
الخريطة: خطة ← بناء ← مراجعة ← نشر
- خطة: Claude يسألك ويكتب خطة قبل ما يلمس حاجة.
- بناء: يعمل الموقع، وانت تعدّل بكلامك العادي.
- مراجعة: يراجع شغله بنفسه، وانت تتأكد بعينك.
- نشر: الموقع يبقى على لينك حقيقي.
التسطيب
نصيحةمش عايز Terminal خالص؟ نزّل تطبيق Claude من claude.ai/download، سجّل دخول، ودوس على تبويب Code، واقفز لخطوة 3. اللي جاي ده لو عايز الـ Terminal (أقوى وفيه كل الأوامر).
على Windows: دوس Start واكتب PowerShell وافتحه (مش محتاج Run as administrator). بص على أول السطر: لو بيبدأ بـ PS زي PS C:\Users\Ahmed> يبقى انت في PowerShell. الصق ده واضغط Enter:
irm https://claude.ai/install.ps1 | iex
ليه شغال؟ده المسطّب الرسمي، وبيحدّث Claude Code لوحده بعد كده.
لو السطر عندك من غير PS (زي C:\Users\Ahmed>) يبقى انت في CMD. استخدم ده بدل اللي فوق:
curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd
على Mac: دوس Cmd+Space واكتب Terminal وافتحه. على Linux: افتح الـ Terminal. والصق:
curl -fsSL https://claude.ai/install.sh | bash
طرق تانية لو متعوّد عليها: winget install Anthropic.ClaudeCode على Windows، أو brew install --cask claude-code على Mac. الاتنين مش بيحدّثوا نفسهم، فهتحدّث بإيدك كل فترة.
نصيحةGit for Windows مش شرط، بس مستحسن: من غيره Claude Code بيشتغل بـ PowerShell، ومعاه بيستخدم Git Bash. سطّبه من git-scm.com (Next لحد Finish) وخلاص.
اتأكد إنه اتسطّب: اقفل الـ Terminal وافتح واحد جديد (مهم)، واكتب:
claude --version claude doctor
ليه شغال؟الأول بيقولك النسخة، والتاني بيكشف لو فيه حاجة ناقصة في التسطيب.
هتشوفهيطلعلك رقم نسخة (version). لو ظهر، انت جاهز.
أول تشغيل
- اعمل فولدر فاضي على الـ Desktop اسمه my-first-site.
- افتح الـ Terminal جوّاه: اكتب cd ومسافة، واسحب الفولدر وارميه في الـ Terminal، واضغط Enter. (على Windows فيه طريقة أسهل: افتح الفولدر، اكتب powershell في شريط العنوان فوق، واضغط Enter.)
- اكتب claude واضغط Enter.
- اختار شكل الكتابة (Dark عادي).
- اختار Claude account with subscription، ووافق في المتصفح.
- لما يسألك تثق في الفولدر ده؟ قول Yes، ده فولدر انت عامله.
نصيحةوقت الدخول متختارش Console/API: ده بيتحاسب بالاستخدام لوحده، وممكن يطلع أغلى بكتير من الاشتراك. لو اخترته بالغلط، اكتب /login واختار الاشتراك.
هتشوفهتلاقي مكان تكتب فيه، ومكتوب اسم الفولدر. Claude Code جاهز يشتغل جوّاه.
خطة: الطلب اللي بيفرق
اضغط Shift+Tab لحد ما تشوف plan mode تحت (في التطبيق: اختار Plan من زرار الوضع). املا الأقواس والصق:
أنا مش مبرمج، فكلّمني ببساطة ومن غير مصطلحات. عايز موقع صفحة واحدة لمشروعي: - اسم المشروع: [الاسم] - بنعمل إيه: [وصف في سطرين] - المكان: [المنطقة والمدينة] - الزباين: [مين بالظبط، مثلًا: أولياء أمور طلاب ثانوي في المنطقة] - هدف الموقع: الزائر يكلّمنا على واتساب. الأقسام بالترتيب: 1) أول الصفحة: عنوان كبير بيقول بنعمل إيه، وسطر تحته، وزرار «كلّمنا على واتساب». 2) خدماتنا: [3 إلى 5 خدمات، وأسعارها لو عايز]. 3) ليه احنا: [3 أسباب حقيقية]. 4) المواعيد والعنوان، ولينك Google Maps: [حط اللينك أو سيبه فاضي]. 5) أسئلة بتتكرر: [سؤالين أو 3 بإجاباتهم]. الشكل: - عربي، من اليمين للشمال، بخط واضح. - معمول للموبايل الأول، وشكله كويس على الكمبيوتر برضو. - الألوان: [مثلًا: كحلي وأبيض، هادي ومحترم]. - رقم الواتساب: [الرقم بالشكل الدولي من غير +، مثلًا 2010xxxxxxxx]. - ملف index.html ومعاه ملف CSS لو محتاج. من غير أي حاجة معقدة. - متألّفش آراء عملاء ولا أرقام ولا إنجازات: أي كلام مش موجود هنا حطه بين [ ] وأنا أكمّله. قبل ما تبني: اسألني عن أي حاجة ناقصة (سؤال واحد كل مرة)، وبعدين وريني الخطة.
ليه شغال؟كل سطر بيقفل باب تخمين: مين الزبون، إيه الهدف، الشكل، وإيه اللي ممنوع يتألّف. والأسئلة الأول بتطلّع موقع شبه مشروعك انت مش أي موقع.
هتشوفهيسألك كام سؤال، وبعدين يكتب خطة: الملفات اللي هيعملها والأقسام. اقراها. لو عايز تغيّر حاجة اكتبها، ولو تمام وافق (Yes, auto-accept edits).
بناء + 3 تعديلات
افتحلي الموقع في المتصفح.
دلوقتي عدّل. تعديل واحد في كل رسالة، ووصف اللي شايفه بكلامك:
زرار الواتساب مش باين كفاية. خليه أخضر وأكبر، وخليه ثابت تحت في الموبايل وأنا بنزل في الصفحة.
ليه شغال؟رسالة واحدة = تعديل واحد. كده لو حاجة باظت هتعرف السبب على طول.
زوّد قسم «آراء أولياء الأمور» قبل المواعيد، فيه 3 كروت فاضية بالشكل ده: [الاسم] - [الرأي]. متكتبش آراء من عندك، أنا هملاها.
اتأكد من الصفحة على مقاس موبايل (عرض 375). صلّح أي كلام صغير أو لازق في بعضه أو خارج الشاشة، وقولّي غيّرت إيه.
هتشوففي كل تعديل هتشوف الملفات بتتغير. لو وضع «اسأل قبل التعديل» شغال، هتشوف الأحمر (اللي هيتشال) والأخضر (اللي هيتضاف) قبل ما توافق. اعمل Refresh في المتصفح وشوف الفرق.
مراجعة زي المحترفين
راجع الموقع مرتين: مرة كأنك زبون بيشوفه لأول مرة، ومرة كأنك مراجع شاطر. 1) كل الزراير واللينكات شغالة؟ (واتساب، الخريطة) 2) فيه أخطاء إملائية أو جمل مش مفهومة؟ 3) شكله على الموبايل والكمبيوتر تمام؟ 4) فيه أي كلام انت ألّفته ومش من عندي؟ طلّعهولي. اعمل جدول بالمشاكل وإزاي هتحلها، ومتصلّحش حاجة غير لما أوافق. وفي الآخر اشرحلي كل ملف في الفولدر بيعمل إيه، في سطر واحد.
ليه شغال؟البند 4 أهم واحد: بيطلّع أي حاجة اتألّفت قبل ما توصل للزباين.
ملف التعليمات CLAUDE.md
كل جلسة جديدة Claude بيبدأ ناسي كل حاجة. CLAUDE.md ملف صغير في الفولدر، Claude بيقراه أول ما يفتح، زي ورقة تعليمات لموظف جديد. خليه قصير: قواعد قليلة وواضحة بتتنفذ أحسن من صفحات طويلة.
# موقع [اسم المشروع] صفحة واحدة لـ [بنعمل إيه] في [المكان]. الهدف: الزائر يكلّمنا على واتساب. صاحب المشروع مش مبرمج: اشرح ببساطة ومن غير مصطلحات. ## القواعد - عربي، من اليمين للشمال، والموبايل الأول. - الألوان: [اللونين]. متغيّرهاش من غير ما تسألني. - متألّفش أي كلام أو أسعار أو آراء. اللي ناقص حطه بين [ ]. - متمسحش أي ملف من غير ما تسألني. - قبل ما تقول «خلصت»: افتح الصفحة واتأكد بنفسك. ## الذاكرة - بعد أي تغيير مهم، زوّد سطر واحد في changelog.md: اتغيّر إيه وليه. - اقرا changelog.md أول كل جلسة.
ليه شغال؟سطر changelog بيخلي أي جلسة جديدة تعرف انت وقفت فين، من غير ما تحكي من الأول.
نصيحةأسهل طريقة: قول لـ Claude Code «اعمل ملف اسمه CLAUDE.md فيه الكلام ده» والصقه. ولو عندك مشروع فيه ملفات بالفعل، الأمر /init بيخليه يكتب واحد لوحده من اللي شايفه.
النشر ببلاش على Netlify
- افتح app.netlify.com/drop في المتصفح.
- اسحب فولدر my-first-site كله وارميه في الصفحة.
- ثواني وهيديك لينك.
- اعمل حساب Netlify ببلاش واعمل Claim للموقع. ليه؟ من غير حساب الموقع بيبقى عليه باسوورد، وبيفضل حوالي ساعة وبعدين بيختفي. بعد الـ Claim بيفضل معاك.
- من إعدادات الموقع تقدر تغيّر أول جزء من اللينك لاسم مشروعك.
هتشوفافتح اللينك من موبايلك. ده موقعك على النت، وتقدر تبعته لأي حد.
نصيحةلما تعدّل الموقع بعد كده: من صفحة الموقع في Netlify ادخل Deploys واسحب الفولدر تاني. نفس اللينك، بالشكل الجديد.
مثال كامل: «سنتر النور» في المنصورة
- الاسم: سنتر النور - بنعمل إيه: دروس رياضة وفيزيا لتانية وتالتة ثانوي، مجموعات صغيرة (8 طلاب بالكتير) - المكان: المنصورة، حي الجامعة - الزباين: أولياء أمور وطلاب ثانوي - الخدمات: مجموعة رياضة، مجموعة فيزيا، حصص مراجعة قبل الامتحان - الألوان: كحلي وأصفر هادي
Claude: سؤال قبل ما أبدأ: عايز أسعار المجموعات تظهر في الموقع، ولا الزائر يسأل على واتساب؟ انت: يسأل على واتساب. Claude: تمام. الخطة: 1) ملف index.html وملف style.css. 2) أول الصفحة: «رياضة وفيزيا لثانوي في مجموعات صغيرة» + زرار واتساب. 3) خدماتنا: 3 كروت. 4) ليه احنا: [3 أسباب هتكتبها انت]. 5) المواعيد والعنوان + الخريطة. 6) أسئلة بتتكرر. 7) زرار واتساب ثابت تحت على الموبايل. أبدأ؟ (بعد 3 تعديلات ومراجعة: ملفين في الفولدر، ولينك على Netlify.)
مش معاك Pro؟ الطريق المجاني
- افتح claude.ai (المجاني) وابدأ شات جديد.
- الصق نفس طلب الموقع، وزوّد في آخره: «اعمله في ملف HTML واحد كـ Artifact».
- هيظهرلك الموقع جنب الشات. عدّل بنفس طلبات التعديل اللي فوق.
- عشان تنشره: لو ظاهرلك زرار Publish دوس عليه وخد لينك عام (بيفتح مع أي حد من غير حساب). أو نزّل الملف وارميه في Netlify Drop زي خطوة 7.
الفرق بصراحة: الطريق ده كويس جدًا لصفحة واحدة. Claude Code أحسن لما المشروع يكبر: ملفات كتير، وصور، وتعديلات محفوظة على جهازك، وملف تعليمات بيفتكره.
لو حاجة مش مظبوطة
لو حاجة مش مظبوطة
'irm' is not recognized
انت في CMD مش PowerShell. استخدم أمر CMD اللي فوق، أو افتح PowerShell.
The token '&&' is not a valid statement separator
انت في PowerShell وبتلصق أمر CMD. استخدم أمر PowerShell (irm …).
'claude' is not recognized أو command not found
اقفل الـ Terminal وافتح واحد جديد. لو لسه، شغّل claude doctor، أو الصق الرسالة في شات Claude العادي وقوله انت على أنهي جهاز.
اخترت Console/API بالغلط وقت الدخول
اكتب /login واختار Claude account with subscription.
الموقع باظ بعد تعديل
اكتب /rewind وارجع لنقطة قبل التعديل. بيرجّع الملفات والكلام مع بعض.
لينك Netlify طلب باسوورد أو اختفى
ده موقع متعملوش Claim. ارفعه تاني وانت داخل بحسابك.
4 حركات محترفين
- /rewind: زي Ctrl+Z للشغل كله. بيرجّع الملفات والكلام لأي نقطة قبل كده.
- /clear: محادثة جديدة نضيفة. استخدمه لما تخلص حاجة وتبدأ حاجة تانية. CLAUDE.md وchangelog.md هيفكّروه بالمهم.
- قاعدة الـ 50%: كل ما المحادثة تطول، Claude بيبدأ ينسى ويلخبط. /context بيوريك المحادثة مليانة قد إيه. لو عدّت النص: /compact لو لسه في نفس المهمة (بيلخّص ويكمّل)، أو /clear لو مهمة جديدة.
- Esc: يوقفه في النص لو ماشي في سكة غلط، وبعدين تقوله «لأ، مش ده اللي قصدته، أنا عايز…».
كلمات هتقابلك
- PowerShell / CMD
- نوعين من شاشة الأوامر في Windows.
- index.html
- الصفحة الرئيسية لأي موقع.
- CSS
- ملف الشكل: الألوان والخطوط والمسافات.
- Deploy (نشر)
- إن موقعك يبقى على لينك للناس.
- Claim
- إنك تسجّل الموقع باسمك عشان يفضل.
- Context
- اللي Claude فاكره من المحادثة دلوقتي.
عايز تعدّل الموقع بالكلام وهو يتنشر لوحده؟ قول لـ Claude Code: «عايز أرفع الموقع ده على GitHub وأربطه بـ Netlify عشان أي تعديل يتنشر لوحده. اشرحلي الخطوات واحدة واحدة ببساطة، ومتعملش حاجة غير لما أوافق».
المصادر: Claude Code: التسطيب والأخطاء الشائعة · دليل الـ Terminal للمبتدئين (Anthropic) · أسعار Claude · نشر الـ Artifacts · Netlify Drop