Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

My Figma to AI Code plugin is live Turn your designs into production-level code generated by Claude AI. Create React components, SwiftUI prototypes, HTML+CSS pages, Tailwind styles with custom prompts. Preview for responsiveness and export fully working code to Cursor and Xcode. It's free with your own API keys

MengTo's profile picture

Meng To

171,132 subscribers

76,017 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & TeknolojiEğitimSanat
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

Nathalie 😻 profil fotoğrafı
Nathalie 😻1 yıl önce

can i generate code for this effect on figma ? thank you

Meng To profil fotoğrafı
Meng To1 yıl önce

Doesn't support threeJS yet. Could be a cool idea.

Aksonvady profil fotoğrafı
Aksonvady1 yıl önce

Congratulations!

Tyler Nishida profil fotoğrafı
Tyler Nishida1 yıl önce

Can't figure out what's wrong, when using Anthropic API, i get error 500. With OpenAI API, i get property 0 undefined. Any thoughts on what might be causing these issues?

Meng To profil fotoğrafı
Meng To1 yıl önce

Can you check if you have a credit balance?

Manoj Kumar 🇮🇳 🇮🇪 profil fotoğrafı
Manoj Kumar 🇮🇳 🇮🇪1 yıl önce

Congrats. This is EASILY one of the best AI based plug-ins of this year. Well done 👏👏

Meng To profil fotoğrafı
Meng To1 yıl önce

Oh have you tried it? Thanks so much!

Alex Siclari profil fotoğrafı
Alex Siclari1 yıl önce

Is Vue going to be on the list?

Meng To profil fotoğrafı
Meng To1 yıl önce

Can add it!

Felix profil fotoğrafı
Felix1 yıl önce

This is an awesome plugin. Turning designs directly into clean, production-ready code is the way to go and a game changer. You might find Qodo AI handy for reviewing and refining the generated code. Pairing tools for smoother workflows is always great. Amazing work here!

Benzer Videolar

I made a plugin that turns figma designs to code using Claude AI Works with HTML, CSS, Tailwind, SwiftUI, Flutter, etc. This is production level code and you can enter custom prompts like "make it functional" or "add hover states". Oh and it's free. You can use your api keys.
0:37

I made a plugin that turns figma designs to code using Claude AI Works with HTML, CSS, Tailwind, SwiftUI, Flutter, etc. This is production level code and you can enter custom prompts like "make it functional" or "add hover states". Oh and it's free. You can use your api keys.

Meng To

220,706 görüntüleme • 1 yıl önce

You can make your Figma designs functional with Claude AI Select component, go to Dev Mode and use Figma to Code plugin to turn to React/Tailwind. Copy the code and paste to Claude AI. Prompt "Create this component and center it". Then, "Make this functional", "Add rounded corners", "add hover states", "animate transitions". Don't forget to ask "always give full code". Otherwise, it might break the Artifact.
6:06

You can make your Figma designs functional with Claude AI Select component, go to Dev Mode and use Figma to Code plugin to turn to React/Tailwind. Copy the code and paste to Claude AI. Prompt "Create this component and center it". Then, "Make this functional", "Add rounded corners", "add hover states", "animate transitions". Don't forget to ask "always give full code". Otherwise, it might break the Artifact.

Meng To

171,513 görüntüleme • 1 yıl önce

Figma just became obsolete. one-shots entire UI designs using your Claude Code subscription. - MCP connects to Cursor, Claude Code, or Codex - Fully editable designs - Export to Figma or PNG The kicker? It's completely free right now.
0:27

Figma just became obsolete. one-shots entire UI designs using your Claude Code subscription. - MCP connects to Cursor, Claude Code, or Codex - Fully editable designs - Export to Figma or PNG The kicker? It's completely free right now.

Sanket 🛠️ClawKraft

37,940 görüntüleme • 4 ay önce

I'm building my own AI chat app in Cursor It can voice-to-text in your fav apps, with custom prompts. Can chat with gpt-4o, Claude, Gemini and even local/offline models like DeepSeek. Fully native written in SwiftUI. It's free with your API keys. Going to launch this week.
0:59

I'm building my own AI chat app in Cursor It can voice-to-text in your fav apps, with custom prompts. Can chat with gpt-4o, Claude, Gemini and even local/offline models like DeepSeek. Fully native written in SwiftUI. It's free with your API keys. Going to launch this week.

