Playing with map interactions. Generated this UI concept with Nano Banana and brought it to life using Gemini Pro Thinking about starting a series that explores aesthetic variations in data visualization UIs More details ↓

Love this! Check your DMs for a small gift from our team.

thanks so much, really appreciate it 😊 just checked and replied!

Here's the original image from Nano Banana. changed few elements based on Gemini's implementation.

Also tried a dark mode version with Nano Banana. This one also looks great. However when vibe coding fine tuning dark mode colors usually takes more time , so I went with the lighter version

I like exploring UIs that don't follow the usual patterns. Since my "Vibe Coding Robotics" series is focused on how AI handles engineering related concepts, I might spin off a separate series for aesthetics, like these ones

I did something similar before with a series called "Global Anomaly Detection System". Not vibe coded, but still a lot of fun to create.

love the non-traditional aesthetic here. how good has gemini been with replicating nano banana UIs?

thanks! It's pretty good at understanding individual elements and getting close just from the image, especially for common things like bar charts, maps, etc. For less common or more custom elements, it usually needs a bit of extra description. Animations also take a bit of iteration to get right, since the first pass can feel a bit choppy.

makes sense! I’m constantly impressed with the nano banana + gemini combo. I’m looking to start building some UI POCs like this too - any tips?

Genuinely how do you get the UI translation so good, is it manually cropping out the elements for reuse?

The map is an svg and there are multiple ways to transition between two points on it. So, I simply ask Gemini to implement the transition in different ways and then choose the best one

This is a strong reminder that geospatial interfaces are not just about showing data. They are about shaping how people understand systems, patterns, and signals through space. Aesthetic exploration like this can make complex spatial intelligence feel far more intuitive.

very cool

thanks

Does those special images or background is cropped by Gemini or need manually cropping as assets.

For components with shapes that aren't rectangular but also not too complex, you can use Gemini to convert them into SVG shapes and use it as a background. You need to mention this explicitly, otherwise it will default to rectangular shapes. The header here is a bit too complicated for the AI to handle on its own, so I traced it in Figma and then added it as an asset using prompts

Please make some stuff about how to make games with all the tools that you use

Very cool

thanks

This is so cool. Amazing work

thanks Kevin

this is super nice

thanks

Oh man looks awesome

thanks

Impressive!

thanks

Looks amazing! Mind if I ask how you got gemini 3.1 to animate it?

So creative! I really admire how this idea came about. Can you share it?

very cool, my website try to redesign like this

This is awesome!Could u share a little bit how did u do this by step?

we are seeing something new build with AI everyday. people are really using this moment to explore their ideas.

cool are you going to make a browser based game with it?

Gemini is such a lazy model. way less thorough and careful than gpt5.4tginking. i never trust what it comes up with without doublechecking it's answers with gpt5 4. so if it creates graphs & UIs using data it was asked to reserach i'd be highly sceptical the output is accurate.