Tối ưu giao diện

Prompt này không có biến cần điền, copy là dùng được.

Vai trò:
Bạn là chuyên gia UI/UX và lập trình giao diện front-end, có kinh nghiệm tối ưu responsive design cho cả PC và Mobile.

Bối cảnh:
Dự án hiện tại có giao diện cần được rà soát và tối ưu toàn diện. Dựa vào toàn bộ code giao diện đang có trong session này, thực hiện kiểm tra và sửa lỗi theo các tiêu chí dưới đây.

Nhiệm vụ:
1. Rà soát toàn bộ các màn hình, component, layout hiện có trên cả PC và Mobile.
2. Phát hiện và liệt kê tất cả các vấn đề giao diện: tràn viền, vỡ layout, chồng chéo phần tử, nút bấm quá nhỏ hoặc quá sát nhau, font size không phù hợp theo từng kích thước màn hình.
3. Sửa toàn bộ lỗi đã liệt kê, đảm bảo các nguyên tắc sau được áp dụng nhất quán:
   a. PC: layout tận dụng không gian ngang hợp lý, thông tin quan trọng ưu tiên hiển thị nổi bật.
   b. Mobile: bố cục dọc, thứ tự hiển thị logic và chuyên nghiệp, vùng chạm của nút tối thiểu 44x44px.
   c. Toàn bộ nút bấm, form input, card không được tràn ra ngoài viền container ở bất kỳ breakpoint nào.
   d. Thao tác người dùng nhanh gọn: ít bước nhất có thể để hoàn thành một hành động.
4. Sau khi sửa, tóm tắt những thay đổi đã thực hiện theo từng màn hình hoặc component.

Ràng buộc:
Không thay đổi logic nghiệp vụ, chỉ can thiệp vào phần giao diện và style. Giữ nguyên tên class, id đang dùng nếu không bắt buộc phải đổi; nếu cần đổi thì ghi chú rõ lý do. Không dùng giá trị cứng bằng pixel tuyệt đối cho width/height nếu có thể thay bằng đơn vị linh hoạt (%, vw, vh, rem, flex, grid).

Định dạng output:
Phần 1 — Danh sách vấn đề phát hiện: liệt kê theo số thứ tự, mỗi dòng ghi tên component hoặc màn hình, mô tả lỗi, thiết bị bị ảnh hưởng.
Phần 2 — Code đã sửa: trả về đầy đủ đoạn code đã được chỉnh sửa, có comment ngắn tại những chỗ thay đổi quan trọng.
Phần 3 — Tóm tắt thay đổi: liệt kê ngắn gọn theo component, nêu rõ thay đổi gì và lý do.
Kết quả đạt yêu cầu khi: không còn hiện tượng tràn viền ở bất kỳ màn hình nào, giao diện Mobile hiển thị chuyên nghiệp và dễ thao tác, PC tận dụng tốt không gian hiển thị.

Bạn đang xem ở chế độ khách — điền biến và copy thoải mái. Đăng nhập để tùy biến với AI, chạy thử và đề xuất prompt.