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 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... show more

Meng To

159,352 subscribers

32,462 views • 1 year ago •via X (Twitter)

Education Science & Technology

Anya Rossi• Live Now

Private livecam show

7 Comments

Satyajit Mane1 year ago

Love it. I will definitely give it a try ✌️

AssemblyAI1 year ago

Our speech-to-text models are the most accurate on the market with top rankings across industry benchmarks. - The highest accuracy rates—up to 95% - Up to 30% fewer hallucinations than other leaders - Low latency—63 minutes converts in 35 seconds Try via API for free today 👇

Devluc1 year ago

What a huge difference between 3.7 and the others. Thanks for the tutorial

Franck1 year ago

What's the plugin ?

Will1 year ago

How can I access the Base Code of this plugin?

تركي العتيبي1 year ago

@ezdubs_bot English to Arabic

Yellow || Framer Developer1 year ago

@vaibhav_khulbe Hello Meng, nothing related to this post but are we getting a new YouTube course on Framer this year? 🙏

Related Videos

Claude 3.7 Sonnet is the best model in the world for code. It’s like having a world-class dev with exceptional taste. “build a next.js SaaS marketing template” And boom - 26 files of beautiful code in one shot. Absolutely unreal.

Claude 3.7 Sonnet is the best model in the world for code. It’s like having a world-class dev with exceptional taste. “build a next.js SaaS marketing template” And boom - 26 files of beautiful code in one shot. Absolutely unreal.

Mckay Wrigley

547,157 views • 1 year ago

Claude 3.7 Sonnet with Claude Code creates an entire "glass like" design system in one shot, with ALL the components. How insane is this?

Claude 3.7 Sonnet with Claude Code creates an entire "glass like" design system in one shot, with ALL the components. How insane is this?

Pietro Schirano

206,483 views • 1 year ago

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.

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 views • 1 year ago

It cost me $8 for 4 prompts with GPT 4.5 Preview in Cursor. Is it better than Claude 3.7 for coding? No. I've been casually building really complex features like multi-edit and AI video editing with chat. It's amazing that Claude is still the same price as 3.5 and is included in Cursor pricing.

It cost me $8 for 4 prompts with GPT 4.5 Preview in Cursor. Is it better than Claude 3.7 for coding? No. I've been casually building really complex features like multi-edit and AI video editing with chat. It's amazing that Claude is still the same price as 3.5 and is included in Cursor pricing.

Meng To

38,134 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,476 views • 1 year ago

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,283,287 views • 2 months ago

We just built Figma for Claude Code > Select any element on your local front-end > Edit it like you would in Figma > Apply the changes with Claude Code This is not a demo or waitlist. Try it today.

We just built Figma for Claude Code > Select any element on your local front-end > Edit it like you would in Figma > Apply the changes with Claude Code This is not a demo or waitlist. Try it today.

Quentin Romero Lauro

249,328 views • 4 months ago

Claude finally killed the need for OpenClaw They launched "Claude Channels" which allows you to control Claude Code from your Telegram / Discord I show you how to set it up in ~6 minutes in mainly 3 steps Step 1: Create bot with BotFather Step 2: Install the Claude plugin Step 3: Pair with a code Now I can code, research, manage files from my phone using Claude Code If you don't watch this tutorial now I highly suggest you bookmark for later!

Claude finally killed the need for OpenClaw They launched "Claude Channels" which allows you to control Claude Code from your Telegram / Discord I show you how to set it up in ~6 minutes in mainly 3 steps Step 1: Create bot with BotFather Step 2: Install the Claude plugin Step 3: Pair with a code Now I can code, research, manage files from my phone using Claude Code If you don't watch this tutorial now I highly suggest you bookmark for later!

Chris ☕️

70,187 views • 3 months ago

btw, from Figma → Code via Pencil > just copy/paste: cmd+C in Figma, cmd+V in Pencil > styles and layout settings preserved, pixel perfect > claude code produces the code that fits your repo code, requirements and rules, you are in charge

btw, from Figma → Code via Pencil > just copy/paste: cmd+C in Figma, cmd+V in Pencil > styles and layout settings preserved, pixel perfect > claude code produces the code that fits your repo code, requirements and rules, you are in charge

Tom Krcha

15,131 views • 4 months ago

Been using the new Claude 3.5 model as a tester and now that it is out, I can say it is very very impressive, and the "artifacts" that it generates are like a simpler version of Code Interpreter This is a real-time video of me creating a playable game and editing it with Claude

Been using the new Claude 3.5 model as a tester and now that it is out, I can say it is very very impressive, and the "artifacts" that it generates are like a simpler version of Code Interpreter This is a real-time video of me creating a playable game and editing it with Claude

Ethan Mollick

162,274 views • 2 years ago

