كيف تبني موقعاً كاملاً باستخدام Cursor وClaude في 2026: دلي…

Сhoose

الفئة: تطوير المواقع

التاريخ: April 14, 2026

الكاتب: Joyboy Team

عن الكاتب

Joyboy Team

Editorial Team

Joyboy's editorial team writes practical guides on software, apps, automation, and digital product delivery.

قبل بضع سنوات، كان إنشاء موقع ويب يعني إما التعاقد مع مطور، أو قضاء أسابيع في تعلم التعليمات البرمجية، أو الاستقرار على أداة إنشاء السحب والإفلات التي تشبه أي موقع ويب آخر على الإنترنت. وفي عام 2026، لم يعد هذا هو الواقع. لقد أتاحت أدوات مثل Cursor وClaude لشخص يتمتع برؤية واضحة ومعرفة بأساسيات الكمبيوتر إنشاء موقع ويب حقيقي ومخصص وجاهز للإنتاج - دون كتابة كل سطر من التعليمات البرمجية من الصفر.

هذا ليس دليلاً حول كيفية البرمجة في طريقك إلى نموذج أولي معطل. إنها إرشادات عملية خطوة بخطوة حول كيفية استخدام Cursor وClaude معًا لإنشاء موقع ويب كامل - بدءًا من إعداد البيئة الخاصة بك وحتى نشر شيء مباشر يعمل بالفعل.

ما هو المؤشر ولماذا يهم في عام 2026

Cursor هو محرر أكواد برمجية أصلي يعمل بالذكاء الاصطناعي ومبني على VS Code بواسطة Anysphere, Inc. وهو ليس مكونًا إضافيًا أو امتدادًا - إنه بيئة تطوير متكاملة مستقلة تمت إعادة بنائه من الألف إلى الياء حول سير عمل الذكاء الاصطناعي أولاً. بينما كان GitHub Copilot يبدو وكأنه مساعد الذكاء الاصطناعي الذي يهمس باقتراحات التعليمات البرمجية أثناء الكتابة، فإن Cursor في 2026 عبارة عن بيئة تطوير متكاملة (IDE) متكاملة مبنية على الذكاء الاصطناعي - مع تفكير متعدد الملفات، ووكلاء طويلي التشغيل، وفهم على مستوى المستودع.

أحدث إصدار، Cursor 2.6، يقدم واجهات مستخدم تفاعلية في محادثات الوكلاء، وتطبيقات MCP التي تدعم الواجهات التفاعلية مثل المخططات من Amplitude والرسوم البيانية من Figma مباشرة داخل Cursor، وأسواق الفريق لمشاركة المكونات الإضافية الخاصة.

ما يجعل Cursor قويًا بشكل خاص في إنشاء مواقع الويب هو ميزة Composer - وهو وكيل يمكنه تخطيط وتنفيذ التغييرات عبر مشروعك بالكامل في وقت واحد. أنت تصف ما تريد، ويقرأ المؤشر قاعدة التعليمات البرمجية الخاصة بك، ويكتب التعليمات البرمجية التي تناسب البنية الحالية لديك، وينفذ التغييرات عبر ملفات متعددة في وقت واحد.

ما هو كلود وكيف يتناسب

Claude هو نموذج الذكاء الاصطناعي الخاص بـ Anthropic، وهو أحد النماذج المتاحة مباشرة داخل Cursor. يدعم المؤشر GPT-4.1، وGPT-5.2، وClaude Sonnet 4.6 مع نافذة سياق الرمز المميز 1M في النسخة التجريبية، وGemini 3 Pro، وGrok Code.

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

يمكنك أيضًا استخدام Claude مباشرةً على claude.ai جنبًا إلى جنب مع Cursor — لتخطيط بنية موقعك، أو صياغة المحتوى، أو توليد أفكار المكونات، أو استكشاف المشكلات وإصلاحها التي تحتاج إلى أسلوب محادثة بدلاً من التحرير المباشر للتعليمات البرمجية.

الخطوة 1: تنزيل وتثبيت المؤشر

