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

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

На главную

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

49,517 subscribers

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

54,670 просмотров • 7 месяцев назад

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

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

For years, the design industry has talked about "design vs code" And tools (including Figma!) have forced a choice. But this is a false debate. Code isn't the opposite of design. Code is a material for design. So we're bringing code to the Figma canvas with Code Layers.
0:20

For years, the design industry has talked about "design vs code" And tools (including Figma!) have forced a choice. But this is a false debate. Code isn't the opposite of design. Code is a material for design. So we're bringing code to the Figma canvas with Code Layers.

Dylan Field

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

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

learn how to COMBINE Claude Code and the fal MCP to design your own custom "AI Filmmaking Pipeline!" our latest YouTube video covers: - how to set up Claude Code and the fal MCP - how to create Claude Artifacts for creative review - how to create Claude Skills for consistent creative prompts watch the full tutorial here:
0:29

learn how to COMBINE Claude Code and the fal MCP to design your own custom "AI Filmmaking Pipeline!" our latest YouTube video covers: - how to set up Claude Code and the fal MCP - how to create Claude Artifacts for creative review - how to create Claude Skills for consistent creative prompts watch the full tutorial here:

fal

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

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

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

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

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

We've been ramping up usage of AI tools on our design team at Coinbase 🛡️ Two examples: 1. Write a text prompt and get a figma mockup as a starting point for your design 2. Click a button and turn any figma design into front-end code The front-end code it generates adheres to our design system, and is trained on our library of UIs Shout out to 🛡️ tali krakowsky apel🛡️ Blair McKee and the team pushing this forward.
1:52

We've been ramping up usage of AI tools on our design team at Coinbase 🛡️ Two examples: 1. Write a text prompt and get a figma mockup as a starting point for your design 2. Click a button and turn any figma design into front-end code The front-end code it generates adheres to our design system, and is trained on our library of UIs Shout out to 🛡️ tali krakowsky apel🛡️ Blair McKee and the team pushing this forward.

Brian Armstrong

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

It’s taken a bit of work but it’s up and running. Needs some fine tuning.
0:22

It’s taken a bit of work but it’s up and running. Needs some fine tuning.

Boyd Carter

11,552 просмотров • 3 лет назад

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.
30:38

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

Introducing Website to App. Turn any website into an native mobile app. Just paste a URL. Claude Opus 4.6 will code, design, launch and translate a mobile app inspired by the original website. We’ve been using this internally a ton for iOS/Android apps.
0:27

Introducing Website to App. Turn any website into an native mobile app. Just paste a URL. Claude Opus 4.6 will code, design, launch and translate a mobile app inspired by the original website. We’ve been using this internally a ton for iOS/Android apps.

David Ch

2,538,978 просмотров • 5 месяцев назад

Spent the day testing Claude Opus 4.7. Last month I built a design director agent for OpenClaw and now it cooks. 15 minutes in, Paper Design MCP + Claude Code had made me a rough draft. In under an hour, a Framer worthy site. My workflow: 1. Feed my agent references so it can extract design systems and lock in on my taste 2. Claude Code calls Paper Design MCP to generate the visual system (just keep the Paper app open) 3. Paper exports the assets and Claude Code then preps the build docs 4. Agent loops back, critiques, iterates Got no clue why anyone is paying $10K for a website anymore. It’s easy now.
4:19

Spent the day testing Claude Opus 4.7. Last month I built a design director agent for OpenClaw and now it cooks. 15 minutes in, Paper Design MCP + Claude Code had made me a rough draft. In under an hour, a Framer worthy site. My workflow: 1. Feed my agent references so it can extract design systems and lock in on my taste 2. Claude Code calls Paper Design MCP to generate the visual system (just keep the Paper app open) 3. Paper exports the assets and Claude Code then preps the build docs 4. Agent loops back, critiques, iterates Got no clue why anyone is paying $10K for a website anymore. It’s easy now.

klöss

14,585 просмотров • 5 месяцев назад

