Dùng để: Đọc ảnh chụp một trang web rồi dựng lại bố cục tương tự bằng mã, phục vụ học cách làm giao diện hoặc tạo bản mẫu.
Nội dung prompt
VAI TRÒ Bạn là kỹ sư giao diện web. Bạn đọc ảnh chụp một trang và dựng lại bố cục bằng HTML và CSS sạch, dễ đọc. NHIỆM VỤ Tôi sẽ tải lên ảnh chụp một trang web. Hãy phân tích rồi dựng lại giao diện tương tự bằng mã. ĐẦU VÀO - Ảnh chụp trang web: [TẢI ANH LÊN] - Mục đích: [VI DU HỌC CÁCH DỰNG BỐ CỤC, LÀM BẢN MẪU] - Công nghệ mong muốn: [VÍ DỤ HTML CSS THUẦN, TAILWIND] - Điểm muốn giữ: [VI DU BỐ CỤC, MÀU SẮC] - Điểm muốn đổi: [VI DU NỘI DUNG, LOGO, ẢNH] QUY TẮC 1. Bắt đầu bằng mô tả bố cục: số cột, thứ tự các khối, khoảng cách lớn. 2. Ước lượng dải màu và phông chữ, ghi rõ đó là ước lượng từ ảnh. 3. Dựng mã chạy được, không phụ thuộc ảnh gốc và không sao chép nội dung có bản quyền. 4. Thay nội dung mẫu bằng chữ giữ chỗ, ví dụ [TIÊU ĐỀ CHÍNH]. 5. Giao diện co giãn tốt trên điện thoại. 6. Ghi chú chỗ nào bạn phải phỏng đoán do ảnh không rõ. KHUÔN ĐẦU RA 1. Mô tả bố cục và các khối chính 2. Bảng màu và phông chữ ước lượng 3. Mã HTML và CSS cho một trang 4. Ghi chú các điểm phỏng đoán 5. Việc nên chỉnh trước khi dùng
Thay nội dung trong dấu [ ] trước khi sử dụng.
Mẹo tinh chỉnh
Bản dựng từ ảnh chỉ gần đúng, nên hãy coi đó là bước đầu rồi tự tinh chỉnh. Nếu ảnh chụp mờ phần chữ, hãy yêu cầu trợ lý chỉ mô tả cấu trúc và để nội dung chỗ trống. Với trang dài, chia thành từng khối và yêu cầu dựng lần lượt để dễ kiểm soát. Sau khi có mã, nhờ trợ lý rút gọn CSS và gộp các giá trị khoảng cách trùng nhau cho dễ bảo trì.
Prompt khác cùng nhóm
Soạn bộ quy tắc code Next.js và React cho dự ánĐưa bối cảnh dự án, nhận bộ quy tắc code Next.js và React rõ ràng kèm lý do để cả nhóm cùng làm theo.Xem promptRà soát dự án phần mềm do AI viết trước khi lên productionĐưa mã nguồn dự án AI viết, nhận báo cáo kiến trúc cho quản lý và danh sách việc kỹ thuật để lên production.Xem promptMổ xẻ một tệp Python từ luồng chạy tới rủi roDán tệp Python, nhận về bản phân tích mục đích, luồng thực thi, luồng dữ liệu, tác dụng phụ và chỗ dễ lỗi.Xem promptLập kế hoạch triển khai tính năng trước khi viết mãMô tả thay đổi mong muốn, nhận về kế hoạch theo bước, danh sách tệp cần sửa và mức tự tin kèm đánh giá rủi ro.Xem promptBiến ý tưởng tính năng thành prompt giao cho AI lập trìnhĐưa ý tưởng còn thô và nhận diện thương hiệu, nhận về prompt hoàn chỉnh để giao thẳng cho AI thiết kế hoặc AI lập trình.Xem promptViết ứng dụng trực quan hoá luồng bằng React FlowMô tả luồng nghiệp vụ, nhận về kế hoạch và mã cho ứng dụng sơ đồ node bằng React Flow, chạy được ngay.Xem promptTối ưu đọc dữ liệu lớn từ SOAP API trong C#Đưa đoạn mã đang đọc phản hồi SOAP, nhận về cách xử lý theo luồng để giảm bộ nhớ và tăng tốc.Xem promptViết mã Python hoàn chỉnh từ mô tảĐưa mô tả bằng lời, nhận về mã Python có chú thích kiểu, docstring, kiểm thử ngắn và ví dụ gọi hàm.Xem promptTối ưu hiệu năng và chất lượng mã PythonĐưa đoạn mã Python, nhận bản nâng cấp có chú thích kiểu, docstring, sửa chuẩn PEP8 và gợi ý tăng tốc mà không đổi kết quả.Xem prompt