قم بزيارة cursor.sh وقم بتنزيل برنامج التثبيت لنظام التشغيل الخاص بك - Windows، أو macOS، أو Linux، بما في ذلك ARM.

على الويندوز: قم بتشغيل المثبت الذي تم تنزيله. اقبل مسار التثبيت الافتراضي، واختر ما إذا كنت تريد إضافة المؤشر إلى المسار الخاص بك، ثم قم بتشغيله من قائمة "ابدأ" عند الانتهاء. إذا قام Windows Defender أو Endpoint Security بوضع علامة على المثبت، فاسمح له من مصدر المؤشر الرسمي - يتم توقيع المثبت.

على نظام التشغيل MacOS: افتح الملف الذي تم تنزيله .dmg الملف، واسحب المؤشر إلى مجلد التطبيقات، وقم بتشغيله. عند التشغيل لأول مرة، قد يطلب منك macOS تأكيد فتح التطبيق الذي تم تنزيله - انقر فوق "فتح".

على نظام لينكس: قم بتنزيل أحدث إصدار من Cursor AppImage باستخدام:

bash
curl -L "https://www.cursor.com/download/linux/appimage" -o cursor.AppImage
chmod +x cursor.AppImage
./cursor.AppImage

أو لديبيان/أوبونتو:

bash
curl -L "https://www.cursor.com/download/linux/deb" -o cursor.deb
sudo apt install ./cursor.deb

أحدث إصدار حالي اعتبارًا من مارس 2026 هو 2.6.14، وتم إصداره في 8 مارس 2026.

الخطوة 2: قم بتسجيل الدخول واختر خطتك

عند التشغيل لأول مرة، سيطلب منك Cursor تسجيل الدخول باستخدام حساب GitHub أو Google أو حساب البريد الإلكتروني.

خطة Hobby مجانية دون الحاجة إلى بطاقة ائتمان — فهي تتضمن طلبات محدودة للوكيل وإكمال علامات التبويب، وهو ما يكفي لتقييم الأداة قبل الترقية. لإنشاء موقع ويب جدي، ستحتاج على الأقل إلى الخطة الاحترافية.

وفيما يلي تفصيل سريع للخطط الحالية:

الهواية (مجانية) — عمليات إكمال محدودة، 50 طلبًا بطيئًا للنماذج المميزة شهريًا. جيد للاختبار.
Pro (20 دولارًا شهريًا) — 500 طلب نموذج متميز سريع، وإكمال قياسي غير محدود، وأوقات الاستجابة ذات الأولوية، والوصول إلى جميع ميزات Cursor AI. نقطة البداية الصحيحة لمعظم مشاريع مواقع الويب.
Pro+ (60 دولارًا شهريًا) — كل شيء في Pro مع 3 أضعاف أرصدة الاستخدام. للاستخدام اليومي الأثقل.
Ultra (200 دولار شهريًا) — 20 ضعفًا من استخدام خطة Pro وأولوية الوصول إلى الميزات الجديدة. للمطورين الذين يعيشون داخل المؤشر طوال اليوم.
الفرق (40 دولارًا لكل مستخدم/الشهر) — ميزات احترافية بالإضافة إلى الفوترة المركزية والتسجيل الموحّد (SSO) وعناصر تحكم المشرف لفرق التطوير.

نصيحة احترافية: استخدم الوضع التلقائي لزيادة أرصدتك — فهو غير محدود في جميع الخطط المدفوعة. قم بحجز النماذج المحددة يدويًا مثل Claude Sonnet أو GPT-4o للمهام المعقدة حيث تحتاج إلى قدراتها على وجه التحديد.

عرض الطالب: يمكن للطلاب الذين تم التحقق منهم الحصول على عام واحد من Cursor Pro مجانًا عن طريق الاشتراك باستخدام البريد الإلكتروني للمدرسة.

الخطوة 3: قم بإعداد مشروعك الأول

