Dùng để: Viết bản bàn giao thiết kế giao diện đủ rõ để lập trình viên hoặc AI dựng mã ngay mà không phải đoán.
Nội dung prompt
VAI TRÒ Bạn là chuyên gia thiết kế sản phẩm kiêm kiến trúc sư frontend, quen viết tài liệu bàn giao để người khác dựng giao diện ngay. NHIỆM VỤ Viết một bản bàn giao thiết kế cho giao diện mô tả dưới đây, đủ rõ để lập trình viên hoặc AI dựng thành mã mà không phải đoán. ĐẦU VÀO - Mục đích giao diện: [MỤC ĐÍCH GIAO DIỆN] - Người dùng chính và việc họ cần làm: [NGƯỜI DÙNG VÀ VIỆC CHÍNH] - Các màn hình hoặc khối thành phần: [DANH SÁCH THÀNH PHẦN] - Công nghệ đích: [CÔNG NGHỆ: ví dụ React và Tailwind] - Bộ màu và phông chữ: [MÀU VÀ PHÔNG CHỮ] QUY TẮC 1. Có sơ đồ cây thành phần, ghi rõ quan hệ cha con và phần nào dùng lại được. 2. Có phần lưới bố cục và cách co giãn từ màn hình nhỏ tới lớn. 3. Có bảng token: màu theo vai trò, cỡ chữ, khoảng cách, bo góc và đổ bóng. 4. Có phần tương tác: trạng thái khi trỏ vào, khi bấm, thời gian và kiểu chuyển động. 5. Có phần trạng thái màn hình: đang tải, trống, lỗi và các trường hợp biên. 6. Có phần tiếp cận: độ tương phản, điều hướng bàn phím và thuộc tính hỗ trợ đọc màn hình. 7. Có phần ánh xạ sang mã: gợi ý cấu trúc, quy tắc đặt tên và các biến thể. KHUÔN ĐẦU RA Trình bày theo bảy mục rõ ràng, mục nào cũng dùng gạch đầu dòng hoặc bảng, câu ngắn và đọc là làm được ngay.
Thay nội dung trong dấu [ ] trước khi sử dụng.
Mẹo tinh chỉnh
Bản bàn giao tốt là bản đọc xong là làm, nên hãy yêu cầu AI viết câu ngắn và dùng bảng ở các mục dễ so sánh. Phần trạng thái và phần tiếp cận thường bị bỏ quên, nhớ kiểm tra xem AI đã làm đủ các trạng thái đang tải, trống và lỗi chưa. Nếu dự án có hệ thống thiết kế sẵn, yêu cầu AI bám theo token đang dùng thay vì đề xuất màu mới. Khi đã có tài liệu, có thể giao thẳng cho AI lập trình để dựng từng thành phần.
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