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

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

На главную

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% 😁

marcelkargul's profile picture

Marcel

48,841 subscribers

52,837 просмотров • 2 месяцев назад •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

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

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

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

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 😁
1:19

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 + Figma MCP Is The Greatest AI Design System I've Ever Used!:
0:33

Claude Code + Figma MCP Is The Greatest AI Design System I've Ever Used!:

WorldofAI

51,959 просмотров • 3 месяцев назад

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

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.
1:42

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 месяцев назад

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

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
0:48

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 месяцев назад

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
1:02

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 месяцев назад

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
0:29

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

For years, everyone in design tooling worked on Figma to Code. The holy grail. But Figma has their own special data format. And LLMs know React well. Watch how our customers use the Magic Patterns MCP to go roundtrip: design <> code. Never been more clear to me this is future.
5:01

For years, everyone in design tooling worked on Figma to Code. The holy grail. But Figma has their own special data format. And LLMs know React well. Watch how our customers use the Magic Patterns MCP to go roundtrip: design <> code. Never been more clear to me this is future.

Alex Danilowicz

32,431 просмотров • 2 месяцев назад

Customize Dev Mode to how you work. Five plugins to try: Design 🤝 Dev → Atlassian Jira Code Generation → Bernardo Ferrari Figma to Code → Anima Design Systems → Tokens Studio → Figma Code Snippet Editor More in the thread.
0:20

Customize Dev Mode to how you work. Five plugins to try: Design 🤝 Dev → Atlassian Jira Code Generation → Bernardo Ferrari Figma to Code → Anima Design Systems → Tokens Studio → Figma Code Snippet Editor More in the thread.

Figma

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

Tired: code or canvas Wired: code AND canvas Introducing Claude Code to Figma
3:19

Tired: code or canvas Wired: code AND canvas Introducing Claude Code to Figma

Figma

3,065,053 просмотров • 3 месяцев назад

Claude Code can now work with 50+ AI models. Zen MCP connects Claude Code with Gemini, OpenAI, Grok, and local models using Ollama for the best analysis on each task. 100% Opensource.
0:39

Claude Code can now work with 50+ AI models. Zen MCP connects Claude Code with Gemini, OpenAI, Grok, and local models using Ollama for the best analysis on each task. 100% Opensource.

Shubham Saboo

39,748 просмотров • 8 месяцев назад

Introducing Deep Graph MCP for Claude Code 🤩 Claude Code by Anthropic is excellent and arguably one of the best tools for working with code today but... It has one major limitation, its native code search capabilities don't scale well to large repositories. By adding Deep Graph MCP, Claude's ability to explore large codebases improves dramatically. In this thread 🧵 I’ll show you how easy it is to connect this MCP to Claude Code.
1:12

Introducing Deep Graph MCP for Claude Code 🤩 Claude Code by Anthropic is excellent and arguably one of the best tools for working with code today but... It has one major limitation, its native code search capabilities don't scale well to large repositories. By adding Deep Graph MCP, Claude's ability to explore large codebases improves dramatically. In this thread 🧵 I’ll show you how easy it is to connect this MCP to Claude Code.

Daniel San

31,352 просмотров • 11 месяцев назад

My workflow now: - Design the first path in Figma - Hook up Claude Code to Figma MCP - Prompt: "Build this with Tailwind + Shadcn" - Then generate design system docs + demo page Side note: So many cool products being built, but I'm irrationally happy about a tabletop RPG scene manager.
0:47

My workflow now: - Design the first path in Figma - Hook up Claude Code to Figma MCP - Prompt: "Build this with Tailwind + Shadcn" - Then generate design system docs + demo page Side note: So many cool products being built, but I'm irrationally happy about a tabletop RPG scene manager.

Tommy Geoco 🇺🇸

59,278 просмотров • 8 месяцев назад

Do more with Dev Mode. This new plugin allows you to write and generate dynamic code snippets for your design system. Code Snippet Editor →
0:30

Do more with Dev Mode. This new plugin allows you to write and generate dynamic code snippets for your design system. Code Snippet Editor →

Figma

141,217 просмотров • 2 лет назад

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.
1:40

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 feels completely different once you install this. Anthropic quietly released an official plugin called claude-code-setup and it basically turns Claude Code from “pretty good” into an actual AI dev environment. It scans your project and recommends: → hooks → skills → MCP servers → subagents → automations Then sets everything up step-by-step for you. Most people are using Claude Code completely vanilla… which is why their experience feels messy. The real power comes from the ecosystem around it. Install: /plugin install claude-code-setup@claude-plugins-official Bookmark this before you forget it.
0:26

Claude Code feels completely different once you install this. Anthropic quietly released an official plugin called claude-code-setup and it basically turns Claude Code from “pretty good” into an actual AI dev environment. It scans your project and recommends: → hooks → skills → MCP servers → subagents → automations Then sets everything up step-by-step for you. Most people are using Claude Code completely vanilla… which is why their experience feels messy. The real power comes from the ecosystem around it. Install: /plugin install claude-code-setup@claude-plugins-official Bookmark this before you forget it.

Radha Tripathi

74,024 просмотров • 20 дней назад

Here's how you can create any MCP server you want, just by using Claude Code.
18:04

Here's how you can create any MCP server you want, just by using Claude Code.

Pietro Schirano

81,132 просмотров • 1 год назад

Dev Mode: → Interactive Inspection (Dev Mode) → Annotations (MCP server) → Local Images (MCP server) → Design system rules (MCP server)
0:28

Dev Mode: → Interactive Inspection (Dev Mode) → Annotations (MCP server) → Local Images (MCP server) → Design system rules (MCP server)

Figma

98,858 просмотров • 10 месяцев назад