بمجرد تثبيت المؤشر وتسجيل الدخول، قم بإنشاء مجلد جديد على جهاز الكمبيوتر الخاص بك لمشروع موقع الويب الخاص بك. سمها شيئًا واضحًا - my-business-website على سبيل المثال.

افتح المؤشر واستخدم ملف > فتح المجلد لفتح مجلد المشروع الخاص بك. سترى مستكشف ملفات فارغًا على اليسار، وهو المكان الذي ستعيش فيه ملفات مشروعك.

افتح الآن لوحة الدردشة AI على الجانب الأيمن من الشاشة. هذا هو المكان الذي ستتواصل فيه مع الذكاء الاصطناعي طوال مشروعك.

قم بتكوين النموذج الخاص بك: انقر فوق محدد النموذج الموجود أعلى لوحة الدردشة واختر Claude Sonnet 4.6 للحصول على أفضل توازن بين الإمكانيات والتعامل مع السياق في مشروع الويب. إذا كنت تستخدم خطة مجانية، فحدد تلقائي للسماح للمؤشر باختيار النموذج الأنسب لكل مهمة.

الخطوة 4: قم بتخطيط موقع الويب الخاص بك مع كلود قبل كتابة التعليمات البرمجية

قبل أن تطلب من Cursor كتابة سطر واحد من التعليمات البرمجية، اقضِ بضع دقائق في التخطيط مع Claude. هذه واحدة من أهم الخطوات - وواحدة من أكثر الخطوات التي تم تخطيها.

افتح دردشة المؤشر وقم بوصف موقع الويب الخاص بك بوضوح:

code
I want to build a business website for [your business name]. 
It's a [type of business] based in Dubai, UAE. 

The website needs:
- A homepage with a hero section, services overview, and contact CTA
- A services page with 6 service sections
- An about page with team section
- A contact page with a form
- A blog section

Tech stack: I want to use Next.js with Tailwind CSS.
Please suggest a folder structure and the main files I'll need to create.

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

الخطوة 5: سقالة مشروعك

بعد تأكيد خطتك، اطلب من Cursor إعداد هيكل المشروع. في لوحة الدردشة، اكتب:

code
Create a new Next.js project structure for this website with 
Tailwind CSS configured. Set up the folder structure we discussed, 
create the main layout file, and set up the navigation component 
with links to Home, Services, About, and Contact.

سيقوم وكيل Cursor's Composer بإنشاء ملفات متعددة في وقت واحد - الخاص بك package.jsonوملفات التخطيط وملفات الصفحات ومكون التنقل - كل ذلك في مسار واحد. قم بمراجعة الملفات التي يقوم بإنشائها في اللوحة اليمنى. وينبغي أن تتطابق مع الهيكل الذي أوصى به كلود.

لتثبيت التبعيات وتشغيل المشروع محليًا، افتح الوحدة الطرفية المتكاملة في Cursor (Terminal > New Terminal) وقم بتشغيل:

bash
npm install
npm run dev

افتح المتصفح الخاص بك وانتقل إلى http://localhost:3000 - يجب أن تشاهد هيكل موقع الويب الخاص بك يعمل محليًا.

الخطوة 6: إنشاء صفحة تلو الأخرى باستخدام الملحن

هذا هو المكان الذي تتضح فيه ميزة السرعة الحقيقية للمؤشر. بدلاً من كتابة مكون تلو الآخر، يمكنك وصف ما تريده ويقوم Composer ببنائه عبر ملفات متعددة في وقت واحد.

** بناء الصفحة الرئيسية : **

code
Build the homepage with:
- A full-width hero section with a bold headline, subtitle, 
  and two CTA buttons (primary and secondary)
- A services overview section showing 6 service cards in a grid
- A "Why Choose Us" section with 3 key points
- A client testimonials section
- A final CTA section with a contact button

