# عمل موقع بـ Claude Code: الخطوات من الفكرة إلى النشر

> اكتب مواصفات موقعك وخطط له، وافحص كل صفحة، واجعل صفحاته العربية من اليمين إلى اليسار، ثم انشره واعرف تكلفة عمل موقع بـ Claude Code بمفتاح API.

آخر تحديث: 2026-11-02

لعمل موقع بـ Claude Code، صِف الموقع بكلمات بسيطة، ودع Claude يحوّل الوصف إلى خطة، ثم وافق على الخطة، وابنِ صفحة واحدة في كل مرة وافحصها قبل الانتقال إلى التالية. وعندما يعمل الموقع، تنشره بأدوات الاستضافة التي اخترتها، ويستطيع Claude أن يشغّلها لك أيضًا.

## ماذا تحتاج قبل أن تبدأ؟

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

وأنشئ مستودع git أيضًا. نقاط الاستعادة في Claude Code تغطي الملفات التي يعدّلها Claude بأدواته فقط، ولا تغني عن git، لذلك أنشئ إيداعًا بعد كل صفحة تعمل:

```bash
mkdir my-site && cd my-site
git init
claude
```

## كيف تشرح الموقع لـ Claude؟

لست متأكدًا مما تريده بعد؟ دع Claude يجري معك مقابلة ويكتب الإجابات في ملف مواصفات، كما تقترح صفحة أفضل الممارسات من Anthropic:

```text
I want a small website for my bakery: home, menu, about and contact pages, in Arabic and English. Interview me until you could write the spec, then write it to SPEC.md.
```

يطرح Claude أسئلة اختيار من متعدد حتى تكتمل الإجابات في مواصفات واضحة. بعدها شغّل `/clear` وابدأ البناء من `SPEC.md` في جلسة جديدة، بسياق نظيف وتعريف مكتوب لما يعنيه «انتهى العمل».

إذا وجدت تصميمًا يعجبك، فالصق لقطة شاشة منه بالاختصار `Ctrl+V` (و`Alt+V` على Windows وWSL)، أو اسحب الصورة إلى النافذة، أو أعطِ Claude مسارها، واطلب منه أن يطابق التخطيط. وإذا أردت أكثر من الحد الأدنى، فاكتب `be ambitious` واذكر ما تقصده، مثل تخطيط الهاتف والحالات الفارغة والتنقل بلوحة المفاتيح، وإلا فإن Claude يميل إلى بناء أصغر شيء يلبّي الطلب.

## كيف تخطط للبناء في وضع الخطة؟

في وضع الخطة يقرأ Claude ويستكشف ويقترح خطة دون أن يعدّل ملفاتك. اضغط `Shift+Tab` حتى يظهر `⏸ plan mode on` في شريط الحالة، أو ابدأ بالأمر `claude --permission-mode plan`، أو ضع `/plan` قبل طلب واحد:

```text
/plan Read SPEC.md and plan the build: the stack, the folder layout, one header and footer for every page, and how you will check each page. No new libraries unless the spec needs them.
```

عندما تجهز الخطة، يوافق الخيار **Yes, and use auto mode** عليها ويترك مصنِّفًا يفحص الإجراءات الخطرة بدلًا من سؤالك (وحيث لا يتوفر الوضع التلقائي يظهر باسم **Yes, auto-accept edits**). ويعرض عليك **Yes, manually approve edits** كل تعديل، ويفتح `Ctrl+G` الخطة في محرر النصوص.

اقرأ الخطة قبل أن توافق عليها: إنها أرخص لحظة لتغيير رأيك، ولهذا يوصي دليل التكاليف من Anthropic بوضع الخطة للمهام المعقدة.

## كيف تبني كل صفحة وتفحصها؟

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

```text
Build the menu page from SPEC.md, using the same header and footer as index.html. Mobile first, no new libraries. Tell me the command you ran to check it and its output.
```

