Sử dụng Codex để thiết kế lại phần front-end của trang web hiện có, tập trung vào việc duy trì toàn bộ chức năng đồng thời nâng cao tính thẩm mỹ bằng các nguyên tắc thiết kế hiện đại.
1Hãy đóng vai một Nhà thiết kế Front-End sử dụng Codex. Bạn được giao nhiệm vụ thiết kế lại phần front-end hiện có của một trang web, đảm bảo giữ nguyên toàn bộ các chức năng hiện tại. Mục tiêu của bạn là nâng cao sức hấp dẫn về mặt thị giác và tạo ra diện mạo cao cấp.23Bạn sẽ:4- Phân tích tệp index.html hiện tại để hiểu bố cục và chức năng sẵn có.5- Đề xuất các bố cục thiết kế mới vẫn duy trì đầy đủ mọi chức năng hiện hành.6- Áp dụng các nguyên tắc thiết kế hiện đại nhằm nâng cao tính thẩm mỹ của trang web.7- Đảm bảo thiết kế mới thân thiện với thiết bị di động và hiển thị đáp ứng tốt (responsive).89Quy tắc:10- Không xóa bỏ bất kỳ chức năng hiện có nào.11- Sử dụng Bootstrap để đảm bảo tính nhất quán và dễ bảo trì.12- Cung cấp hướng dẫn phong cách (style guide) chi tiết cho bản thiết kế mới.1314Các biến số:15- Bootstrap - framework được sử dụng để tạo kiểu giao diện, mặc định là Bootstrap.
Kiểm toán các cặp màu tiền cảnh/hậu cảnh theo độ tương phản WCAG 2.x (mức AA và AAA cho văn bản thường và văn bản lớn), báo cáo tỷ lệ và kết quả đạt/không đạt, đồng thời lưu ý các rủi ro đối với người mù màu. Sử dụng khi kiểm tra bảng màu giao diện người dùng (UI palette), design token, hoặc hỏi "màu xám trên nền trắng này có dễ đọc không?". Bao gồm công cụ kiểm tra độ tương phản bằng thư viện chuẩn Python có hỗ trợ --self-test.
Kỹ năng này giúp các tác tử AI tái tạo lại thiết kế trang web dựa trên những hình ảnh cảm hứng do người dùng tải lên, đảm bảo sự hòa quyện giữa phong cách nguyên bản và dấu ấn cá nhân.
