Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
NEW
Programming

/

AI Coding

Đây chính là Vibe Coding thực thụ - Phiên bản Vibe Coding dành cho Developer

No Code, Only Prompt Hãy bỏ qua những dịch vụ đơn giản có thể tạo ra bằng vibe coding trong 10 phút! Bạn có thể học vibe coding ứng dụng thực tế 'thật sự' để tạo ra dịch vụ tinh vi ở mức độ dịch vụ thực tế theo kế hoạch và thiết kế bằng Cursor AI NCOP.

29 học viên đang tham gia khóa học này

  • codecamp
AI 활용법
실습 중심
바이브코딩
커서
AI 코딩
React
Next.js
cursor
prompt engineering
Vibe Coding

Dịch cái này sang tiếng Việt

  • Cách tạo UI giống hệt 100% thiết kế Figma bằng Vibe Coding

  • Cung cấp prompt có thể áp dụng thực tế

  • Hoàn thành toàn bộ dự án tập trung vào chức năng với 바이브코딩

  • Danh mục đầu tư Vibe Coding

  • Lập trình thực tế tập trung vào thực hành có thể sử dụng trong công ty

Vibes Coding không thất bại
Công khai phương pháp thực hiện 100% theo thiết kế và kế hoạch Figma.


Bạn đã từng bỏ dở khi làm với Vibe Coding?
Bây giờ hãy học cách làm một cách có hệ thống và đúng đắn.


Ra.mắt.lần.đầu
YouTube cũng không tiết lộ tất cả về Vibe Coding thực sự áp dụng trong thực tế

Hình ảnh quả chuối thể hiện phong cách coding thực tế trong công việc, không phải kiểu 'vẽ quả chuối cho tôi~'

Khóa học này là
Vibe Coding dành cho các nhà phát triển.

Tại sao chuối lại là hình ảnh đại diện? Nhắc đến chuối là nghĩ đến vibe coding theo dòng suy nghĩ tự nhiên nên đã chọn theo phong cách vibe coding. Tuy nhiên, vibe coding dành cho developer không thể làm theo cảm tính được. Phải tiến hành một cách có hệ thống và dựa trên thiết kế.

Khóa học này là vibe coding nghiêm túc dành cho developer. Đây là vibe coding ở mức độ có thể áp dụng vào thực tế công việc.
Đặc biệt, nếu bạn là junior developer thì đây là năng lực thiết yếu nhất định phải biết trong thời đại AI.

Khóa học được tiến hành với độ khó vừa phải, đủ để Project Manager, UIUX designer, service planner có thể sử dụng Figma học tập. Nếu muốn khởi nghiệp một mình và làm nhiều công việc thì hãy thử thách bản thân nhé!

Sau khóa học này,

1. Có thể triển khai 100% bất kỳ thiết kế Figma nào

Bạn có cảm thấy bực bội vì không thể triển khai 100% thiết kế Figma bằng vibe coding không?
Chúng tôi sẽ tiết lộ bí quyết để tạo ra thiết kế Figma chính xác mà đội của chúng ta hoặc bản thân tôi muốn làm một cách 100% chính xác và nhanh chóng bằng vibe coding.

Kết quả MCP Figma ban đầu còn thô sơ → Tạo ra chính xác (ví dụ trang web Yanolja)

2. Triển khai 100% tính năng theo ý định kế hoạch của tôi

Bạn muốn tạo ra một dịch vụ thực sự chuyên nghiệp thay vì chỉ là dịch vụ vibecodding đơn giản được tạo trong 5 phút?
Chúng tôi sẽ công khai phương pháp và prompt để triển khai 100% chính xác thiết kế Figma mà team chúng ta hoặc bản thân muốn tạo ra bằng vibecodding.

Sau khóa học này, bạn có thể áp dụng vibecodding tự động hóa hoàn toàn vào công việc thực tế!

Thực sự các khóa học cho
Vibe Coding phải khác biệt.

Cả nhà phát triển và người không phải nhà phát triển đều có thể học được vibe coding có thể áp dụng thực tế tùy theo tình huống.

  • Bao gồm các nguyên lý và khái niệm phát triển chuyên biệt cho Vibe Coding, ngay cả những người không phải là lập trình viên cũng có thể học tập một cách đầy đủ.

  • Chúng tôi đề xuất lộ trình để các lập trình viên có thể phát triển tự chủ thông qua Vibe Coding.