Meng To

37,404 görüntüleme • 1 yıl önce

Today we’re launching an experimental @Figma plugin that will convert your design into runnable code. Generate a Repl directly from Figma, and instantly share a static React app with your team. Then, use Replit AI to add functionality and get your code production-ready.
0:45

Today we’re launching an experimental @Figma plugin that will convert your design into runnable code. Generate a Repl directly from Figma, and instantly share a static React app with your team. Then, use Replit AI to add functionality and get your code production-ready.

Replit ⠕

524,418 görüntüleme • 2 yıl önce

Figma meets Claude Code! Pencil is an infinite design canvas that runs parallel design agents locally. → Turn designs into code → Runs locally with Claude Code → Works with VSCode, Cursor 100% free, no subscription
1:19

Figma meets Claude Code! Pencil is an infinite design canvas that runs parallel design agents locally. → Turn designs into code → Runs locally with Claude Code → Works with VSCode, Cursor 100% free, no subscription

Alvaro Cintas

387,652 görüntüleme • 4 ay önce

Turn design into code with Claude Code + Figma. Through MCP, Claude sees your mockup at the data level—component hierarchies, design tokens, auto-layout rules—and translates it into production-ready code.
0:33

Turn design into code with Claude Code + Figma. Through MCP, Claude sees your mockup at the data level—component hierarchies, design tokens, auto-layout rules—and translates it into production-ready code.

Claude

2,594,044 görüntüleme • 8 ay önce

Prompt builder to generate designs with live preview Remix from 780+ templates, iterate quickly and bring your UI code to cursor or figma. I took 7 days to completely recode everything from Swift to React. 50k lines of code. With AI, the platform code is almost irrelevant since you transfer everything. What a time to be alive.
0:58

Prompt builder to generate designs with live preview Remix from 780+ templates, iterate quickly and bring your UI code to cursor or figma. I took 7 days to completely recode everything from Swift to React. 50k lines of code. With AI, the platform code is almost irrelevant since you transfer everything. What a time to be alive.

Meng To

57,233 görüntüleme • 1 yıl önce

Introducing Reweb 2.0 - The Cursor & Figma baby Generate, edit & explore designs with AI. Export React and shadcn code. Available today in open beta.
0:44

Introducing Reweb 2.0 - The Cursor & Figma baby Generate, edit & explore designs with AI. Export React and shadcn code. Available today in open beta.

Mattia

93,790 görüntüleme • 11 ay önce

This is my Figma to SwiftUI code workflow I couldn't find a good way to turn my Figma designs to Xcode so I built a plugin. It took roughly a day to create with Claude AI. A few more days to add additional features like Save file, Fast forward, Preview options, advanced settings, a ton of testing and of course shipping/feedback. We're at a point where we can built our own tools to complete a workflow.
14:33

This is my Figma to SwiftUI code workflow I couldn't find a good way to turn my Figma designs to Xcode so I built a plugin. It took roughly a day to create with Claude AI. A few more days to add additional features like Save file, Fast forward, Preview options, advanced settings, a ton of testing and of course shipping/feedback. We're at a point where we can built our own tools to complete a workflow.

Meng To

51,659 görüntüleme • 1 yıl önce

UI Components Handbook Collection of popular user interface components with guides on how to use them, Figma design samples & code snippets (HTML/Tailwind CSS)
0:20

UI Components Handbook Collection of popular user interface components with guides on how to use them, Figma design samples & code snippets (HTML/Tailwind CSS)

Nick Babich

120,191 görüntüleme • 2 yıl önce

Announcing Visual Copilot 2.0 Turn Figma designs into interactive applications using your code, components, and data with natural language
0:58

Announcing Visual Copilot 2.0 Turn Figma designs into interactive applications using your code, components, and data with natural language

Steve (Builder.io)

32,968 görüntüleme • 1 yıl önce

Play to Xcode is here! Ship your projects in Play to the App Store. › Export your styles, components, pages, and entire app to Xcode › All your interactions and logic in Play carry over 1:1 to Xcode › Use real data by loading in JSON files or connect to your own APIs › Create AI features in Play by tapping into popular APIs like OpenAI › Export to SwiftUI or UIKit and easily mix with your existing codebase › Keep your app up to date by simply updating your Swift package Learn more and try it today!
0:55

