Crie um site completo com o Google AI Studio — sem precisar programar!

Gerar o conceito inicial

Abra o Google AI Studio, escreva o prompt principal e gere a primeira versão do seu site "AI Life Planner".

Prompt usado – Criação do site

Crie um site moderno, limpo e visualmente impressionante chamado "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 design e layout

Aplique melhorias de design, modifique a seção hero e adicione um cabeçalho glassmorphism para um visual premium.

Prompt usado – Tema escuro e planner semanal

Mude todo o site para um tema escuro 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 – Cabeçalho glassmorphism

Adicione um cabeçalho moderno em glassmorphism (vidro 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 – Redesign da seção hero

Redesenhe a seção hero com um título grande em negrito…

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.

Melhorar a funcionalidade

Adicione componentes extras, como uma lista de tarefas, para deixar o app mais útil.

Prompt usado – Lista de tarefas

Adicione uma seção simples de lista de tarefas…

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

Deploy na Hostinger

Baixe os arquivos do site, faça upload na Hostinger e coloque seu site no ar.

🎥 Implantar sites e apps web do Google AI Studio

Implantar sites e apps web do Google AI Studio

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

Implementar tratamento de erros robusto

Garanta que seu app consiga lidar bem com erros de deploy e dar feedback claro aos usuários.

Prompt usado – Tratamento de erros e feedback

Adicione tratamento de erros robusto para problemas comuns de 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.

Masterclass de escrita de prompts

Aprenda a escrever prompts simples mas eficazes para obter os melhores resultados da IA.

🎥 Tutorial de escrita de prompts

Tutorial de escrita de prompts

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