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 guide for prompting impressive UI code After creating 120 components in a week while working on Aura, listed all the techniques I used: frameworks, styles, framing, html-to-code, image-to-code, etc. AI is getting so good at creating user interfaces.

Meng To

177,075 subscribers

117,197 views • 1 year ago •via X (Twitter)

Science & Technology Education

Anya Rossi• Live Now

Private livecam show

11 Comments

Meng To1 year ago

Here's the url: This is going to evolve. I think, for the first time, esp with Claude 3.7, I'm confident that AI can generate amazing user interfaces. The industry is going to change so much as a result. Because of this, I had to build a huge browse section with a ton of navigation. We're at 200 components, but we'll grow to 1000 within the next couple of weeks.

Coral AI News2 years ago

Coral AI is the most powerful AI for documents. See the difference yourself:

Mohammad Bagher 🦋1 year ago

amazing stuff! just wanted to share this

Meng To1 year ago

It's the content loading, not sure why it does that. Can you try reloading?

Eli Schiff1 year ago

Would be cool if there were an embedded prompt-building workflow

Meng To1 year ago

Working on something visual for that!

akhil1 year ago

i'm working on a project that requires generating code outputs with a nice UI are you going to open this up to access via API at any point?

Meng To1 year ago

do you mean the ui component code via api?

Dylan White1 year ago

120 components in a week? That’s some serious wizardry!

Meng To1 year ago

As with AI, there's a lot of reimagining, adapting, including html files/figma urls, hence the high count.

Matthew Payne1 year ago

Ayyy this is incredible!

Related Videos

