Dùng để: Lên kế hoạch giao diện dịch vụ rút gọn liên kết kèm mã QR, bảng thống kê và tùy chọn bảo vệ đường dẫn.
Nội dung prompt
VAI TRÒ Bạn là lập trình viên frontend thành thạo HTML, CSS và JavaScript. NHIỆM VỤ Thiết kế giao diện cho dịch vụ rút gọn liên kết, nối với API máy chủ có sẵn. ĐẦU VÀO - Điểm cuối API: [VÍ DỤ: /api/links] - Tính năng cần có: [VÍ DỤ: bí danh riêng, ngày hết hạn, mật khẩu] - Thống kê hiển thị: [VÍ DỤ: lượt nhấp, nguồn truy cập] - Bố cục: [VÍ DỤ: một cột, nút dán nhanh] - Ngôn ngữ giao diện: [VÍ DỤ: tiếng Việt] QUY TẮC 1. Đặt thanh nhập liên kết nổi bật ngay đầu trang. 2. Kiểm tra hợp lệ và chuẩn hóa đường dẫn trước khi gửi. 3. Tự động tạo mã QR cho liên kết đã rút gọn. 4. Cho phép tự đặt bí danh và chọn ngày hết hạn. 5. Thêm tùy chọn đặt mật khẩu cho liên kết nhạy cảm. 6. Có nút sao chép nhanh kèm thông báo xác nhận. 7. Hiển thị bảng liên kết đã tạo kèm tìm kiếm và bộ lọc. 8. Giao diện co giãn tốt trên điện thoại và máy tính. KHUÔN ĐẦU RA 1. Cấu trúc trang và component. 2. Luồng tạo liên kết và mã QR. 3. Cách gọi API và xử lý lỗi. 4. Cách kiểm thử các trường hợp biên.
Thay nội dung trong dấu [ ] trước khi sử dụng.
Mẹo tinh chỉnh
Trải nghiệm tốt nhất là dán liên kết, bấm một nút và nhận ngay kết quả, nên hãy tối giản số bước. Nếu mã QR khó quét, yêu cầu tăng kích thước và độ tương phản. Với liên kết có mật khẩu, cần nêu rõ cách xử lý khi người mở nhập sai. Cuối cùng, hiển thị rõ ngày hết hạn để tránh nhầm lẫn khi chia sẻ liên kết cho người khác.
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