Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

I made a tool that generates UIs with a design system that's copyable as prompts. Everything is a prompt: font pairings, color system, spacing, icon sets, buttons and even webgl & threejs with full code samples. This made explorations with Gemini 3.1 Pro so precise and fun.

Meng To

170,796 subscribers

94,732 views • 2 months ago •via X (Twitter)

Science & Technology

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

i made a 3D stained glass type design tool it renders live in the browser using threejs and webgl shaders

i made a 3D stained glass type design tool it renders live in the browser using threejs and webgl shaders

AA

47,343 views • 1 month ago

This is the progression of a "3D Flappy Bird" game I made using Gemini 2.5 Pro and Sonnet 3.7. Wrote 0 lines of code and have 0 experience with games or graphics. Vibe-coded over 1 hour with a tool that integrates with vanilla VS Code (no special editor or proprietary fork).

This is the progression of a "3D Flappy Bird" game I made using Gemini 2.5 Pro and Sonnet 3.7. Wrote 0 lines of code and have 0 experience with games or graphics. Vibe-coded over 1 hour with a tool that integrates with vanilla VS Code (no special editor or proprietary fork).

Beyang

17,323 views • 1 year ago

Been thinking about sharing some fun, interactive science app ideas Made this one today UI design and planet textures GPT Images 2 Code Gemini 3.1 Pro

Been thinking about sharing some fun, interactive science app ideas Made this one today UI design and planet textures GPT Images 2 Code Gemini 3.1 Pro

Dilum Sanjaya

353,710 views • 1 month ago

Fun interactive science app ideas | Part 3 Played around with generating 3D biological structures and made an app to explore them interactively UI Design GPT Images 2 Code Gemini 3.1 Pro More demos ↓

Fun interactive science app ideas | Part 3 Played around with generating 3D biological structures and made an app to explore them interactively UI Design GPT Images 2 Code Gemini 3.1 Pro More demos ↓

Dilum Sanjaya

2,262,380 views • 1 month ago

Fun interactive science app ideas | Part 4 Made a turbofan jet engine airflow simulator UI Design GPT Images 2 Code Gemini 3.1 Pro More demos ↓

Fun interactive science app ideas | Part 4 Made a turbofan jet engine airflow simulator UI Design GPT Images 2 Code Gemini 3.1 Pro More demos ↓

Dilum Sanjaya

129,955 views • 1 month ago

Jeeezz, I just vibe coded a fully interactive 3D solar system explorer using Three.js and GSAP in Google AI Studio with Gemini 3.1 Pro. Still can't believe it. It uses advanced threejs strategies like Hybird DOM, WebGL Masking, cinematic camera, Fresnel effect and such. Building stuff like this genuinely feels like joy. Smooth, immersive, and ridiculously fun to create using AI ♥️ It's inspired from Jamie Coulter original CSS solar explorer codepen :) Live: Code:

Jeeezz, I just vibe coded a fully interactive 3D solar system explorer using Three.js and GSAP in Google AI Studio with Gemini 3.1 Pro. Still can't believe it. It uses advanced threejs strategies like Hybird DOM, WebGL Masking, cinematic camera, Fresnel effect and such. Building stuff like this genuinely feels like joy. Smooth, immersive, and ridiculously fun to create using AI ♥️ It's inspired from Jamie Coulter original CSS solar explorer codepen :) Live: Code:

The Bugged Dev

44,925 views • 2 months ago

How to make Claude Code 10x better: Connect it with a tool that reviews your code and generates prompts for Claude to fix any issues with it automatically. Here is what this looks like:

How to make Claude Code 10x better: Connect it with a tool that reviews your code and generates prompts for Claude to fix any issues with it automatically. Here is what this looks like:

Santiago

98,881 views • 8 months ago

Here's the full video on using Claude Code Skills with Nano Banana Pro and ThreeJS. I've also made the both Claude skills + prompts + source code FREE (check reply) Enjoy!

Here's the full video on using Claude Code Skills with Nano Banana Pro and ThreeJS. I've also made the both Claude skills + prompts + source code FREE (check reply) Enjoy!

Chong-U

147,256 views • 5 months ago

Just added Google Gemini 3.1 Pro to Base44 Gemini 3.1 Pro is really good for gaming and design workflows, and it's fast. If that's what you're building, this is your model. + we're adding something a lot of you were asking for - you can now pick your AI model from the very first prompt. No more starting with a default and switching halfway through. Checkout this Pokemon game I built with the new model, and let me know what you're building

Just added Google Gemini 3.1 Pro to Base44 Gemini 3.1 Pro is really good for gaming and design workflows, and it's fast. If that's what you're building, this is your model. + we're adding something a lot of you were asking for - you can now pick your AI model from the very first prompt. No more starting with a default and switching halfway through. Checkout this Pokemon game I built with the new model, and let me know what you're building

Maor Shlomo

23,662 views • 3 months ago

