The AI Design Tool That Figma Doesn't Want You to See
9569 次观看 · 2026-03-24
UI 设计
I gave Figma and Paper the exact same design prompt. Same tokens, same styling, same reference images. The results were very different.
In this video, I grab the Cal.com repo and give both tools the same challenge: redesign a 404 page from a single prompt. I compare them on design quality, code output, and how well they follow the prompt. Then I take the winning design, connect Claude Code through the MCP, and build it directly into the codebase.
Finally, I take it one step further and test pulling a full Storybook component library into both tools to see which one actually gets the structure right.
What You'll Learn:
• How Figma and Paper handle the same design prompt differently
• How to connect Paper to Claude Code through the MCP and build directly into your codebase
• How to pull a Storybook component library into Figma vs Paper
• The real difference between Figma's proprietary format and Paper's HTML/CSS/Tailwind output
Resources:
• Paper: https://paper.design
• Figma Make: https://figma.com
🕐 Timestamps
00:00 - Intro: Figma Make vs Paper, what we're testing today
00:39 - Running the same prompt in both tools (404 page test)
03:28 - Comparing the results
05:07 - Taking the Paper design into the real codebase
09:46 - Component library use case: Storybook to design tool
12:05 - Figma vs Paper component output comparison
13:16 - Final thoughts and why Paper is the missing middle ground
If this is your first time using Claude Code, I'd recommend starting with my setup guide first so you can follow along: https://youtu.be/nbnD2h4IP8I?si=z_bTZa7t2yRASlsJ
Design to Code Workshop for Companies 🚀 Apply using this link → https://relay.designproject.io/paper-vs-figma
Watch more like this:
• Build Your Entire Presentation in Claude Code and Ship it as HTML https://youtu.be/Fd0I3DtLC7E?si=0PTi2dICYxe7bNQh
• Figma Wireframes Are Dead. Here's How Product Teams Are Replacing Them https://youtu.be/uwH8sGi-GLQ?si=4lm5EOep62k6FXN3
• Design-to-Code Workshop with Claude Code, Cursor & Figma (Friends of Figma Miami - Feb 2026) https://youtu.be/SEy1WPjPF3k?si=ITfxEyhgFb-mhvqg
• Stop using V0 and Lovable to prototype, use Claude Code instead: https://youtu.be/hqIU6hluMZA?si=owf3lb95d4xMWrsm
• I Built My Entire Design System in 4 Hours With AI. Full Tutorial (Claude + Cursor + Figma): https://youtu.be/nafNPuElCtY
• Stop Wasting Dev Time on Frontend: Figma to Code in 8 Minutes: https://youtu.be/BOl05zmQjOg
• Figma to Component Library in 2 days | Claude Code + Storybook Tutorial: https://youtu.be/AiEATeNyWnk?si=5T6SQR2CGdZUl0a2
🔔 Subscribe for weekly insights about AI, design, and product here: @thedesignproject
CONNECT WITH ME:
🌐 https://designproject.io/
💼 LinkedIn: /diannealter
About The Design Project: We help B2B SaaS product teams ship faster by combining AI tools with strategic design expertise. We've worked with 50+ teams (including companies acquired by Slack, Nvidia, and MrBeast) to cut product cycles in half using battle-tested AI workflows and design systems.
In this video, I grab the Cal.com repo and give both tools the same challenge: redesign a 404 page from a single prompt. I compare them on design quality, code output, and how well they follow the prompt. Then I take the winning design, connect Claude Code through the MCP, and build it directly into the codebase.
Finally, I take it one step further and test pulling a full Storybook component library into both tools to see which one actually gets the structure right.
What You'll Learn:
• How Figma and Paper handle the same design prompt differently
• How to connect Paper to Claude Code through the MCP and build directly into your codebase
• How to pull a Storybook component library into Figma vs Paper
• The real difference between Figma's proprietary format and Paper's HTML/CSS/Tailwind output
Resources:
• Paper: https://paper.design
• Figma Make: https://figma.com
🕐 Timestamps
00:00 - Intro: Figma Make vs Paper, what we're testing today
00:39 - Running the same prompt in both tools (404 page test)
03:28 - Comparing the results
05:07 - Taking the Paper design into the real codebase
09:46 - Component library use case: Storybook to design tool
12:05 - Figma vs Paper component output comparison
13:16 - Final thoughts and why Paper is the missing middle ground
If this is your first time using Claude Code, I'd recommend starting with my setup guide first so you can follow along: https://youtu.be/nbnD2h4IP8I?si=z_bTZa7t2yRASlsJ
Design to Code Workshop for Companies 🚀 Apply using this link → https://relay.designproject.io/paper-vs-figma
Watch more like this:
• Build Your Entire Presentation in Claude Code and Ship it as HTML https://youtu.be/Fd0I3DtLC7E?si=0PTi2dICYxe7bNQh
• Figma Wireframes Are Dead. Here's How Product Teams Are Replacing Them https://youtu.be/uwH8sGi-GLQ?si=4lm5EOep62k6FXN3
• Design-to-Code Workshop with Claude Code, Cursor & Figma (Friends of Figma Miami - Feb 2026) https://youtu.be/SEy1WPjPF3k?si=ITfxEyhgFb-mhvqg
• Stop using V0 and Lovable to prototype, use Claude Code instead: https://youtu.be/hqIU6hluMZA?si=owf3lb95d4xMWrsm
• I Built My Entire Design System in 4 Hours With AI. Full Tutorial (Claude + Cursor + Figma): https://youtu.be/nafNPuElCtY
• Stop Wasting Dev Time on Frontend: Figma to Code in 8 Minutes: https://youtu.be/BOl05zmQjOg
• Figma to Component Library in 2 days | Claude Code + Storybook Tutorial: https://youtu.be/AiEATeNyWnk?si=5T6SQR2CGdZUl0a2
🔔 Subscribe for weekly insights about AI, design, and product here: @thedesignproject
CONNECT WITH ME:
🌐 https://designproject.io/
💼 LinkedIn: /diannealter
About The Design Project: We help B2B SaaS product teams ship faster by combining AI tools with strategic design expertise. We've worked with 50+ teams (including companies acquired by Slack, Nvidia, and MrBeast) to cut product cycles in half using battle-tested AI workflows and design systems.