inflearn logo

Figma MCP × AI x Vibe Coding: Hoàn thành trang web portfolio phản hồi chỉ trong 4 giờ

Khóa học Full-stack từ Thiết kế Figma + Lập trình ứng dụng AI + đến Triển khai!! [Figma + Vibe Coding (HTML/CSS/Tailwind/React) + Git + Triển khai Vercel] Giữ nguyên thiết kế của bạn!! Hoàn thiện bằng Vibe Coding chính xác đến từng pixel không sai lệch! Cẩm nang chinh phục Full-stack giúp tăng năng suất thực tế gấp 5 lần nhờ ứng dụng AI! Bạn cũng có thể trở thành một Nhà thiết kế Full-stack có khả năng làm cả thiết kế lẫn lập trình. ✅ Hiện thực hóa ý đồ thiết kế chính xác đến từng pixel không sai lệch ✅ Thiết kế cấu trúc mà AI có thể hiểu được ✅ Khả năng tạo prompt để kiểm soát AI một cách chính xác ✅ Khả năng chỉnh sửa thành thạo các đoạn mã do AI tự soạn thảo Trải nghiệm sự kinh ngạc khi rút ngắn thời gian từ thiết kế đến lập trình và triển khai chỉ còn 1/5.

(4.9) 19 đánh giá

216 học viên

Độ khó Cơ bản

Thời gian Không giới hạn

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

Tin tức

