KhoaJAK - Xây website bằng vibe coding
Từ những ref đầu tiên đến một website cá nhân: câu chuyện về thiết kế, dữ liệu thật và những vòng làm việc cùng AI.
Một nơi để giới thiệu mình và những điều đã làm
Mình bắt đầu với một website cá nhân trên Figma Sites. Lần xây lại này, mục tiêu là có một nơi dễ sửa và mở rộng để giới thiệu bản thân, trình bày dự án và chia sẻ những gì học được.
Phạm vi được chốt quanh ba phần: Giới thiệu, Dự án và Chia sẻ. Astro là nền tảng được chọn cho website nội dung; phần cộng đồng được định hướng tách riêng. Tài khoản thành viên, bình luận và các bộ đếm tương tác chưa được triển khai trong giai đoạn này.
Mình dùng “vibe coding” để chỉ cách làm việc qua nhiều vòng: mô tả ý định, để AI dựng một bản chạy được, xem trực tiếp, rồi phản hồi vào đúng vùng cần sửa. Mình quyết định hướng thiết kế và nội dung; Codex hỗ trợ đọc nguồn, viết code, chuyển nội dung, kiểm tra và lưu lại các phiên bản.
01. Bắt đầu từ ref, rồi tìm hướng riêng
Hai ref được đưa vào giai đoạn đầu là Ricardo Chance và Segerman. Theo ghi chép lúc xây dựng, hướng kết hợp là khoảng trống thoáng, chuyển động mềm và typography lớn, cô đọng.
Ref giúp xác định nhịp bố cục và cảm giác của giao diện. Thông tin cá nhân, dự án và bài viết vẫn lấy từ nội dung của mình. Các quyết định như dùng sao bốn cánh, bỏ avatar và chỉ dùng font không chân được chốt dần qua phản hồi trên bản chạy.
UI đầu tiên: rõ ràng, có chân dung
Bản đầu đặt tên và nghề nghiệp bên trái, chân dung thật bên phải, phía dưới là một vài dự án tự làm và các liên kết kết nối. Đây là điểm xuất phát để xem cấu trúc và nội dung hoạt động thế nào trong trình duyệt.
Tối giản hơn, nhận diện bằng chữ và sao
Vòng tiếp theo bỏ avatar, dùng ngôi sao bốn cánh bằng ASCII và bổ sung hai giao diện sáng/tối. Hero lúc này là “Thiết kế & chia sẻ”, còn dự án được trình bày thành danh sách gọn.
02. Từ hero tĩnh đến một dải nội dung chuyển động
Sau khi xem bản minimal, mình muốn trang chủ có tên Khoa (JAK) thật lớn và có thể giới thiệu nhiều sản phẩm ngay trong vùng nhìn đầu tiên. Hero được dựng lại với hai cột thẻ bên phải, có độ nghiêng và chiều sâu nhẹ khi cuộn.
Ban đầu, các thẻ chủ yếu là solo project. Sau đó dải thẻ được mở rộng sang bài viết, video, dự án và tài nguyên. Thứ tự thay đổi mỗi lần vào trang; tỷ lệ cover và chiều cao tiêu đề được dùng để xếp thẻ. Hai cột di chuyển ngược chiều nhau khi người đọc cuộn, còn mobile dùng dải kéo ngang.
Một số vấn đề chỉ hiện rõ khi thao tác: pattern vẫn có cảm giác lặp dù ký tự đã đổi, thẻ đi vào vùng menu, và đáy dải thẻ bị cắt ngang. Các vòng sửa tập trung lần lượt vào noise, cách xếp cột và mask gradient trên/dưới để thẻ mờ dần khi ra khỏi vùng nhìn.
03. Thử hiệu ứng mạnh, rồi giảm lại
Hover cover là phần trải qua nhiều thử nghiệm. Ý tưởng là lấy chính màu và hình trong ảnh để chuyển thành ký tự ASCII. Những bản đầu thử lem rộng và tăng chaos khiến hình khó nhận ra, đôi lúc tạo cảm giác có một lớp tối phía sau thẻ.
Sau phản hồi, hiệu ứng được thu gọn: giữ hình và màu của cover, viền mờ vào trong, chỉ lem nhẹ ra ngoài và chuyển trạng thái nhanh hơn. Pattern quanh cursor cũng được tách khỏi cover để hai hiệu ứng không chồng lên nhau.
Cursor có icon theo ngữ cảnh: Play cho video, mắt cho bài viết và mở dự án cho cover tương ứng. Nền alpha, blur và quán tính nhẹ giúp trạng thái xuất hiện mềm hơn. Ở trang chi tiết bài blog, pattern mờ dần trước khi chạm vùng đọc. Quy tắc này được thu hẹp sau khi thử nghiệm cho thấy việc né mọi vùng chữ khiến hiệu ứng gần như biến mất trên hero. Những chi tiết này được kiểm tra bằng cả thao tác thật và các phép đo trong trình duyệt.
04. AI lấy nội dung từ đâu?
Khi bố cục bắt đầu ổn định, website cần nội dung thật để kiểm tra cách đọc và điều hướng. Việc nhập dữ liệu trong giai đoạn này được thực hiện theo từng nguồn, chưa phải cơ chế đồng bộ tự động.
- Website cá nhân gốc: thông tin giới thiệu, nghề nghiệp, liên kết kết nối và mốc bắt đầu thiết kế.
- Product Design Hub trên Notion: ba bài viết cùng cover và hình minh họa. Ban đầu thẻ mở Notion; sau đó nội dung được chuyển sang Markdown để đọc trực tiếp trên website.
- TikTok @wblekhoa: ba video được chọn cùng thumbnail. Video vẫn mở tại nguồn.
- Behance: X8 Guild và Delarft, gồm phần trình bày, hình ảnh và credit đồng tác giả. Các ảnh nối liền, màu nền phần text và cách căn QR được kiểm tra lại theo bản gốc.
- Figma Community: tám plugin/widget cho nhóm Solo và 25 file/template cho Tài nguyên. Logo dùng cho danh sách nhỏ; ảnh preview đầu tiên dùng làm cover sản phẩm.
- Dribbble: 24 shot cho Design practice.
AI hỗ trợ chuyển định dạng, lưu ảnh và nối nội dung với route. Không tự bổ sung lượt xem, lượt tải, ngày xuất bản hoặc kết quả dự án chưa có nguồn. Bài viết và dự án nhập vào vẫn giữ nội dung cùng attribution tương ứng.
05. Nội dung dẫn đến cấu trúc trang
Từ một danh sách dự án chung, website dần chia thành các nhóm có cách xem khác nhau. Trang tổng quan chọn nội dung nổi bật; từng nhóm có trang xem đầy đủ và lối quay lại rõ ràng.
Dự án gồm Dự án lớn, Solo projects và Design practice. Chia sẻ gồm Bài viết, Video và Tài nguyên.
Trang chủ cũng thay đổi theo: sau hero là phần giới thiệu bản thân, tiếp đến Dự án và Chia sẻ. Các trang dùng chung dữ liệu để tiêu đề, cover và liên kết không bị cập nhật lệch nhau.
06. Những vòng cuối chủ yếu là bớt đi
Khi đã có nhiều nội dung, các thẻ bắt đầu mang thông tin lặp. Mình bỏ mô tả dưới thẻ blog, video, tài nguyên và dự án lớn; bỏ nhãn “Design practice” dưới từng shot khi tên section đã đủ rõ.
Solo project vẫn giữ mô tả ngắn để giải thích công cụ làm gì. Loại plugin/widget chuyển ra sau tên, widget Figma có thêm icon. Các chỉnh sửa khác gồm rút gọn copy tránh chữ mồ côi, đồng nhất divider chấm với gap 10px, bỏ viền cover hero và điều chỉnh khoảng cách giữa tên với nội dung giới thiệu.
Mỗi thay đổi nhỏ đều có phạm vi cụ thể: sửa một quy tắc ở nơi dùng chung, rồi kiểm tra cả trang tổng quan, danh sách và mobile. Điều đó giúp giao diện gọn hơn mà không phải thiết kế lại từ đầu sau mỗi phản hồi.
07. Lưu cả quá trình, không chỉ bản mới nhất
Để kể được quá trình xây website, mình yêu cầu lưu lại yêu cầu, ref đã dùng, quyết định, ảnh UI và những gì AI đã thực hiện. Từ lúc cơ chế này được thêm vào, mỗi mốc review có thể giữ một bản source/build riêng cùng screenshot và thông tin màn hình.
Các UI đầu chỉ còn ảnh và ghi chép đã khôi phục; mình không coi chúng là những bản gốc có thể chạy lại. Với các mốc đã lưu đầy đủ, có thể mở lại để chụp hoặc quay quá trình tương tác. Bài này chọn một số mốc từ nhật ký đó để người đọc theo dõi câu chuyện.
Điều mình rút ra
Vibe coding vẫn cần những quyết định thiết kế cụ thể. “Mượt hơn” trở nên rõ hơn khi chỉ ra trạng thái xuất hiện của cursor; “bớt rối” trở nên kiểm tra được khi xác định nhãn hay mô tả nào cần bỏ.
AI giúp dựng và sửa nhanh, nhưng chất lượng đến từ việc xem bản chạy, dùng nội dung thật và phản hồi đúng chỗ. Giữ lại các bản thử cũng giúp giải thích được vì sao sản phẩm đi đến giao diện đang thấy, kể cả những hướng đã thử rồi bỏ.
Case study được tổng hợp từ nhật ký phát triển ngày 08.09.2026. Website vẫn đang được xây dựng; chưa có số liệu sử dụng thực tế để kết luận về hiệu quả sau phát hành. Đây là bản kể quá trình thiết kế và triển khai, sẽ được cập nhật khi có thêm mốc đáng kể.