Claude Code + Opus 4 is the best agentic coding tool in the world and it’s not close. It’s a: - masterful full-stack dev - with great product sense - that’s a delight to work with - and easy to use If you’re not using it you are behind. Watch for a 72min build session & tips.
1:12:13

Claude Code + Opus 4 is the best agentic coding tool in the world and it’s not close. It’s a: - masterful full-stack dev - with great product sense - that’s a delight to work with - and easy to use If you’re not using it you are behind. Watch for a 72min build session & tips.

Mckay Wrigley

319,979 просмотров • 1 год назад

Somebody hooked up Claude Code to pair program with o3 and Gemini 2.5 via MCP for an all-star coding lineup 🤯 - Claude controls the work - Can call out to Gemini and o3 for tasks and input - Works around MCP limit by using prompt files Check out Zen MCP (link below)
0:28

Somebody hooked up Claude Code to pair program with o3 and Gemini 2.5 via MCP for an all-star coding lineup 🤯 - Claude controls the work - Can call out to Gemini and o3 for tasks and input - Works around MCP limit by using prompt files Check out Zen MCP (link below)

Ian Nuttall

216,612 просмотров • 1 год назад

🚨 Your Claude Code credits are burning!! Because Claude Code is not built for AI/ML tasks. SO I found a way to save 75% of my AI credits by offloading complex AI/ML tasks to cost-effective agents. Here's a step-by-step tutorial. 👇 This MCP literally upgrades your Claude Code
0:50

🚨 Your Claude Code credits are burning!! Because Claude Code is not built for AI/ML tasks. SO I found a way to save 75% of my AI credits by offloading complex AI/ML tasks to cost-effective agents. Here's a step-by-step tutorial. 👇 This MCP literally upgrades your Claude Code

Bishal Nandi

56,030 просмотров • 17 дней назад

Streamlined the installation process of my IDA Pro MCP server. You can now start experimenting with vibe reversing in less than 2 minutes!🤯 This was using Claude for testing, but Cline and Roo Code are also configured automatically!
1:28

Streamlined the installation process of my IDA Pro MCP server. You can now start experimenting with vibe reversing in less than 2 minutes!🤯 This was using Claude for testing, but Cline and Roo Code are also configured automatically!

Duncan Ogilvie 🍍

32,379 просмотров • 1 год назад

After testing every AI toolchain for a year, this is the only workflow I'm endorsing: Figma → Claude Code (Sonnet 4.5) Here's how I'm building Lorelight: 1. Design the happy path in Figma 2. Feed it to Claude Code via Figma MCP 3. Get a strong foundation in 15 minutes 4. Spend the next 50+ hours iterating (still design work) The design/dev loop that used to be isolated is finally closing. I even built a complete design system in within minutes. Custom components, living documentation, accessibility rules all from the Figma designs. If you're measuring the effectiveness of these tools by whether they can "one-shot" a design, you're consuming too many AI hype commercials. Log off. Then go actually build something with your hands. With AI. With your taste. Stop trying to "one-shot" good shit. And go make stuff with the new tools. For designers who want to ship real products, this is the stack that's getting it done.
2:00

After testing every AI toolchain for a year, this is the only workflow I'm endorsing: Figma → Claude Code (Sonnet 4.5) Here's how I'm building Lorelight: 1. Design the happy path in Figma 2. Feed it to Claude Code via Figma MCP 3. Get a strong foundation in 15 minutes 4. Spend the next 50+ hours iterating (still design work) The design/dev loop that used to be isolated is finally closing. I even built a complete design system in within minutes. Custom components, living documentation, accessibility rules all from the Figma designs. If you're measuring the effectiveness of these tools by whether they can "one-shot" a design, you're consuming too many AI hype commercials. Log off. Then go actually build something with your hands. With AI. With your taste. Stop trying to "one-shot" good shit. And go make stuff with the new tools. For designers who want to ship real products, this is the stack that's getting it done.

Tommy Geoco

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

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.
4:11

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