Không cần một dòng code nào,
xây dựng dịch vụ thực tế bằng prompt


Với dự án 'Nhật ký cảm xúc', bạn sẽ học hầu hết tất cả các phương pháp của VibeCoding!

  • Tạo UI giống hệt thiết kế Figma

  • Tạo component chung như trong phát triển thực tế

  • Xác định thứ tự phát triển cho Vibe Coding

  • Triển khai các tính năng đa dạng và kết nối API

  • Xử lý đăng nhập và phân quyền

  • Phương pháp xử lý song song theo phong cách lập trình viên

  • Khôi phục an toàn khi AI mắc lỗi



AI quý như vàng,
Cung cấp prompt giúp AI nghe lời


Tôi sẽ học cách cung cấp và viết prompt để có được kết quả 120% theo ý định của mình!

  • Cách thiết lập quy tắc con trỏ

  • Cung cấp prompt có thể tái sử dụng

  • Quy tắc để có được kết quả 100% ổn định

  • Cấu trúc thư mục cho Vibe Coding




Quy trình phát triển để đạt được
kết quả 120% theo ý định của tôi


Phương pháp Vibe Coding do AI tạo ra, thứ tự phát triển để tránh xung đột code là rất quan trọng!

Prompt đều giống nhau
Xử lý song song là ưu điểm của Cursor AI


Phương pháp vibe coding do AI tạo ra cần phải biết phạm vi có thể song song để tránh xung đột code!

Khó khăn hơn bất kỳ khóa học nào khác,
nhưng cuối cùng đã hoàn thành chương trình giảng dạy tự tin nhất

Do đặc thù của Vibe Coding, mỗi lần có thể ra kết quả khác nhau nên việc hoàn thiện curriculum rất khó khăn.
Tôi đã tìm ra cách sửa đổi và tái kiểm tra kết quả để mọi người đều có thể có cùng một kết quả!

  • Hãy xem chương trình học rõ ràng theo kịp thực tế công việc.

Sau khi học xong khóa học
bạn có thể tạo ra mọi dự án bằng Vibe Coding!

Hãy thử tạo bằng cách chỉ sửa đổi prompt!

  • Nguyên lý của dự án khóa học và dịch vụ blog nổi tiếng 'Velog' là giống nhau!

  • Nền tảng du lịch phức tạp hơn 'MyRealTrip' cũng hoạt động theo nguyên lý tương tự!

1. Giao diện người dùng gần như hoàn toàn giống với dịch vụ blog nổi tiếng 'Velog'.

  • Chuyển từ Hộp lưu trữ nhật ký → Hộp lưu trữ ảnh : Giống như chuyển từ Trending → Mới nhất·Feed

  • Thẻ nhật ký : Thẻ blog giống nhau

2. Các tính năng gần như hoàn toàn giống với dịch vụ blog nổi tiếng 'Velog'.

  • Bộ lọc tổng thể : Chức năng bộ lọc tuần này giống nhau

  • Logic tìm kiếm giống nhau

  • Tất cả logic chuyển trang đều giống nhau

  • Logic modal kép và nhà cung cấp giống nhau

3. Nguyên lý frontend của nền tảng du lịch 'MyRealTrip' gần như hoàn toàn giống nhau.
Giờ đây, bất kể dịch vụ nào, bạn đều có thể triển khai frontend từ A đến Z một cách nhanh chóng và dễ dàng với Vibe Coding ứng dụng thực tế.

Có thể luyện tập với
nhiều thiết kế Figma đa dạng được cung cấp.

Chúng tôi cũng đang đề cập đến cách sử dụng plugin HTML to Design để có được trực tiếp nguồn thiết kế mong muốn!

  • Hãy sửa đổi prompt để thực hành vibe coding với nhiều thiết kế khác nhau.

  • Hãy triển khai một dự án cho khởi nghiệp cá nhân hoặc dịch vụ kiếm tiền.

Velog Figma

MyRealTrip Figma

29cm Figma

Lưu ý trước khi học

Cursor AI cần gói trả phí.

Để đạt được kết quả tốt nhất, tôi đang sử dụng gói trả phí của Cursor AI. Vui lòng lưu ý rằng việc tạo AI dựa trên Claude 4.0 sẽ tiêu tốn token.

Figma có thể sử dụng miễn phí với gói free.

