正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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

171,218 subscribers

220,706 次观看 • 1 年前 •via X (Twitter)

科学技术教育

Anya Rossi• Live Now

Private livecam show

10 条评论

Meng To 的头像

Meng To1 年前

The plugin has been published. Just waiting for the @figma team 👀 Will link as soon as it's public.

Meng To 的头像

Meng To1 年前

The plugin is live!

Victor 的头像

Victor1 年前

bro just casually dropped the holy grail of design-to-code and said "oh and it's free" like it's nothing 🔥

Meng To 的头像

Meng To1 年前

To be fair, this is highly reliant on Claude and OpenAI to work well. I just built the plugin. But thank you!

Nick Dobos 的头像

Nick Dobos1 年前

Would love to try it! Got a link?

Meng To 的头像

Meng To1 年前

👀

Satyajit Mane 的头像

Satyajit Mane1 年前

I have been following your journey since 2019 on youtube. A lot to learn from you. Biggest fan of your work 😃✌️

Meng To 的头像

Meng To1 年前

I'm just happy that my work is still relevant after all these years! So much to learn and so many new tools. 🙏

Hello I'm Robie 🚀 的头像

Hello I'm Robie 🚀1 年前

Where do we get it? I am a paid member for Designcode - is it online?

Meng To 的头像

Meng To1 年前

First, I thank you. It'll be ready soon!

相关视频

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

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

Meng To

76,017 次观看 • 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.

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 年前

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 🫶

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 次观看 • 5 个月前

how to make your ai app not look like it was made with ai (weavy ai, claude, figma etc) use weavy ai to generate custom assets, color systems, and logos across models like flux + ideogram, then compose it properly in figma then paste into claude code/google ai studio etc watch

how to make your ai app not look like it was made with ai (weavy ai, claude, figma etc) use weavy ai to generate custom assets, color systems, and logos across models like flux + ideogram, then compose it properly in figma then paste into claude code/google ai studio etc watch

GREG ISENBERG

153,315 次观看 • 3 个月前

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.

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 年前

Introducing Aura, a chat app for Mac that can do voice-to-text and generate designs. You can speak to any app, use AI models and chat offline. Code mode lets you generate beautiful components, animations, simple sites and share online. It's free with api keys, or with limits.

Introducing Aura, a chat app for Mac that can do voice-to-text and generate designs. You can speak to any app, use AI models and chat offline. Code mode lets you generate beautiful components, animations, simple sites and share online. It's free with api keys, or with limits.

Meng To

24,279 次观看 • 1 年前

I built a new plugin! You can now trigger Codex from Claude Code! Use the Codex plugin for Claude Code to delegate tasks to Codex or have Codex review your changes using your ChatGPT subscription. Start by installing the plugin:

I built a new plugin! You can now trigger Codex from Claude Code! Use the Codex plugin for Claude Code to delegate tasks to Codex or have Codex review your changes using your ChatGPT subscription. Start by installing the plugin:

dominik kundel

1,282,429 次观看 • 2 个月前

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.

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 个月前

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.

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,417 次观看 • 2 年前

🌟 Discover the ultimate Tailwind hack! I'm using an amazing Eslint plugin that streamlines your Tailwind CSS code for cleaner, more consistent results. Learn as you code, with intelligent shorthands and organized structure. ▶️ Link: #buildinpublic

🌟 Discover the ultimate Tailwind hack! I'm using an amazing Eslint plugin that streamlines your Tailwind CSS code for cleaner, more consistent results. Learn as you code, with intelligent shorthands and organized structure. ▶️ Link: #buildinpublic

Kristoffer Eriksson

37,437 次观看 • 2 年前

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.

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 年前

been making a design tool where you and AI agents design together... claude code, cursor, or any cli agent can join the canvas and build with u infinite canvas, real components, everything in tailwind + html so you can just copy the code + eventually publish like any other site too

been making a design tool where you and AI agents design together... claude code, cursor, or any cli agent can join the canvas and build with u infinite canvas, real components, everything in tailwind + html so you can just copy the code + eventually publish like any other site too

Pablo Stanley

21,415 次观看 • 3 个月前

Building AI agents and tools is getting ridiculously easy! Here is a pretty impressive FREE and Open-Source AI agent builder that runs on your computer. It's a desktop app you can install on Mac or Windows. Link: • Free • 100% no-code: You can type what you want, and the tool will build everything for you. • You can use local models like DeepSeek or Qwen, or connect to cloud models like GPT-4o, Claude, or Gemini with your API key. • You can turn the tools you build into MCP Servers. I recorded a quick video to show you how easy it is to build something from scratch.

