Loading video...

Video Failed to Load

Go Home

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.

skirano's profile picture

Pietro Schirano

99,960 subscribers

26,974 views • 4 months ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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

94,745 views • 9 days ago

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,727 views • 3 months ago

Introducing MagicPath 2.0. MagicPath is now a multiplayer canvas for humans and agents like Codex or Claude Code to design and build with AI. Use your codebase, grab data from anywhere, and see the agents work in real time as a team while building fully functional prototypes.
1:29

Introducing MagicPath 2.0. MagicPath is now a multiplayer canvas for humans and agents like Codex or Claude Code to design and build with AI. Use your codebase, grab data from anywhere, and see the agents work in real time as a team while building fully functional prototypes.

Pietro Schirano

285,941 views • 1 month 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
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 views • 3 months ago

The best way to design and build with your repository is Cursor/Codex + MagicPath. Watch me import components from my repo into the MagicPath canvas inside Cursor, then explore completely different variations. All while they stay interactive and faithful to the source code 👇
1:52

The best way to design and build with your repository is Cursor/Codex + MagicPath. Watch me import components from my repo into the MagicPath canvas inside Cursor, then explore completely different variations. All while they stay interactive and faithful to the source code 👇

Pietro Schirano

26,501 views • 10 days ago

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

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,939 views • 4 months ago

MagicPath is now available as an official plugin for Cursor. Give Cursor an infinite canvas where you can view and edit interactive code, build apps that are instantly sharable. Use your local files, skills, etc. And with Composer 2.5 you can design at the speed of thought ⚡️
0:30

MagicPath is now available as an official plugin for Cursor. Give Cursor an infinite canvas where you can view and edit interactive code, build apps that are instantly sharable. Use your local files, skills, etc. And with Composer 2.5 you can design at the speed of thought ⚡️

Pietro Schirano

27,565 views • 23 days ago

Today is the day! Our most requested feature, design → code generation, is live: Go from idea → design → code in under a minute. You can now export generated UI designs to Tailwind CSS with Galileo. The fastest way to bring your ideas to life. 🚀
0:27

Today is the day! Our most requested feature, design → code generation, is live: Go from idea → design → code in under a minute. You can now export generated UI designs to Tailwind CSS with Galileo. The fastest way to bring your ideas to life. 🚀

Stitch by Google

26,103 views • 2 years ago

Attachment issues (resolved) You can attach 30+ file types (docs, data, media, and code) directly in Make, so you can move beyond placeholders and design with real inputs from code to canvas.
0:31

Attachment issues (resolved) You can attach 30+ file types (docs, data, media, and code) directly in Make, so you can move beyond placeholders and design with real inputs from code to canvas.

Figma

34,917 views • 2 months ago

Code → design → code Generate design files from code, collaborate in @Figma, and implement updates all within Codex without breaking your flow.
0:20

Code → design → code Generate design files from code, collaborate in @Figma, and implement updates all within Codex without breaking your flow.

OpenAI Developers

241,331 views • 4 months ago

Today we’re launching Design Canvas for AI agents. AI can build a feature, but every "design tweak" turns into another prompt. We built a drag & drop editor for Claude Code, Cursor, Codex to explore and iterate on your UI, so you get the best design by default. No endless prompting. Ship better designs in code with Subframe.
0:54

Today we’re launching Design Canvas for AI agents. AI can build a feature, but every "design tweak" turns into another prompt. We built a drag & drop editor for Claude Code, Cursor, Codex to explore and iterate on your UI, so you get the best design by default. No endless prompting. Ship better designs in code with Subframe.

Irvin Zhan

299,643 views • 4 months ago

Introducing MagicPath, an infinite canvas to create, refine, and explore with AI. Create beautiful components and functional apps, while providing production ready code. Available today, free, for everyone. The Cursor moment for design is here.
1:44

Introducing MagicPath, an infinite canvas to create, refine, and explore with AI. Create beautiful components and functional apps, while providing production ready code. Available today, free, for everyone. The Cursor moment for design is here.

Pietro Schirano

1,879,925 views • 1 year ago

Now that AI has enabled designers to code, is "design in code" a thing? Can we drop Figma altogether? 👇
5:08

Now that AI has enabled designers to code, is "design in code" a thing? Can we drop Figma altogether? 👇

Gary Simon

28,036 views • 9 months ago

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,348 views • 4 months ago

comparison of o1 vs sonnet for converting a Figma design to code is the extra time and cost worth it?
1:03

comparison of o1 vs sonnet for converting a Figma design to code is the extra time and cost worth it?

Steve (Builder.io)

196,560 views • 1 year ago

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

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,495,841 views • 5 months ago

"The one thing that's going to be truly future proof is judgment. What is the biggest challenge when you have a thousand AI engineers writing code? AI slop. In an era when you can do everything, the question is which of these things matter. On the engineer side, it is evaluating the code. Which of this code is even valuable? You can have AI engineers writing beautiful code that could be wrong, that could have bugs in it, that could be vulnerable. Someone needs to review it. Make sure to have a human review at some point, especially critical code that is in the core of your system. On the product side is judgment around what needs to be built and evaluating. And similarly in design, you have to have judgment around, does it make sense in the broader design system. I think this judgment is the number one thing that humans are going to bring in an era of infinite productivity."
1:12

"The one thing that's going to be truly future proof is judgment. What is the biggest challenge when you have a thousand AI engineers writing code? AI slop. In an era when you can do everything, the question is which of these things matter. On the engineer side, it is evaluating the code. Which of this code is even valuable? You can have AI engineers writing beautiful code that could be wrong, that could have bugs in it, that could be vulnerable. Someone needs to review it. Make sure to have a human review at some point, especially critical code that is in the core of your system. On the product side is judgment around what needs to be built and evaluating. And similarly in design, you have to have judgment around, does it make sense in the broader design system. I think this judgment is the number one thing that humans are going to bring in an era of infinite productivity."

Patrick OShaughnessy

24,818 views • 5 months ago

Introducing Code on Canvas in Pencil.dev AI design tool for Claude and Codex. Design ❤️ Code are officially in a relationship, opening new ways to create on canvas. Ask agent to generate custom design tools inside Pencil on the fly, create interactive components, generative art and more, but still keep the full manual design control. This is just the beginning. Let us know what you think. And let's take it to the next level together. Download the new Pencil update today.
0:57

Introducing Code on Canvas in Pencil.dev AI design tool for Claude and Codex. Design ❤️ Code are officially in a relationship, opening new ways to create on canvas. Ask agent to generate custom design tools inside Pencil on the fly, create interactive components, generative art and more, but still keep the full manual design control. This is just the beginning. Let us know what you think. And let's take it to the next level together. Download the new Pencil update today.

Tom Krcha

78,962 views • 2 months ago

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
4:39

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,470 views • 4 months ago

Claude Code now designs my mobile apps. Just added one skill and now I vibe design and code from the terminal. Here's the exact workflow I use:
5:47

Claude Code now designs my mobile apps. Just added one skill and now I vibe design and code from the terminal. Here's the exact workflow I use:

Mattia

42,908 views • 3 months ago