Sau khi đã có bản kế hoạch PRD chi tiết trong tay, rất nhiều người nôn nóng muốn AI nhảy vào viết mã lập trình giao diện đầy đủ màu sắc, hiệu ứng bóng bẩy ngay lập tức.
Nhưng đây chính là cái bẫy lớn thứ hai trong Vibe Coding. Nếu bạn yêu cầu AI làm giao diện hoàn chỉnh ngay từ đầu, bạn sẽ nhận về một mớ bòng bong: Nút bấm to nhỏ không đều, chữ bị tràn lề trên màn hình điện thoại, và các khối nội dung xếp chồng chéo lên nhau như một bức tranh vẽ vụng về.
Để giải quyết dứt điểm vấn đề này, các chuyên gia phần mềm luôn sử dụng một bước đệm vô cùng quan trọng: Vẽ khung giao diện Wireframe.
1. Khung giao diện Wireframe là gì?
Hiểu một cách đơn giản nhất: Wireframe là bản vẽ khung xương trắng đen của một trang web hoặc ứng dụng. Nó hoàn toàn không có màu mè sặc sỡ, không có hình ảnh trang trí, cũng không có phông chữ uốn lượn phức tạp.
Hãy liên tưởng Wireframe giống như bộ khung sắt của một ngôi nhà đang xây dựng:
- Bạn nhìn vào khung sắt là biết ngay: Vị trí này sẽ đặt cửa sổ, chỗ kia sẽ đặt cầu thang bộ, và góc này sẽ là ban công.
- Bộ khung xương giúp bạn nhìn rõ tỷ lệ không gian xem có bị chật chội hay bất hợp lý chỗ nào không, trước khi người thợ tiến hành trát vữa, ốp gạch men và quét sơn màu.
Trong Vibe Coding, Wireframe đóng vai trò là chiếc kính trực quan cho AI. Khi bạn đưa cho AI một bộ khung trắng đen rõ ràng, AI sẽ hiểu ngay lập tức bố cục của từng khối mà không phải đoán mò trong bóng tối.
2. Tư duy sống còn: Ưu tiên điện thoại di động (Mobile First)
Rất nhiều người khi bắt đầu làm phần mềm quản lý thường chỉ ngồi vẽ trên màn hình máy tính bàn to lớn 24 inch. Đến khi ra ngoài đường, mở điện thoại lên kiểm tra thì các nút bấm bị co cụm lại bé xíu, chữ nhảy lung tung và không thể nào bấm ngón tay vào được.
Thực tế vận hành kinh doanh cho thấy: 80% các thao tác quản lý hàng ngày diễn ra trên chiếc điện thoại di động. Người chủ ngồi quán cà phê muốn duyệt đơn hàng trong 3 giây, người quản lý đứng dưới xưởng kho cầm điện thoại quét kiểm hàng, và nhân viên bán hàng vừa đi gặp khách vừa mở app tra cứu giá bán.
Vì thế, nguyên tắc thép khi dựng Wireframe là: Hãy thiết kế cho màn hình điện thoại trước, sau đó mới mở rộng ra màn hình máy tính.
- Kích thước nút bấm phải đủ lớn: Nút bấm phải có chiều cao tối thiểu 44 pixel để ngón tay cái có thể bấm trúng dễ dàng mà không bị chạm nhầm sang nút bên cạnh.
- Bố cục dạng thẻ dọc (Cards): Trên điện thoại, thay vì dùng một bảng biểu dài ngoằng 10 cột khó đọc, hãy chia mỗi bản ghi thành một chiếc thẻ hình chữ nhật gọn gàng gồm: Tên khách hàng, số tiền và trạng thái đơn hàng.
- Thanh điều hướng cố định dưới đáy màn hình (Bottom Navigation): Đặt 3 đến 4 nút quan trọng nhất ở cạnh dưới cùng để ngón tay cái có thể với tới trong 1 nốt nhạc.
3. Quy trình 3 bước dựng Wireframe bằng AI cực kỳ nhanh chóng
Bạn không cần phải thành thạo các phần mềm thiết kế chuyên nghiệp đắt đỏ như Figma hay Photoshop. Chúng ta có thể dùng chính AI để tạo ra các bản Wireframe dạng mã HTML thô chạy được ngay trong trình duyệt:
Bước 1: Tách từng màn hình từ tài liệu PRD
Lấy từng màn hình đã liệt kê trong bản PRD ra để xử lý độc lập. Ví dụ với màn hình Quản lý đơn hàng, bạn xác định rõ có 3 khối chính: Thanh tìm kiếm trên cùng, danh sách thẻ đơn hàng ở giữa, và nút dấu cộng thêm mới đơn hàng nổi ở góc dưới.
Bước 2: Ra lệnh cho AI tạo Wireframe trắng đen
Bạn sử dụng câu lệnh dứt khoát: Dựa trên màn hình Quản lý đơn hàng trong PRD, hãy tạo cho tôi một tệp HTML Wireframe trắng đen đơn giản. Chỉ dùng màu trắng, xám và đen. Bố cục tối ưu chuẩn cho màn hình điện thoại di động. Hiển thị 3 đơn hàng mẫu với các trạng thái: Đang xử lý (màu xám nhạt), Đã hoàn thành (màu đen) và Đã hủy (viền nét đứt).
Bước 3: Mở trình duyệt xem thử và tinh chỉnh trải nghiệm
Bạn mở tệp HTML đó lên trên trình duyệt của máy tính hoặc điện thoại. Dùng chuột bấm thử vào các nút, cuộn lên cuộn xuống xem mắt nhìn có dễ chịu không. Nếu thấy chỗ nào chữ quá nhỏ hoặc khoảng cách quá chật, bạn yêu cầu AI nới rộng khoảng cách đệm (padding) ra thêm 10 pixel.
4. Lợi ích khổng lồ khi bạn chốt xong bản Wireframe
Khi bạn đã có trong tay bộ Wireframe trắng đen hoàn chỉnh cho toàn bộ các màn hình:
- Tiết kiệm 70% thời gian viết mã: Khi AI bắt tay vào code giao diện thật, nó chỉ việc bám sát đúng cấu trúc khung sườn đã có, không bao giờ tự ý đảo lộn trật tự các phần tử.
- Phát hiện lỗi sai nghiệp vụ từ sớm: Nhìn vào khung tranh thực tế sẽ giúp bạn nhận ra ngay những chỗ thiếu sót: Ơ chỗ này thiếu ô chọn phương thức thanh toán rồi, hay nút xóa đơn hàng này để ở đây nhân viên bấm nhầm thì sao. Sửa trên bản vẽ chỉ mất 1 phút, nhưng nếu đã code xong mới đập đi sửa lại thì mất cả ngày trời.
5. Bước tiếp theo trên hành trình Vibe Coding
Khi ngôi nhà của bạn đã có bản vẽ thiết kế PRD và bộ khung xương Wireframe vững chắc, đã đến lúc chúng ta chuẩn bị phần linh hồn bên trong của phần mềm: Xây dựng cuốn sổ tay Cơ sở dữ liệu và chiếc két sắt bảo mật Backend.
Khám phá toàn bộ chuỗi bài viết tại đây: Chuyên mục Vibe Coding A-Z