prompting tip: How to write hybrid english & code prompts while building custom GPTs -Turn on code interpreter -"write code to ..." -Regenerate a few times until you get one you like -Copy paste it back into your prompt -tweak it to improve Now your ai can write consistent code Plus, you can add & combine with all sorts of english rules on top. Essentially adding english code logic "If the user asks for ..., then run this code" "If the user needs help with ..., use this code snippet and ask the user for all required information" Guess what thats a working if statement in english! if userAsksFor { // run this code } Prompts are code! English is a coding language Prompt-gramming is abstract coding

prompting tip: How to write hybrid english & code prompts while building custom GPTs -Turn on code interpreter -"write code to ..." -Regenerate a few times until you get one you like -Copy paste it back into your prompt -tweak it to improve Now your ai can write consistent code Plus, you can add & combine with all sorts of english rules on top. Essentially adding english code logic "If the user asks for ..., then run this code" "If the user needs help with ..., use this code snippet and ask the user for all required information" Guess what thats a working if statement in english! if userAsksFor { // run this code } Prompts are code! English is a coding language Prompt-gramming is abstract coding

Nick Dobos

117,034 views • 2 years ago

AIDesigner is officially live! I think we can all agree that vibe coded apps look horrible, so I built an AI UI designer that creates actually beautiful UI in seconds. • Stunning designs from the simplest of prompts. • Design, edit, iterate all on a single canvas. • Copy styles from any URL. • Publish in a single click (subdomain or custom). • Designs for both web and mobile. • Export to code and image. Great UI design doesn't have to be difficult. Components, mobile apps, websites, AIDesigner does it all. Try it for free:

AIDesigner is officially live! I think we can all agree that vibe coded apps look horrible, so I built an AI UI designer that creates actually beautiful UI in seconds. • Stunning designs from the simplest of prompts. • Design, edit, iterate all on a single canvas. • Copy styles from any URL. • Publish in a single click (subdomain or custom). • Designs for both web and mobile. • Export to code and image. Great UI design doesn't have to be difficult. Components, mobile apps, websites, AIDesigner does it all. Try it for free:

Wiz

17,068 views • 8 months ago

The response to the Marketing Skills for Claude Code repo I shared was unreal 🤯 BUT, I realized that most marketers still don't even know what a Terminal is. So I made a step-by-step guide to get up and running with agentic AI tools like Claude Code.

The response to the Marketing Skills for Claude Code repo I shared was unreal 🤯 BUT, I realized that most marketers still don't even know what a Terminal is. So I made a step-by-step guide to get up and running with agentic AI tools like Claude Code.

Corey Haines

30,236 views • 7 months ago

Holy crap, I got html to Figma working. This is about 1082 lines of code translating tailwind+html into figma console js commands. So we got accurate Figma layers, outlines, texts, nested groups and pure SVG icons. All these designs are made in Aura then exported to Figma.

Holy crap, I got html to Figma working. This is about 1082 lines of code translating tailwind+html into figma console js commands. So we got accurate Figma layers, outlines, texts, nested groups and pure SVG icons. All these designs are made in Aura then exported to Figma.

Meng To

71,217 views • 1 year ago

I used Claude Code with the new Remotion skill to create a teaser for the latest Laravel release. The voice is from , and I didn’t code or edit anything myself. It took a few iterations to get here, but pretty impressive 😮

I used Claude Code with the new Remotion skill to create a teaser for the latest Laravel release. The voice is from , and I didn’t code or edit anything myself. It took a few iterations to get here, but pretty impressive 😮

Christoph Rumpel 🤠

26,562 views • 7 months ago

Users state the goal. xBubble handles the building path. With Bubble Code, xBubble helps users create different kinds of Code AI Agents & AI roducts. The key is not just generating a prototype. Bubble Code is built to turn user goals into ready-to-use products with real interfaces, logic, integrations, and deployment paths. AI products should not stop at a mockup. With xBubble, they can be built, deployed, and used directly.

Users state the goal. xBubble handles the building path. With Bubble Code, xBubble helps users create different kinds of Code AI Agents & AI roducts. The key is not just generating a prototype. Bubble Code is built to turn user goals into ready-to-use products with real interfaces, logic, integrations, and deployment paths. AI products should not stop at a mockup. With xBubble, they can be built, deployed, and used directly.

DAPPOS

97,785 views • 2 months ago

I'm sharing a tutorial on creating interactive 3D experiences, combining Three.js and MediaPipe hand tracking 👋💠 In this 🧵: - a step-by-step guide including the 4 prompts I used to build this demo - the open source code - Other thoughts about vibe coding

I'm sharing a tutorial on creating interactive 3D experiences, combining Three.js and MediaPipe hand tracking 👋💠 In this 🧵: - a step-by-step guide including the 4 prompts I used to build this demo - the open source code - Other thoughts about vibe coding

AA

151,255 views • 1 year ago

Claude 3.7 Sonnet has serious competition! Gemini 2.5 Pro is a legit good model for code. - code quality is really good - 1M token context - native multimodality - long code generation - understand large codebases I used it with Windsurf to generate an AI search agent app:

Claude 3.7 Sonnet has serious competition! Gemini 2.5 Pro is a legit good model for code. - code quality is really good - 1M token context - native multimodality - long code generation - understand large codebases I used it with Windsurf to generate an AI search agent app:

elvis

211,534 views • 1 year ago

So I thought I'd have a go at creating a homage to an arcade classic in @Scratch, I present you with the beginnings of ScratchRun! Why not have a "See Inside" @HardistyMark Code Club #OutRun

So I thought I'd have a go at creating a homage to an arcade classic in @Scratch, I present you with the beginnings of ScratchRun! Why not have a "See Inside" @HardistyMark Code Club #OutRun

Robert Bilsland (🦋@bob.bilsland.me.uk🦋)

18,930 views • 2 years ago

I hated spending minutes trying to explain which element I meant in a long prompt, so I shipped something to fix it. Inspector’s new precision UI select tool connects the element on your screen to its exact source code, saving you time on prompting.

I hated spending minutes trying to explain which element I meant in a long prompt, so I shipped something to fix it. Inspector’s new precision UI select tool connects the element on your screen to its exact source code, saving you time on prompting.

mikeBuildsMore

12,343 views • 10 months ago

Today we’re launching Design Canvas for AI agents. AI can build a feature, but every "design tweak" turns into another prompt. We built a drag & drop editor for Claude Code, Cursor, Codex to explore and iterate on your UI, so you get the best design by default. No endless prompting. Ship better designs in code with Subframe.

Today we’re launching Design Canvas for AI agents. AI can build a feature, but every "design tweak" turns into another prompt. We built a drag & drop editor for Claude Code, Cursor, Codex to explore and iterate on your UI, so you get the best design by default. No endless prompting. Ship better designs in code with Subframe.

Irvin Zhan

300,925 views • 6 months ago

I've done analyses in Jupyter notebook for years. Now Code Interpreter can write all the code, but I haven't used it daily because you can't tweak code, re-run analyses, install packages, etc. I built Juno w/ Alexi Robbins to bring GPT into Jupyter for the best of the worlds

I've done analyses in Jupyter notebook for years. Now Code Interpreter can write all the code, but I haven't used it daily because you can't tweak code, re-run analyses, install packages, etc. I built Juno w/ Alexi Robbins to bring GPT into Jupyter for the best of the worlds

Andrew Mauboussin

49,880 views • 3 years ago

I created a skill for OpenClaw to use Claude Code It launches a CRON that checks background tasks every minute When done it wakes up the main thread Insane result: I can code on my project while working out and launch 10 Claude Code agents on the same project

I created a skill for OpenClaw to use Claude Code It launches a CRON that checks background tasks every minute When done it wakes up the main thread Insane result: I can code on my project while working out and launch 10 Claude Code agents on the same project

Melvyn • Builder

36,400 views • 7 months ago

Introducing /visual-plan - a skill to generate rich, visual plans for Claude Code and Codex. Plan mode in Claude Code is incredible. But I always find my eyes glazing over when it gives me this huge markdown essay in my terminal. I found I can make much better visual plans with reusable components. So I made a skill called `/visual-plan`. It generates plans as MDX with visual, interactive components. Diagrams, interactive API specs, schema design changes, annotated code, and even pan and zoomable wireframes. So for any UI work, you can look at a wireframe first, comment on it, iterate, and then have the agent work. I’ve found this to be a much more intuitive interface for reasoning about what the agent is doing. It’s somewhat inspired by that popular post about how HTML is better than Markdown. But HTML can be slow and verbose to write. And it doesn’t look good checked into a repo. This has really made me feel like humans and engineering are entering a new abstraction phase, where we reason about things at the plan level. As long as the plan is good, agents are getting more and more reliable at executing on it. Almost to the degree that we trust the C compiler to compile to assembly reliably. Plans are the new intermediate representation. I also made a skill for the reverse of this, called `/visual-recap`. After the agent works, it gives you a recap of everything it did. Same idea: wireframes, interactive API specs and diffs, schemas, annotated code, etc. So now when you’re reviewing what the agent did for you, or looking at a pull request of somebody else’s code, you can see a visual recap instead of just reading a wall of text. It’s all free and open source. You can find it on my GitHub. Will link to it in the reply because we all know how dumb these algorithms are with links.

Introducing /visual-plan - a skill to generate rich, visual plans for Claude Code and Codex. Plan mode in Claude Code is incredible. But I always find my eyes glazing over when it gives me this huge markdown essay in my terminal. I found I can make much better visual plans with reusable components. So I made a skill called `/visual-plan`. It generates plans as MDX with visual, interactive components. Diagrams, interactive API specs, schema design changes, annotated code, and even pan and zoomable wireframes. So for any UI work, you can look at a wireframe first, comment on it, iterate, and then have the agent work. I’ve found this to be a much more intuitive interface for reasoning about what the agent is doing. It’s somewhat inspired by that popular post about how HTML is better than Markdown. But HTML can be slow and verbose to write. And it doesn’t look good checked into a repo. This has really made me feel like humans and engineering are entering a new abstraction phase, where we reason about things at the plan level. As long as the plan is good, agents are getting more and more reliable at executing on it. Almost to the degree that we trust the C compiler to compile to assembly reliably. Plans are the new intermediate representation. I also made a skill for the reverse of this, called `/visual-recap`. After the agent works, it gives you a recap of everything it did. Same idea: wireframes, interactive API specs and diffs, schemas, annotated code, etc. So now when you’re reviewing what the agent did for you, or looking at a pull request of somebody else’s code, you can see a visual recap instead of just reading a wall of text. It’s all free and open source. You can find it on my GitHub. Will link to it in the reply because we all know how dumb these algorithms are with links.

Steve (Builder.io)

125,708 views • 2 months ago

The ChatGPT Mac app is the ultimate screenshot-to-code tool. Screenshot anything, paste it in the ChatGPT shortcut, and just tell GPT-4o to code it for you. Here's me taking a snapshot of Snake Game and getting fully working code in 90 seconds. Video is on 3x speed.

The ChatGPT Mac app is the ultimate screenshot-to-code tool. Screenshot anything, paste it in the ChatGPT shortcut, and just tell GPT-4o to code it for you. Here's me taking a snapshot of Snake Game and getting fully working code in 90 seconds. Video is on 3x speed.

Rowan Cheung

860,785 views • 2 years ago

Huge UI design boost by adding this to my AI workflow 1. Explore variations with Variant. The secret is to use "shuffle layout" and "see other views". This keeps the essence of a design that I like, but gives interesting layout variations. I also change colors and explore narrow by specifying one or two things in prompt, like font name, UI style or light/dark mode. 2. Copy HTML and prompt with Gemini 3 in site builder. Fix minute details like fonts, icons, assets, intro/scroll animations, adaptive layout and make the whole thing functional. Include image references, button styles, code snippets and other components to keep things creative. Often, I see sites that have one cool thing, but the rest is super generic. That's because AI is especially good at being generic without continuously feeding specs. 3. Turn into a landing page by prompt adding new components/sections and connect/adapt new pages. This is the part where most people stop, but it's actually the easiest since AI is so good at reading existing code. "Adapt this {page code} for a {features, blog, pricing, login} page." Finally, set up SEO and custom domain name. Boom, you just shipped a pro-level site that doesn't look generic.

Huge UI design boost by adding this to my AI workflow 1. Explore variations with Variant. The secret is to use "shuffle layout" and "see other views". This keeps the essence of a design that I like, but gives interesting layout variations. I also change colors and explore narrow by specifying one or two things in prompt, like font name, UI style or light/dark mode. 2. Copy HTML and prompt with Gemini 3 in site builder. Fix minute details like fonts, icons, assets, intro/scroll animations, adaptive layout and make the whole thing functional. Include image references, button styles, code snippets and other components to keep things creative. Often, I see sites that have one cool thing, but the rest is super generic. That's because AI is especially good at being generic without continuously feeding specs. 3. Turn into a landing page by prompt adding new components/sections and connect/adapt new pages. This is the part where most people stop, but it's actually the easiest since AI is so good at reading existing code. "Adapt this {page code} for a {features, blog, pricing, login} page." Finally, set up SEO and custom domain name. Boom, you just shipped a pro-level site that doesn't look generic.

Meng To

65,762 views • 7 months ago

If you use Next.js + @shadcn/ui, you know the pain of importing components one by one. As a lazy dev, I built a VS Code extension to import multiple components at once 🚀 No more: import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card } from "@/components/ui/card" Just select what you need, done ✨

If you use Next.js + @shadcn/ui, you know the pain of importing components one by one. As a lazy dev, I built a VS Code extension to import multiple components at once 🚀 No more: import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card } from "@/components/ui/card" Just select what you need, done ✨

Suraj Jha

48,373 views • 10 months ago

Last week on BNB Chain's AI-focused AMA, we made an important point: ANYONE can build on BNB Chain right now. I've never written code, and I recently deployed a project using the ChainGPT skill for Claude Code. If I can do it, so can you! →

Last week on BNB Chain's AI-focused AMA, we made an important point: ANYONE can build on BNB Chain right now. I've never written code, and I recently deployed a project using the ChainGPT skill for Claude Code. If I can do it, so can you! →

ChainGPT

26,369 views • 3 months ago

I'm almost done working on a new #GeometryNodes project ... a clean, logical API for creating node trees with code. Geometry, shader and compositor all supported. A clean minimal script that is logical to read and write, rebuilds the node trees interactively on the fly.

I'm almost done working on a new #GeometryNodes project ... a clean, logical API for creating node trees with code. Geometry, shader and compositor all supported. A clean minimal script that is logical to read and write, rebuilds the node trees interactively on the fly.

Brady Johnston

22,710 views • 4 months ago