I’ve created a Web App Using Cursor + Figma MCP in 5 minutes!

In this video, I’ll show you step by step how to build an Instagram Slide Carousel Creator web app — from design to code.

We’ll start by setting up the design system in Figma, then move into Cursor (AI-powered coding editor) to bring it to life. By the end, you’ll have a fully working web app that:
Lets users paste text and split it into multiple carousel slides
Uploads custom background images for each slide
Adds a bottom-left text overlay with a fade-out gradient for readability
Exports ready-to-post Instagram carousel PNGs

📌 This tutorial is perfect if you’re:
Learning how to connect design → development
Exploring Cursor AI for faster coding
Interested in building small but useful web tools
A designer/developer who wants to ship ideas quickly

🛠️ Tools used in this video:
Figma → for design system and layout planning
Cursor → to generate, edit, and refine the web app code
HTML, CSS, JavaScript → to build the final product

🔔 If you enjoy this tutorial, make sure to like, subscribe, and drop a comment about what project I should build next with Cursor + Figma!

👉👉👉 Try it yourself: https://sergeichyrkov.com/carousel-cr...

💌 Sign up for my newsletter and courses: https://sergeichyrkov.com/learn

📋 Extra Videos of Interest:
   • Figma MCP + Cursor — Full Tutorial  
   • Ultimate Guide to MagicPath — The New AI D...  

______________________________
Check out my links ⬇️
▸ My website — https://sergeichyrkov.com
▸ My studio — https://chyrkov.studio
▸ My curated resources library — https://designsweets.co
▸ Twitter —   / sergeichyrkov  
▸ Instagram —   / chyrkov  
▸ Behance — https://www.behance.net/chyrkov
▸ Linkedin —   / sergeichyrkov  
______________________________
🎶 Best music for your videos (get 30 days for free) — https://www.epidemicsound.com/referra...
______________________________
📝 Chapters:
0:00 — introduction
0:34 — task description
2:53 — use design system from Figma via Figma MCP
3:58 — run prompt
6:45 — first results
11:56 — apply fixes
12:16 — final result
14:20 — conclusion
______________________________
😍 Monetarily Supporting The Channel:
If you like what I do and wish to support the channel monetarily, you can donate me with some coffee here: https://www.buymeacoffee.com/sergeich...
This is appreciated and helps the channel, but please don't feel that it is necessary to enjoy my content.
______________________________
📃 Disclaimer:
Some of the links in my video descriptions are affiliate links, which means at no extra cost to you, I will make a small commission if you click them and make a qualifying purchase.

______________________________
#figma #cursor #mcp #ai #designwithai #figmatocode