Figma MCP × AI x Vibe Coding A Responsive Web Portfolio Completed in Just 4 Hours

Figma Design + AI-Assisted Coding + Deployment Full-Stack Course!! [Figma + Vibe Coding (HTML/CSS/Tailwind/React) + Git + vercel Deployment] Your design, exactly as envisioned!! Complete it through vibe coding with zero deviation—not even 1 pixel! A full-stack guide to increasing your real-world productivity fivefold with AI! You can become a full-stack designer capable of both design and coding. ✅ Implement the intent behind your design with zero deviation—not even 1 pixel ✅ Design structures that AI can understand ✅ The ability to create prompts that precisely control AI ✅ The ability to effortlessly modify code written by AI as it pleases Experience the incredible transformation of shortening the process from design to coding and deployment to one-fifth of the time.

(4.8) 26 reviews

324 learners

Level Basic

Course period Unlimited

HTML/CSS
HTML/CSS
Figma
Figma
Portfolio
Portfolio
AI
AI
Vibe Coding
Vibe Coding
HTML/CSS
HTML/CSS
Figma
Figma
Portfolio
Portfolio
AI
AI
Vibe Coding
Vibe Coding

Reviews from Early Learners

4.8

5.0

blake choi

100% enrolled

To be honest, every time a new AI is released lately, I’ve had this vague anxiety that my job might eventually disappear. I hated feeling so small in front of code, so I signed up for Teacher J-young's class. Usually, when you look up MCP, most resources just stop at explaining the tool's features. But this course felt like it was dealing with real-world practice, which I loved. The process of utilizing design tokens and passing them off in a way that Cursor could understand was fun in itself. Seeing my work being implemented on the web through back-and-forth interaction with the AI taught me exactly what "Vibe Coding" is all about. I was especially touched by the materials meticulously organized in Notion; even when I missed something in the video, I could resolve it by following along with the Notion docs. I will definitely take your next course when it opens. Thank you so much, Teacher!!

5.0

자니?

89% enrolled

I really enjoyed the lecture. I think it's the best course from Vibe Coding. Connecting MCP and watching Cursor generate 90% of the code exactly as intended was a whole new world. Coding always felt daunting, but learning how to make edits using the developer tools was truly impressive. While making manual adjustments one by one was a bit tedious, after finishing the course, my confidence in modifying any structure has skyrocketed. Thank you for the great lecture. I think my practical work speed will double~ Thank you for always providing great lectures~

5.0

hylimhy65

100% enrolled

As someone who can handle Figma and coding to some extent, this lecture was a huge help in leveling up my skills. It felt like it perfectly addressed and cleared up all the confusing and difficult parts I encountered while creating layouts. Above all, it was truly fascinating to see the design being implemented exactly as it was by connecting MPC. I have a feeling my work speed will become two or three times faster. Also, it was very impressive to see how easily I could modify AI-generated results using developer tools. Through this lecture, I’ve gained the confidence that I can complete responsive web pages really quickly. I am truly grateful to the instructor for creating such a great course.

What you will gain after the course

  • Exactly as I designed it! Implemented using AI with pixel-perfect precision.

  • Figma Auto Layout: Complete Understanding and Implementation

  • Understanding and Implementing Responsive Web Design in Figma

  • Learn how to register and apply Figma Variables

  • Perfect understanding and implementation of HTML/CSS layout structures and responsive web design

  • Master how to use developer tools perfectly

  • Strategic Vibe Coding Prompts for Perfect Control Using AI

  • Learn how to modify the results of AI-generated coding as needed.

  • Understanding and Implementing GSAP ScrollTrigger Development Methods

  • Easily implement responsive web development using TailwindCSS

  • Understanding Concepts and Basic Structure Through React Refactoring

  • Experience with the entire web portfolio creation process, from design → vibe coding → Git version control → Vercel deployment

Figma MCP × AI x Vibe Coding
True to my design! A full-stack portfolio built with pixel-perfect accuracy


📢 Course Introduction

Learn from an instructor with 25 years of industry and teaching experience!

A full-stack designer who uses AI to increase productivity fivefold, from design to coding



🎯 Have you ever had these concerns?

☑ Can you design, but lose confidence whenever you think about coding?

☑ Have you been disappointed by the results AI created arbitrarily after you entered just a few lines of prompts?

☑ Do you want to use AI to implement your designs without a single pixel of deviation?

☑ Do you want to properly understand the entire process, from design → frontend development → deployment?

☑ Do you dream of becoming a solo creator (solopreneur) who encompasses both design and development?

☑ Do you want to create trendy websites yourself using AI?


💡 Then this course is the answer.