A designer who can ship code is one of the most valuable hires in tech today. Here's my new episode with Felix Lee (CEO of ADPList) where he showed me how to use Claude Code and Figma MCP to go from: ✅ Figma → Code: Design to website in 15 min ✅ Code → Figma: App back to editable design Felix also demoed a few apps he's designed and built in Claude Code, including a 3D globe website and a landing page analyzer. Some takeaways from Felix: 1. Stop pasting screenshots into Claude Code. Instead, use Figma MCP to pull in all your assets, icons, and images automatically. 2. You can use the same MCP to convert code back into editable Figma layers to explore more variations. 3. An underrated way to build: Use FigJam to plan a flowchart of your app first, then paste the link into Claude Code with the MCP. 📌 Watch now: Thanks to our sponsors: Replit ⠕: Plan, design, and build with AI agents Linear: The AI agent platform for modern teams

A designer who can ship code is one of the most valuable hires in tech today. Here's my new episode with Felix Lee (CEO of ADPList) where he showed me how to use Claude Code and Figma MCP to go from: ✅ Figma → Code: Design to website in 15 min ✅ Code → Figma: App back to editable design Felix also demoed a few apps he's designed and built in Claude Code, including a 3D globe website and a landing page analyzer. Some takeaways from Felix: 1. Stop pasting screenshots into Claude Code. Instead, use Figma MCP to pull in all your assets, icons, and images automatically. 2. You can use the same MCP to convert code back into editable Figma layers to explore more variations. 3. An underrated way to build: Use FigJam to plan a flowchart of your app first, then paste the link into Claude Code with the MCP. 📌 Watch now: Thanks to our sponsors: Replit ⠕: Plan, design, and build with AI agents Linear: The AI agent platform for modern teams

Peter Yang

77,115 views • 3 months ago

Get started with the all-new free plan for GitHub Copilot, available for everyone today in Visual Studio Code All you need is a GitHub account, and you'll have access to: ✨ 2000 code completions per month ✨ 50 chat messages per month ✨ Models like Claude 3.5 Sonnet or GPT-4o

Get started with the all-new free plan for GitHub Copilot, available for everyone today in Visual Studio Code All you need is a GitHub account, and you'll have access to: ✨ 2000 code completions per month ✨ 50 chat messages per month ✨ Models like Claude 3.5 Sonnet or GPT-4o

Visual Studio Code

146,767 views • 1 year ago

This Composio connect-apps plugin for Claude Code is 🔥 It's the easiest way to instantly connect Claude Code to 500+ apps like Gmail, Slack, GitHub, and Linear. You really don't need to be setting up MCP servers one by one. I use it a lot, and it has saved me a ton of time.

This Composio connect-apps plugin for Claude Code is 🔥 It's the easiest way to instantly connect Claude Code to 500+ apps like Gmail, Slack, GitHub, and Linear. You really don't need to be setting up MCP servers one by one. I use it a lot, and it has saved me a ton of time.

elvis

33,729 views • 4 months ago

There's a built-in agent inside Claude Code you can invoke just by telling Claude to use the claude-code-guide agent Save this... you'll need it It's not a local file in your project. It's a built-in subagent defined in Claude Code's system itself. It answers questions about Claude Code CLI, the Agent SDK, and the Claude API. It uses Glob, Grep, Read, WebFetch, and WebSearch, but can't edit or write files. Its only job is to answer questions.

There's a built-in agent inside Claude Code you can invoke just by telling Claude to use the claude-code-guide agent Save this... you'll need it It's not a local file in your project. It's a built-in subagent defined in Claude Code's system itself. It answers questions about Claude Code CLI, the Agent SDK, and the Claude API. It uses Glob, Grep, Read, WebFetch, and WebSearch, but can't edit or write files. Its only job is to answer questions.

Daniel San

57,240 views • 3 months ago

Today is a big day! We're launching a ~ new ~ version of Claude Code in the desktop app. It's been redesigned from the ground up for parallel work and is a lot faster. It's been my main way to use Claude Code for the last few weeks.

Today is a big day! We're launching a ~ new ~ version of Claude Code in the desktop app. It's been redesigned from the ground up for parallel work and is a lot faster. It's been my main way to use Claude Code for the last few weeks.

Felix Rieseberg

951,514 views • 2 months ago

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.

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,307 views • 9 months 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,308 views • 7 days ago

Going from design to code is going from something built and usable to an unnecessary level of abstraction. It's like finishing a house then asking for the blueprints so someone else can rebuild it. Design is code. Code is design. Use a code-first canvas. Use MagicPath.

Going from design to code is going from something built and usable to an unnecessary level of abstraction. It's like finishing a house then asking for the blueprints so someone else can rebuild it. Design is code. Code is design. Use a code-first canvas. Use MagicPath.

Pietro Schirano

26,974 views • 4 months ago