Crée un site web complet avec Google AI Studio — sans avoir besoin de coder !

Générer le concept initial

Ouvre Google AI Studio, écris le prompt principal et génère la première version de ton site web « AI Life Planner ».

Prompt utilisé – Création du site web

Crée un site web moderne, épuré et visuellement impressionnant appelé « 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.

Affiner le design et la mise en page

Applique des améliorations de design, modifie la section hero et ajoute un en-tête glassmorphism pour un rendu premium.

Prompt utilisé – Thème sombre et planificateur hebdomadaire

Change tout le site web pour un thème sombre moderne…

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 utilisé – En-tête glassmorphism

Ajoute un en-tête moderne en glassmorphism (verre liquide)…

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 utilisé – Refonte de la section hero

Refais le design de la section hero avec un grand titre en gras…

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.

Améliorer la fonctionnalité

Ajoute des composants supplémentaires comme une liste de tâches pour rendre l'application plus utile.

Prompt utilisé – Liste de tâches

Ajoute une simple section de liste de tâches…

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

Déploiement sur Hostinger

Télécharge les fichiers du site web, téléverse-les sur Hostinger et mets ton site en ligne.

🎥 Déployer des sites web et apps Google AI Studio

Déployer des sites web et apps Google AI Studio

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

Implémenter une gestion d'erreurs robuste

Assure-toi que ton application peut gérer correctement les erreurs de déploiement et fournir un retour clair aux utilisateurs.

Prompt utilisé – Gestion d'erreurs et feedback

Ajoute une gestion d'erreur robuste pour les problèmes courants de déploiement…

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.

Masterclass d'écriture de prompts

Apprends à écrire des prompts simples mais efficaces pour obtenir les meilleurs résultats de l'IA.

🎥 Tutoriel d'écriture de prompts

Tutoriel d'écriture de prompts

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