موقع احترافي بـ 3D؟ من غير كود!

انضم لذكاء صباعي: www.zka2soba3y.com ونادي الجينيس: www.gbc4.com. واتساب: 01157611470

فهرس المقالة

مقدمة سريعة: تصميم مواقع احترافية في 5 دقائق!
شاهد الشرح بالفيديو
أبطالنا اليوم: أدوات سحرية
بناء صفحة الهبوط الخرافية بخطوات بسيطة
المصادر والأوامر (Magic Prompts)
الكول تو أكشن (Call to Action)

مقدمة سريعة: تصميم مواقع احترافية في 5 دقائق!

أهلاً بيكم يا شباب في فيديو جديد! لو قلتلك إن الموقع اللي قدامك ده بتصميمه الـ 3D التفاعلي والتأثيرات الخرافية دي، اتصمم من الصفر في خمس دقايق بس، ومن غير ما أكتب سطر كود واحد، ومجاناً مية في المية، هتصدقني؟

قنوات كتير بتعقدلك البرمجة، لكن إحنا هنا بنجيبلك الخلاصة. النهاردة هاعلمك الخلطة السرية لدمج الـ AI مع مكتبات الـ 3D المجانية، عشان تبني مواقع خرافية تقدر تبيعها لعملاء بمبالغ محترمة جداً. اضغط لايك واشترك في القناة، وركز معايا في الفيديو ده.

زي ما انتوا شايفين هنا، الروبوت كمان بيتفاعل مع الماوس! وهاقولك إزاي تجيب أي تصميم يخطر ببالك أو أي جزء في الموقع عاوز تصممه وتعمل نسخة مطابقة ليه، وكل ده بطريقة سهلة جداً.

شاهد الشرح بالفيديو

أبطالنا اليوم: أدوات سحرية

2. مكتبة التصميمات ثلاثية الأبعاد المجانية (Spline)

أول بطل معانا هو موقع Spline.design السحري الجميل جداً ده. الموقع ده بيوفرلك تصميمات 3D مجانية تقدر تضيفها لموقعك الإلكتروني. تقدر تاخد أي تصميم منه، وهتلاقي عليه تصميمات كتير جداً مدعومة بالـ AI. بطلنا الأول Spline.design، بيوفرلك تصميمات 3D، أو أي تصميم يخطر ببالك أو أي حاجة عايزها.

في البداية بتضغط على “Get Started It’s Free” عشان تبدأ بشكل مجاني، وبعدها بتسجل بإيميل جوجل بشكل عادي جداً. فيه تصميمات كتير تقدر تختار منها اللي يعجبك وتنفذ زيه على موقعك الإلكتروني. بمجرد الضغط عليه كده بيفتح معاك.

ملحوظة مهمة: إحنا عارفين إن المنافسين اللي بيصمموا كلهم بيستخدموا صور ثابتة. لكن إحنا النهاردة في الفيديو ده هنجيب تصميمات تخطف العين!

زي ما انت شايف، كل دي تصميمات متاحة عليه. تقدر دلوقتي تختار الزاوية اللي عايز تضيفها لموقعك عشان تعرض الشكل. طبعاً تقدر تختار تصميمات الـ 3D من هنا، هتلاقي تصميمات 3D كتير جداً وتفاعلية، وكلها تقدر تضيفها لموقعك الإلكتروني.

هنا في مربع البحث اللي فوق يا شباب، تقدروا تختاروا الفكرة اللي في دماغكم. يعني لو بتبني موقع بيتكلم عن الألعاب أو الجيمز، هتكتب فوق “Games”. ولو الموقع بيتكلم عن الديكور، هتكتب “Decor”. أي حاجة تخطر ببالك هتكتب اسمها وتضغط Search، هيظهرلك في نتائج البحث تصميمات 3D تقدر تضيفها لموقعك.

1. UI Builder (Anti-Gravity / v0.dev)

دلوقتي، إزاي نضيف تصميم الـ 3D ده لموقعنا؟ خطواتها بسيطة. أولاً هنروح لموقع Anti-Gravity.google. أول ما يفتح بالشكل ده، انتبهوا، لو فتحتوه النهاردة، 90% منكم هيتطلب منهم تحديثه.

نقطة مهمة جداً: هاسيبلك الرابط الرسمي لأداة Anti-Gravity.google لتحميله من جديد وتثبيته. هيشتغل معاك فوراً بدون أي مشاكل، عشان فيه ناس كتير مش بيشتغل معاهم. دي الرسالة اللي هتظهرلك لو معملتش تحديث أو لو مشتغلش. هو هيديك الرابط الرسمي لأداة Anti-Gravity.google لتحميله.

