Загрузка видео...

Не удалось загрузить видео

На главную

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 просмотров • 1 год назад •via X (Twitter)

Наука и технологииОбразованиеИскусство
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 10

Фото профиля Nathalie 😻
Nathalie 😻1 год назад

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

Фото профиля Meng To
Meng To1 год назад

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

Фото профиля Aksonvady
Aksonvady1 год назад

Congratulations!

Фото профиля Tyler Nishida
Tyler Nishida1 год назад

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
Meng To1 год назад

Can you check if you have a credit balance?

Фото профиля Manoj Kumar 🇮🇳 🇮🇪
Manoj Kumar 🇮🇳 🇮🇪1 год назад

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

Фото профиля Meng To
Meng To1 год назад

Oh have you tried it? Thanks so much!

Фото профиля Alex Siclari
Alex Siclari1 год назад

Is Vue going to be on the list?

Фото профиля Meng To
Meng To1 год назад

Can add it!

Фото профиля Felix
Felix1 год назад

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!

Похожие видео

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 просмотров • 1 год назад

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 просмотров • 1 год назад

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 просмотров • 4 месяцев назад

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 просмотров • 1 год назад

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 просмотров • 2 лет назад

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 просмотров • 4 месяцев назад

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,197 просмотров • 8 месяцев назад

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 просмотров • 1 год назад

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 просмотров • 11 месяцев назад

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 просмотров • 1 год назад

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 просмотров • 2 лет назад

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 просмотров • 1 год назад

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 просмотров • 1 год назад

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 просмотров • 2 лет назад

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 просмотров • 11 месяцев назад

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 просмотров • 1 год назад

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 просмотров • 6 месяцев назад

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 просмотров • 1 год назад

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 просмотров • 4 месяцев назад

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 просмотров • 1 год назад