يتوقف Claude عندما يبدو العمل منتهيًا، فأعطه فحصًا نتيجته نجاح أو فشل، مثل رمز الخروج من أمر البناء أو أداة فحص الكود أو لقطة شاشة بجانب التصميم، واطلب الأمر الذي شغّله ومخرجاته بدلًا من عبارة «يعمل». وعندما يقول Claude إن الصفحة انتهت، يجعله `/verify` يبني الموقع ويشغّله وينظر إلى النتيجة، ويفتح `/run` الموقع لترى التغيير. والأمران يعملان دون إعداد.

مع إضافة Claude in Chrome والأمر `claude --chrome`، يستطيع Claude أن يفتح موقعك المحلي ويقرأ أخطاء وحدة التحكم ويقارن الصفحة بالتصميم. لكن ذلك يحتاج إلى اشتراك مباشر من Anthropic مع تسجيل الدخول بالأمر `/login`، ويبقى معطّلًا مع مفتاح API حتى مع `--chrome`، فالصق لقطة الشاشة بنفسك.

إذا ابتعد Claude عن المطلوب، فاضغط `Esc`، ويعيد `/rewind` الكود أو المحادثة أو كليهما إلى طلب سابق. وبقية الأوامر في [أوامر Claude Code](https://5abeer.ai/ar/guides/claude-code-commands).

عندما تستقر التقنيات المستخدمة، شغّل `/init` لإنشاء ملف `CLAUDE.md` أولي، واختصره إلى أوامر البناء والفحص والقواعد التي لا يراها Claude في الكود ([دليل ملف CLAUDE.md](https://5abeer.ai/ar/guides/claude-md-guide)).

## كيف تجعل الصفحات العربية من اليمين إلى اليسار؟

اطلب هذا مرة واحدة في بداية البناء:

```text
Set lang="ar" or lang="en" on every page's <html> tag, and dir="rtl" on the Arabic ones. Don't set direction in CSS; use logical properties such as margin-inline-start instead of left and right. Give every page hreflang links to itself and to its twin in the other language.
```

توصي W3C بتحديد الاتجاه بالسمة `dir` في وسم `html` لا في CSS، وبتحديد اللغة بالسمة `lang` أيضًا، لأن إحداهما لا تغني عن الأخرى. وتتجاهل Google وسوم `hreflang` إذا لم تُشِر كل صفحة من الصفحتين إلى الأخرى. ضع القاعدتين في `CLAUDE.md` لتتبعهما الصفحات الجديدة، وافحص كل صفحة عربية بعرض شاشة الهاتف قبل الإيداع.

## كيف تنشر الموقع؟

الموقع المكتوب بـ HTML وCSS وJavaScript مجلد من الملفات الثابتة تستطيع أي استضافة ثابتة أن تقدّمه، أما إطار العمل فيضيف خطوة بناء تكتب هذه الملفات في مجلد للمخرجات. حدد الاستضافة في الخطة، وضع أمر النشر في `CLAUDE.md`. ويشغّل Claude Code أداة سطر الأوامر الخاصة باستضافتك بعد تثبيتها وتسجيل الدخول فيها، وللأداة التي لم يرها من قبل يكفي أن توجهه إلى `--help`.

أبقِ النشر في يدك. يمنع مصنِّف الوضع التلقائي النشر إلى بيئة الإنتاج افتراضيًا، ويسأل الوضع اليدوي قبل معظم التعديلات وأوامر الطرفية. ولتجعل النشر خطوة لا يبدؤها غيرك، احفظه مهارة فيها `disable-model-invocation: true`، فلا تعمل إلا عندما تكتب `/deploy`، كما يشرح [دليل المهارات](https://5abeer.ai/ar/guides/claude-code-skills):

```text
---
name: deploy
description: Deploy the site to production.
disable-model-invocation: true
---

1. Check that the working tree is clean and on main. If not, stop and ask.
2. Run the build and stop if it fails.
3. Run the deploy command from CLAUDE.md, then open the live URL and report what you see.
```

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

## كم تكلفة بناء موقع بـ Claude Code؟

مع مفتاح API تدفع مقابل التوكنات التي يرسلها كل طلب ويستقبلها. يحمل كل طلب المحادثة كاملة، ويُخزَّن الجزء المتكرر منها تخزينًا مؤقتًا بسعر أقل، لكن هذا التخزين يدوم نحو خمس دقائق فقط مع المفتاح، فيدفع أول طلب بعد استراحة أطول السعر الكامل مرة أخرى.

مثال تقديري لا قياس: شهر من الجلسات المسائية على موقع صغير يرسل عشرة ملايين توكن ويستقبل ستمئة ألف، على [`claude-sonnet-5.5`](https://5abeer.ai/ar/models/claude-sonnet-5.5):

مثال: 10,000,000 توكن إدخال و600,000 توكن إخراج على Claude Sonnet 5.5 (`claude-sonnet-5.5`) تكلّف 7.80 US$ بسعرنا مقابل 26.00 US$ بالسعر الرسمي (أقل بنسبة 70%). آخر مراجعة للسعر الرسمي: 19 أكتوبر 2026.

أرقامك تعتمد على حجم الموقع وطول جلساتك. يقدّر `/usage` تكلفة الجلسة بسعر Anthropic الرسمي، لذلك راجع على مفتاح 5abeer ما خُصم فعلًا في [تتبع استخدامك](https://5abeer.ai/ar/docs/start/pricing.md#usage). ولتخفيض الفاتورة: `/clear` بين المهام غير المترابطة، ووضع الخطة قبل التغييرات الكبيرة، وSonnet للصفحات المعتادة مع الانتقال إلى [`claude-opus-5.5`](https://5abeer.ai/ar/models/claude-opus-5.5) عبر `/model` للمشكلات الصعبة فقط، ومستوى أقل من `/effort` للتعديلات الصغيرة المتتالية.

## ابنِ موقعك بـ Claude Code عبر 5abeer

5abeer خدمة مستقلة لا تتبع Anthropic. واجهتها البرمجية تتبع صيغة Anthropic Messages، لذلك يعمل معها Claude Code كما يصدر، والطريقان بسعر أقل من السعر الرسمي.

وضع الخطة و`/verify` والمهارات وملف `CLAUDE.md` كلها تعمل داخل Claude Code على جهازك، فتعمل بالطريقة نفسها على مفتاح 5abeer، ولا يتغير إلا عنوان الأساس والمفتاح.

**بمفتاح API:** أنشئ مفتاحًا لنماذج Claude، ثم ضع عنوان الأساس والمفتاح في إعدادات Claude Code:

| الصيغة | العنوان الأساسي | ترويسة المفتاح |
| --- | --- | --- |
| OpenAI | `https://api.5abeer.ai/v1` | `Authorization: Bearer <KEY>` |
| Anthropic | `https://api.5abeer.ai` | `x-api-key: <KEY>` |
| Gemini | `https://api.5abeer.ai/v1beta` | `x-goog-api-key: <KEY>` |

`~/.claude/settings.json`

```json
{
  "env": {
    "ANTHROPIC_BASE_URL": "https://api.5abeer.ai",
    "ANTHROPIC_AUTH_TOKEN": "YOUR_5ABEER_API_KEY",
    "ANTHROPIC_MODEL": "claude-sonnet-5.5"
  }
}
```

يُخصم كل طلب من رصيدك بحسب النموذج وعدد التوكنات، وتتحكم في كل مفتاح بحد إنفاق وتاريخ انتهاء وقائمة عناوين IP مسموح بها. الإعداد الكامل في [إعداد Claude Code](https://5abeer.ai/ar/docs/apps/claude-code.md)، والأسعار في [Claude API](https://5abeer.ai/ar/api/claude).

إذا كان الموقع نفسه يستدعي نموذجًا، مثل نافذة محادثة في صفحة التواصل، فأرسل هذا الطلب من الخادم وليس من المتصفح أبدًا، بمفتاح منفصل له حد إنفاق خاص. ويشرح دليل [إضافة شات بوت إلى موقعك](https://5abeer.ai/ar/guides/website-chatbot-api) كود الخادم خطوة بخطوة.

**بالاشتراك:** يفعّل تطبيق 5abeer AI أداة Claude Code على اشتراكك بضغطة واحدة، دون مفتاح ودون تعديل ملفات. ويعمل الاشتراك بحد كل خمس ساعات وحد أسبوعي، كما في [حدود الاشتراك](https://5abeer.ai/ar/docs/subscriptions/limits.md). الباقات مخصصة للتطبيقات المدعومة، ولاستخدام النماذج من الكود الخاص بك تحتاج إلى مفتاح API. راجع [ما الذي تشغّله كل باقة](https://5abeer.ai/ar/docs/subscriptions/plan-apps.md#claude-code) و[صفحة الأسعار](https://5abeer.ai/ar/pricing).

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

### هل يستطيع Claude Code أن يبني موقعًا كاملًا وحده؟

يستطيع أن يكتب كل الملفات ويشغّل الموقع ويصلح ما يتعطل، لكنه لا يعرف محتواك ولا هويتك ولا ما تعدّه عملًا منتهيًا. أعطه مواصفات وفحصًا يستطيع تشغيله، وسيتولى معظم الباقي.

### هل أستطيع بناء موقع بهذه الطريقة دون أن أعرف البرمجة؟

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

### أي إطار عمل أستخدم؟

لموقع صغير دون تفضيل مسبق، اطلب HTML وCSS وJavaScript عادية: لا خطوة بناء، وتستطيع أي استضافة ثابتة أن تقدّمه. وإذا أردت إطار عمل معينًا، فاذكره في الطلب الأول.

### هل أستطيع أن أعطي Claude تصميمًا لينسخه؟

نعم. الصق ما تحتاجه من لقطات الشاشة، أو اسحبها إلى النافذة، أو أعطه مساراتها، واطلب منه أن يطابق التخطيط والألوان.

### هل يبقى الموقع يعمل إذا توقفت عن استخدام Claude Code؟

نعم. الموقع ملفات عادية في مجلدك وفي سجل git، وتقدّمه الاستضافة. تحتاج إلى Claude Code، باشتراك أو بمفتاح، لتعديل الموقع فقط، إلا إذا كان الموقع يستدعي نموذجًا بنفسه: فهذا الكود يحتاج إلى مفتاح API فيه رصيد.

## المصادر

راجعنا هذه المصادر في 2 نوفمبر 2026.

- [توثيق Claude Code: Best practices for Claude Code](https://code.claude.com/docs/en/best-practices)
- [توثيق Claude Code: Common workflows](https://code.claude.com/docs/en/common-workflows)
- [توثيق Claude Code: Choose a permission mode](https://code.claude.com/docs/en/permission-modes)
- [توثيق Claude Code: Use Claude Code with Chrome](https://code.claude.com/docs/en/chrome)
- [توثيق Claude Code: Manage costs effectively](https://code.claude.com/docs/en/costs)
- [توثيق Claude Code: Extend Claude with skills](https://code.claude.com/docs/en/skills)
- [W3C: Structural markup and right-to-left text in HTML](https://www.w3.org/International/questions/qa-html-dir)
- [Google Search Central: Tell Google about localized versions of your page](https://developers.google.com/search/docs/specialty/international/localized-versions)

## ابدأ

لتقارن تكلفة Claude Code على الاشتراك وعلى مفتاح API، اقرأ [أرخص طريقة لاستخدام Claude Code](https://5abeer.ai/ar/guides/claude-code-cheapest-way)، أو جهّز Claude Code الآن.