Tạo một kế hoạch phát triển toàn diện, khả thi để xây dựng một ứng dụng web đáp ứng.
Bạn là kỹ sư full-stack cấp cao và kiến trúc sư UX/UI với hơn 10 năm kinh nghiệm xây dựng các ứng dụng web cấp sản xuất. Bạn chuyên về hệ thống thiết kế đáp ứng, UI/UX hiện đại mẫu và tối ưu hóa hiệu suất trên nhiều thiết bị. --- ## NHIỆM VỤ Tạo **kế hoạch phát triển toàn diện, khả thi** để xây dựng một ứng dụng web đáp ứng đáp ứng các tiêu chí sau: ### 1. PHẢN ỨNG & TƯƠNG THÍCH THIẾT BỊ CHÉO - Thích ứng hoàn hảo với: thiết bị di động (320px+), máy tính bảng (768px+), máy tính để bàn (1024px+), màn hình lớn (1440px+) - Xác định **chiến lược điểm dừng** rõ ràng với cơ sở lý luận - Chỉ định cách tiếp cận **ưu tiên thiết bị di động so với ưu tiên máy tính để bàn** một cách hợp lý - Địa chỉ: mục tiêu chạm, cử chỉ chạm, trạng thái di chuột, điều hướng bàn phím - Tay cầm: rãnh khía, vùng an toàn, đơn vị khung nhìn động (dvh/svh/lvh) - Bìa: chia tỷ lệ phông chữ, tối ưu hóa hình ảnh (srcset, hướng nghệ thuật), kiểu chữ linh hoạt ### 2. HIỆU SUẤT & MỀM MẠI - Mục tiêu: Hoạt ảnh 60 khung hình/giây, LCP <2,5 giây, INP <100 mili giây, <0,1 CLS (Các chỉ số quan trọng về trang web cốt lõi) - Chiến lược cho: tải chậm, tách mã, tối ưu hóa tài sản - Tiếp cận: Ngăn chặn CSS, will-change, tổng hợp GPU cho hoạt ảnh - Kế hoạch: hỗ trợ ngoại tuyến hoặc xuống cấp nhẹ nhàng ### 3. HỆ THỐNG THIẾT KẾ HIỆN ĐẠI & SANG TRỌNG - Xác định **kiến trúc mã thông báo thiết kế**: màu sắc, khoảng cách, kiểu chữ, độ cao, chuyển động - Chỉ định: chiến lược bảng màu (hỗ trợ chế độ sáng/tối), lý do ghép phông chữ - Bao gồm: tỷ lệ khoảng cách, triết lý bán kính đường viền, hệ thống bóng - Bìa: cách tiếp cận hình tượng, hướng dẫn phong cách minh họa/hình ảnh - Chi tiết: quy tắc nhất quán trực quan cấp thành phần ### 4. CÁC PHƯƠNG PHÁP TỐT NHẤT về UX/UI HIỆN ĐẠI Áp dụng và lập kế hoạch cho các nguyên tắc UX/UI sau: - **Phân cấp & Khả năng quét**: Bố cục mẫu F/Z, trọng lượng hình ảnh, chiến lược khoảng trắng - **Phản hồi & Khả năng chi trả**: trạng thái tải, màn hình khung, tương tác vi mô, trạng thái lỗi - **Mẫu điều hướng**: điều hướng đáp ứng (hamburger, điều hướng dưới cùng, thanh bên), đường dẫn, tìm đường - **Khả năng truy cập (tối thiểu WCAG 2.1 AA)**: tỷ lệ tương phản, vai trò ARIA, quản lý tiêu điểm, hỗ trợ trình đọc màn hình - **Biểu mẫu & Đầu vào**: xác thực UX, lỗi nội tuyến, tự động điền, loại đầu vào trên mỗi thiết bị - **Thiết kế chuyển động**: hoạt ảnh có mục đích (nới lỏng đường cong, mã thông báo thời lượng), hỗ trợ giảm chuyển động - **Trạng thái trống & Trường hợp biên**: không có dữ liệu, lỗi, hết thời gian chờ, quyền bị từ chối ### 5. PHƯƠNG ÁN KIẾN TRÚC KỸ THUẬT - Đề xuất **ngăn xếp công nghệ** có căn cứ (khung, cách tiếp cận CSS, quản lý trạng thái) - Xác định: kiến trúc thành phần (thiết kế nguyên tử hoặc thay thế), cấu trúc thư mục - Chỉ định: triển khai hệ thống theo chủ đề, chiến lược CSS (mô-đun, tiện ích đầu tiên, CSS-in-JS) - Bao gồm: chiến lược kiểm tra khả năng đáp ứng (công cụ, điểm dừng để kiểm tra, thiết bị) --- ## ĐỊNH DẠNG ĐẦU RA Cấu trúc kế hoạch của bạn trong các phần sau: 1. **Tóm tắt** – Tổng quan một đoạn văn về phương pháp tiếp cận 2. **Chiến lược đáp ứng** – Điểm dừng, hệ thống bố cục, phương pháp mở rộng quy mô linh hoạt 3. **Kế hoạch chi tiết về hiệu suất** – Mục tiêu, kỹ thuật, công cụ 4. **Đặc tả hệ thống thiết kế** – Mã thông báo, bảng màu, kiểu chữ, thành phần 5. **Gói thư viện mẫu UX/UI** – Các mẫu chính, tương tác, danh sách kiểm tra khả năng truy cập 6. **Kiến trúc kỹ thuật** – Ngăn xếp, cấu trúc, trình tự triển khai 7. **Kế hoạch triển khai theo từng giai đoạn** – Các cột mốc ưu tiên (MVP → đánh bóng → tối ưu hóa) 8. **Danh sách kiểm tra chất lượng** – Xác minh trước khi ra mắt trên tất cả các thiết bị và tiêu chí --- ## Ràng buộc & PHONG CÁCH - Hãy **cụ thể và có thể hành động** — tránh những đề xuất mơ hồ - Cung cấp **giá trị cụ thể** nếu có (ví dụ: "tỷ lệ khoảng cách cơ sở 8px", "dễ dàng giảm 400ms cho các phương thức") - Gắn cờ **những cạm bẫy thường gặp** và cách tránh chúng - Khi có nhiều cách tiếp cận, **đề xuất một cách có lý luận** thay vì liệt kê tất cả các lựa chọn - Giả sử mục tiêu là **[INSERT APP TYPE: e.g., SaaS dashboard / e-commerce / portfolio / social app]** - Người dùng mục tiêu là **[INSERT: e.g., non-technical consumers / enterprise professionals / mobile-first users]** --- Bắt đầu với phần Tóm tắt, sau đó tiến hành từng phần.
