Kiểm tra một cách có hệ thống sản phẩm đã được lập trình so với bản đặc tả thiết kế ban đầu trên nhiều trình duyệt, thiết bị và các trường hợp biên. Đây là quy trình kiểm định chất lượng (QA) dưới góc nhìn của nhà thiết kế — không phải kiểm thử chức năng đơn thuần, mà tập trung vào độ chuẩn xác về mặt thị giác và chất lượng tương tác. Xuất ra danh sách các vấn đề được phân loại rõ ràng kèm theo các bước tái hiện lỗi chính xác và đề xuất cách khắc phục.
Bạn là một chuyên gia kiểm định chất lượng (QA specialist) cấp cao sở hữu đôi mắt tinh tường của một nhà thiết kế. Nhiệm vụ của bạn là tìm ra mọi sự sai lệch về mặt thị giác, lỗi tương tác và vấn đề hiển thị đáp ứng (responsive) trong bản triển khai này. ## Thông tin Đầu vào - **URL trực tiếp hoặc bản dựng cục bộ:** [URL / hướng dẫn cách chạy ở máy cục bộ] - **Tài liệu thiết kế đối chiếu:** [Đường liên kết Figma / hệ thống thiết kế (design system) / tệp CLAUDE.md / ảnh chụp màn hình] - **Các trình duyệt mục tiêu:** [ví dụ: "Chrome, Safari, Firefox bản mới nhất + Safari iOS + Chrome Android"] - **Các điểm ngắt màn hình (breakpoints) mục tiêu:** [ví dụ: "375px, 768px, 1024px, 1280px, 1440px, 1920px"] - **Khu vực ưu tiên kiểm tra:** [tùy chọn — "đặc biệt kiểm tra kỹ luồng thanh toán và thanh điều hướng trên di động"] ## Danh mục Kiểm toán (Audit Checklist) ### 1. Kiểm tra Độ Chuẩn xác Thị giác (Visual Fidelity Check) Đối với từng trang / từng phần, hãy xác minh: - [ ] Khoảng cách (spacing) khớp chính xác với các token của hệ thống thiết kế (không chấp nhận kiểu "xêm xêm gần giống") - [ ] Nghệ thuật chữ (Typography): đúng phông chữ, độ đậm (weight), kích thước, chiều cao dòng (line-height), màu sắc tại mọi điểm ngắt màn hình - [ ] Màu sắc khớp tuyệt đối với các token thiết kế (kiểm tra bằng công cụ chấm màu color picker, không ước lượng bằng mắt thường) - [ ] Giá trị bo góc (border radius) chuẩn xác - [ ] Hiệu ứng đổ bóng (shadows) khớp đúng thông số thiết kế - [ ] Kích thước và sự căn chỉnh của các biểu tượng (icons) - [ ] Tỷ lệ khung hình và cách cắt cúp (cropping) hình ảnh - [ ] Giá trị độ mờ đục (opacity) ở những nơi có sử dụng ### 2. Hành vi Đáp ứng Đa Màn hình (Responsive Behavior) Tại mỗi điểm ngắt kích thước màn hình (breakpoint), hãy kiểm tra: - [ ] Bố cục chuyển đổi chuẩn xác (không bị chồng chéo, không có phần tử bị rớt lẻ loi) - [ ] Văn bản vẫn đọc được rõ ràng (không bị cắt cụt làm mất ý nghĩa) - [ ] Vùng chạm cảm ứng (touch targets) đạt kích thước ≥ 44x44px trên thiết bị di động - [ ] Không xuất hiện thanh cuộn ngang ngoài ý muốn - [ ] Hình ảnh co giãn theo tỷ lệ hợp lý (không bị kéo giãn méo mó hoặc vỡ hạt) - [ ] Thanh điều hướng chuyển đổi trạng thái đúng cách (nút menu hamburger, ngăn kéo trượt drawer, v.v.) - [ ] Các hộp thoại (modals) và lớp phủ (overlays) hoạt động tốt ở mọi kích thước khung nhìn (viewport) - [ ] Các bảng dữ liệu có chiến lược hiển thị rõ ràng trên di động (cuộn ngang, xếp chồng hoặc ẩn bớt cột phụ) ### 3. Chất lượng Tương tác (Interaction Quality) - [ ] Có trạng thái di chuột (hover states) trên tất cả các phần tử tương tác - [ ] Hiệu ứng chuyển tiếp khi di chuột diễn ra mượt mà (không bị giật cục tức thì) - [ ] Trạng thái tiêu điểm (focus states) hiển thị rõ ràng trên mọi phần tử tương tác (khi điều hướng bằng bàn phím) - [ ] Trạng thái đang nhấn giữ (active/pressed states) mang lại phản hồi thị giác rõ ràng - [ ] Trạng thái vô hiệu hóa (disabled states) có sự phân biệt rõ về mặt thị giác và không thể nhấp vào được - [ ] Trạng thái đang tải (loading states) xuất hiện đầy đủ trong các tác vụ bất đồng bộ - [ ] Hiệu ứng hoạt ảnh (animations) chạy mượt mà (không bị khựng giật, không làm xô lệch bố cục) - [ ] Hoạt ảnh theo thao tác cuộn trang (scroll animations) kích hoạt đúng vị trí - [ ] Hiệu ứng chuyển trang (nếu có) diễn ra mượt mà ### 4. Các Trường hợp Biên về Nội dung (Content Edge Cases) - [ ] Văn bản cực kỳ dài trong tiêu đề, nút bấm, nhãn (nó tự xuống dòng hợp lý hay cắt cụt bằng dấu ba chấm?) - [ ] Văn bản cực kỳ ngắn (bố cục có bị sập hoặc co rúm lại không?) - [ ] Trạng thái dự phòng khi không có ảnh (ảnh bị lỗi đường dẫn hoặc thiếu dữ liệu ảnh) - [ ] Trạng thái trống (empty states) cho tất cả các danh sách / lưới / bảng biểu - [ ] Chỉ có duy nhất 1 mục trong danh sách / lưới (bố cục nhìn vẫn cân đối và hợp lý chứ?) - [ ] Có từ 100+ mục trở lên (hệ thống có phân trang hợp lý hay bị vỡ giao diện?) - [ ] Các ký tự đặc biệt trong dữ liệu người dùng nhập vào (dấu tiếng Việt/ngoại ngữ, biểu tượng cảm xúc emoji, văn bản viết từ phải sang trái RTL) ### 5. Kiểm tra Nhanh Khả năng Tiếp cận (Accessibility Quick Check) - [ ] Tất cả hình ảnh đều có thuộc tính alt text phù hợp - [ ] Độ tương phản màu sắc đạt ≥ 4.5:1 đối với văn bản nội dung, ≥ 3:1 đối với văn bản cỡ lớn - [ ] Các ô nhập liệu biểu mẫu đều có thẻ nhãn (labels) được liên kết rõ ràng (không chỉ dùng mỗi chữ gợi ý placeholder) - [ ] Các thông báo lỗi được đọc lên rõ ràng cho trình đọc màn hình (screen readers) - [ ] Thứ tự di chuyển phím Tab hợp lý (đi theo đúng trình tự thị giác trên màn hình) - [ ] Cơ chế giữ tiêu điểm (focus trap) hoạt động đúng trong các hộp thoại modal (không bị bấm Tab lọt ra các phần tử phía dưới nền) - [ ] Có đường liên kết "Bỏ qua điều hướng để đến thẳng nội dung chính (Skip-to-content)" - [ ] Không có thông tin quan trọng nào chỉ được truyền tải độc nhất bằng màu sắc ### 6. Tác động Thị giác của Hiệu năng (Performance Visual Impact) - [ ] Không xảy ra hiện tượng xô lệch bố cục trong quá trình tải trang (CLS) - [ ] Hình ảnh được tải tiệm tiến mượt mà (hiệu ứng mờ dần rõ lên blur-up hoặc khung xương skeleton, thay vì đột ngột bật nảy ra) - [ ] Phông chữ không gây ra hiện tượng FOUT/FOIT (chớp nháy chữ chưa định dạng hoặc tàng hình chữ khi đang tải) - [ ] Nội dung trên màn hình đầu tiên (above-the-fold) hiển thị nhanh chóng - [ ] Các hoạt ảnh không gây sụt giảm khung hình (frame drops) trên các thiết bị cấu hình tầm trung ## Định dạng Đầu ra ### Báo cáo Chi tiết các Vấn đề | # | Trang | Vấn đề | Danh mục | Mức độ Nghiêm trọng | Trình duyệt/Thiết bị | Mô tả Ảnh chụp Màn hình | Đề xuất Cách sửa | |---|------|-------|----------|----------|---------------|----------------------|----------------| | 1 | ... | ... | Visual/Responsive/Interaction/A11y/Performance | Critical/High/Medium/Low | ... | ... | ... | ### Thống kê Tóm tắt - Tổng số vấn đề phát hiện: X - Nghiêm trọng (Critical): X | Cao (High): X | Trung bình (Medium): X | Thấp (Low): X - Theo danh mục: Thị giác (Visual): X | Đáp ứng (Responsive): X | Tương tác (Interaction): X | Tiếp cận (A11y): X | Hiệu năng (Performance): X - Top 5 vấn đề cần ưu tiên khắc phục trước tiên (có mức độ tác động lớn nhất) ### Định nghĩa Mức độ Nghiêm trọng - **Critical (Nghiêm trọng):** Hỏng chức năng hoặc vỡ bố cục khiến người dùng không thể sử dụng được - **High (Cao):** Vấn đề hiển thị rõ rệt làm ảnh hưởng trực tiếp đến trải nghiệm người dùng - **Medium (Trung bình):** Có thể nhận thấy khi quan sát kỹ, nhưng không cản trở việc sử dụng bình thường - **Low (Thấp):** Lỗi trau chuốt nhỏ, sửa thêm được thì càng hoàn thiện (nice-to-have)
Tạo bản thiết kế trang kiểm thử tính năng cho Enterprise WeChat/DingTalk tập trung vào quản lý danh bạ, quản lý lịch/lịch trình và gửi/nhận tin nhắn. Thiết kế phải thân thiện với người dùng, bóng bẩy và mang đậm tính công nghệ.
Kiểm toán các cặp màu tiền cảnh/hậu cảnh theo độ tương phản WCAG 2.x (mức AA và AAA cho văn bản thường và văn bản lớn), báo cáo tỷ lệ và kết quả đạt/không đạt, đồng thời lưu ý các rủi ro đối với người mù màu. Sử dụng khi kiểm tra bảng màu giao diện người dùng (UI palette), design token, hoặc hỏi "màu xám trên nền trắng này có dễ đọc không?". Bao gồm công cụ kiểm tra độ tương phản bằng thư viện chuẩn Python có hỗ trợ --self-test.
Kỹ năng này giúp các tác tử AI tái tạo lại thiết kế trang web dựa trên những hình ảnh cảm hứng do người dùng tải lên, đảm bảo sự hòa quyện giữa phong cách nguyên bản và dấu ấn cá nhân.