Building AI agents and tools is getting ridiculously easy! Here is a pretty impressive FREE and Open-Source AI agent builder that runs on your computer. It's a desktop app you can install on Mac or Windows. Link: • Free • 100% no-code: You can type what you want, and the tool will build everything for you. • You can use local models like DeepSeek or Qwen, or connect to cloud models like GPT-4o, Claude, or Gemini with your API key. • You can turn the tools you build into MCP Servers. I recorded a quick video to show you how easy it is to build something from scratch.

Santiago

56,815 次观看 • 1 年前

text-to-svg/icon Figma plugin built with Next.js, shadcn UI, and Tailwind CSS + Replicate API! It's open source, and I hope it helps anyone looking to build their own plugin! 🤠 Github:

text-to-svg/icon Figma plugin built with Next.js, shadcn UI, and Tailwind CSS + Replicate API! It's open source, and I hope it helps anyone looking to build their own plugin! 🤠 Github:

Lichin Lin

25,124 次观看 • 1 年前

Claude Code UI is now available in VSCode via CodeGPT extension! 🙌 You can now run Claude Code directly in your editor and control the planning process. You can pause it, edit tasks, or add new ones while Claude is working. This helps keep Claude on track and makes it way more effective since you can adjust things as it goes. Setup: - Download the extensión - Click the Claude Code OAuth - Authorize the extension - Paste your account code to link Claude Code directly - Done ✅ Works on VSCode and JetBrains editors (Android Studio, IntelliJ, PyCharm, etc.) VSCode : Jetbrains:

Claude Code UI is now available in VSCode via CodeGPT extension! 🙌 You can now run Claude Code directly in your editor and control the planning process. You can pause it, edit tasks, or add new ones while Claude is working. This helps keep Claude on track and makes it way more effective since you can adjust things as it goes. Setup: - Download the extensión - Click the Claude Code OAuth - Authorize the extension - Paste your account code to link Claude Code directly - Done ✅ Works on VSCode and JetBrains editors (Android Studio, IntelliJ, PyCharm, etc.) VSCode : Jetbrains:

Daniel San

105,989 次观看 • 9 个月前

Been using Paper MCP with Claude Code today and I’m kind of blown away! I tested importing Figma designs, then iterating on them using live Supabase data (via MCP). It genuinely feels like a glimpse of where design is heading. would love Paper to add something like agentation from Benji Taylor, so Claude Code can target frames and layers directly.

Been using Paper MCP with Claude Code today and I’m kind of blown away! I tested importing Figma designs, then iterating on them using live Supabase data (via MCP). It genuinely feels like a glimpse of where design is heading. would love Paper to add something like agentation from Benji Taylor, so Claude Code can target frames and layers directly.

Gon

72,498 次观看 • 3 个月前

Testing the code generated from your figma designs 👀 You can resize the preview and test for mobile, tablet and desktop. I added zoom, bg color, padding, alignment and export to PNG for sharing. Just in case Claude doesn't center it correctly or give the right background. Fingers crossed that Figma approves this plugin soon 🤞

Testing the code generated from your figma designs 👀 You can resize the preview and test for mobile, tablet and desktop. I added zoom, bg color, padding, alignment and export to PNG for sharing. Just in case Claude doesn't center it correctly or give the right background. Fingers crossed that Figma approves this plugin soon 🤞

Meng To

16,988 次观看 • 1 年前

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 次观看 • 8 个月前

Using Claude Code just got 10x easier. Someone literally built 100+ agents, commands, MCPs, and templates that you can install and use with one command. And it's 100% free to use.

Using Claude Code just got 10x easier. Someone literally built 100+ agents, commands, MCPs, and templates that you can install and use with one command. And it's 100% free to use.

Shubham Saboo

127,222 次观看 • 10 个月前

I built a complex history feature for my Figma to Code plugin in 3 prompts. This is a 30-min tutorial using Claude Code. The difference in code generation between gpt-4o, Claude 3.5 and 3.7 is insane. 3.7 produces near-perfect results and is far more consistent. It's really a designer's best friend, not missing details from the design, like adaptive layout, outlines, spacing, etc. It seems like the new model has great taste now.

I built a complex history feature for my Figma to Code plugin in 3 prompts. This is a 30-min tutorial using Claude Code. The difference in code generation between gpt-4o, Claude 3.5 and 3.7 is insane. 3.7 produces near-perfect results and is far more consistent. It's really a designer's best friend, not missing details from the design, like adaptive layout, outlines, spacing, etc. It seems like the new model has great taste now.

Meng To

32,462 次观看 • 1 年前