AI đang dần thay đổi cách chúng ta thiết kế và phát triển web/app. Không chỉ dừng ở việc viết nội dung hay chỉnh sửa hình ảnh, AI ngày nay có thể tham gia sâu vào UX/UI Design và lập trình giao diện. Bài viết này chia sẻ một case thực tế: ứng dụng AI và Vibe Coding trong quá trình phát triển công cụ “Thành Âm Dương – Lịch Âm Dương Việt Nam”, với quy trình tối giản nhưng hiệu quả đáng ngạc nhiên.
Khi AI không chỉ dành cho những thứ “mỹ miều”
AI hiện diện ở khắp nơi: từ viết bài, chỉnh ảnh, dựng video cho đến thiết kế website và mobile app. Tuy vậy, không ít người vẫn cho rằng AI chỉ phù hợp với những công việc mang tính cảm tính, còn các mảng đòi hỏi tư duy logic như thiết kế hệ thống hay code thì “chưa đủ tin cậy”.
Thực tế lại cho thấy điều ngược lại. Trong bài viết này, toàn bộ quá trình thiết kế giao diện và code website được thực hiện chỉ với một công cụ duy nhất – Gemini (ChatGPT cũng có thể áp dụng tương tự). Không plugin, không tool phụ trợ, không IDE phức tạp. Chỉ prompt, copy – paste và chỉnh sửa. Đơn giản đến mức khiến nhiều người phải giật mình.
Quy trình bắt đầu rất quen thuộc với dân thiết kế: một bản wireframe phác thảo giao diện và một logo – yếu tố gần như bắt buộc để website hoặc app có bản sắc rõ ràng. Từ đây, AI bắt đầu tham gia vào vai trò “chuẩn hóa” thiết kế.
Các bước thực hiện rất đơn giản: đưa wireframe và logo vào AI, yêu cầu phân tích logo, sau đó chỉnh sửa giao diện theo chuẩn Google Material Design, đồng thời đảm bảo màu sắc, phong cách và tinh thần thương hiệu nhất quán với logo.
Chỉ sau một lần xử lý, giao diện từ mức “xem tạm được” đã trở nên gọn gàng, logic và đúng chuẩn thiết kế hiện đại. Đặc biệt, AI không chỉ đưa ra kết quả mà còn giải thích rõ ràng cách sử dụng primary color, secondary color, màu trung tính và lý do đằng sau từng quyết định thiết kế.
Từ bản nháp đến giao diện mang dấu ấn thương hiệu
Trước khi có sự hỗ trợ của AI, giao diện ban đầu mang tính thử nghiệm, thiếu liên kết với logo và chưa thể hiện rõ cá tính thương hiệu. Màu sắc thiên về cảm tính, bố cục chưa được chuẩn hóa.
Sau khi được AI xử lý theo Material Design, giao diện trở nên hiện đại hơn, có hệ thống màu sắc rõ ràng và mang dấu ấn thương hiệu rõ nét. Đây không chỉ là quá trình “làm đẹp giao diện”, mà giống như một buổi học UX/UI thực tế, nơi người làm được hiểu rõ vì sao thiết kế cần như vậy.
Nếu thiết kế đã khiến nhiều người bất ngờ, thì đến phần code, sự hoài nghi còn lớn hơn. Nhiều người đặt câu hỏi: AI liệu có thể viết code đúng chuẩn, dễ dùng và dễ mở rộng hay không?
Câu trả lời là có. Từ bản thiết kế đã hoàn chỉnh, chỉ cần một prompt rõ ràng như “Hãy viết code giao diện này bằng Bootstrap”, AI có thể tạo ra code gần như ngay lập tức. Không chỉ chạy đúng, mà còn đảm bảo trình bày sạch sẽ, cấu trúc logic, comment rõ ràng và cách đặt tên biến dễ hiểu.
HTML được tạo ra có cấu trúc rõ ràng, đúng chuẩn Bootstrap, dễ đọc và dễ chỉnh sửa. Các class được đánh dấu hợp lý, hiệu ứng hover và tương tác nút bấm trông rất “thật”, mang cảm giác của một sản phẩm được làm bởi đội ngũ chuyên nghiệp.
Thậm chí, trong nhiều trường hợp, giao diện sau khi code còn trông hoàn thiện hơn cả bản thiết kế. Điều này cho thấy AI không chỉ “dịch” thiết kế sang code, mà còn tối ưu lại trải nghiệm hiển thị.
Vibe Coding mang lại một cảm giác rất khác khi lập trình. Viết code không còn là áp lực “gõ cho xong”, mà trở thành quá trình kiểm soát và tinh chỉnh sản phẩm.
Ngay cả những người đã quen code cũng dễ bị cuốn vào cách làm này. Với các designer trẻ – vốn thường ngại code – Vibe Coding mở ra cơ hội tự tay hoàn thiện sản phẩm mà không còn rào cản tâm lý.
Trong case này, website đã có sẵn logo. Nhưng nếu bắt đầu từ một trang giấy trắng, AI thậm chí còn phát huy sức mạnh mạnh mẽ hơn. Người dùng có thể nhờ AI gợi ý concept thương hiệu, thiết kế logo, xây dựng bảng màu chủ đạo và phong cách hình ảnh.
Từ một homepage, AI hoàn toàn có thể mở rộng thành một website đầy đủ, với sitemap, cấu trúc nội dung và thiết kế chi tiết cho từng trang. Đây là tiềm năng rất lớn cho các cá nhân hoặc đội nhóm nhỏ.
Prompt – yếu tố quyết định chất lượng kết quả
Nhiều người phàn nàn rằng AI “làm linh tinh” hoặc “không đúng ý”. Tuy nhiên, phần lớn vấn đề nằm ở cách đặt câu hỏi. Prompt càng rõ ràng, kết quả AI trả về càng chuẩn và càng ít phải sửa.
Trong quá trình thực hiện case này, có thể rút ra một nguyên tắc đơn giản nhưng hiệu quả: đầu tư cho prompt là cách tiết kiệm thời gian tốt nhất.
Đầu tiên là prompt phân tích logo và định hướng thiết kế, giúp AI hiểu phong cách, cảm xúc thương hiệu và bảng màu phù hợp. Đây được xem như một bản brief nhanh cho designer.
Tiếp theo là prompt chuẩn hóa giao diện theo Material Design dựa trên wireframe và logo. AI không chỉ thiết kế mà còn giải thích quyết định UX/UI.
Sau cùng là prompt chuyển thiết kế sang code với Bootstrap 5, yêu cầu code sạch, có comment, sử dụng biến CSS và dễ mở rộng. Từ đây, người làm chỉ cần kiểm tra và tinh chỉnh lại theo nhu cầu.
Sau khi có homepage, AI có thể tiếp tục đề xuất sitemap đầy đủ, mô tả layout và nội dung chính cho từng trang, hoặc thiết kế tiếp các trang About, Product, Contact theo cùng phong cách.
Ở giai đoạn này, AI không còn đơn thuần là công cụ, mà gần như là một teammate cùng tham gia vào dự án.
AI đang đóng vai trò ngày càng quan trọng trong thiết kế và phát triển web/app. Nó có thể làm nhanh, làm nhiều và làm khá chuẩn. Việc của con người không phải là làm thay AI, mà là tư duy, định hướng, kiểm soát và sáng tạo.
Hãy để AI gánh phần nặng nhọc. Còn chúng ta, hãy tập trung vào những giá trị sáng tạo cốt lõi và làm việc một cách thông minh hơn.
Giảng viên Lục Đức Thành