From design planning
development using AI,
and even actual deployment

👌 We’ve packed all the essential know-how you can apply right away in the workplace into this course.

1️⃣ Core Processes Covered in This Course


💎 Figma-Based Strategic Design

Design a structure that AI can understand accurately.

  • Auto Layout
    Design a responsive box structure that adapts flexibly to any resolution

  • Systematize Variables
    Organize colors, spacing, and values systematically so AI can immediately translate design intent into code.

  • Layer Naming Strategy
    Efficient naming conventions that help AI quickly understand the code structure

  • Extracting Tokens.json
    Token-based design that connects the design system to code


💎 Vibe Coding

You will learn AI-leading techniques to translate your designs exactly into code—100% true to the original.

  • Cursor, Antigravity, Claude, Codex AI & MCP Server Integration

  • Prompt Engineering Strategies

  • Pixel-perfect implementation methods

  • Interactive UI Implementation Techniques

👌Learn how to use AI not as a simple automation tool, but as a development partner you work alongside.


💎The complete design → development → deployment workflow

  • Portfolio design in Figma

  • AI-assisted HTML/CSS implementation

  • Responsive refactoring with Tailwind

  • Building an Interactive Web Experience with React

  • Git & GitHub Version Control

  • Real-world service deployment through Vercel

👌Experience the entire process as a practical workflow.


2️⃣ Core Skills You Can Gain from This Course


🚀 Design skills that AI can understand

  • Structured Layer Design Skills

  • System-Based Design Thinking

  • AI-Friendly Design Skills


🚀 Development skills to control AI

  • Ability to analyze and modify AI-generated code

  • Prompt design skills

  • Precision implementation skills that preserve design intent


🚀 Practical publishing skills

  • Understanding of HTML / CSS structure

  • Ability to implement responsive designs using Tailwind

  • Ability to understand and apply React structures


🚀 Real-world experience taking projects through deployment

  • Version control using Git

  • GitHub repository management

  • Real-world experience deploying live services through Vercel

  • Complete a portfolio that anyone around the world can access

🎯Recommended for the following people:

their designs exactly as they are
with Vibe Coding
designers who want to implement
Those who can design but
gave up creating websites because coding was difficult

Want to increase your work productivity fivefold with AI

With AI as your assistant,
from design to development and deployment,
you want to quickly
create and build websites

Those who can do everything from design to deployment
and want to become a full-stack expert
those who want to become
Those who want to create high-quality interactive portfolios with overwhelming productivity
and succeed in finding a job or changing jobs

🎁After completing the course,

 ☑ An 'unmatched competitive edge' spanning both design and development
       You will grow from a "person who only knows design" into a "professional capable of both design and coding".
       You will become the most coveted, top-priority talent in the job and career-change market.

☑ Master an 'AI workflow' that makes you work 5 times faster
     Use AI like an assistant to implement complex features in a short time, allowing you to
     focus on more valuable work such as planning and design.

☑ Own a high-quality ‘full-stack portfolio’
Not only will you have a living portfolio completed from Figma design through React development and actual web deployment, but you will also learn
how to apply the production methods.

☑ Turning the entire production process carried out in collaboration with AI into an asset
This is not just a single finished product. You will be able to capture the
entire workflow as a powerful portfolio story, from the initial idea through Figma design and AI-assisted coding to deployment.

📚 You’ll learn the following.

  • [Figma] Registering and Applying Variables

  • Connecting Cursor AI to the Figma MCP Server

  • [Vibe Coding ] Desktop mode design
    - Complete an HTML/CSS static page
    - Implement animations using ScrollTrigger
    - Connect the gnbMenu component


  • [Vibe Coding] Tablet Mode Design

  • [Notion Notes] Prompts AI Can Understand

  • Git version control and deployment to GitHub & Vercel

  • Creating a Mobile Web Experience with Claude + Anitigravity MCP Using Vibe Coding

  • Build a mobile website with Claude + Codex MCP using Vibe Coding


👤The person who created this course

  • 25-year instructor in industry and education


  • As UI/UX designers, product designers, and coding designers, over 500 people have found employment!

  • 92% employment rate in 2025, 95% employment rate as of 2026

  • Over 10,000 online and offline students!

  • Operates the YouTube channel “Coding Designer Jalnanwebdi”

  • Current) UI/UX Planning, Design & Front-End Bootcamp Instructor (Ezen DX Academy - Gangnam Branch)

  • Currently) UI/UX planning + design & + coding => Portfolio creation group lessons

⚠️Notes Before Enrolling in the Course

Learning materials

  • This course uses Figma, Cursor, and Antigravity.

  • The course content and source files are provided on Notion.

