Dùng để: Lên kế hoạch dashboard React giám sát máy chủ theo thời gian thực, giao diện sáng và gọn gàng.
Nội dung prompt
VAI TRÒ Bạn là lập trình viên frontend thành thạo React và thư viện biểu đồ. NHIỆM VỤ Thiết kế dashboard React giám sát máy chủ theo thời gian thực, giao diện sáng và gọn. ĐẦU VÀO - Chỉ số theo dõi: [VÍ DỤ: đọc ghi đĩa, CPU, RAM, mạng] - Nguồn dữ liệu: [VÍ DỤ: điểm cuối API, dịch vụ đẩy dữ liệu] - Tần suất làm mới: [VÍ DỤ: 1, 3, 5, 10 giây] - Phông chữ: [VÍ DỤ: Quicksand, độ dày tối thiểu 400] - Thiết bị dùng: [VÍ DỤ: máy tính và điện thoại] QUY TẮC 1. Vẽ chỉ số tổng, đọc và ghi trên cùng một biểu đồ khi phù hợp. 2. Cho người dùng chọn tần suất làm mới bằng nút bấm. 3. Dùng giao diện sáng, khoảng trắng rộng, bố cục tinh gọn. 4. Cập nhật dữ liệu mượt, tránh giật khi luồng về liên tục. 5. Giao diện co giãn tốt trên nhiều kích thước màn hình. 6. Tách phần lấy dữ liệu và phần hiển thị thành hai lớp. 7. Hiển thị trạng thái mất kết nối và nút thử lại. KHUÔN ĐẦU RA 1. Cấu trúc thư mục và component. 2. Mô tả luồng lấy và vẽ dữ liệu. 3. Các thông số cấu hình. 4. Cách tối ưu hiệu năng và kiểm thử.
Thay nội dung trong dấu [ ] trước khi sử dụng.
Mẹo tinh chỉnh
Vẽ nhiều đường trên cùng một biểu đồ giúp so sánh nhưng dễ rối, nên hãy giới hạn số đường và dùng màu tương phản. Nếu dữ liệu về quá dày, yêu cầu gộp theo chu kỳ thay vì vẽ từng điểm. Cần dọn dẹp khi component bị gỡ để tránh rò rỉ bộ nhớ phía trình duyệt. Cuối cùng, hiển thị rõ thời điểm cập nhật gần nhất để người dùng biết dữ liệu còn mới hay không.
Prompt khác cùng nhóm
Dựng ứng dụng trắc nghiệm tương tác bằng JavaScriptCho ngân hàng câu hỏi và thiết lập, nhận về app trắc nghiệm: nhiều dạng câu, đếm ngược, chấm điểm, xem lại bài và bảng điểm cao.Xem promptDựng ứng dụng quản lý thu chi cá nhânMô tả nhu cầu tài chính, nhận về app quản lý thu chi: bảng điều khiển, phân loại giao dịch, biểu đồ, mục tiêu ngân sách và sao lưu.Xem promptDựng ứng dụng web tạo hóa đơn PDF bằng Node.jsMô tả nguồn đơn hàng và quy tắc hoa hồng, nhận về kiến trúc ứng dụng Node.js xuất hai tệp PDF: bảng chi tiết và hóa đơn.Xem promptDựng ứng dụng ghi chú Markdown hai màn hìnhMô tả nhu cầu ghi chú, nhận về app hai khung soạn và xem trước, hỗ trợ bảng, khối mã, công thức và lưu trong trình duyệt.Xem promptDựng Telegram Mini App điểm danh ca làm việcMô tả ca làm và vai trò, nhận về mini app: chấm công vào ra, xác thực người dùng, xem lịch ca và trang quản trị xếp ca.Xem promptLập quy trình xử lý lỗ hổng bảo mật CVEĐưa danh sách lỗ hổng và hệ thống đang dùng, nhận về quy trình phân tích nguyên nhân, chọn mức ưu tiên và tài liệu tuân thủ.Xem promptĐóng vai kỹ sư phần mềm nhúng ô tô theo chuẩn AUTOSARĐưa bối cảnh vi điều khiển và yêu cầu, nhận về cách chia lớp phần mềm, danh sách mô-đun và điểm kiểm tra an toàn.Xem promptTạo mẫu giao diện ứng dụng trò chuyện AI cho AndroidMô tả tính năng và địa chỉ API, nhận về bản mẫu giao diện tối gồm bốn màn hình và luồng điều hướng bằng thanh cạnh trái.Xem promptDựng game đua xe 3D bằng Three.jsMô tả đường đua và chế độ chơi, nhận về game đua xe: mô phỏng vật lý, đối thủ AI, HUD đầy đủ, hiệu ứng khói và thời tiết.Xem prompt