الهندسة العكسية للمواقع المكلفة باستخدام الذكاء الاصطناعي: لماذا يمكن بناء نصف «التصاميم ثلاثية الأبعاد المعقدة» على الويب في مسائين فقط
المواقع الترويجية المثيرة للإعجاب، بإضاءتها المعقدة ورسومياتها الحجمية، كانت تتطلب في السابق شهراً ونصف من عمل استوديو تصميم ومطور WebGL مستقل. وباستخدام مزيج من كتالوجات المراجع والتحليل الوكيلي عبر Claude Code، يمكن تفكيك أي صفحة هبوط إلى عناصرها الأساسية من شيدرات وخطوط وتوقيتات وملفات وسائط في غضون 20 دقيقة. وأظهرت مراجعة عملية أن نصف الحالات التي تبدو فيها «التصاميم ثلاثية الأبعاد المكلفة» ما هي في الحقيقة إلا ملف فيديو متكرر أو 30 سطراً من شيدر رياضي، يمكن إعادة إنتاجها لمشروعك الخاص في مسائين فقط.
- الوقت اللازم للتحليل التقني الكامل لصفحة هبوط لطرف آخر: نحو 20 دقيقة عبر وكيل ذكاء اصطناعي
- مدة بناء موقع ترويجي بمستوى استوديو تصميم: مساءان بدلاً من شهر ونصف من عمل وكالة
- المحتوى الحقيقي للمواقع «المثيرة للإعجاب»: في 50% من الحالات فيديو متكرر أو 30 سطراً من الشيدر
- حالة WebGL معقدة من الواقع العملي: 27 برنامجاً لبطاقة الرسومات و40,000 جزيء من نسيج بحجم 200×200
في تطوير الويب، توجد فئة خاصة من الصفحات الترويجية: تفتح الموقع فترى أشكالاً حجمية وإضاءة سينمائية — وفي الحال يتبادر إلى ذهنك سعر بمليون روبل. وحتى قبل عام، كان هذا صحيحاً فعلاً. كان الأمر يتطلب مديراً فنياً، ومصمم حركة، ومتخصصاً نادراً في الرسوميات ثلاثية الأبعاد داخل المتصفح.
أما اليوم، فإنني أنتج صفحات من هذا المستوى في مساءين. والاكتشاف الأهم بعد عشرات عمليات التفكيك كان بسيطاً: نحو نصف «المواقع ثلاثية الأبعاد المكلفة» لا تستخدم أصلاً أي محرك ثلاثي الأبعاد.
كيف يمكن تفكيك موقع لطرف آخر إلى مكوناته في 20 دقيقة دون التنقيب
اليدوي في كود مُصغّر؟
تتكون سلسلة العمل كاملة من ثلاث خطوات بسيطة لا تتطلب شهادة في تطوير الواجهات الأمامية: 1. اختيار مرجع دقيق بحسب العناصر. بدلاً من التنقيب اللامتناهي في محركات البحث، أربط Claude Code مباشرة بكتالوجات مثل `refero.
design`، حيث تُصنَّف آلاف شاشات المنتجات الحقيقية بالفعل بحسب نوع الكتلة: شبكات الأسعار، الشاشات الأولى، نماذج جمع البيانات. 2. التفكيك الآلي.
أعطي الوكيل رابط صفحة الهبوط المختارة وأطلب منه تفكيك الصفحة إلى مكوناتها الهندسية. يستخرج الوكيل عبر فاحص المتصفح شجرة الأنماط، ورموز الألوان، وأزواج الخطوط، ويوضح بصراحة: هنا يعمل فيديو عادي، وهنا مكتبة جاهزة متصلة، وهذا التأثير مكتوب في ثلاثين سطراً فقط من الكود. 3.
إعادة التجميع حسب المهمة الخاصة. لا نقوم بنسخ موقع الطرف الآخر بالكامل، بل نأخذ أسلوبين أو ثلاثة أساليب بصرية قوية ونعيد توظيفها بمعانينا ونصوصنا وألواننا التجارية الخاصة.
في أول تحليل لصفحة هبوط تُوصف بأنها «ثلاثية الأبعاد»، أصدر الوكيل حكمه في دقيقة واحدة: لا يوجد أي مشهد ثلاثي الأبعاد داخل الصفحة؛ فقد قام المصممون بعرض جسم دائري الحركة مرة واحدة في محرر فيديو، ثم وضعوا ملف MP4 متكرراً في الخلفية.
كم تكلف فعلاً تطوير التأثيرات البصرية الخاصة في صفحة هبوط حديثة؟
إذا ترجمنا الجمال الظاهري إلى تكلفة عمل باستخدام وكيل ذكاء اصطناعي، تصبح الصورة عملية جداً:
- الكتل الحجمية الدائرة والأشكال الزجاجية ذات انكسار الضوء — في أغلب الحالات ليست إلا ملف فيديو جاهز، يُنجز في مساء واحد.
- الماء المتحرك بانعكاسات شمسية واقعية، الذي ينتشر في دوائر حول مؤشر الفأرة — هو بالضبط 30 سطراً من صيغة رياضية بلغة GLSL تلوّن البكسلات لحظياً؛ ويُنجز في يوم واحد.
- التوهج النيوني الناعم للبطاقات تحت المؤشر — سطران فقط من CSS قياسي يحسبهما المتصفح نفسه في نصف ساعة.
- سحابة حقيقية من عشرات آلاف الجزيئات التفاعلية على محرك Three.js — هي المهمة الوحيدة التي تتطلب فعلاً أسبوعاً هندسياً مكثفاً.
قمت ببناء نظام جزيئات حقيقي من هذا النوع لموقع مؤتمر «التحول بالذكاء الاصطناعي» ولصفحة هبوط برنامجنا مع معهد MIPT: حيث تتجمع 40,000 نقطة مباشرة في المتصفح لتشكّل شعاراً، وتتفرق عند التمرير، وتعود لتتشكل في أشكال ثلاثية الأبعاد جديدة. وعند تحليل المرجع الخاص بهذا المشهد، استخرجت 27 برنامجاً صغيراً لبطاقة الرسومات، حيث كانت إحداثيات أربعة أشكال مختلفة (دماغ، ولمبة، وكرة أرضية، وشبكة) مخزّنة في أرباع صورة واحدة بحجم 200 في 200 بكسل.
لماذا يكون الاختبار الشامل لنموذج التسجيل أهم من أي شيدر أو حركة رسومية؟
أغلى درس تعلمته عند إطلاق صفحة هبوط جميلة لم يأتِ من الرسوميات، بل من زر تسجيل عادي. لمدة ثلاثة أيام، كانت الصفحة تستقبل زياراً، وكان الزوار يضغطون «إرسال»، فيرون علامة صح خضراء تقول «شكراً لتسجيلك» — بينما لم تصل أي استمارة إلى قاعدة البيانات.
وتبيّن أن خادم الويب والتطبيق نفسه كانا يضعان، في الوقت ذاته، نفس رأس الأمان `CORS`. فكان المتصفح يرى هذا الرأس مكرراً ويمنع إرسال الحزمة بصمت دون أي خطأ يظهر على الشاشة. ومنذ ذلك الحين، لا تنتهي أي مراجعة لصفحة هبوط عندي إلا باختبار آلي يضغط الزر في متصفح حقيقي ويتحقق من وصول العميل المحتمل فعلياً إلى نظام CRM.
أنشر أمثلة على هذه التحليلات مع الكود المصدري على قناة [@jemal_hamidun](https://t.me/jemal_hamidun). بيئة البرمجة البصرية بالحدس وتفكيك الواجهات مدمجة في [Nomad AI](https://nomadnet.ai). ويمكنك بناء أول موقع تحويلي لك في عطلة نهاية الأسبوع عملياً في [Hamidun Academy](https://academy.hamidun.com) مع فترة تجريبية مدتها 72 ساعة، والحصول على مهارات `site-deconstruct` الجاهزة وأكثر من 370 قالباً في [Vibe Club](https://hamidun.com/club).
- 27 أكتوبر 2026تطبيق Hob مفتوح المصدر ينقل نمط Claude Cowork إلى حاسوبك المحمول دون الحاجة إلى السحابة
- 27 أكتوبر 2026Anthropic تقدّم نموذج S-1: إيرادات 16,3 مليار دولار في ستة أشهر وتقييم يصل إلى 2 تريليون
- 27 أكتوبر 2026Anthropic تدعو إلى تقليص الوكلاء الفرعيين: حلقة واحدة مع المهارات تتفوق على المنسّقين
- 27 أكتوبر 2026بنية ~/.claude لمكتبة تضم أكثر من 200 مهارة: كيف نحافظ على موجّه النظام ضمن 50 ألف رمز وندفع 0.15 دولار للجلسة
أسئلة وأجوبة حول الخبر
كيف يمكن تفكيك موقع لطرف آخر إلى مكوناته في 20 دقيقة دون التنقيب اليدوي في كود مُصغّر؟
تتكون سلسلة العمل كاملة من ثلاث خطوات بسيطة لا تتطلب شهادة في تطوير الواجهات الأمامية: 1. اختيار مرجع دقيق بحسب العناصر. بدلاً من التنقيب اللامتناهي في محركات البحث، أربط Claude Code مباشرة بكتالوجات مثل `refero.design`، حيث تُصنَّف آلاف شاشات المنتجات الحقيقية بالفعل بحسب نوع الكتلة: شبكات الأسعار، الشاشات الأولى، نماذج جمع البيانات. 2. التفكيك الآلي. أعطي الوكيل رابط صفحة الهبوط المختارة وأطلب منه تفكيك الصفحة إلى مكوناتها الهندسية. يستخرج الوكيل عبر فاحص المتصفح شجرة الأنماط، ورموز الألوان، وأزواج الخطوط، ويوضح بصراحة: هنا يعمل فيديو عادي، وهنا مكتبة جاهزة متصلة، وهذا ال
كم تكلف فعلاً تطوير التأثيرات البصرية الخاصة في صفحة هبوط حديثة؟
إذا ترجمنا الجمال الظاهري إلى تكلفة عمل باستخدام وكيل ذكاء اصطناعي، تصبح الصورة عملية جداً: الكتل الحجمية الدائرة والأشكال الزجاجية ذات انكسار الضوء — في أغلب الحالات ليست إلا ملف فيديو جاهز، يُنجز في مساء واحد. الماء المتحرك بانعكاسات شمسية واقعية، الذي ينتشر في دوائر حول مؤشر الفأرة — هو بالضبط 30 سطراً من صيغة رياضية بلغة GLSL تلوّن البكسلات لحظياً؛ ويُنجز في يوم واحد. التوهج النيوني الناعم للبطاقات تحت المؤشر — سطران فقط من CSS قياسي يحسبهما المتصفح نفسه في نصف ساعة. سحابة حقيقية من عشرات آلاف الجزيئات التفاعلية على محرك Three.js — هي المهمة الوحيدة التي تتطلب فعلاً أسب
لماذا يكون الاختبار الشامل لنموذج التسجيل أهم من أي شيدر أو حركة رسومية؟
أغلى درس تعلمته عند إطلاق صفحة هبوط جميلة لم يأتِ من الرسوميات، بل من زر تسجيل عادي. لمدة ثلاثة أيام، كانت الصفحة تستقبل زياراً، وكان الزوار يضغطون «إرسال»، فيرون علامة صح خضراء تقول «شكراً لتسجيلك» — بينما لم تصل أي استمارة إلى قاعدة البيانات. وتبيّن أن خادم الويب والتطبيق نفسه كانا يضعان، في الوقت ذاته، نفس رأس الأمان `CORS`. فكان المتصفح يرى هذا الرأس مكرراً ويمنع إرسال الحزمة بصمت دون أي خطأ يظهر على الشاشة. ومنذ ذلك الحين، لا تنتهي أي مراجعة لصفحة هبوط عندي إلا باختبار آلي يضغط الزر في متصفح حقيقي ويتحقق من وصول العميل المحتمل فعلياً إلى نظام CRM. أنشر أمثلة على هذه ال
Build & Ship Production AI Agents Without Boilerplate Code
Start your free 72-hour trial at Hamidun Academy (academy.hamidun.com) — interactive lessons on Claude Code & Cursor, live Tech Radar, and production agent templates.
أهم ما في عالم الذكاء الاصطناعي — مرة كل أسبوع
سبع قصص مهمة فعلاً هذا الأسبوع، مختارة بعناية. بلا ضجيج ولا بيانات صحفية.
تم! تحقق من بريدك للتأكيد.