Xây dựng website hoàn chỉnh với Google AI Studio — không cần lập trình!

Tạo ý tưởng ban đầu

Mở Google AI Studio, viết prompt chính và tạo phiên bản đầu tiên của website "AI Life Planner" của bạn.

Prompt đã dùng – Tạo website

Tạo một website hiện đại, gọn gàng và ấn tượng về mặt thị giác có tên "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.

Tinh chỉnh thiết kế & bố cục

Áp dụng các nâng cấp thiết kế, chỉnh sửa phần hero và thêm header glassmorphism để có vẻ ngoài cao cấp.

Prompt đã dùng – Giao diện tối & lịch tuần

Đổi toàn bộ website sang giao diện tối hiện đại...

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 đã dùng – Header glassmorphism

Thêm header glassmorphism (liquid glass) hiện đại...

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 đã dùng – Thiết kế lại phần hero

Thiết kế lại phần hero với một dòng tiêu đề lớn, đậm...

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.

Nâng cao chức năng

Thêm các thành phần khác như danh sách việc cần làm để ứng dụng hữu ích hơn.

Prompt đã dùng – Tính năng danh sách việc cần làm

Thêm một mục danh sách việc cần làm đơn giản...

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 lên Hostinger

Tải các tệp website xuống, tải chúng lên Hostinger và đưa site của bạn lên mạng.

🎥 Deploy website & ứng dụng web từ Google AI Studio

Deploy website & ứng dụng web từ Google AI Studio

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

Triển khai cơ chế xử lý lỗi vững chắc

Đảm bảo ứng dụng của bạn có thể xử lý êm đẹp các lỗi khi deploy và đưa ra phản hồi rõ ràng cho người dùng.

Prompt đã dùng – Xử lý lỗi & phản hồi

Thêm cơ chế xử lý lỗi vững chắc cho các sự cố deploy thường gặp...

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.

Lớp học chuyên sâu về viết prompt

Học cách viết những prompt đơn giản nhưng hiệu quả để nhận kết quả tốt nhất từ AI.

🎥 Hướng dẫn viết prompt

Hướng dẫn viết prompt

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