正在加载视频...

视频加载失败

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

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

1,431,574 subscribers

2,593,302 次观看 • 8 个月前 •via X (Twitter)

科学技术教育艺术

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

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

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,546 次观看 • 3 个月前

Motion design with Claude Code + Higgsfield MCP: 1. Pull references with Pinterest API in Claude Code 2. Storyboard 6 scenes via GPT Images 2.0 in Higgsfield MCP and feed the on-screen text 3. Drop the board into Seedance 2.0 via Higgsfield MCP Motion Design, solved.

Motion design with Claude Code + Higgsfield MCP: 1. Pull references with Pinterest API in Claude Code 2. Storyboard 6 scenes via GPT Images 2.0 in Higgsfield MCP and feed the on-screen text 3. Drop the board into Seedance 2.0 via Higgsfield MCP Motion Design, solved.

Higgsfield AI 🧩

274,374 次观看 • 22 天前

Figma just gave AI agents the canvas. Claude Code can now design directly in Figma via MCP + Skills👇

Figma just gave AI agents the canvas. Claude Code can now design directly in Figma via MCP + Skills👇

Min Choi

48,999 次观看 • 2 个月前

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,042 次观看 • 2 个月前

Excited to launch Pencil INFINITE DESIGN CANVAS for Claude Code > Superfast WebGL canvas, fully editable, running parallel design agents > Runs locally with Claude Code → turn designs into code > Design files live in your git repo → Open json-based .pen format

Excited to launch Pencil INFINITE DESIGN CANVAS for Claude Code > Superfast WebGL canvas, fully editable, running parallel design agents > Runs locally with Claude Code → turn designs into code > Design files live in your git repo → Open json-based .pen format

Tom Krcha

1,494,074 次观看 • 4 个月前

Just updated talk to figma mcp open source Anthropic Claude Code can now talk to figma I can ask claude to review my design and annotate directly in design file Link below

Just updated talk to figma mcp open source Anthropic Claude Code can now talk to figma I can ask claude to review my design and annotate directly in design file Link below

Sonny

32,549 次观看 • 3 个月前

Introducing Component Grab SuperDesign.Dev Chrome extension allows you to grab any UI component in browser We turn messy DOM into clean tailwind code pixel perfectly Paste into Superdesign AI native canvas to vibe design Or paste into Claude code/Cursor Free forever:

Introducing Component Grab SuperDesign.Dev Chrome extension allows you to grab any UI component in browser We turn messy DOM into clean tailwind code pixel perfectly Paste into Superdesign AI native canvas to vibe design Or paste into Claude code/Cursor Free forever:

Jason Zhou

78,413 次观看 • 6 个月前

That gap between design and production? Closed. 🔁 GitHub Copilot, Visual Studio Code, and Figma now create a continuous loop. With the bidirectional Figma MCP server, Copilot users can: 🔹 Pull design context into code 🔹 Push working UI back to the canvas Connect your canvas and stay in the flow. 👇

That gap between design and production? Closed. 🔁 GitHub Copilot, Visual Studio Code, and Figma now create a continuous loop. With the bidirectional Figma MCP server, Copilot users can: 🔹 Pull design context into code 🔹 Push working UI back to the canvas Connect your canvas and stay in the flow. 👇

GitHub

113,001 次观看 • 3 个月前

damn its so easy to go from design -> code with Figma MCP + Claude Code. literally just one click of a button, and the code is ready! still a lot of polishing to do, but this has helped us make development ~50% faster 😁

damn its so easy to go from design -> code with Figma MCP + Claude Code. literally just one click of a button, and the code is ready! still a lot of polishing to do, but this has helped us make development ~50% faster 😁

Marcel

52,126 次观看 • 4 个月前

Claude Code can now connect to remote MCP servers. Pull context from your tools directly into Claude Code with no local setup required.

Claude Code can now connect to remote MCP servers. Pull context from your tools directly into Claude Code with no local setup required.

Anthropic

540,136 次观看 • 11 个月前

Design → code → canvas → feedback → repeat. The Figma MCP server is now bidirectional. GitHub Copilot users can pull design context into code and push working UI back to the Figma canvas, all from Visual Studio Code . No handoffs or context switching. Just flow.

Design → code → canvas → feedback → repeat. The Figma MCP server is now bidirectional. GitHub Copilot users can pull design context into code and push working UI back to the Figma canvas, all from Visual Studio Code . No handoffs or context switching. Just flow.

Mario Rodriguez

105,567 次观看 • 3 个月前

Claude Code is terrible at UI design and everyone knows it so this guy fixed it by building an MCP that gives Claude its own AI design tool instead of going back and forth between a design platform and your code editor, Claude now creates the designs itself and drops them straight into your codebase the MCP has full context of your existing design system and project so everything it generates actually matches what you already have. one command to set up and it installs the MCP and skill files so Claude instantly knows how to use it if you're tired of the same Inter font, purple gradient, card grid layout on every project, this is definitely worth trying

Claude Code is terrible at UI design and everyone knows it so this guy fixed it by building an MCP that gives Claude its own AI design tool instead of going back and forth between a design platform and your code editor, Claude now creates the designs itself and drops them straight into your codebase the MCP has full context of your existing design system and project so everything it generates actually matches what you already have. one command to set up and it installs the MCP and skill files so Claude instantly knows how to use it if you're tired of the same Inter font, purple gradient, card grid layout on every project, this is definitely worth trying

Om Patel

396,051 次观看 • 2 个月前

The Dev Mode MCP Server is now available in beta. Access Dev Mode data directly in your agentic coding workflow → VS Code with Copilot → Cursor → Windsurf → Claude Code

The Dev Mode MCP Server is now available in beta. Access Dev Mode data directly in your agentic coding workflow → VS Code with Copilot → Cursor → Windsurf → Claude Code

Figma

252,707 次观看 • 1 年前

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

Claude Code can now design stunning interfaces 🤯 There’s a free GitHub skill called UI UX Pro Max that upgrades Claude Code into a full UI and UX expert. Install it once and Claude suddenly builds cleaner layouts, better apps, and interfaces that actually look professional. Your AI can now code and design like a pro. 🚀

Claude Code can now design stunning interfaces 🤯 There’s a free GitHub skill called UI UX Pro Max that upgrades Claude Code into a full UI and UX expert. Install it once and Claude suddenly builds cleaner layouts, better apps, and interfaces that actually look professional. Your AI can now code and design like a pro. 🚀

Julian Goldie SEO

76,422 次观看 • 2 个月前

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

we’ve been using figma MCP + claude code for design → code it’s not perfect and still needs a fair bit of polishing but it’s sped up our dev process by ~50% 😁

we’ve been using figma MCP + claude code for design → code it’s not perfect and still needs a fair bit of polishing but it’s sped up our dev process by ~50% 😁

Marcel

52,837 次观看 • 2 个月前

You can now push what you’re building in Claude Code directly into Figma. With the latest updates to the Figma MCP server, build a working prototype in code, then send it to a Figma canvas to explore multiple versions.

You can now push what you’re building in Claude Code directly into Figma. With the latest updates to the Figma MCP server, build a working prototype in code, then send it to a Figma canvas to explore multiple versions.

Claude

4,306,007 次观看 • 3 个月前

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

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