Baue eine vollständige Website mit Google AI Studio — kein Programmieren erforderlich!

Initiales Konzept generieren

Öffne Google AI Studio, schreibe den Haupt-Prompt und generiere die erste Version deiner "AI Life Planner"-Website.

Verwendeter Prompt – Erstellung der Website

Erstelle eine moderne, saubere und visuell beeindruckende Website namens "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.

Design und Layout verfeinern

Wende Design-Upgrades an, passe den Hero-Bereich an und füge einen Glassmorphism-Header für einen Premium-Look hinzu.

Verwendeter Prompt – Dunkles Theme und Wochenplaner

Ändere die gesamte Website zu einem modernen dunklen Theme…

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.

Verwendeter Prompt – Glassmorphism-Header

Füge einen modernen Glassmorphism-Header (Liquid Glass) hinzu…

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.

Verwendeter Prompt – Redesign des Hero-Bereichs

Gestalte den Hero-Bereich neu mit einer großen, fetten Überschrift…

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.

Funktionalität verbessern

Füge zusätzliche Komponenten wie eine To-Do-Liste hinzu, um die Anwendung nützlicher zu machen.

Verwendeter Prompt – To-Do-Listen-Funktion

Füge einen einfachen To-Do-Listen-Bereich hinzu…

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

Deployment auf Hostinger

Lade die Website-Dateien herunter, lade sie zu Hostinger hoch und schalte deine Site live.

🎥 Google AI Studio-Websites und Web-Apps bereitstellen

Google AI Studio-Websites und Web-Apps bereitstellen

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

Robuste Fehlerbehandlung implementieren

Stelle sicher, dass deine Anwendung Deployment-Fehler elegant behandelt und den Nutzern klares Feedback gibt.

Verwendeter Prompt – Fehlerbehandlung und Feedback

Füge eine robuste Fehlerbehandlung für häufige Deployment-Probleme hinzu…

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 zum Schreiben von Prompts

Lerne, einfache, aber effektive Prompts zu schreiben, um die besten Ergebnisse von der KI zu erhalten.

🎥 Tutorial zum Schreiben von Prompts

Tutorial zum Schreiben von Prompts

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