Turn Your Figma Design into an Award Winning Website using Claude
5783 次观看 · 2026-11-13
UI 设计
Figma File: https://ayzz.kit.com/figmamotionfile
Turn your Figma design into a fully animated website with Claude Code: Figma MCP, one simple prompt, and a motion reference video you make yourself, so the animations look designed instead of vibe coded.
Most people build websites with AI in one of two ways: a quick prompt that comes back looking vibe coded, or a template library that gives you the same website as everyone else. Neither works for a real brand. In this video I show the workflow we use in our agency instead: design the site in Figma, connect Figma to Claude through the Figma MCP, give it a simple prompt plus a motion reference video you made yourself, fix what Claude gets wrong section by section, make it mobile responsive, and get it ready to go live. Claude does the development, and the creative decisions stay in your hands. This is how a designer becomes a design engineer.
Looking for a design partner? Work with my design studio:
https://zzstudio.design/
CHAPTERS
00:00 Why most AI websites look vibe coded
02:24 Connect Figma to Claude (Figma MCP)
04:15 Write a simple prompt
05:58 Give Claude a motion reference video
08:43 Opus 5.5 on Extra effort & start building
11:03 First result from one prompt
17:04 Copy an animation from another website
19:29 Result after the fixes
20:31 Making it mobile responsive
23:40 Final website (desktop + mobile)
24:45 Going live with GitHub & Vercel
WATCH NEXT
How I made the motion reference (Figma Motion tutorial): https://www.youtube.com/watch?v=E_6Z7EUSFu4
Prompting every animation without a reference: https://www.youtube.com/watch?v=kau9QOV1G8E
The inspiration resources I use: https://www.youtube.com/watch?v=wTROHTxRqFY
TOOLS USED
Figma · Figma Motion · Figma MCP · Claude Code (Opus 5.5, effort: Extra) · GSAP · Lenis · Chrome DevTools · GitHub + Vercel
-------------------
Find me here:
Instagram: @ayzz.thedesigner
YouTube: @AyzZ.TheDesigner
TikTok: @ayzzthedesigner
-------------------
#ClaudeCode #Figma #WebDesign
Turn your Figma design into a fully animated website with Claude Code: Figma MCP, one simple prompt, and a motion reference video you make yourself, so the animations look designed instead of vibe coded.
Most people build websites with AI in one of two ways: a quick prompt that comes back looking vibe coded, or a template library that gives you the same website as everyone else. Neither works for a real brand. In this video I show the workflow we use in our agency instead: design the site in Figma, connect Figma to Claude through the Figma MCP, give it a simple prompt plus a motion reference video you made yourself, fix what Claude gets wrong section by section, make it mobile responsive, and get it ready to go live. Claude does the development, and the creative decisions stay in your hands. This is how a designer becomes a design engineer.
Looking for a design partner? Work with my design studio:
https://zzstudio.design/
CHAPTERS
00:00 Why most AI websites look vibe coded
02:24 Connect Figma to Claude (Figma MCP)
04:15 Write a simple prompt
05:58 Give Claude a motion reference video
08:43 Opus 5.5 on Extra effort & start building
11:03 First result from one prompt
17:04 Copy an animation from another website
19:29 Result after the fixes
20:31 Making it mobile responsive
23:40 Final website (desktop + mobile)
24:45 Going live with GitHub & Vercel
WATCH NEXT
How I made the motion reference (Figma Motion tutorial): https://www.youtube.com/watch?v=E_6Z7EUSFu4
Prompting every animation without a reference: https://www.youtube.com/watch?v=kau9QOV1G8E
The inspiration resources I use: https://www.youtube.com/watch?v=wTROHTxRqFY
TOOLS USED
Figma · Figma Motion · Figma MCP · Claude Code (Opus 5.5, effort: Extra) · GSAP · Lenis · Chrome DevTools · GitHub + Vercel
-------------------
Find me here:
Instagram: @ayzz.thedesigner
YouTube: @AyzZ.TheDesigner
TikTok: @ayzzthedesigner
-------------------
#ClaudeCode #Figma #WebDesign