3 bài viết

  • jyoung님의 프로필 이미지

    Xin chào. Tôi là J.Young.

    Đã 2 tháng trôi qua kể từ khi khóa học này được khai giảng.
    Tôi xin chân thành cảm ơn sự quan tâm và ủng hộ nồng nhiệt của các bạn trong suốt thời gian qua.

    Khi mới lên kế hoạch cho bài giảng,
    tôi đã định thực hiện nó dưới dạng hoàn chỉnh chỉ với chương trình giảng dạy đợt 1 hiện tại.

    Nói cách khác,
    tôi đã từng có kế hoạch hoàn thành chỉ với một chương trình giảng dạy [Xây dựng Portfolio Web hoàn thiện với Figma MCP × AI] ,
    nhưng khi trực tiếp cảm nhận tốc độ phát triển của AI gần đây, suy nghĩ của tôi đã thay đổi rất nhiều.

    Mỗi ngày trôi qua đều có những AI và tính năng mới xuất hiện,
    và thực tế là phương thức làm việc đang thay đổi một cách nhanh chóng,
    nên tôi đã quyết định rằng thay vì chỉ kết thúc bằng một bài giảng đã hoàn thành một lần,
    tôi cần phải tiếp tục cập nhật những phương pháp mới nhất có thể áp dụng ngay vào thực tế.

    Vì vậy, lần này tôi đã chuẩn bị bài giảng cập nhật đợt 2.

    Trong bản cập nhật lần này,
    chúng ta sẽ tập trung vào nội dung “Có thể hiện thực hóa thiết kế của bản thân nhanh chóng và chính xác đến mức nào” thông qua việc xây dựng một trang web di động dựa trên Fandom App bằng cách sử dụng công cụ AI miễn phí AntigravityClaude.ai.

    Đặc biệt trong bài giảng lần này, chúng ta sẽ cùng nhau thực hiện các nội dung sau theo từng bước.

    1. Thực hiện dựa trên Antigravity bằng hình ảnh chụp màn hình

    2. Phương thức triển khai kết nối Antigravity và Figma MCP

    3. Claude.ai và phương pháp kết nối Figma MCP để triển khai nhanh chóng và tinh xảo hơn

     

    Điều tôi cảm nhận được khi thử nghiệm tốc độ phát triển của các AI gần đây là việc hiện thực hóa ý tưởng đang trở nên nhanh chóng và mạnh mẽ hơn nhiều so với trước đây.

    Đặc biệt là Claude, càng sử dụng tôi càng thấy kinh ngạc trước những kết quả chi tiết đến khó tin, và Antigravity dù miễn phí nhưng cũng thể hiện hiệu suất vô cùng ấn tượng.

    Tất nhiên, mỗi cái đều có những ưu điểm và nhược điểm riêng.

    Trước tiên, bằng cách kết nối Antigravity với Figma MCP, tôi sẽ nhanh chóng sắp xếp tài liệu PRD cũng như cấu trúc,

    Tôi định tiến hành theo cách chuyển kết quả đó lại cho Claude để bổ sung và hoàn thiện chi tiết hơn.

    Tôi đã tổng hợp và đưa vào đây chỉ những phương pháp mà tôi đánh giá là quy trình làm việc thực tế và hiệu quả nhất hiện nay sau khi đã trực tiếp thử nghiệm nhiều cách khác nhau.

    AI sẽ còn phát triển nhanh hơn nữa trong tương lai,
    và tôi tin rằng điều quan trọng cuối cùng chính là "bạn là một nhà thiết kế có thể tận dụng AI tốt đến mức nào".

    Cảm ơn bạn đã luôn tin tưởng và theo học.
    Tôi sẽ tiếp tục cập nhật những bài giảng tốt hơn nữa.

    J.Young Dream

    0
  • jyoung님의 프로필 이미지

    Xin chào?
    Tôi là J.Young, giảng viên với 25 năm kinh nghiệm thực tế và giảng dạy.
    Dạo này mọi người đều đang tận dụng tốt AI chứ?

    Dành cho những ai có khả năng thiết kế nhưng luôn gặp khó khăn vì vấn đề coding,
    hoặc những ai đã từng thử sử dụng AI nhưng vẫn còn băn khoăn liệu "làm thế này có đúng không?",
    tôi xin giới thiệu một bài giảng thực sự hữu ích.

    ────────────────────
    🎯Hoàn thành Web Portfolio phản hồi trong 4 giờ với Figma MCP x AI
    ────────────────────

    Khóa học này không chỉ đơn thuần là hướng dẫn sử dụng công cụ mà còn
    👉đề cập đến quy trình làm việc thực tế hoàn thiện từ Thiết kế → Phát triển → Triển khai trong một lần.


    💎Nội dung cốt lõi bạn sẽ học trong khóa học này

    Cách thiết kế Figma mà AI có thể hiểu được
    Vibe Coding giúp hiện thực hóa chính xác thiết kế của bạn
    Tạo web tương tác dựa trên React
    Trải nghiệm triển khai thực tế với Git, GitHub, Vercel

    👉 Bạn sẽ không chỉ nhận được kết quả mà là học được
    “chính cách làm việc cùng với AI”.


    🚀Thay đổi sau khóa học

    Từ giai đoạn chỉ biết thiết kế → Phát triển thành nhân tài có khả năng lập trình
    Tốc độ làm việc → Cải thiện hơn 3~5 lần
    Hoàn thiện portfolio chất lượng cao có thể sử dụng ngay để xin việc hoặc chuyển việc


    🎯Đề xuất cho những đối tượng sau

    • Nhà thiết kế từng từ bỏ việc thiết kế web vì lập trình

    • Những ai muốn tận dụng AI một cách hiệu quả

    • Những ai muốn hoàn thành portfolio một cách nhanh chóng

    • Những ai muốn sở hữu cả năng lực thiết kế lẫn phát triển sản phẩm


    🔥Bây giờ là thời điểm tốt nhất

    👉Hiện đang giảm giá 30%!
    📅Thời gian: 17 tháng 3 ~ 26 tháng 3 năm 2026

    Sau thời gian này, giá sẽ quay trở lại mức bình thường nên
    nếu bạn đang quan tâm thì đây chính là cơ hội tốt nhất.


    Khóa học này
    không chỉ đơn thuần là tạo ra một sản phẩm duy nhất,

    👉 Đây là quá trình giúp bạn nắm vững
    “phương pháp sản xuất dựa trên AI” mà bạn có thể tiếp tục áp dụng mãi về sau.

    Một khi đã nắm vững,
    tốc độ và chất lượng công việc của bạn sẽ hoàn toàn thay đổi trong tương lai.


    Hãy thoải mái xem qua nhé,
    chúc bạn nâng cao năng lực thực chiến và năng suất với tư cách là một nhà thiết kế Full-stack nhé^^

    Cảm ơn bạn!

    Bạn có thể truy cập vào địa chỉ bên dưới để xem bài giảng.
    https://inf.run/QLDGi

    0
  • jyoung님의 프로필 이미지

    Xin chào 😊
    Tôi là giảng viên J.Young.

    Cuối cùng tôi cũng có thể gửi lời chào đến các bạn thông qua một bài giảng mới.


    🚀 [Hoàn thành Web Portfolio phản hồi trong 4 giờ với Figma MCP × AI]

    Khóa học lần này không đơn thuần là một "khóa học lập trình".

    Từ thiết kế mà AI có thể hiểu được,
    đến Vibe Coding sử dụng AI,
    và quy trình hoàn thiện Full-stack dẫn đến việc triển khai thực tế
    .


    🎯 Nội dung cốt lõi bạn sẽ học trong khóa học này

    Thiết kế hệ thống sử dụng Figma AutoLayout
    Phương pháp thiết kế cấu trúc đáp ứng (Responsive)
    Đăng ký Variable → Token hóa → Tạo cấu trúc thiết kế mà AI có thể hiểu được
    AI Vibe Coding thông qua liên kết máy chủ Figma MCP
    Cách hiện thực hóa thiết kế chính xác đến từng pixel
    Quy trình thực tế dẫn đến việc triển khai (Deployment)

    Không chỉ đơn thuần là "AI viết code thay cho bạn".

    Chúng ta sẽ cùng nhau rèn luyện khả năng tự phát hiện lỗi của AI, thấu hiểu cấu trúc,
    và thậm chí là tái cấu trúc (refactoring) thành một trang web phản hồi tối ưu.


    👩‍💻 Đề xuất cho những đối tượng sau đây

    • 🎨 Những ai muốn hiện thực hóa thiết kế của mình bằng Vibe Coding một cách trọn vẹn nhất

    • 🧠 Những người muốn trở thành nhà thiết kế full-stack có khả năng làm mọi việc từ thiết kế đến phát triển và triển khai.

    • 🔥 Những ai muốn học bài bản các tính năng nâng cao của Figma

    • 💻 Người mới bắt đầu học Front-end muốn tìm hiểu từ HTML / CSS / JavaScript / Tailwind cho đến React

    • Những ai muốn tạo một danh mục sản phẩm (portfolio) web phản hồi có tính tương tác và độ hoàn thiện cao

    • Những người muốn sử dụng AI để nâng cao năng suất công việc lên gấp 5 lần trở lên


    📘 Phương pháp học tập

    Tất cả quá trình đều được sắp xếp một cách hệ thống trên Notion.
    Từ thiết kế → thực hiện → chỉnh sửa → đến triển khai,
    nội dung được cấu trúc để bạn có thể tự ôn tập và học đi học lại nhiều lần.


    Trong thời đại AI,
    giờ đây người có năng lực cạnh tranh không phải là "người giỏi lập trình"
    mà là người tạo ra kết quả nhanh nhất cùng với AI.

    Trong vòng 4 giờ,
    hãy nâng tầm danh mục hồ sơ năng lực (portfolio) của bạn lên một bước mới.

    Hẹn gặp lại bạn trong khóa học.

    Cảm ơn bạn.
    Thân ái, Giảng viên J.Young

    0

1.520.415 ₫