In this video, I use AI tools—Figma Context MCP and Cursor—to build a website from a Figma Shopping Website layout. MCP, or Model Context Protocol, helps standardise the process, delivering a strong foundation quickly.
The first result is not perfect, but it saves many hours compared to traditional development. I compare the output with the original Figma design and show a second proof-of-concept.
The code is available in my public GitHub repository. Please take a look and leave your comments below
if you have any feedback. If you find this useful, like and subscribe for more.
claude 3.7
Links:
1st round result without Fine-Tuning
https://shopping-website-v1.vercel.app/
claude 3.7:
https://www.anthropic.com/news/claude-3-7-sonnet
Figma Design:
https://www.figma.com/community/file/1135871952737326157
GitHub Repository:
https://github.com/nullmicgo/shopping-website
Figma Context MCP:
https://github.com/GLips/Figma-Context-MCP
Cursor:
https://www.cursor.com/en/pricing