Build Apps for Your Friends (Vibe Coding)

Опубликовано 24 апреля 2026, 19:44

In this video, we show you how you can surprise your community with personalized apps, cards, and interactive experiences built on Google AI Studio. First, we vibe code a custom card generator that we can tailor to different tastes and celebrations. Then, we use two shorter prompts to build interactive experiences that will surprise and delight our friends. Building with Gemini can be so fun!
#VibeCoding #BuildWithGemini #AIStudio

Here are the prompts for the second two builds:
Fortune cookie card: Build an interactive, single-page digital birthday card using HTML, CSS, and JavaScript that features a surprise 'fortune cookie' reveal. The initial view should display a large, illustrated fortune cookie resting on a festive background with a pulsing button that says 'Crack me open for your birthday fortune!' When the user clicks the cookie, trigger a smooth CSS animation that splits the cookie in half, revealing a small paper slip sliding out from the center. The text on the slip should be dynamically pulled from an array of fun, personalized birthday wishes. Once the paper is fully revealed, trigger a JavaScript confetti library to create a burst of celebratory confetti across the entire screen. Add a subtle sound effect when the cookie is clicked and another one for the confetti burst.

Interactive garden card for mom: Build me a mother's day experience. She loves summer days and lilies. Make it interactive and add animations. Imagine a scene that is a never ending garden scene hand sketched on a summer day. And every corner there is a message for mom. She has to look around. Use the whole screen.

We have a lot of educational tutorials coming, so subscribe to this channel and keep an eye out for those! In the meantime, our “Build apps in AI Studio” article is a great resource for getting started: ai.google.dev/gemini-api/docs/aistudio-build-mode

Build your ideas with Gemini: aistudio.google.com/apps
Info on how to ship your site or builds here: ai.google.dev/gemini-api/docs/...

Subscribe to our Channel: youtube.com/google
Find us on X: twitter.com/google
Watch us on TikTok: tiktok.com/@google
Follow us on Instagram: instagram.com/google
Join us on Facebook: facebook.com/Google