Crea un sito completo con Google AI Studio — senza bisogno di programmare!

Crea un sito web completo con Google AI Studio, dalla prima idea e dal design fino a un sito funzionante pubblicato online.

Roadmap e risorse

Creare il sito (Google AI Studio)

Generare il concept iniziale

Apri Google AI Studio, scrivi il prompt principale e genera la prima versione del tuo sito "AI Life Planner".

Prompt usato – Creazione del sito

Crea un sito moderno, pulito e visivamente d'impatto chiamato "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.

Migliorare e personalizzare la UI

Affinare design e layout

Applica migliorie al design, modifica la sezione hero e aggiungi un header glassmorphism per un look premium.

Prompt usato – Tema scuro e planner settimanale

Cambia l'intero sito in un tema scuro moderno…

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 usato – Header in glassmorphism

Aggiungi un header moderno in glassmorphism (vetro liquido)…

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 usato – Redesign della sezione hero

Ridisegna la sezione hero con un titolo grande in grassetto…

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.

Aggiungere funzionalità interattive

Migliorare la funzionalità

Aggiungi componenti extra come una lista di cose da fare per rendere l'app più utile.

Prompt usato – Lista di cose da fare

Aggiungi una semplice sezione di lista di cose da fare…

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

Pubblicare il sito online

Deploy su Hostinger

Scarica i file del sito, caricali su Hostinger e metti online il tuo sito.

🎥 Distribuire siti e app web di Google AI Studio

Distribuire siti e app web di Google AI Studio

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

Implementare una gestione robusta degli errori

Fa' in modo che la tua app gestisca correttamente gli errori di deploy e dia un feedback chiaro agli utenti.

Prompt usato – Gestione errori e feedback

Aggiungi una gestione robusta degli errori per i problemi comuni di deploy…

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.

Risorsa opzionale

Masterclass di scrittura dei prompt

Impara a scrivere prompt semplici ma efficaci per ottenere i migliori risultati dall'IA.

🎥 Tutorial di scrittura dei prompt

Tutorial di scrittura dei prompt

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