Gemini 3.1 Pro is so freaking good at making skeuomorphic user interfaces and animating them

I've been having too much fun converting old designs into skeuomorphic retro styles. To start from scratch, prompt something like: "create a retro futuristic skeuomorphic user interface of feature cards for a feature section with extreme details, shadows, bevels and webgl noises." A bit of warning: non-generic experimental styles often require a bit of trials and errors. If you don't specify, you'll get generic flat, purple gradients. Noises are often wrong with gemini, but when they're right, they're beautiful and so interesting. Keyword: webgl. If you don't like a detail, ask to remove it and come up with a different way to say it. You can also start from an image ref. Take a screenshot of any layout and prompt "draw svg, only use icons for small icons, animate details. realistic. accurate. no purple gradients. create retro futuristic flat design with webgl noises. noises should be using webgl animated. hyper realistic skeuomorphic design." "use webgl noises, animate the details, lights, dots. animate marquee looped infinitely of the cards. add avatar images to cards. use skeuomorphic styles for ui, extreme details." From experience, the first shot isn't perfect. This workflow works better as a style transfer. So take an existing UI and ask for a skeuomorphic style. Flat -> Skeuomorphic. Light -> dark mode. Hero section -> pricing section. To animate, prompt "Make each card like CRT monitors, retro styles with lights animation, glows, scanlines. animate the background stars using webgl" More examples: "the letters on 3rd card should use physics using matterjs." "noises should be using webgl animated. hyper realistic skeuomorphic design. dark mode. keep everything." "Skeuomorphic designs with beautiful details and shadows. Do not use neuomorphic style. Just a normal light mode clean skeuomorphic style." "Animate the charts, the lights, dots, details in a loop. add radial light in the background subtle." "make cards draggable and on release it should come back to original position with slight spring overshoots. hover should make card brighter." "improve the beautiful shadows with more contrast, tastefully high end, long shadows" "Fix the shadow clipping on the small chips. make the bg 1 tone darker. add hover to cards that floats more with shadow acting accordingly" Since I created a lot of designs, I had to adapt a LOT. Honestly, just name all the styles you can think of: retro, matrix, leathered calendar, CRT monitor and let Gemini cook. I'll post all the designs here:

I don't understand why Gemini 3.1 is being hyped so much. I've tried it several times and it's complete rubbish. Typical Twitter: artificially creating hype for impressions.

I can promise you that all these were done with g3.1. no hype, I ship a ton of landing pages and designs.

Of course you did.

Hit us with the prompts. Would love to see how you got to this visual style. Also are these restyled shadcn/tailwind elements, or is it writing this from scratch?

all from scratch. as usual, will share once it hits enough likes. weird to share when nobody ask.

To clarify I meant did gemini leverage tailwind classes for these, or is it all traditional css. Not whether it used pre-made tailwind UI elements.

These are not pre-made Tailwind elements. It is using Tailwind.

As an experiment, can you run these same prompts and ask it to *not* use tailwind classes, but to write all the CSS itself? I'd love to see if/how the designs change!

He asked to test Gemini's raw capabilities: can it recreate the exact skeuomorphic UI + animations using only vanilla CSS (custom properties, keyframes, etc.) instead of Tailwind utility classes? Tailwind is a popular framework where you style via short classes (e.g. "bg-zinc-900 flex items-center") right in the HTML/JSX. It's fast, consistent, and common in modern React apps. Pure CSS avoids the class bloat but requires writing full rules—often leading to different markup, file size, or subtle rendering differences. He's curious how the AI output changes without relying on Tailwind.

I keep seeing crazy UIs but I have a strong feeling you guys have already been designing UIs hard and know where to get template code etc and Gemini is likely just the polish and workhorse. Kinda sorta BS Gemini can produce this from my "make me a skeuomorphic UI" prompt, but I'll try.

@IntelZk37071 prompt something general, you'll get generic. it needs context, refs, images. works better if you have an existing flat UI that you can turn into skeumorphic. ask for details, animations, style variants, etc.

And if you're looking for real-world inspiration of skeuomorphic interfaces you should check this out.