Use Tailwind CSS throughout. The brand colors are deep navy (#0A1628) 
and amber (#F59E0B). Make it modern, clean, and professional.

سيقوم الملحن بكتابة مكون الصفحة الرئيسية بالكامل، وتحديث الملفات ذات الصلة، وتنفيذ كل شيء في مسار واحد. افتح متصفحك — تظهر التغييرات فورًا بفضل التحديث السريع لـ Next.js.

تعامل مع كل صفحة بنفس الطريقة — موجه واحد واضح لكل صفحة، يصف الأقسام التي تحتاجها، وبنية المحتوى، وأي وظيفة محددة.

الخطوة 7: إضافة محتوى وصور حقيقية

بمجرد أن يصبح الهيكل والتصميم متينين، استبدل محتوى العنصر النائب بمحتوى عملك الحقيقي. يمكنك القيام بذلك مباشرة عن طريق تحرير الملفات، أو عن طريق سؤال المؤشر:

code
Replace all placeholder text in the homepage with real content for 
[your business name]. Here's the real content to use:

Hero headline: [your headline]
Hero subtitle: [your subtitle]
Services: [list your services]
[etc.]

بالنسبة للصور، استخدم مجلدًا يسمى /public/images في مشروعك. قم بإسقاط صورك الحقيقية هناك واطلب من Cursor تحديث مسارات الصور خلال المشروع.

إذا لم تكن لديك صور احترافية حتى الآن، فيمكنك استخدام خدمات العناصر النائبة مثل Unsplash أو إنشاء صور مدعمة بالذكاء الاصطناعي - ما عليك سوى تحديثها قبل الإطلاق.

الخطوة 8: إضافة نموذج اتصال

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

code
Add a working contact form to the contact page that:
- Collects name, email, phone, and message
- Validates all required fields before submission
- Sends form submissions to [your email address] using Resend or Nodemailer
- Shows a success message after submission
- Shows clear error messages if submission fails

سيقوم المؤشر بإعداد مكون النموذج، ومسار واجهة برمجة التطبيقات (API) الذي يتعامل مع عمليات الإرسال، ومنطق إرسال البريد الإلكتروني. ستحتاج إلى التسجيل للحصول على حساب إعادة إرسال مجاني (resend.com) وإضافة مفتاح API الخاص بك إلى ملف .env.local file - سيخبرك المؤشر بالضبط بمتغيرات البيئة التي يجب تعيينها.

الخطوة 9: اجعلها جاهزة لتحسين محركات البحث

قبل بدء البث المباشر، اطلب من Cursor التعامل مع أساسيات تحسين محركات البحث:

code
Add proper SEO setup to this Next.js website:
- Meta titles and descriptions for every page
- Open Graph tags for social sharing
- Structured data markup for the business (LocalBusiness schema)
- A sitemap.xml that generates automatically
- A robots.txt file
- Canonical URLs on every page

The business is located in Dubai, UAE. Business name: [name]. 
Phone: [phone]. Address: [address].

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

الخطوة 10: اختبار كل شيء قبل الإطلاق

اطلب من Cursor مساعدتك في الاختبار الشامل:

code
Review this entire project and identify:
1. Any broken links or missing pages
2. Mobile responsiveness issues
3. Missing alt text on images
4. Console errors or warnings
5. Any accessibility issues
6. Performance issues in the code

List everything you find and fix the issues you can fix directly.

قم أيضًا باختبار موقع الويب يدويًا بنفسك على هاتفك. افتح Chrome DevTools (F12)، وانقر على مفتاح تبديل الجهاز المحمول، وتحقق من كيفية ظهور كل صفحة على حجم iPhone SE وحجم iPhone 14 وحجم iPad. قم بإصلاح أية مشكلات تتعلق بالتخطيط من خلال وصفها للمؤشر.

الخطوة 11: نشر موقع الويب الخاص بك مباشرة

أسرع طريقة لنشر موقع Next.js في عام 2026 هي Vercel - فهو مجاني للمشاريع الشخصية ويستغرق إعداده حوالي خمس دقائق.

ادفع مشروعك إلى مستودع GitHub
انتقل إلى vercel.com وقم بتسجيل الدخول باستخدام GitHub
انقر إضافة مشروع جديد وحدد المستودع الخاص بك
يكتشف Vercel Next.js تلقائيًا — انقر نشر
يتم نشر موقع الويب الخاص بك في أقل من دقيقتين في أ .vercel.app عنوان URL

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

أضف متغيرات البيئة الخاصة بك (مثل مفتاح Resend API) في لوحة معلومات Vercel ضمن الإعدادات > متغيرات البيئة قبل نشر الإنتاج الأول.

استخدام Claude بجانب المؤشر للتحديثات المستمرة

بمجرد تشغيل موقعك، فإن الجمع بين Cursor وClaude يجعل التحديثات المستمرة سريعة ومنخفضة الاحتكاك.

للحصول على تحديثات المحتوى: افتح الملف ذي الصلة في المؤشر واطلب من Claude تحديث المحتوى مباشرةً. لا يلزم وجود نظام إدارة المحتوى (CMS) لإجراء تغييرات بسيطة.

بالنسبة للصفحات الجديدة: قم بوصف الصفحة الجديدة للمؤشر بنفس الطريقة التي أنشأت بها الصفحات الأصلية - موجه واحد واضح، وسيتولى Composer الباقي.

لتصحيح الأخطاء: إذا تعطل شيء ما، فالصق رسالة الخطأ في دردشة المؤشر. سيحدد كلود السبب ويقترح الإصلاح أو ينفذه.

** لتحسين الأداء: ** اطلب من Cursor تدقيق مشروعك بحثًا عن مشكلات الأداء - سيحدد الصور الكبيرة والتعليمات البرمجية غير الفعالة والتحسينات المفقودة التي تؤثر على نتائج مؤشرات أداء الويب الأساسية.

ما الذي يتغير في الواقع هذا المزيج

الملخص الصادق هو: لا يحل Cursor وClaude محل الحاجة إلى الحكم الجيد حول ما يجب بناءه وكيفية تقديم عملك. إنهم يزيلون الحاجز التقني الذي كان يقف بين الرؤية الواضحة والموقع الإلكتروني العامل.

أكثر من 90% من المطورين في Salesforce يستخدمون الآن Cursor، مما يؤدي إلى تحسينات مكونة من رقمين في وقت الدورة وسرعة العلاقات العامة وجودة التعليمات البرمجية. بالنسبة للشركات التي ليس لديها فرق مطورين مخصصة، يكون التأثير أكثر مباشرة - وهو الفرق بين امتلاك موقع ويب احترافي وعدم وجود موقع ويب.

لا تزال جودة ما تبنيه باستخدام هذه الأدوات تعتمد على وضوح ما تطلبه، والعناية التي توليها لمراجعة المخرجات، والحكم الذي تطبقه في كل خطوة. الأدوات تتعامل مع التنفيذ. التفكير لا يزال يجب أن يكون لك.

Want a professional website without the back-and-forth?

At Joyboy, we build production-grade websites using the latest AI-assisted development tools — faster, cleaner, and built to perform. Talk to us about your website project.

Similar Publications:

View all

Joyboy × Lexel CGI: لماذا تهم CGI والسرد ثلاثي الأبعاد في دبي والإمارات في 2026

3d-video-production

April 15, 2026

Joyboy × Lexel CGI: لماذا تهم CGI والسرد ثلاثي الأبعاد في دبي والإمارات في 2026

Joyboy has partnered with Lexel CGI to strengthen our CGI and 3D storytelling capabilities. Here’s why that matters for brands in Dubai and across the UAE in 2026.

كيف تستخدم الشركات الصغيرة والمتوسطة في الإمارات الأتمتة لإنجاز المزيد بفرق أصغر في 2026

automation-solutions

April 14, 2026

كيف تستخدم الشركات الصغيرة والمتوسطة في الإمارات الأتمتة لإنجاز المزيد بفرق أصغر في 2026

Across the UAE, small and medium businesses are using intelligent automation to run leaner, move faster, and compete with larger players — without proportionally growing their headcount.

المشاريع

الإمارات

كيف تبني موقعاً كاملاً باستخدام Cursor وClaude في 2026