Gemini – Trust the Vibe,
Ship the Code

• [Cần chuẩn bị] Tài khoản Google/Gmail cá nhân: Dùng để đăng nhập và sử dụng các công cụ thuộc hệ sinh thái của Google
• [Tùy chọn] Tài khoản Github: Dùng để quản lý, lưu trữ mã nguồn và kết nối với các nền tảng deploy. Đăng ký tại https://github.com/signup
• [Tùy chọn] Tạo 1 Github repository để làm nơi lưu trữ mã nguồn
• [Tùy chọn] Tạo 1 folder bất kỳ tùy theo thói quen setup máy tính của bạn, bạn sẽ sử dụng folder đó để làm nơi chứa mã nguồn cho app trên máy tính của bạn.

1. Step 0: Thiết kế UI với Stitch 🎨 (Tùy chọn)

   Dùng Stitch by Google để phác thảo cực nhanh. Bạn chỉ cần mô tả concept, AI sẽ tự generate giao diện.

   • Truy cập stitch.withgoogle.com
   • Prompt: Mô tả app, tính năng và vibe bạn mong muốn.
   • Chụp lại hoặc export design để làm tham chiếu khi code.

   ⏰ Đừng tốn quá nhiều thời gian! Chỉ dành 5-10 phút tại đây thôi vì bạn chỉ có 60 phút để build. UI đẹp cũng không cứu được content chán, nhưng content hay thì UI mộc mạc vẫn ăn giải.

2. Step 1: Lấy API Key 🔑

   Nhận Gemini API Key miễn phí (mất ~2 phút)

   • Vào aistudio.google.com và đăng nhập
   • Bấm "Get API Key" ở thanh menu bên trái
   • Bấm "Create API key" → copy mã

   ⚠️ Giữ API Key của bạn an toàn! Nó giống như mật khẩu, đừng bao giờ để lộ trong màn hình hoặc đưa lên Github Public.

3. Step 2: Chọn công cụ phù hợp✦

   Beginner Friendly

   🟢 No Code: AI Studio Playground

   Xây dựng ứng dụng trực tiếp trong Google AI Studio mà không cần code. Bạn chỉ cần nhập prompt, xem kết quả ngay lập tức. Phù hợp nếu bạn mới bắt đầu và để Gemini xử lý. (Có thể dùng prompt mẫu bên dưới).

   For Developers

   🟠 IDE: Antigravity

   Phát triển trong môi trường IDE tích hợp AI. Bạn có thể làm việc với file, chạy code và iterate. Chỉ cần dùng prompt mẫu và yêu cầu Antigravity tạo sẵn cấu trúc app để bắt đầu.

Build me a single HTML file web app for the "Vibe Coding Hackathon".

Theme: "Real Problem, Real Solution" — the app must solve a real, relatable pain point that the user describes themselves. The solution must be practical, immediately applicable, and genuinely useful in everyday life.

My pain point idea: [REPLACE THIS — e.g. "I always forget to reply to messages and people think I ghosted them — give me an AI that generates increasingly dramatic excuses escalating from 'sorry was busy' to full Shakespearean tragedy"]

Requirements:
- Use the Gemini API (`gemini-3-flash` model) via `fetch()` — include a variable at the top for the API key so I can paste mine in
- Single HTML file with no external dependencies
- Bright, beautiful **Light Mode UI** that feels modern and polished
- An input area where the user describes their pain point or situation
- A submit button with a fun, thematic label that fits the app's personality
- An output area that displays Gemini's gloriously unhinged-but-helpful response
- Google-coloured accents (blue #4285F4, red #EA4335, yellow #FBBC04, green #34A853)
- Must look polished, immersive, and *slightly too serious* for how silly the concept is — that contrast is the joke

The goal: The pain point is real. The energy is unhinged. The solution actually helps. Make it feel like a startup that raised $40M to solve a problem that didn't need $40M.

Hãy xây dựng cho tôi một web app dạng file HTML duy nhất cho "Vibe Coding Hackathon".

Chủ đề: "Vấn Đề Thật, Giải Pháp Thật" — app phải giải quyết một pain point có thật, dễ đồng cảm mà người dùng tự mô tả. Giải pháp phải thực tế, có tính ứng dụng cao, và thực sự hữu ích trong cuộc sống hàng ngày.

Ý tưởng pain point của tôi: [THAY THẾ CHỖ NÀY — ví dụ: "Tôi hay quên rep tin nhắn và mọi người nghĩ tôi đang cố tình lơ họ — hãy tạo một AI giúp tôi soạn tin nhắn xin lỗi phù hợp với từng mối quan hệ và hoàn cảnh cụ thể"]

Yêu cầu kỹ thuật:
- Dùng Gemini API (model `gemini-3.0-flash`) qua `fetch()` — đặt một biến ở đầu file để chứa API key, tôi sẽ tự điền vào sau
- Một file HTML duy nhất, không dùng thư viện hay dependency ngoài
- Giao diện Light Mode sáng sủa, đẹp, hiện đại và chỉn chu
- Ô nhập liệu để người dùng mô tả tình huống hoặc pain point của mình
- Nút submit với nhãn rõ ràng, phù hợp với chức năng của app
- Khu vực hiển thị phản hồi từ Gemini — câu trả lời phải cụ thể, actionable, và dễ áp dụng ngay
- Sử dụng bảng màu Google (xanh dương #4285F4, đỏ #EA4335, vàng #FBBC04, xanh lá #34A853)
- Phải trông bóng bẩy, chuyên nghiệp, và đủ tin cậy để người dùng thực sự muốn dùng hàng ngày

Mục tiêu: Pain point thì có thật. Giải pháp thì thiết thực. Trải nghiệm thì mượt mà. Hãy làm cho nó trông như một sản phẩm thực sự đáng dùng — không phải chỉ đẹp để demo.

💡 Pro tip: Sau khi app đã chạy ổn định, hãy nhờ Gemini cải thiện thêm - yêu cầu như "optimize this", "improve UX", hoặc "make it more practical and user-friendly" để sản phẩm giải quyết vấn đề tốt hơn và dễ dùng hơn.