Prerequisites and Important Notes

  • Figma Basics:
    This course does not cover the basics of using Figma tools. If you are new to Figma, please check out
    [Coding Designer Jalnan Webdi] on YouTube for [Figma & UIUX Design | Super-Fast Completion Course

    If you take the Figma basics course on
    and then take this course, I believe it will be very helpful for your learning.


  • HTML/CSS Basics :
    This course does not cover basic HTML/CSS syntax in detail. If you are new to coding or lack the fundamentals, please watch my free course, HTML/CSS Fundamentals: Super-Speed Complete Course, first. Once you have learned the basic concepts, you will be able to pick up practical coding using AI much more easily and quickly

Recommended for
these people

Who is this course right for?

  • Those who can design but have hit a wall with coding and are stuck on their portfolio

  • For those who have felt frustrated by results that weren’t what they wanted despite using AI

  • Those who want to achieve results 100% according to their intentions through AI prompts

  • Those aspiring to become full-stack experts who can handle everything from design to deployment on their own.

  • Become a developer with both design and coding skills—and a full-stack designer.

  • Those who want to increase their work productivity fivefold through AI

  • Those who urgently need a high-quality interactive portfolio for finding a job or changing jobs

Need to know before starting?

  • Free lessons that even complete beginners to Figma can take on.

  • Free lessons that even complete beginners in HTML/CSS can take on.

Hello
This is jyoung

Career Verified

10,815

Learners

469

Reviews

247

Answers

4.8

Rating

15

Courses

Hello.

I am J.Young, a UI/UX Full-Stack Design Director utilizing AI.

I have over 20 years of practical experience in web and app service planning, design, and development,
and I am currently working as an instructor for UI/UX web planning, design, and front-end bootcamps.

Based on my practical experience, I have helped over 500 students find employment in the design and IT fields, and I am currently focusing on teaching practical skills and new portfolio creation methods suited for the AI era.



My teaching philosophy is!

Building capabilities that can be immediately applied in the field

Instead of simply learning how to use tools, I help you build capabilities that can be applied immediately in the field by experiencing the same process as actual work, from planning to design, development, and deployment.

Focusing on core competencies required in the field

We focus on learning AI utilization skills, problem-solving abilities, and collaboration skills required in the rapidly changing job market.

Creating a portfolio that leads to employment

We focus on creating projects and portfolios that can capture the interest of interviewers.


In the AI era, design alone is not enough.

Now, you need the
capabilities of a Fullstack Creator who can plan, design, implement, and deploy.
You will gain basic proficiency in design tools and create actual services using Claude, Codex, and Figma,
experiencing how to produce results alongside AI.

- If you are feeling lost on where to start,
- If you want to increase the competitiveness of your portfolio,
- If you want to grow faster by utilizing AI, I will be your reliable guide.

I will be with you until the moment your results are complete.

Professional Experience

  • 2017~Present | Digital Product Director & UX Consultant

  • 2015~2017 | Executive Director, EliEsel Inc.

  • 2003~2015 | Executive Director, Amusingware Inc.

  • 2003 | Head of Design, Seowoo C&D


Lecturing Experience

  • Employment Portfolio Creation and Project Mentoring

  • Corporate lectures and practical competency enhancement training

  • Practical lectures for universities, corporations, and educational institutions

  • Design · Development Portfolio Consulting and Group Mentoring

  • Team coaching and portfolio guidance based on practical projects

  • Practical training for corporate employees and job seekers

  • AI-based UI/UX · Frontend Practical Education and Consulting



    - Current) Full-time Instructor for UIUX Planning · Design · Frontend Bootcamp (EZEN DX Academy - Gangnam Branch)
    - Specialized Lectures on Design/Development Portfolios and Team Group Lectures


    * YouTube Channel in Operation (Coding Designer)

For smoother learning, if you join the Jalnan Web-D open chat room operated by J.young,
I will provide answers to lecture questions and feedback on your portfolio.

- Open Chat Room Name: Jalnan Web-D
- Code: jyoung

 

More

Curriculum

All

77 lectures ∙ (9hr 14min)

Published: 
Last updated: 

Reviews

All

26 reviews

4.8