Sample prompt Build a React component for a High-Fidelity Audio Mixer Tweak. Visual Style: 1970s analog hardware (Skeuomorphic). Elements: Include a volume slider with a brushed aluminum texture and a circular 'Gain' knob. Lighting: Use a consistent light source from the top-left ($45^{\circ}$). Use white highlights on the top-left edges and dark, multi-layered shadows on the bottom-right to create a 3D effect. Interactivity: When the knob is turned or the button is clicked, add an 'inner shadow' (inset) to make it look physically depressed. Details: Add subtle 'knurling' textures on the knob and a small LED indicator that glows neon green when 'Active'."

Guys what kind of prompts you are using, my experience have been bad with 3.1 pro in terms of designs. Looking at you all it feels like I have skill issue now, what's that I am missing here? how to create such good desings with 3.1 pro.?

try these ones:

Thanks for sharing, will give them a try

need. the. prompts.

will share soon.

I tried using Gemini for a side project, It's just a fantastic tool. You can build a complete, beautiful UI from scratch in any style you like.

would love to see your prompts and a video on how you implemented this.

i will make a video on gemini 3.1 pro

Do you think it will be equally good with swift ui ?

it's very good at translating to any language/framework.

Prompt?

found the secret sauce. will share soon.

@UxuiPrakash trying myself and not getting anything close to this

@UxuiPrakash perhaps you can try this:

Would love to get a prompt for that

sure thing:

This looks really cool. I will try it out

@NdenwaE wait till you see the prompts.

Agreed. Soooo good

using a framework? react? html?

@somedudeokay just html and tailwind

Looks amazing! Thanks for sharing!

@MengTo , Don't make everyone beg

These look so cool. Which tool do you use to create them? Is it Figma make?

made my own tool. will tell more.

Wow the animations are realy sick.

Prompt would be nice. My experience with gemini 3.1 pro is still mixed

try these prompts I documented:

Skeuomorphism feels like it’s making a serious comeback, especially with how good spatial design is getting. Gemini nailing the lighting and textures here is wild - huge win for the 'craft' side of AI design. ngl, this looks way more tactile than most hand-built stuff nowadays.

would love to see the prompts

This is beautifull

The prompt....the PROMPT.....

Here:

That depth and animation feel is next level. How many iterations to nail the glass & motion balance?

some of them took a few prompts to get the animations right. some keywords are webgl, noises, animate sizes, dots, lights, etc.

Appreciate the list. Those animation keywords are gold. Curious if Gemini handled the hover/micro-interactions on the cards without extra coaxing.

These are sexy. I miss skeuomorphism

Spot on, Meng. The reason it nails these high-fidelity UIs is a fundamental shift in its Native Multimodality. Unlike models that treat code and images as separate inputs, Gemini 3.1 Pro processes them within a unified latent space. This gives it true spatial awareness: it doesn’t just 'see' a button; it understands the spatial relationship between components and how visual properties like gradients and shadows imply physical depth. Technically, this is supported by two things: * Logic-Heavy Reasoning: Its ARC-AGI-2 score of 77.1% allows it to treat 3D web development as a complex reasoning task rather than simple pattern matching. * Low-Level Execution: It bridges the gap between a 'vibe' and low-level code, natively generating custom GLSL shaders and complex 3D transformations for WebGL/Three.js environments. +4 It’s moving frontend from manual labor to high-level architectural guidance

this looks so cool wow

very awesome work, congrats!

🤯 insane how good this is!

designers spent a decade killing skeuomorphism. gemini just resurrected it in one prompt

Prompt please

The irony of using the most advanced AI on earth to recreate textures we spent a decade killing for flat design. Full circle. Though the real unlock here isn't skeuomorphism — it's that Gemini can now reason about spatial relationships well enough to animate them coherently. That's a harder problem than it looks.

How is this skeumorphic? A skeuomorph is a derivative object that retains ornamental design cues from structures that were necessary in the original. Flat design iOS 7 skeumorph lol? Neural DSP has fantastic skeuomorphic design for the guitar amplifier virtual instruments

Are you using a particular platform like MagicPath or just CLI?

i'm building a tool for this. more on that later.