I can't code and I'm not a designer. But I managed to create this cool, interactive website with Figma's new prompt-to-code tool. Lessons learned from my explorations in "vibe designing" 👇

I can't code and I'm not a designer. But I managed to create this cool, interactive website with Figma's new prompt-to-code tool. Lessons learned from my explorations in "vibe designing" 👇

Justine Moore

176,543 views • 11 months ago

We've been ramping up usage of AI tools on our design team at Coinbase 🛡️ Two examples: 1. Write a text prompt and get a figma mockup as a starting point for your design 2. Click a button and turn any figma design into front-end code The front-end code it generates adheres to our design system, and is trained on our library of UIs Shout out to 🛡️ tali krakowsky apel🛡️ Blair McKee and the team pushing this forward.

We've been ramping up usage of AI tools on our design team at Coinbase 🛡️ Two examples: 1. Write a text prompt and get a figma mockup as a starting point for your design 2. Click a button and turn any figma design into front-end code The front-end code it generates adheres to our design system, and is trained on our library of UIs Shout out to 🛡️ tali krakowsky apel🛡️ Blair McKee and the team pushing this forward.

Brian Armstrong

520,346 views • 2 years ago

Made a full limb explosion system for METAL GOD's personal avatar. The avatar is very Armored Core and Necromorph inspired, so i'm really making it into an undead robot with this system. Super fun hah #VRChat

Liindy

29,597 views • 1 year ago

Introducing a Design System Agent, powered by Fable 5. Sync your components, typography, spacing, colors, rules. Share with your team, design anything. Watch me change everything within Duolingo's design system on Magic Patterns:

Introducing a Design System Agent, powered by Fable 5. Sync your components, typography, spacing, colors, rules. Share with your team, design anything. Watch me change everything within Duolingo's design system on Magic Patterns:

Alex Danilowicz

134,628 views • 8 days ago

I just made this with 2 prompts Creatives are cooked. RT and comment "prompt" and I'll send you the prompts I used.

I just made this with 2 prompts Creatives are cooked. RT and comment "prompt" and I'll send you the prompts I used.

Matt Epstein

35,412 views • 3 months ago

I made a generative typography system with spreadsheet

I made a generative typography system with spreadsheet

Kitasenju Design

108,038 views • 2 years ago

"A wooden house" by Claude Fable 5 (max) Max reasoning effort is impressive, this is using my safe system prompt that removes creativity but makes buildings more functional and it's impressive I'll keep testing it with other past system prompts, but so far so good

"A wooden house" by Claude Fable 5 (max) Max reasoning effort is impressive, this is using my safe system prompt that removes creativity but makes buildings more functional and it's impressive I'll keep testing it with other past system prompts, but so far so good

Angel 🌼

1,487,374 views • 9 days ago

Love creating animated buttons with #SwiftUI. Makes building UIs so much fun (space is reserved for a waveform)

Love creating animated buttons with #SwiftUI. Makes building UIs so much fun (space is reserved for a waveform)

Fabian Gruß

29,566 views • 2 years ago

Cat Wu, head of product for Claude Code at Anthropic: "you can build almost anything with Claude from a single prompt now" one prompt gets you a working screen, not YOUR product Claude Code has never seen your design system, so it guesses the look fresh every time. how to hand Claude Code that system is in the article. better than the $300 design course in your tabs, and this one's free.

Cat Wu, head of product for Claude Code at Anthropic: "you can build almost anything with Claude from a single prompt now" one prompt gets you a working screen, not YOUR product Claude Code has never seen your design system, so it guesses the look fresh every time. how to hand Claude Code that system is in the article. better than the $300 design course in your tabs, and this one's free.

Mnimiy

112,125 views • 5 days ago

This Claude Code proxy tool lets you see the system prompts 👀 It reveals some useful behaviours too: - Claude injects system reminders into user prompts - It automatically triggers the Read tool when a file changes mid-conversation (link below with more details)

This Claude Code proxy tool lets you see the system prompts 👀 It reveals some useful behaviours too: - Claude injects system reminders into user prompts - It automatically triggers the Read tool when a file changes mid-conversation (link below with more details)

Ian Nuttall

34,379 views • 11 months ago

Opus 4.6 vs Gemini 3.1 Pro (2/9) prompt: Build a premium Vite + React landing page for Aether, an AI creative studio, with dark-mode design, high-end animations (Framer Motion), and conversion-focused sections (hero, features, demo, pricing, testimonials). Whilst I think gemini is overall better at design, the model often struggles with syntax issues, tool calling and thinking for 2-3 times the amount of opus.

Opus 4.6 vs Gemini 3.1 Pro (2/9) prompt: Build a premium Vite + React landing page for Aether, an AI creative studio, with dark-mode design, high-end animations (Framer Motion), and conversion-focused sections (hero, features, demo, pricing, testimonials). Whilst I think gemini is overall better at design, the model often struggles with syntax issues, tool calling and thinking for 2-3 times the amount of opus.

Dev Ed

60,091 views • 3 months ago