Khi tạo dự án với Vibe Coding, bạn có thể thực hiện mà không cần Dev Mode - dịch vụ trả phí của Figma! Hãy copy-paste thiết kế được cung cấp vào trang của bạn để sử dụng.

Kiến thức tiên quyết và lưu ý

  • Tốt hơn nếu bạn có kiến thức cơ bản về HTML, CSS, Javascript.

  • Nếu bạn có kiến thức cơ bản về React, việc học Vibe Coding sẽ trở nên dễ dàng hơn!

  • Bạn có thể học cách viết prompt và các khái niệm phát triển cùng lúc.

Khuyến nghị cho những người như thế này

  • Nếu bạn là developer muốn tạo frontend nhanh chóng với Vibe Coding

  • Người có thể lập kế hoạch và thiết kế bằng Figma, đặc biệt nếu bạn là UI/UX Designer & PM

  • Nếu bạn muốn dễ dàng tạo ra 'mức lương thứ hai' hàng tháng sau giờ tan ca

  • Nếu bạn mơ ước về một startup cần kết quả nhanh chóng

Khóa học này sẽ hoàn toàn phù hợp với bạn.

Có phải bạn là lần đầu tiên đến
Nowon Dooga không?

Chúng tôi đã tổng hợp các từ khóa và đánh giá khóa học mà bạn Nowondu đã nhận được.
Hãy cùng bạn Nowondu phát triển thành một nhà phát triển ứng dụng thông qua khóa học này🚀

#Kind giảng dạy
#Tỉ mỉ
#Mạnh mẽ thực sự
#Dễ hiểu
#Developer thực thụ
#Mentor của các mentor


#Hạt cà phê
#Thích thích

Bạn có điều gì
thắc mắc không?

Q. Kiến thức tiên quyết cần ở mức độ nào?

Khóa học được tối ưu hóa cho những ai đã có kiến thức cơ bản về React.js hoặc Next.js.
Đây là khóa học cốt lõi giúp bạn học toàn bộ chu trình phát triển thông qua vibe coding dựa trên prompt.
Vì chúng tôi cung cấp working prompt, bạn có thể ứng dụng các prompt này vào dự án cá nhân của mình.
Chúng tôi đã cố gắng đưa vào càng nhiều nội dung càng tốt để các bạn không phải trải qua những thử nghiệm và sai lầm mà chúng tôi đã từng gặp phải.

Q. Cursor nên sử dụng gói nào?

Để có được kết quả chắc chắn hơn, tôi đang đánh giá rằng việc lựa chọn AI thông minh hơn là điều nên làm. Khóa học đang sử dụng gói trả phí và đang phát triển với Claude 4.0 và o3. Do đó, xin hãy nhất định xác nhận rằng token đang bị tiêu hao khá nhiều.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Bất kỳ ai muốn xây dựng dịch vụ thực tế với Vibe Coding

  • Bất kỳ ai muốn sử dụng Vibe Coding tại công ty

  • Bất kỳ ai cần portfolio VibeCode

  • Bất kỳ ai muốn tạo ra dịch vụ khởi nghiệp cá nhân tinh vi bằng Vibe Coding

  • Nhà thiết kế UIUX muốn tạo ra dịch vụ của riêng mình

  • Người lập kế hoạch hoặc PM muốn tạo ra dịch vụ của riêng mình

Cần biết trước khi bắt đầu?

  • React cơ bản

  • HTML, CSS cơ bản

Xin chào
Đây là

13,420

Học viên

383

Đánh giá

193

Trả lời

4.8

Xếp hạng

12

Các khóa học

"Try anything, Try everything!"

코드캠프는 유능한 개발자를 양성하며 개발의 미래를 바꾸고자 하는 목표를 가지고 있습니다. 사회적, 경제적, 교육적 배경에 상관없이 누구에게나 커리어 전환의 기회를 제공하기 위해 인프런에 나타났답니다. 코캠과 함께 커리어 점프에 도전하세요!

Chương trình giảng dạy

Tất cả

50 bài giảng ∙ (18giờ 10phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Chưa có đủ đánh giá.
Hãy trở thành tác giả của một đánh giá giúp mọi người!

Ưu đãi có thời hạn

1.402.898 ₫

38%

2.298.364 ₫

Khóa học khác của codecamp

Hãy khám phá các khóa học khác của giảng viên!

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!