Crea un sitio web completo con Google AI Studio — ¡Sin necesidad de código!

Generar el concepto inicial

Abre Google AI Studio, escribe el prompt principal y genera la primera versión de tu sitio web "AI Life Planner".

Prompt usado – Creación del sitio web

Crea un sitio web moderno, limpio y visualmente impactante llamado "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.

Refinar diseño y maquetación

Aplica mejoras de diseño, modifica la sección hero y añade una cabecera glassmorphism para un acabado premium.

Prompt usado – Tema oscuro y planificador semanal

Cambia todo el sitio web a un tema oscuro 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 usado – Cabecera glassmorphism

Añade una cabecera moderna de glassmorphism (cristal líquido)…

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 usado – Rediseño de la sección hero

Rediseña la sección hero con un titular grande y en negrita…

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.

Mejorar la funcionalidad

Añade componentes adicionales como una lista de tareas para que la aplicación sea más útil.

Prompt usado – Lista de tareas

Añade una sección sencilla de lista de tareas…

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

Despliegue en Hostinger

Descarga los archivos del sitio web, súbelos a Hostinger y lanza tu sitio en línea.

🎥 Implementar sitios web y apps de Google AI Studio

Implementar sitios web y apps de Google AI Studio

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

Implementar un manejo de errores robusto

Asegura que tu aplicación maneje correctamente los errores de despliegue y dé feedback claro a los usuarios.

Prompt usado – Manejo de errores y feedback

Añade un manejo de errores robusto para problemas comunes de despliegue…

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 de escritura de prompts

Aprende a escribir prompts sencillos pero efectivos para obtener los mejores resultados de la IA.

🎥 Tutorial de escritura de prompts

Tutorial de escritura de prompts

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