دليل Windsurf AI: أنشئ أول موقع لك باستخدام Cascade
شرح مصوَّر خطوة بخطوة للمبتدئين في محرر Windsurf AI: ثبِّت المحرر، وافتح وكيل Cascade، وأنشئ موقعًا شخصيًا بطلب واحد، ثم طوِّره تدريجيًا حتى موقع داكن أنيق — دون كتابة أي شيفرة.
خلاصة دليل Windsurf AI هذا
- يُثبَّت Windsurf من windsurf.com مثل أي محرر عادي، ويفتح على قائمة Getting started — ومستخدمو VS Code ينقلون ثيمتهم وإضافاتهم كما هي.
- اختصار Ctrl+L يفتح لوحة Cascade، وكيل الذكاء الاصطناعي. أبقه في وضع Code ليكتب الملفات مباشرة؛ أما وضع Chat فيقترح الشيفرة فقط دون تطبيقها.
- طلب واحد محدد الصياغة أنتج موقعًا شخصيًا كاملًا من أربعة ملفات — index.html وstyles.css وscript.js وREADME — يعمل على localhost:8000.
- بعد ذلك تتكرر الدورة نفسها: طلب متابعة قصير، ثم مراجعة الفروقات بالأحمر والأخضر، ثم Accept all، ثم تحديث المتصفح. بُني المشروع كله بستة طلبات فقط.
How I Built a Complete Website with Windsurf AI — Step-by-Step Tutorial
القناة:Web Tech Knowledge7:24
الصور في هذا الدليل لقطات من الفيديو الأصلي، تُستخدم لتوضيح خطوات أصلية كُتبت خصيصًا لهذه الصفحة، وكل خطوة تحمل رابطًا زمنيًا يعود إلى اللحظة نفسها في الفيديو.
جميع حقوق الفيديو محفوظة لـ Web Tech Knowledge. وقد جرى التحقق من مصطلحات Windsurf (Cascade ووضعا Code/Chat وAccept all) بمقارنتها مع فيديو Tech With Tim بعنوان "Windsurf Tutorial for Beginners (AI Code Editor)" وفيديو corbin بعنوان "How To Use Windsurf Editor For Beginners".
من التحميل إلى موقع مكتمل في 14 خطوة
- 1
حمِّل Windsurf من الموقع الرسمي
افتح windsurf.com وانقر على Download for Windows (وإصدارتا macOS وLinux بجوارهما مباشرة). شغِّل المثبِّت وسجِّل الدخول. وإذا عرض المحرر استيراد إعدادات VS Code الخاصة بك فاقبل؛ فـ Windsurf مشتق من VS Code وستنتقل معك الثيمة والإضافات.
الصفحة الرئيسية لموقع windsurf.com وزر Download for Windows في المنتصف.شاهد من 0:10 - 2
أنشئ مجلد مشروع فارغًا
من شاشة الترحيب اختر Code with Cascade ثم انقر على Open Folder. أنشئ مجلدًا جديدًا — اسمه في الفيديو My_cool_portfolio — وانقر على Select Folder. المجلد الفارغ يكفي؛ فـ Cascade ستنشئ كل ملف بنفسها.
تسمية مجلد جديد في نافذة Open Folder قبل النقر على Select Folder.شاهد من 0:33 - 3
تعرَّف على واجهة المحرر في دقيقة
ستفتتح بقائمة Getting started with Windsurf. في الشريط الجانبي Explorer على اليسار ملفات مشروعك، وتُبرز القائمة الاختصارين الوحيدين اللذين تحتاجهما: Ctrl+L لفتح Cascade وCtrl+I لتحرير الشيفرة داخل السطر. هذه كل المعرفة المسبقة المطلوبة لهذا الدليل.
قائمة Getting started ومجلد المشروع مفتوحًا أصلًا في شريط Explorer.شاهد من 0:45 - 4
افتح لوحة Cascade بـ Ctrl+L
اضغط Ctrl+L (أو Cmd+L على macOS) فتُفتح Cascade على اليمين مع حقل إدخال Ask anything. أسفل الحقل، أبقِ وضع Code مختارًا — فهو ما يسمح لـ Cascade بكتابة الملفات مباشرة؛ أما وضع Chat فيقترح الشيفرة فقط دون لمس مشروعك. ثم اختر نموذجًا من القائمة المنسدلة؛ يستخدم هذا الدليل Claude Sonnet 4.5.
شاشة الترحيب في Cascade: حقل Ask anything ومفتاح وضع Code ومنتقي النموذج.شاهد من 1:03 - 5
أرسل طلب البناء
اكتب: Create a responsive portfolio website using HTML, CSS, and JavaScript. Include a hero section, about, projects, and contact form. ذكر حزمة التقنيات وسرد الأقسام أمر مهم — فكلما كان الطلب أكثر تحديدًا كانت النتيجة أفضل. اضغط الإرسال، وستحوِّل Cascade المهمة إلى قائمة مهام قبل كتابة أي سطر.
طلب الموقع الشخصي كاملًا وجاهزًا للإرسال مع اختيار Claude Sonnet 4.5 في وضع Code.شاهد من 1:35 - 6
شاهد Cascade وهي تبني الملفات
تتقدم Cascade في قائمة مهامها: ملف index.html أولًا (231 سطرًا)، ثم styles.css وscript.js، وأخيرًا ملف README يوثِّق المشروع. يظهر كل ملف جديد في اللوحة بعدّاد أسطر أخضر، ويُظهر المسار عند الانتهاء 3 files و+1132.
قائمة مهام Cascade أثناء العمل، وقد أُنشئ index.html وstyles.css وscript.js.شاهد من 2:10 - 7
افتح المعاينة في المتصفح
ينتهي التقرير النهائي بأن الموقع يعمل على http://localhost:8000 — انقر رابط المعاينة فيفتح موقع شخصي كامل من صفحة واحدة: شريط تنقل ثابت، وقسم hero دائرة لصورة الملف الشخصي، وabout وprojects ونموذج تواصل. وانظر إلى العنوان عن قرب: تطبع الصفحة وسم <span> الخام كما هي. المسودات الأولى تأتي بأعطال صغيرة، وستصلح هذا في الخطوة 13.
الموقع المُنشأ على localhost:8000 — مكتمل سوى وسم span الخام في العنوان.شاهد من 2:35 - 8
اطلب الوضع الداكن وأزرارًا نيونية
عُد إلى Windsurf وانقر Accept all لحفظ الملفات المُنشأة، ثم أرسل: Make it dark mode and give the buttons a neon glow. هذا هو إيقاع العمل مع Cascade — طلب متابعة صغير ذو هدف واحد في كل مرة، مع التحقق من النتيجة قبل الانتقال.
التقرير النهائي مع Next Steps وطلب الوضع الداكن مكتوبًا في حقل الإدخال.شاهد من 3:05 - 9
راجع الفروقات ثم Accept all
تعيد Cascade كتابة styles.css وتعرض كل تعديل في شكل فروقات: الخطوط الحمراء شيفرة CSS محذوفة والخضراء إضافات. هنا تُستبدل اللوحة الفاتحة برموز داكنة ومتغيرات توهج بالسيان والماجنتا النيونية على أحد عشر إدخال تغيير. اطّلع عليها ثم انقر Accept all (اختصار Alt+A).
فروقات styles.css: المتغيرات الفاتحة المحذوفة بالأحمر، والرموز النيونية الجديدة بالأخضر.شاهد من 3:32 - 10
حدِّث المتصفح وتحقق من النتيجة
انتقل إلى تبويب المتصفح وحدِّث الصفحة. الموقع نفسه صار أسود بلمسات متوهجة: زر View My Work بتدرج من السيان إلى الماجنتا، وزر Get In Touch بإطار نيوني، وعنوان About Me تحت خط فاصل متوهج. التحقق بعد كل طلب يمنع تراكم المفاجآت الصغيرة.
النسخة الداكنة بعد التحديث: أزرار نيونية وقسم About Me تحت شريط Portfolio.شاهد من 4:12 - 11
أضف حركات التمرير وتأثيرات الظهور التدريجي
أرسل: Add smooth scroll animation and fade effects. تضيف Cascade الخاصية scroll-behavior: smooth وفئات .fade-in، وIntersection Observer يُظهر الأقسام عند دخولها الشاشة، مع تأثير parallax خفيف لدائرة hero وظهور متتابع لوسوم المهارات. ثم Accept all وتحديث وتمرير — فتظهر الأقسام تدريجيًا أثناء النزول.
شيفرة Scroll Animations بجانب ملخص Cascade للمراقب والتأثير المنظوري والظهور المتتابع.شاهد من 4:32 - 12
استبدل العناصر المؤقتة بصور تجريبية
لا تزال دائرة الملف الشخصي وبطاقات المشاريع أيقونات مؤقتة، فأرسل: Add some demo images. ستوصِّل Cascade صورًا من شبكة Unsplash إلى دائرة hero والبطاقات الثلاث — بأبعاد مُحسَّنة عبر معاملات URL — وتضيف للبطاقات تأثير تكبير وتوهج عند التحويم. Accept all ثم تحديث، وسيبدو الموقع أخيرًا مكتملاً.
ملخص جولة الصور: صور Unsplash وإطار دائري نيوني للملف الشخصي وتكبير عند التحويم.شاهد من 4:58 - 13
اكتشف الأعطال وضع صورتك الخاصة
اطلب من Cascade كتابة Hi! I am Your AI Developer في قسم hero ووضع شعار ذكاء اصطناعي في الدائرة. بعد التحديث تظهر خللتان: العنوان يطبع وسم <span class="highlight"> حرفيًا، والشعار المُنشأ ليس ما أردت. انقر أيقونة الزائد فوق حقل الإدخال، واختر Upload image وأرفق صورتك الخاصة، ثم أرسل الطلب: remove the span completely and add this image on the right circle.
قسم hero لا يزال يطبع وسم span خام بجوار شعار مؤقت — مع إصلاح Upload image.شاهد من 6:05 - 14
الفحص الأخير للموقع المكتمل
تحديث أخير ويكتمل الموقع الشخصي: عنوان نظيف هو Hi! I am Your AI Developer، وصورتك الخاصة تتوهج في دائرة hero، وأزرار نيونية، وأقسام متحركة، وبطاقات مشاريع بالصور. طلب بداية واحد وخمسة طلبات متابعة قصيرة — وصف، ثم قبول، ثم تحقق، ثم كرر: هذا هو سير العمل الكامل في Windsurf.
الموقع الشخصي المكتمل: عنوان نظيف وصورة الروبوت المرفوعة وأزرار نيونية.شاهد من 7:12