فيديو تعليمي · أول فيديو
كيف تبني Landing Page بالذكاء الاصطناعي في دقائق
في أول فيديو لي، بنيت صفحة هبوط كاملة لمتجر كاميرات من الصفر — في دقائق — باستخدام Google Stitch لتوليد التصميم ونماذج ذكاء اصطناعي مجانية (DeepSeek و Claude) لكتابة الكود، دون أن أكتب سطراً واحداً يدوياً.
ما الذي ستراه في الفيديو؟
المثال العملي في الفيديو هو صفحة هبوط لمتجر كاميرات ومنتجات تصوير — اخترت هذا النوع لأنه واقعي، وفيه صور ومنتجات وتفاصيل تجعل التصميم يبدو حقيقياً. الفيديو هو تجربتي الأولى في الشرح، فاعذر لي أي أخطاء — الأهم هو الفكرة والطريقة.
خطوات البناء كما جرت في الفيديو
- البحث عن إلهام — تصفحت تصاميم صفحات هبوط في Pinterest و Dribbble و Behance لأفهم شكل الصفحة الجيدة قبل أن أبدأ.
- توليد التصميم بـ Google Stitch — استخدمت أداة Stitch من جوجل (مجانية في البداية) لتوليد التصميم من فكرة مكتوبة، ثم استخرجت منه الألوان والصور.
- كتابة الكود بنماذج AI مجانية — أعطيت التصميم لنموذج مجاني (DeepSeek عبر OpenCode، وأيضاً Claude) وكتب لي كود الصفحة كاملاً في مجلد مشروع باسم
cameraWeb. - تحسين الواجهة — طلبت من النموذج تحسينات: خطوط أجمل، وضع فاتح (light theme)، قائمة همبرغر، زر للعودة للأعلى، تأثيرات عند التمرير، وعرض سريع للمنتج عند الوقوف على الصورة.
- التأكد من الجوّال — راجعت الصفحة على مقاس iPhone 14 Pro Max وتأكدت من عمل كل شيء بشكل صحيح.
الخلاصة: صفحة هبوط كاملة، من فكرة إلى موقع جاهز، في وقت قصير جداً وبأدوات أغلبها مجاني.
الفكرة الأهم
لسنا في حاجة إلى أدوات مدفوعة باهظة أو كتابة كل سطر يدوياً. بهذه الطريقة يمكن لأي شخص يبدأ في تطوير الويب أن يبني مشاريع حقيقية في دقائق باستخدام نماذج ذكاء اصطناعي رخيصة أو مجانية، ثم يحسّنها لاحقاً.
هذا أول فيديو في سلسلة أشرح فيها أسهل الطرق لبناء المشاريع بأسرع وقت — تابع القناة لبقية الفيديوهات.