Câu lệnh này chuyển đổi một ý tưởng giao diện (UI) thành bản hồ sơ bàn giao thiết kế (design handoff) có cấu trúc hoàn chỉnh, sẵn sàng để triển khai mã nguồn và được tối ưu hóa cho cả lập trình viên frontend lẫn các tác nhân lập trình AI (AI coding agents). Nó xóa bỏ khoảng cách truyền thống giữa khâu thiết kế và phát triển phần mềm bằng cách chuyển hóa đầu vào trực quan hoặc ý tưởng thành một bản đặc tả cấp hệ thống bao gồm kiến trúc thành phần (component), hệ thống bố cục, biến thiết kế (design tokens), logic tương tác và cách xử lý trạng thái.
Bạn là một nhà thiết kế sản phẩm cấp cao kiêm kiến trúc sư frontend. Hãy tạo một hồ sơ bàn giao thiết kế (design handoff) hoàn chỉnh, sẵn sàng đưa vào triển khai mã nguồn, được tối ưu hóa cho các tác nhân lập trình AI (AI coding agents) và lập trình viên frontend. Hãy trình bày có cấu trúc chặt chẽ, chính xác và hướng theo tư duy hệ thống. --- ### 1. Tổng Quan Hệ Thống - Mục đích của giao diện (UI) - Luồng người dùng cốt lõi (Core user flow) ### 2. Kiến Trúc Thành Phần (Component Architecture) - Cây thành phần (component tree) đầy đủ - Mối quan hệ cha - con giữa các thành phần - Các thành phần có thể tái sử dụng ### 3. Hệ Thống Bố Cục (Layout System) - Hệ thống lưới (số cột, thang đo khoảng cách) - Hành vi đáp ứng các kích thước màn hình (responsive từ thiết bị di động → máy tính để bàn) ### 4. Biến Thiết Kế (Design Tokens) - Hệ thống màu sắc (vai trò theo ngữ nghĩa) - Thang tỷ lệ chữ viết (Typography scale) - Hệ thống khoảng cách (Spacing system) - Độ bo góc (Radius) / độ nổi bóng đổ (elevation) ### 5. Thiết Kế Tương Tác - Trạng thái di chuột (hover) / kích hoạt (active) - Hiệu ứng chuyển tiếp (thời lượng timing, hàm gia tốc easing) - Các vi tương tác (Micro-interactions) ### 6. Logic Trạng Thái (State Logic) - Đang tải dữ liệu (Loading) - Trạng thái trống chưa có dữ liệu (Empty) - Báo lỗi (Error) - Các trạng thái biên đặc biệt (Edge states) ### 7. Khả Năng Tiếp Cận (Accessibility) - Độ tương phản màu sắc - Điều hướng bằng bàn phím - Thuộc tính ARIA (nếu áp dụng) ### 8. Ánh Xạ Sang Frontend (Frontend Mapping) - Đề xuất cấu trúc mã nguồn React/Tailwind - Quy chuẩn đặt tên component - Các thuộc tính truyền vào (Props) và biến thể (variants) --- ### Định Dạng Đầu Ra: **Tổng Quan (Overview)** **Cây Thành Phần (Component Tree)** **Biến Thiết Kế (Design Tokens)** **Quy Tắc Tương Tác (Interaction Rules)** **Xử Lý Trạng Thái (State Handling)** **Ghi Chú Về Khả Năng Tiếp Cận (Accessibility Notes)** **Ánh Xạ Sang Frontend (Frontend Mapping)** **Lưu Ý Khi Triển Khai (Implementation Notes)**
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.
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ệ.
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.
