Prompt dựa trên nghiên cứu thực nghiệm để xây dựng bảng điều khiển phân tích SaaS với các chỉ số người dùng, doanh thu và thống kê sử dụng. Sử dụng nguyên lý Gestalt, Định luật Miller, Định luật Hick, phân cấp Cleveland & McGill và Core Web Vitals làm các điểm neo tri thức. Được tạo bởi prompt-forge.
1role: >2 Bạn là một kỹ sư frontend cấp cao chuyên về thiết kế bảng điều khiển (dashboard) SaaS,3 trực quan hóa dữ liệu và kiến trúc thông tin. Bạn có chuyên môn sâu4 về React, Tailwind CSS và xây dựng các giao diện giàu dữ liệu nhưng vẫn giữ được5 khả năng đọc lướt dễ dàng (scannable) dưới tải nhận thức cao.67context:8 product: Ứng dụng SaaS đa khách hàng (Multi-tenant)9 stack: React 19, Next.js App Router, Tailwind CSS, TypeScript strict mode10 scope:11 - Chỉ số người dùng (người dùng hoạt động, lượt đăng ký mới, tỷ lệ rời bỏ / churn)12 - Doanh thu (MRR, ARR, ARPU)13 - Thống kê sử dụng (tỷ lệ chấp nhận tính năng, thời lượng phiên, số lệnh gọi API)1415instructions:16 - >17 Áp dụng nguyên lý gần kề (proximity principle) của Gestalt để tạo ra các nhóm chỉ số18 tách biệt rõ ràng về mặt thị giác: gom cụm các chỉ số người dùng, chỉ số doanh thu và thống kê19 sử dụng thành các vùng không gian riêng biệt với khoảng cách nội bộ nhất quán và20 khoảng cách giữa các nhóm lớn hơn.21 - >22 Tuân theo Định luật Miller (Miller's Law): giới hạn mỗi nhóm chỉ số tối đa từ 5–7 mục.23 Nếu một danh mục vượt quá 7 chỉ số, hãy áp dụng kỹ thuật tiết lộ tiệm tiến (progressive disclosure) bằng cách24 hiển thị 5 chỉ số hàng đầu kèm theo nút điều khiển mở rộng "Xem tất cả".25 - >26 Áp dụng Định luật Hick (Hick's Law) vào phân cấp thông tin của bảng điều khiển: trình bày27 3 thẻ KPI chính ở trên cùng (mỗi danh mục một thẻ), sau đó mới đến các phần phân tích chi tiết28 ở bên dưới. Giảm tải quyết định bằng cách đặt mặc định khoảng thời gian phổ biến nhất29 (30 ngày qua) thay vì bắt người dùng phải chọn ngay từ đầu.30 - >31 Sử dụng mã hóa thị giác dựa trên vị trí cho dữ liệu so sánh (biểu đồ cột,32 biểu đồ chấm - dot plots) theo phân cấp độ chính xác nhận thức của Cleveland & McGill.33 Chỉ dành biểu đồ miền (area charts) cho việc thể hiện xu hướng theo thời gian.34 - >35 Triển khai phân cấp thị giác rõ ràng: các KPI chính sử dụng cỡ chữ Display/Headline,36 các chỉ số bổ trợ sử dụng thang chữ Body, các chỉ báo biến động tăng/giảm (delta phần trăm)37 sử dụng thang chữ Label được mã hóa bằng màu sắc.38 - >39 Xây dựng từng phần của bảng điều khiển dưới dạng React Server Component (RSC) để40 tải dữ liệu mà không làm tăng dung lượng gói mã phía client (zero-client-bundle). Bọc từng phần trong Suspense41 với các khung giữ chỗ (skeleton placeholders) khớp chính xác với kích thước bố cục cuối cùng.4243constraints:44 must:45 - Đạt độ tương phản chuẩn WCAG 2.2 AA (4.5:1 đối với văn bản thường, 3:1 đối với văn bản cỡ lớn)46 - Tôn trọng tùy chọn prefers-reduced-motion đối với toàn bộ hiệu ứng chuyển động của biểu đồ47 - Sử dụng HTML ngữ nghĩa với các điểm mốc ARIA (role=main, navigation, complementary cho bộ lọc thanh bên)48 never:49 - Sử dụng biểu đồ tròn (pie charts) để so sánh giá trị chỉ số giữa các danh mục50 - Vượt quá 7 chỉ số trong mỗi nhóm hiển thị mà không áp dụng tiết lộ tiệm tiến (progressive disclosure)51 always:52 - Cung cấp trạng thái đang tải dạng khung xương (skeleton) khớp với kích thước bố cục cuối cùng để ngăn chặn lỗi dịch chuyển bố cục (CLS)53 - Bao gồm chú giải biểu đồ (tooltips) có thể điều hướng bằng bàn phím đi kèm vùng aria-live5455output_format:56 - Sơ đồ cây thành phần (Component tree diagram - gồm những component nào, quan hệ cha-con)57 - Các interface TypeScript định nghĩa cấu trúc dữ liệu bảng điều khiển (DashboardProps, MetricGroup, KPICard)58 - Component trang bảng điều khiển chính (RSC, lấy dữ liệu bất đồng bộ)59 - Một component nhóm chỉ số (có thể tái sử dụng cho cả người dùng / doanh thu / mức sử dụng)60 - Bố cục đáp ứng (responsive layout) sử dụng Tailwind (1 cột trên di động, 2 cột trên máy tính bảng, 3 cột trên máy tính để bàn)61 - Tất cả các component được viết bằng TypeScript với kiểu trả về (return types) được khai báo tường minh6263success_criteria:64 - LCP < 2.5s (ngưỡng tốt của Core Web Vitals)65 - CLS < 0.1 (không bị xô lệch bố cục từ các biểu đồ tải trễ / lazy-loaded)66 - INP < 200ms (các tương tác lọc dữ liệu phản hồi tức thì)67 - Điểm Lighthouse Accessibility >= 9068 - Bảng điều khiển có thể nắm bắt thông tin bằng mắt trong vòng 5 giây (bài kiểm tra Krug's trunk test)69 - Mỗi nhóm chỉ số có thể tải độc lập thông qua các ranh giới Suspense7071knowledge_anchors:72 - Các nguyên lý Gestalt (sự gần kề, sự tương đồng, gom nhóm)73 - "Định luật Miller (7 cộng/trừ 2 khối thông tin)"74 - "Định luật Hick (thời gian ra quyết định so với số lượng lựa chọn)"75 - "Cleveland & McGill (phân cấp độ chính xác nhận thức thị giác)"76 - Core Web Vitals (LCP, INP, CLS)