26 reviews

  • wjsduwls01011742님의 프로필 이미지
    wjsduwls01011742

    Reviews 9

    Average Rating 5.0

    5

    89% enrolled

    I really enjoyed the lecture. I think it's the best course from Vibe Coding. Connecting MCP and watching Cursor generate 90% of the code exactly as intended was a whole new world. Coding always felt daunting, but learning how to make edits using the developer tools was truly impressive. While making manual adjustments one by one was a bit tedious, after finishing the course, my confidence in modifying any structure has skyrocketed. Thank you for the great lecture. I think my practical work speed will double~ Thank you for always providing great lectures~

    • jyoung
      Instructor

      Thank you so much for your heartfelt review, janey23. I am truly glad to hear that your refactoring skills have improved through this course. Thank you once again ^^ J. Young Dream

  • hylimhy658998님의 프로필 이미지
    hylimhy658998

    Reviews 2

    Average Rating 5.0

    5

    100% enrolled

    As someone who can handle Figma and coding to some extent, this lecture was a huge help in leveling up my skills. It felt like it perfectly addressed and cleared up all the confusing and difficult parts I encountered while creating layouts. Above all, it was truly fascinating to see the design being implemented exactly as it was by connecting MPC. I have a feeling my work speed will become two or three times faster. Also, it was very impressive to see how easily I could modify AI-generated results using developer tools. Through this lecture, I’ve gained the confidence that I can complete responsive web pages really quickly. I am truly grateful to the instructor for creating such a great course.

    • jyoung
      Instructor

      hylimhy65, You've already completed the course. I'm so grateful to hear that it felt like it scratched that itch regarding the difficult parts. Vibe coding by connecting MCP is truly a remarkable advancement in AI. I hope this helps you significantly increase your work productivity. I will look forward to seeing you again with even better lectures. Thank you. Best regards, J.young

  • blake8807226801님의 프로필 이미지
    blake8807226801

    Reviews 1

    Average Rating 5.0

    5

    100% enrolled

    To be honest, every time a new AI is released lately, I’ve had this vague anxiety that my job might eventually disappear. I hated feeling so small in front of code, so I signed up for Teacher J-young's class. Usually, when you look up MCP, most resources just stop at explaining the tool's features. But this course felt like it was dealing with real-world practice, which I loved. The process of utilizing design tokens and passing them off in a way that Cursor could understand was fun in itself. Seeing my work being implemented on the web through back-and-forth interaction with the AI taught me exactly what "Vibe Coding" is all about. I was especially touched by the materials meticulously organized in Notion; even when I missed something in the video, I could resolve it by following along with the Notion docs. I will definitely take your next course when it opens. Thank you so much, Teacher!!

    • jyoung
      Instructor

      Thank you, Blake Choi, for the touching course review. I am even more grateful that you felt it was like dealing with real-world practice. I will work even harder to bring you better lectures in the future. Best regards, J.young

  • quscogus4235님의 프로필 이미지
    quscogus4235

    Reviews 8

    Average Rating 5.0

    5

    33% enrolled

    I've taken a few MCP courses, and this one definitely felt different from the others. It wasn't just a simple explanation of features; it systematically showed how to connect Figma MCP and AI within an actual workflow, even demonstrating the refactoring process, which I found very satisfying. Personally, I felt this was the best among all the MCP classes I've taken. In particular, the explanation of how to use Figma Variables was very well organized, and the overall flow of boosting work speed through "Vibe Coding" was excellent. There were so many points where I thought, "I can use this right away," making it a course that actually leaves you with practical skills rather than just listening and forgetting. As expected, Instructor J.Young's lectures are always worth trusting. I highly recommend this to anyone preparing their portfolio.

    • jyoung
      Instructor

      Eun-seunim, Thank you so much for your warm course review~~ Since it was Vibe Coding, I had some difficulties during filming, but those feelings just melted away in an instant. Thank you truly, and I'll be rooting for you to study hard so that this helps you create a great portfolio and becomes a big help in your practical work^^ Thank you^^

  • hihihj07017384님의 프로필 이미지
    hihihj07017384

    Reviews 8

    Average Rating 5.0

    5

    100% enrolled

    I’m already an 8th-year product designer. I hated seeing myself feeling anxious about losing my job to AI, so I signed up for this course! I felt that by building my own portfolio, I could get a real sense of how to utilize AI in actual practice. The process of designing variables in Figma, organizing design tokens, and passing them to Cursor via MCP was a total game-changer! I used to think a designer's role ended after the hand-off to development, but now that I can analyze code, remove unnecessary structures, and even oversee the React refactoring process, I’m able to take on a much broader role in the workplace. After taking your course, I realized that AI isn't a scary tool, but a powerful partner when given precise instructions. Thank you!

    • jyoung
      Instructor

      Thank you so much for such an evaluation, especially coming from a product designer with 8 years of experience. You're right... At first, I also feared that I might lose my job if AI took over everything. However, after consistently working with AI, I've realized that the ultimate winner is the one who can master it. I will continue to research and post ways to improve AI utilization skills. Thank you! ^^

jyoung's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!