Play to Xcode is here! Ship your projects in Play to the App Store. › Export your styles, components, pages, and entire app to Xcode › All your interactions and logic in Play carry over 1:1 to Xcode › Use real data by loading in JSON files or connect to your own APIs › Create AI features in Play by tapping into popular APIs like OpenAI › Export to SwiftUI or UIKit and easily mix with your existing codebase › Keep your app up to date by simply updating your Swift package Learn more and try it today!

Play

175,664 görüntüleme • 1 yıl önce

Today is the day! Our most requested feature, design → code generation, is live: Go from idea → design → code in under a minute. You can now export generated UI designs to Tailwind CSS with Galileo. The fastest way to bring your ideas to life. 🚀
0:27

Today is the day! Our most requested feature, design → code generation, is live: Go from idea → design → code in under a minute. You can now export generated UI designs to Tailwind CSS with Galileo. The fastest way to bring your ideas to life. 🚀

Stitch by Google

26,103 görüntüleme • 2 yıl önce

BREAKING 🚨: Upcoming API Playground preview on Anthropic Workbench and a new analytics page for Claude Code. What % of your code is AI-generated? "coming soon" 👀
0:37

BREAKING 🚨: Upcoming API Playground preview on Anthropic Workbench and a new analytics page for Claude Code. What % of your code is AI-generated? "coming soon" 👀

TestingCatalog News 🗞

14,242 görüntüleme • 11 ay önce

What if AI could turn your Figma designs into fully interactive, data-connected applications? Announcing Visual Copilot 2.0: make Figma designs real, using your actual code, data, and APIs. 🧵👇
0:58

What if AI could turn your Figma designs into fully interactive, data-connected applications? Announcing Visual Copilot 2.0: make Figma designs real, using your actual code, data, and APIs. 🧵👇

Builder.io

16,999 görüntüleme • 1 yıl önce

I built a free Figma to React plugin used by Lovable! In 1 click you can convert your Figma design into React + Tailwind CSS code They said it had better code gen than even paid plugins like Anima, Builderio, Framer, etc. but no one knew about it :( ✅ Try Figroot (it's completely free) Like + comment to help me share it 🫶
0:58

I built a free Figma to React plugin used by Lovable! In 1 click you can convert your Figma design into React + Tailwind CSS code They said it had better code gen than even paid plugins like Anima, Builderio, Framer, etc. but no one knew about it :( ✅ Try Figroot (it's completely free) Like + comment to help me share it 🫶

patti

16,274 görüntüleme • 6 ay önce

Introducing MagicPath, an infinite canvas to create, refine, and explore with AI. Create beautiful components and functional apps, while providing production ready code. Available today, free, for everyone. The Cursor moment for design is here.
1:44

Introducing MagicPath, an infinite canvas to create, refine, and explore with AI. Create beautiful components and functional apps, while providing production ready code. Available today, free, for everyone. The Cursor moment for design is here.

Pietro Schirano

1,879,738 görüntüleme • 1 yıl önce

You can build iOS apps with Cursor and Claude AI even as a beginner You got SwiftUI for UI/animations, GitHub Copilot for code completion, ChatGPT for reading files in Xcode and Cursor Composer for writing code for you. I'm teaching all that in my new course
2:13

You can build iOS apps with Cursor and Claude AI even as a beginner You got SwiftUI for UI/animations, GitHub Copilot for code completion, ChatGPT for reading files in Xcode and Cursor Composer for writing code for you. I'm teaching all that in my new course

Meng To

143,981 görüntüleme • 1 yıl önce

Introducing CodeRabbit Plugin for Claude Code! The CodeRabbit plugin for Claude Code creates an autonomous AI development workflow, helping you write and fix code without manual intervention. Type /coderabbit:review (or just say “review my code”) to get AI-powered fixes directly in your dev flow! Try it today, it’s free!
1:59

Introducing CodeRabbit Plugin for Claude Code! The CodeRabbit plugin for Claude Code creates an autonomous AI development workflow, helping you write and fix code without manual intervention. Type /coderabbit:review (or just say “review my code”) to get AI-powered fixes directly in your dev flow! Try it today, it’s free!

CodeRabbit

27,190 görüntüleme • 4 ay önce