Dùng để: Dựng công cụ chọn màu và gợi ý phối màu chạy trên trình duyệt, dùng được cho cả nhà thiết kế lẫn lập trình viên.
Nội dung prompt
VAI TRÒ Bạn là lập trình viên frontend chuyên dựng công cụ thiết kế chạy trên trình duyệt. NHIỆM VỤ Dựng một công cụ chọn và phối màu dùng được thật, chạy hoàn toàn phía trình duyệt bằng HTML, CSS và JavaScript. ĐẦU VÀO - Cách chọn màu: [VÍ DỤ: BÁNH XE MÀU, THANH TRƯỢT, Ô NHẬP MÃ] - Định dạng cần hỗ trợ: [VÍ DỤ: HEX, RGB, HSL, CMYK] - Quy tắc hòa sắc: [VÍ DỤ: TƯƠNG PHẢN, TƯƠNG ĐỒNG, TAM GIÁC] - Tính năng thêm: [VÍ DỤ: LƯU BẢNG MÀU, XUẤT CSS, KIỂM TRA TƯƠNG PHẢN] QUY TẮC 1. Chuyển đổi qua lại giữa các định dạng màu đúng và cập nhật tức thì khi kéo chọn. 2. Có nút sao chép nhanh mã màu ở từng định dạng. 3. Sinh bảng màu hài hòa theo quy tắc người dùng chọn. 4. Cho lưu bảng màu yêu thích theo bộ sưu tập có tên và xuất ra tệp. 5. Thêm phần kiểm tra độ tương phản giữa chữ và nền theo ngưỡng dễ đọc. 6. Giao diện gọn, thao tác được trên màn hình cảm ứng, mã tách rõ phần tính và phần hiển thị. KHUÔN ĐẦU RA 1. Bố cục màn hình. 2. Mã HTML, CSS và JavaScript hoàn chỉnh. 3. Danh sách chức năng đã làm và chức năng để mở rộng sau.
Thay nội dung trong dấu [ ] trước khi sử dụng.
Mẹo tinh chỉnh
Công cụ màu hữu ích khi kết quả chuyển đổi chính xác tuyệt đối, nên hãy yêu cầu viết hàm riêng cho từng phép đổi thay vì gộp chung. Nếu làm cho đội thiết kế, thêm phần đặt tên màu tự động để mã dễ nhớ. Bạn có thể bổ sung chế độ xem thử mã màu trên nút, chữ và nền cùng lúc. Khi cần dùng lại nhiều lần, yêu cầu xuất bảng màu ra biến CSS để nhúng thẳng vào dự án. Cuối cùng, kiểm tra lại trên màn hình nhỏ để chắc các thanh trượt vẫn dễ kéo.
Prompt khác cùng nhóm
Dựng ứng dụng web tạo avatar cá nhân hóaNêu các phong cách và trường mô tả, nhận về mã ứng dụng web tạo avatar với lưới kết quả và lịch sử lưu trên máy.Xem promptTư vấn di chuyển hệ thống lên AWSMô tả hệ thống hiện tại, nhận về phương án di chuyển lên AWS, điểm cần cân nhắc và thứ tự thực hiện.Xem promptĐóng vai chuyên gia lập trình Swift và iOSNêu đoạn mã và mục tiêu, nhận về hướng dẫn Swift hiện đại, SwiftUI và xử lý bất đồng bộ theo chuẩn của Apple.Xem promptDựng trang HTML hiện lời nhắn khi nhấp chuộtĐiền lời nhắn và tông màu, nhận về một tệp HTML nhẹ, nhấp vào màn hình là hiện thông điệp.Xem promptThiết kế hệ thống nhiều tác nhân AINêu bài toán và các vai trò, nhận về sơ đồ hệ thống nhiều tác nhân, cách nhớ ngữ cảnh và hàng rào an toàn.Xem promptViết Bash script tự động hóa chuẩn chuyên nghiệpMô tả công việc cần tự động, nhận về Bash script có xử lý lỗi, tô màu đầu ra và cờ trợ giúp đầy đủ.Xem promptDựng ứng dụng web nhật ký và phản hồi bản thânMô tả lĩnh vực và giọng phản hồi, nhận về đặc tả ứng dụng web ghi nhật ký ngày và nhận lại lời nhận xét cá nhân.Xem promptThiết kế hệ thống điều hướng cho ứng dụng di độngMô tả ứng dụng và số màn hình, nhận về phương án điều hướng dễ hiểu kèm lý do và các điểm cần kiểm thử.Xem promptĐóng vai kiến trúc sư kỹ thuật di động Native và CloudNêu bài toán ứng dụng di động, nhận về phương án kiến trúc Native kết hợp Cloud chạy tốt cả khi mất mạng.Xem prompt