طبعاً أنا بستخدمه بالخطة المجانية، وده مش بيسبب أي مشكلة. أولاً، بضغط على “Open Folder”، ونختار المجلد اللي هننشئ فيه مشروعنا أو موقعنا. هنضغط على “New Folder”، وبعد كده نضغط على “Select Folder” عشان نحدد المجلد اللي عايز تنشئ الموقع أو المشروع جواه.

وكمان لو رصيدك خلص، تقدر تعمل “Sign Out” عشان تسجل خروج من الحساب ده، وبعدين تسجل بإيميل جوجل تاني بشكل عادي، وتكمل شغل على مشروعك. الحد الأقصى للاستخدام ممتاز جداً، وبصراحة أنا بستخدمه دايماً.

هنا بتختار وضع الشغل الخاص بيك، وهنا أنا طلبت منه إنشاء صفحة هبوط مميزة بتصميم مبهر. وطبعاً طلبت ده عشان أحط فيها قسم السماعات والواقع الافتراضي. هابدأ دلوقتي باختيار النموذج اللي هيصمملي موقعي. هتلاقي نماذج زي “Cloud” و “Sony”. أنا هاختار “Gemini” زي ما هو محدد، وهاضغط إرسال.

طبعاً هو دلوقتي بيبدأ يكتب الكود يا شباب، ومش بيستغرق غير ثواني. هو سريع جداً معايا من ساعة ما بدأت أستخدمه، خصوصاً في التحديث الأخير. هو رائع جداً وبلا مشاكل، عشان كده بأنصحكم بتحديثه لأنه مش هيشتغل أصلاً بدون التحديث.

3. مكتبة كروت الـ UI الاحترافية (21st.dev)

دلوقتي، عشان موقعنا يكون جاهز للبيع وأي حد يدفع فيه فلوس، محتاجين نضيفله أقسام. إزاي نضيف الأقسام دي يا شباب؟ هندخل على موقع 21st.dev. الموقع ده بيعمل إيه؟ بيضم مكتبة سرية مليانة تصميمات عالمية جاهزة. تقدر تاخد الشكل اللي عايزه وتحطه في موقعك.

هتلاقي أقسام كتير جداً هنا، زي الـ “Pricing” يعني الأسعار، والـ “Map”، والـ “Cards”. أي حاجة تخطر ببالك جوه موقعك، تقدر تاخد تصميمها من هنا. هتلاقي مكتبات كتير جداً، أو بالأحرى تصميمات كتير جداً.

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

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

بناء صفحة الهبوط الخرافية بخطوات بسيطة

الخطوة 1: تجهيز صفحة الهبوط الأساسية بـ Anti-Gravity

بعد ما اخترت “Gemini” وضغطت إرسال في Anti-Gravity، هو دلوقتي بيكتب الكود. هاضغط على “Accept All” عشان نفتح التصميم اللي عمله. وهكذا زي ما انتوا شايفين، انظروا للجمال ده! بنى في ثواني الهيكل والألوان الداكنة والأزرار، وسابلي الخلفية فاضية زي ما طلبت منه، عشان نقدر نحط عنصر الـ 3D اللي عايزين نضيفه.

الخطوة 2: دمج تصميم ثلاثي الأبعاد من Spline

دلوقتي، منين هنجيب كود الـ 3D؟ هندخل على أي موقع 3D يعجبك، أو الموقع اللي عايز تضيفه. طبعاً تقدر تشوف الزوايا الخاصة بالتصميم اللي عايزه. أي زاوية عايزها، بتضغط هنا تحت وهتلاقي الاتجاهات. كل زاوية عايز تعرضها على موقعك متاحة.

بتضغط هنا على رمز التشغيل عشان تشوف إيه اللي هيتعرض على موقعك. يعني إنك بتختار زاوية عنصر الـ 3D اللي هتتعرض على موقعك. بعد ما تختارها هنا، بتضغط على الخيار ده، وبعدين نضغط “Reset”، أو نختار تصميم زي ده مثلاً. فيه تصميمات كتير جداً في الموقع، متاحة بكثرة.

تمام، وبعد ما تختار التصميم يا صديقي، ولنفترض إني استقريت على التصميم ده لأنه عجبني، بتنزل تحت لخيار اسمه “Remix”. بمجرد ما تضغط على “Remix” هنا، فده معناه إنك هتاخد الكود. أنت عايز الكود دلوقتي فهتضغط “Remix”.

نصيحة: اضغط “Remix”، وهنا بيظهرلك عدد المعجبين وعدد اللي شافوا التصميم ده وعجبهم. وهتلاقي تعليقات كمان تحت كتبها اللي عجبهم.

