I’ve created a Web App Using Cursor + Figma MCP in 5 minutes!
4807 次观看 · 2025-09-11
UI 设计
👉 Try it yourself: https://sergeichyrkov.com/blog/resources/carousel-creator
👉 Get Cursor: https://cursor.com/referral?code=MTHGL6DQYDUR
💌 Join my newsletter and learn more: https://sergeichyrkov.com/learn
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
📋 Extra Videos of Interest:
https://youtu.be/PPqt_xLg_5c
https://youtu.be/l68HFQV5RJU
______________________________
Check out my links ⬇️
▸ My website — https://sergeichyrkov.com
▸ My studio — https://chyrkov.studio
▸ My curated resources library — https://designsweets.co
▸ Twitter — https://twitter.com/sergeichyrkov
▸ Instagram — https://instagram.com/chyrkov
▸ Behance — https://www.behance.net/chyrkov
▸ Linkedin — https://linkedin.com/in/sergeichyrkov
______________________________
Useful stuff:
👉 Build websites in minutes with Framer — https://framer.link/chyrkov
👉 Record your screen like a Pro — https://screenstudio.lemonsqueezy.com?aff=GO290
👉 Best music for your videos (get 30 days for free) — https://www.epidemicsound.com/referral/am81qn
______________________________
📝 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/sergeichyrkov
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
👉 Get Cursor: https://cursor.com/referral?code=MTHGL6DQYDUR
💌 Join my newsletter and learn more: https://sergeichyrkov.com/learn
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
📋 Extra Videos of Interest:
https://youtu.be/PPqt_xLg_5c
https://youtu.be/l68HFQV5RJU
______________________________
Check out my links ⬇️
▸ My website — https://sergeichyrkov.com
▸ My studio — https://chyrkov.studio
▸ My curated resources library — https://designsweets.co
▸ Twitter — https://twitter.com/sergeichyrkov
▸ Instagram — https://instagram.com/chyrkov
▸ Behance — https://www.behance.net/chyrkov
▸ Linkedin — https://linkedin.com/in/sergeichyrkov
______________________________
Useful stuff:
👉 Build websites in minutes with Framer — https://framer.link/chyrkov
👉 Record your screen like a Pro — https://screenstudio.lemonsqueezy.com?aff=GO290
👉 Best music for your videos (get 30 days for free) — https://www.epidemicsound.com/referral/am81qn
______________________________
📝 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/sergeichyrkov
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