Có một kiểu dự án rất đúng tinh thần vibe coding: nhìn qua thì tưởng chỉ là một màn demo đẹp mắt, nhưng bóc ra lại thấy đằng sau là một pipeline ghép nhiều công cụ khá khôn. Bài đang hot trên r/vibecoding lần này thuộc đúng nhóm đó.
Tác giả kể rằng họ lấy đúng một ảnh chân dung gốc, dùng Google Nano Banana để biến nó thành visual trông chỉn chu hơn với nền gradient, sau đó dùng Google Flow để đẩy bộ ảnh thành video. Từ video đó, họ tách frame ra thành nhiều ảnh nhỏ rồi nối lại trong một ứng dụng React. Phần lắp ráp ứng dụng được hoàn thiện bằng Cursor ở agent mode.
Nghe thì đơn giản, nhưng cái đáng nói không phải là từng tool riêng lẻ. Điểm đáng học là cách họ xếp chúng thành một chuỗi sản xuất nội dung số tương đối mạch lạc:
Điều đang thay đổi ở vibe coding
Trước đây, nếu muốn làm một portfolio có cảm giác chuyển động, có chất điện ảnh và khác khỏi template web thông thường, anh em thường phải chọn một trong hai hướng:
- biết design và motion khá vững
- hoặc thuê người làm visual rồi mới ghép sang web
Bây giờ mô hình đã khác. Một người không cần giỏi toàn bộ từng mảng vẫn có thể ráp một sản phẩm nhìn đủ ấn tượng nếu biết chia bài toán thành các chặng nhỏ:
- tạo nguyên liệu hình ảnh tốt hơn từ ảnh gốc
- biến nguyên liệu đó thành chuyển động
- cắt chuyển động thành tài sản giao diện
- dùng AI code assistant để dựng lớp web trình bày
Nói ngắn gọn, AI không chỉ viết code nhanh hơn. Nó đang kéo mạnh chi phí phối hợp giữa design, motion và frontend xuống thấp hơn nhiều.
Pipeline này đáng chú ý ở chỗ nào
Nếu nhìn theo góc vận hành sản phẩm, bài đăng này cho thấy ít nhất 3 thứ khá thực chiến.
1. Giá trị nằm ở khâu nối tool, không nằm ở một tool duy nhất
Nano Banana không tự tạo ra portfolio.
Google Flow cũng không tự tạo ra web.
React và Cursor lại càng không tự nghĩ ra concept.
Cái tạo ra kết quả là việc nối đúng thứ tự:
- làm đẹp ảnh đầu vào
- tạo chuyển động từ ảnh
- trích xuất frame dùng lại làm asset
- đóng gói thành trải nghiệm web
Đây là tư duy rất quan trọng cho anh em đang làm sản phẩm bằng AI. Nhiều người vẫn tìm một công cụ thần thánh làm hết từ A đến Z. Thực tế, phần lớn kết quả ngon hiện nay đến từ pipeline đủ rõ và đủ kỷ luật.
2. Tài sản trung gian đang trở nên cực kỳ quan trọng
Một chi tiết hay trong bài là tác giả không dừng ở việc có video đẹp. Họ biến video thành frame để tái sử dụng trong app React.
Điều này nghe nhỏ, nhưng nó phản ánh một tư duy đúng: mỗi đầu ra trung gian đều có thể trở thành asset cho bước tiếp theo.
Trong các workflow AI hiện tại, người làm hiệu quả thường không nghĩ theo kiểu "xin model một kết quả cuối cùng". Họ nghĩ theo kiểu:
- đầu ra nào có thể tái dùng
- đầu ra nào có thể sửa tay
- đầu ra nào đủ ổn để đưa sang tool tiếp theo
Chính cách nghĩ này làm cho vibe coding bớt hên xui hơn và bớt phụ thuộc vào một prompt duy nhất.
3. Portfolio cá nhân đang bước sang giai đoạn cạnh tranh bằng trải nghiệm
Một portfolio tĩnh giờ rất khó nổi bật. Khi AI làm cho việc viết landing page trở nên quá rẻ, thứ tạo khác biệt không còn nằm ở việc có website hay không, mà nằm ở cảm giác trải nghiệm:
- visual có câu chuyện không
- chuyển động có hợp lý không
- cách dẫn dắt người xem có nhớ được không
Bài đăng này tuy ngắn, nhưng nó gợi ra đúng hướng đi đó. Portfolio của cá nhân, freelancer hay founder nhỏ sẽ ngày càng giống một sản phẩm media nhẹ, chứ không chỉ là vài block giới thiệu bản thân với nút liên hệ.
Nếu muốn học theo, nên rút ra quy trình nào
Nếu anh em muốn áp dụng ý tưởng này cho dự án riêng, mình nghĩ nên copy tư duy chứ không nên copy nguyên xi giao diện.
Một quy trình hợp lý có thể là:
Bước 1: xác định một câu chuyện hình ảnh duy nhất
Đừng bắt đầu bằng việc hỏi AI làm cho mình một website đẹp. Hãy chốt trước một concept rất cụ thể, ví dụ:
- chân dung chuyên nghiệp nhưng vẫn có chất cá nhân
- founder công nghệ theo phong cách điện ảnh
- hồ sơ nghề nghiệp thiên về sản phẩm và tốc độ ra hàng
Concept càng rõ thì phần tạo ảnh và video càng ít trôi.
Bước 2: tạo bộ nguyên liệu trước khi dựng web
Thay vì vào React hay Cursor ngay, nên gom trước:
- ảnh chính
- vài biến thể visual
- một video ngắn hoặc motion clip
- vài frame tĩnh để dùng cho hero, section, thumbnail
Đây là cách giúp frontend bớt mò mẫm. Khi asset đã rõ, AI code assistant làm tốt hơn hẳn.
Bước 3: để AI dựng khung, nhưng mình phải chốt luật hiển thị
AI có thể dựng layout nhanh, nhưng anh em nên tự chốt mấy thứ này:
- section nào xuất hiện trước
- animation nào là điểm nhấn, animation nào phải tiết chế
- phần nào là nội dung bán năng lực, phần nào chỉ để gây ấn tượng
Nếu không chốt, sản phẩm rất dễ thành một demo phô trương hiệu ứng nhưng thiếu mục tiêu.
Bước 4: tối ưu cho tốc độ tải và khả năng tái dùng
Portfolio kiểu motion-heavy rất dễ đẹp trong video demo nhưng chậm ngoài đời thật. Nên kiểm tra sớm:
- frame có quá nặng không
- video có cần autoplay không
- có thể thay video bằng chuỗi ảnh nhẹ hơn không
- asset có dùng lại được cho social post, CV online, landing page khác không
Làm được chỗ này thì một lần sản xuất asset có thể phục vụ nhiều kênh.
Tin tốt và cảnh báo đi kèm
Tin tốt là ngưỡng để một cá nhân làm ra sản phẩm trình bày bản thân đủ nổi bật đã thấp đi rất nhiều. Một người biết dùng đúng AI tools giờ có thể tiến nhanh hơn hẳn so với kiểu tự mày mò từng phần riêng lẻ.
Nhưng cũng có một cảnh báo rõ ràng: càng nhiều người có thể làm giao diện bắt mắt, thì lợi thế sẽ càng dịch sang phần tư duy biên tập và cấu trúc trải nghiệm. Nói cách khác, cái khó không còn là dựng được một trang đẹp, mà là dựng đúng một trang có bản sắc và phục vụ mục tiêu thật.
Bài post trên Reddit không phải một bài tutorial dài, nhưng nó cho thấy một tín hiệu khá rõ của thị trường: vibe coding đang đi từ chuyện viết app cho nhanh sang chuyện dựng trải nghiệm số đa chất liệu nhanh hơn rất nhiều.
Với anh em làm freelancer, tuyển dụng, studio nhỏ hay founder tự build hình ảnh cá nhân, đây là hướng đáng theo dõi. Không phải vì mỗi tool trong pipeline đều thần kỳ, mà vì khi ghép đúng, chúng cho ra một mức hoàn thiện trước đây cần nhiều vai trò khác nhau mới làm kịp.
Top comments (0)