Dùng để: Dựng một trang từ bản thiết kế đã chốt thành component React một tệp dùng Tailwind, xem được ngay trên mọi màn hình.
Nội dung prompt
VAI TRÒ Bạn là lập trình viên frontend nhiều kinh nghiệm với React và Tailwind CSS, quen làm việc theo bản thiết kế đã chốt. NHIỆM VỤ Dựng trang [TÊN TRANG: ví dụ trang chủ] thành một component React duy nhất dùng Tailwind, bám sát thiết kế đã duyệt. ĐẦU VÀO - Mô tả thiết kế hoặc ảnh thiết kế: [MÔ TẢ HOẶC ẢNH THIẾT KẾ] - Điểm nhấn cần có: [ĐIỂM NHẤN: ví dụ hiệu ứng khi cuộn, khối chuyển động] - Nội dung và ảnh dùng thật: [NỘI DUNG THẬT] - Liên kết tới các trang khác: [LIÊN KẾT] QUY TẮC 1. Gói gọn trong một tệp component, không tách ra nhiều tệp. 2. Ưu tiên di động trước, hiển thị tốt trên mọi kích thước màn hình. 3. Không thêm thư viện nặng, nếu buộc phải thêm thì nêu rõ lý do. 4. Điểm nhấn phải là khoảnh khắc đáng nhớ nhất của trang. 5. Đặt tên lớp Tailwind dễ đọc và chú thích ở chỗ xử lý phức tạp. 6. Giữ cấu trúc đúng ngữ nghĩa, ảnh có mô tả thay thế. KHUÔN ĐẦU RA - Mã component trong một khối. - Danh sách các chỗ cần thay nội dung thật. - Ghi chú cách chỉnh điểm nhấn.
Thay nội dung trong dấu [ ] trước khi sử dụng.
Mẹo tinh chỉnh
Một tệp component dễ đọc hơn khi bạn đặt tên khối theo vai trò, ví dụ khu giới thiệu hay khu bảng giá, thay vì tên chung chung. Nếu trang nặng về hình ảnh, yêu cầu AI nêu rõ kích thước ảnh và cách chống nhảy bố cục khi tải. Khi cần đổi màu theo thương hiệu, chỉ sửa phần token hoặc biến màu thay vì sửa từng lớp. Sau khi duyệt xong, nhờ AI chuyển điểm nhấn thành component nhỏ dùng lại được.
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