ابنِ موقعًا كاملاً باستخدام Google AI Studio — بلا حاجة لكتابة كود!

ولّد المفهوم الأولي

افتح Google AI Studio، اكتب الـ Prompt الرئيسي، وولّد النسخة الأولى من موقع "AI Life Planner".

الـ Prompt المستخدم – إنشاء الموقع

أنشئ موقعًا عصريًا ونظيفًا ومبهرًا بصريًا باسم "AI Life Planner"…

Create a modern, clean, and visually impressive website called "AI Life Planner". The website should help users organize their goals, daily routines, habits, and personal growth. You have full creative freedom to choose the layout, colors, and visual style. Include: • Hero section • User input form • Personalized plan section Make the website fully responsive. Return everything in a single HTML file with embedded CSS and JavaScript.

حسّن التصميم والتخطيط

طبّق ترقيات تصميم، عدّل قسم الـ Hero، وأضف header بأسلوب glassmorphism للحصول على مظهر متميز.

الـ Prompt المستخدم – سمة داكنة ومخطط أسبوعي

غيّر الموقع بأكمله إلى سمة داكنة عصرية…

Change the entire website to a modern dark theme with premium gradients. Add a "Weekly Planner" section below the Personalized Plan section. Ensure everything remains responsive and visually consistent.

الـ Prompt المستخدم – Header بأسلوب Glassmorphism

أضف header عصريًا بأسلوب glassmorphism (زجاج سائل)…

Add a modern glassmorphism (liquid glass) header at the top of the website. Include: • "AI Life Planner" text logo on the left • Blurred glass background with soft shadows • Menu items on the right: Home, Features, Plans, Contact • Smooth hover animations • Sticky behavior on scroll Ensure full responsiveness.

الـ Prompt المستخدم – إعادة تصميم قسم الـ Hero

أعد تصميم قسم الـ Hero بعنوان كبير وعريض…

Redesign the hero section with a large bold headline, subtle gradient shapes, and a modern premium call-to-action button. Keep the design clean and consistent with the site.

حسّن الوظائف

أضف مكونات إضافية مثل To-Do list لجعل التطبيق أكثر فائدة.

الـ Prompt المستخدم – ميزة To-Do List

أضف قسم To-Do List بسيطًا…

Add a simple To-Do List section below the hero section with checkboxes to mark tasks as completed. Keep the design minimal and clean.

النشر إلى Hostinger

نزّل ملفات الموقع، ارفعها إلى Hostinger، وأطلق موقعك مباشرًا.

🎥 انشر مواقع وتطبيقات Google AI Studio

انشر مواقع وتطبيقات Google AI Studio

https://youtu.be/HGs-4QjyjHQ?si=Cs4oHKURdxp6J70E

نفّذ معالجة قوية للأخطاء

تأكد من أن تطبيقك يستطيع التعامل مع أخطاء النشر بأناقة وتقديم ملاحظات واضحة للمستخدمين.

الـ Prompt المستخدم – معالجة الأخطاء والملاحظات

أضف معالجة قوية للأخطاء لمشكلات النشر الشائعة…

Implement a comprehensive error handling system for the website. If a user encounters an error (e.g., network failure, form submission error), display a friendly, clearly visible error message instead of a generic browser alert. Provide suggestions for fixing the issue (e.g., "Check your internet connection"). Also, ensure that successful actions display a confirmation message.

ماستركلاس كتابة الـ Prompts

تعلّم كيف تكتب Prompts بسيطة لكن فعالة للحصول على أفضل النتائج من الذكاء الاصطناعي.

🎥 درس كتابة الـ Prompts

درس كتابة الـ Prompts

https://youtu.be/UlkdOrr3RKM?si=rKQvhMqWmO1HakUp