بعد ما تضغط “Remix”، اضغط على السهم الصغير ده يا صديقي عشان تشوف الشكل اللي هتستخدمه قبل ما تحطه في موقعك وتشوف طريقة حركته. لو عجبك، بتضغط على حرف الـ X، وبعدين تضغط هنا عشان تقدر تعدل أي حاجة عايزها. فيه هنا خيار “Export”، تقدر من خلاله تصدر كود التصميم.

تقدر تاخد الكود نفسه لأي مكتبة عايزها، زي React، Next.js، أو Three.js. لكن إحنا مش هنعمل الخطوة دي، لأنها معقدة شوية. عشان منقعدش نثبت مكتبات ونتعب نفسنا، هنختار الخيار التاني. الخيار التاني سهل جداً وهيتم إضافته لموقعك بسهولة.

بعد كده بننسخ الكود اللي ادانا إياه زي ما انتوا شايفين. هاخد الكود الخاص بالخيار التاني ده وأنسخه Copy. وقلتله هنا: “قم بتضمين كود العرض ثلاثي الأبعاد اللي اديتولك في قسم الهيرو.” وهابدأ أنسخ الكود اللي خدته من Spline.design في Anti-Gravity.google. الجزء اللي تحت ده بتحط الكود فيه. هاسيبلك كمان البرومبت متقلقش، عشان تقدر تضيفه وتستخدمه بشكل عادي. ناخد الكود Copy. ركز معايا في النقطة دي لأنها مهمة جداً.

وبعد ما أديله الكود اللي حصلت عليه، هاضغط إرسال. وهنستنى ثواني. لقد انتهى كده. هنعمل تحديث للصفحة. لم ينتهِ بعد. حسناً، لما ينتهي هنشوف مع بعض دلوقتي. طبعاً هنا انتهى يا شباب. هاضغط “Accept All” بالشكل ده. هارجع لموقعي وأعمله Refresh. هافتح ملف Index وأقوم بعمل Refresh.

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

الخطوة 3: إضافة أقسام احترافية من 21st.dev

دلوقتي، إزاي ناخد أي تصميم يعجبنا؟ هاشوف أي تصميم يعجبني، وليكن عجبني التصميم ده. طبعاً هنا من فوق لازم تختار إذا كنت عايز شكل الـ Light Mode أو الـ Dark Mode. أنا بيعجبني الـ Dark Mode، عشان كده هاختار الـ Dark Mode. وهنا هاروح على “Copy Prompt” عشان تنسخ البرومبت اللي صمم الشكل ده بالظبط عشان تقدر تعمل زيه. دي مكتبة سرية فيها كل التصميمات اللي تخطر ببالك.

هاجي هنا وهاقوله: “أضف قسم الأسعار في موقعي ده في Anti-Gravity.google”. طبعاً في الشات، وهاقوم بإعطائه الكود اللي خدته Copy. البرومبت اللي خدته Copy بالكامل، أحطهوله في المربع الأزرق ده، وهاضغط إرسال. خلال ثواني هتلاقي إن التصميم اللي اخترته هناك انتقل حرفياً لموقعي الإلكتروني. هتشوفوا دلوقتي.

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

المصادر والأوامر (Magic Prompts)

🔥 روابط الأدوات اللي اتذكرت في الشرح:

UI Builder (Anti-Gravity / v0.dev): https://antigravity.google/download
Free 3D Design Library (Spline): https://spline.design
Professional UI Cards Library (21st.dev): https://21st.dev

💡 أوامر سحرية (انسخ والصق):

Prompt 1: (لإنشاء صفحة الهبوط الأساسية)

Create a premium, dark-mode landing page for a next-gen Spatial VR Headset. Use a black background with subtle neon purple/blue glows. Include a clean navbar, a massive empty 'Hero' section in the middle, and a bold 'Pre-order' button. Do not add any images in the hero section yet. Use Tailwind CSS.

Prompt 2: (بعد ما تاخد كود Spline)

Awesome. Now, embed this Spline 3D viewer code into the empty Hero section. Make sure it takes full width and height, is fully interactive with the mouse, and place it perfectly behind the main text: *[Insert the Spline code here]*

Prompt 3: (بعد ما تاخد كود 21st.dev)

Add this React component below the hero section and match our dark neon colors: *[Insert the 21st.dev code here]*

الكول تو أكشن (Call to Action)

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

وكمان تقدروا تعملوا Deploy للموقع. لو عايزين نعمله Deploy أو نشره على أي استضافة عايزينها، اكتبولي أيضاً في التعليقات. وإلى اللقاء في فيديو جديد، ومع السلامة.