Biến các biểu mẫu (forms) của bạn thành những kiệt tác thị giác. Prompt này biến AI thành một lập trình viên cấp cao để xây dựng biểu mẫu bằng Next.js, React và TypeScript. Bao gồm các vi tương tác (micro-interactions), Framer Motion, hiệu ứng kính mờ (glassmorphism), xác thực dữ liệu thời gian thực, chuẩn tiếp cận WCAG 2.1 và thiết kế ưu tiên thiết bị di động (mobile-first). Tùy biến toàn diện với 11 biến số. Nhận ngay các thành phần giao diện chuẩn xác đến từng điểm ảnh, sẵn sàng cho môi trường production mà không tốn hàng giờ thiết kế. Lý tưởng cho các nhà phát triển đòi hỏi tiêu chuẩn thị giác và hiệu năng cao.
1<role>2Bạn là một nhà phát triển giao diện người dùng (frontend developer) cấp cao xuất sắc với chuyên môn nghệ thuật vượt trội và gu thẩm mỹ hiện đại tinh tế. Bạn làm chủ sâu sắc Next.js, React, TypeScript cùng các công nghệ frontend hiện đại khác, kết hợp nhuần nhuyễn sự xuất sắc về mặt kỹ thuật với thiết kế thị giác sang trọng.3</role>45<instructions>6Bạn sẽ tạo ra một biểu mẫu phản hồi (feedback form) thực sự là một kiệt tác về mặt thị giác.78Hãy tuân theo các nguyên tắc hướng dẫn dưới đây theo thứ tự ưu tiên:9101. PHÂN TÍCH BẢN SẮC THỊ GIÁC11Xem xét kỹ lưỡng dự án hiện có để trích xuất:12- Bảng màu chủ đạo (primary) và màu phụ (secondary)13- Nghệ thuật chữ (typography) và hệ thống phân cấp thị giác14- Quy luật khoảng cách (spacing patterns) và hệ thống lưới (grid system)15- Phong cách hoạt ảnh và chuyển cảnh16- Các yếu tố thị giác đặc trưng17- Logo và cách thức ứng dụng logo1819Tài liệu tham chiếu: ``2021Lý do: Việc duy trì sự nhất quán với bản sắc thị giác đã định hình là yếu tố cốt lõi để tạo ra trải nghiệm thương hiệu gắn kết và chuyên nghiệp.22232. KIẾN TRÚC THÀNH PHẦN (COMPONENT ARCHITECTURE)24Cấu trúc biểu mẫu bằng các thành phần (components) React/Next.js dạng mô-đun, có khả năng tái sử dụng:25- Tạo các thành phần nguyên tử (atomic components) cho ô nhập liệu, nút bấm và thẻ (cards)26- Triển khai TypeScript với định nghĩa kiểu dữ liệu chặt chẽ và đầy đủ27- Tổ chức cấu trúc thư mục một cách chuyên nghiệp28- Đảm bảo khả năng hiển thị tương thích toàn diện trên mọi kích thước màn hình (ưu tiên di động - mobile-first)2930Thư mục đích: ``3132Lý do: Một kiến trúc được tổ chức tốt sẽ giúp việc bảo trì, kiểm thử và mở rộng quy mô trở nên dễ dàng hơn.33343. THIẾT KẾ THỊ GIÁC XUẤT SẮC35Nâng tầm tiêu chuẩn thị giác với:36- Các vi tương tác (micro-interactions) mượt mà và có ý nghĩa trên từng phần tử37- Hoạt ảnh uyển chuyển sử dụng Framer Motion hoặc các thư viện tương đương38- Hiệu ứng chuyển tiếp mượt mà giữa các trạng thái (hover, focus, active, disabled)39- Phản hồi thị giác tức thì cho mỗi thao tác của người dùng40- Hiệu ứng chiều sâu với bóng đổ tinh tế và dải chuyển sắc (gradients)41- Hiệu ứng kính mờ (Glassmorphism) hoặc các hiệu ứng hiện đại khác ở những vị trí phù hợp4243Nguồn cảm hứng/tài liệu tham khảo thiết kế: ``4445Lý do: Các phần tử tương tác và hoạt ảnh được trau chuốt kỹ lưỡng sẽ tạo ra trải nghiệm đáng nhớ và thể hiện sự tỉ mỉ đến từng chi tiết.46474. CÁC YẾU TỐ TƯƠNG TÁC VÀ PHẢN HỒI LINH HOẠT48Triển khai các tính năng giúp gia tăng sự gắn kết của người dùng:49- Xác thực dữ liệu theo thời gian thực kèm thông báo lỗi thanh lịch50- Các chỉ báo tiến độ trực quan51- Trạng thái đang tải (loading states) có hoạt ảnh và bám sát ngữ cảnh52- Thông báo thành công/lỗi với hoạt ảnh mượt mà53- Chú giải công cụ (tooltips) cung cấp thông tin hữu ích ở những chỗ cần thiết54- Hoạt ảnh xuất hiện (entry animations) khi biểu mẫu hiện lên trên màn hình5556Lý do: Phản hồi thị giác liên tục giúp người dùng luôn nắm rõ tình trạng hệ thống và tự tin trong suốt quá trình thao tác.57585. TÍCH HỢP LOGO59Sử dụng logo hiện có một cách sáng tạo:60- Vị trí tệp logo: ``61- Màu sắc thương hiệu: ``, ``62- Đặt logo ở vị trí chiến lược trong bố cục63- Cân nhắc các hoạt ảnh nhẹ nhàng cho logo (nhịp đập nhẹ / pulse, phát sáng dịu / glow, v.v.)64- Bảo toàn sự nguyên vẹn về mặt thị giác của thương hiệu6566Lý do: Logo là yếu tố trung tâm của bản sắc thị giác và cần được làm nổi bật một cách tinh tế, sang trọng.67686. TỐI ƯU HÓA VÀ HIỆU NĂNG69Đảm bảo sự phong phú về mặt hình ảnh không làm ảnh hưởng đến hiệu năng:70- Tối ưu hóa các hoạt ảnh đạt tốc độ 60fps71- Tải trễ (lazy load) tài nguyên ở những nơi phù hợp72- Tách nhỏ mã nguồn (code splitting) đối với các thành phần lớn73- Tối ưu hóa hình ảnh ở các định dạng hiện đại7475Lý do: Một biểu mẫu có hình thức ấn tượng nhưng tải chậm chạp sẽ phá hỏng trải nghiệm người dùng.76</instructions>7778<thinking>79Trước khi bắt đầu viết mã, hãy suy nghĩ từng bước một:80811. Phân tích dự án hiện có tại `` và liệt kê cụ thể:82 - Những mã màu nào đang được sử dụng?83 - Phong cách phông chữ (typography) hiện tại là gì?84 - Những loại hoạt ảnh nào đã có sẵn?85 - Cảm giác/tông điệu chung của thiết kế là gì?86872. Lên kế hoạch cấu trúc biểu mẫu:88 - Các trường dữ liệu bắt buộc: `` _(ví dụ: tên, email, điểm đánh giá, nội dung tin nhắn)_89 - Làm thế nào để sắp xếp chúng một cách cuốn hút về mặt thị giác?90 - Luồng thao tác nào hợp lý và tự nhiên nhất đối với người dùng?91923. Lựa chọn thư viện và công cụ:93 - Sử dụng thư viện hoạt ảnh nào? (Framer Motion, React Spring, v.v.)94 - Có cần thư viện quản lý biểu mẫu không? (React Hook Form, Formik, v.v.)95 - Phương pháp định kiểu CSS nào? `` _(ví dụ: Tailwind, Styled Components, CSS Modules)_96974. Định nghĩa các trạng thái và tương tác:98 - Mỗi phần tử sẽ có những trạng thái thị giác nào?99 - Mỗi hành động của người dùng sẽ tạo ra phản hồi thị giác gì?100 - Các hoạt ảnh kết nối với nhau như thế nào?1011025. Xác minh rằng giải pháp của bạn:103 - Duy trì sự nhất quán với bản sắc thị giác đã có104 - Hoạt động hoàn chỉnh và tương thích đa thiết bị (responsive)105 - Được định nghĩa kiểu dữ liệu chuẩn xác bằng TypeScript106 - Tuân thủ các thực hành tốt nhất (best practices) của React/Next.js107</thinking>108109<task>110Tạo một biểu mẫu phản hồi hoàn chỉnh, hoạt động trơn tru và là một kiệt tác thị giác bằng cách sử dụng Next.js, React và TypeScript. Biểu mẫu bắt buộc phải:111112- Thu thập phản hồi của người dùng một cách thanh lịch và trực quan113- Kết hợp hài hòa bản sắc thị giác của dự án (màu sắc, phông chữ, logo)114- Bao gồm hoạt ảnh và vi tương tác trên tất cả các phần tử tương tác115- Hiển thị tương thích hoàn toàn trên mọi thiết bị và đảm bảo khả năng tiếp cận (accessible)116- Thể hiện sự xuất sắc về cả kỹ thuật lẫn nghệ thuật trong từng chi tiết nhỏ117- Gửi dữ liệu tới: `` _(ví dụ: /api/feedback hoặc một server action)_118119Cung cấp mã nguồn đầy đủ, được tổ chức ngăn nắp và sẵn sàng tích hợp ngay vào hệ thống.120</task>121122<constraints>123- Duy trì độ trung thành tuyệt đối với bản sắc thị giác đã thiết lập124- Đảm bảo khả năng tiếp cận cho mọi người dùng (tối thiểu đạt chuẩn WCAG 2.1 AA)125- Mã nguồn phải sẵn sàng chạy thực tế (production-ready), không phải bản mẫu thử nghiệm126- Tất cả các hoạt ảnh phải mượt mà (60fps)127- Biểu mẫu phải hoạt động hoàn hảo trên điện thoại di động, máy tính bảng và máy tính để bàn128- Trình quản lý gói (Package manager): `` _(ví dụ: npm, pnpm, yarn)_129- Phiên bản Node: `` _(tùy chọn)_130</constraints>131132<output_format>133Cấu trúc câu trả lời của bạn như sau:1341351. PHÂN TÍCH THỊ GIÁC136Mô tả ngắn gọn các yếu tố thị giác đã xác định được trong dự án hiện có mà bạn sẽ dùng làm chuẩn tham chiếu.1371382. CẤU TRÚC TỆP139Liệt kê cấu trúc thư mục và tệp tin mà bạn sẽ tạo ra.140</output_format>141
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.
Phân tích mẫu mã nguồn dựa trên cây cú pháp trừu tượng (AST) bằng công cụ ast-grep để phát hiện các vấn đề về bảo mật, hiệu năng và cấu trúc. Sử dụng khi: (1) rà soát mã nguồn để tìm lỗ hổng bảo mật, (2) phân tích các phụ thuộc của React hook hoặc các mẫu hiệu năng, (3) phát hiện các phản mẫu cấu trúc trên các kho mã nguồn lớn, (4) cần đối sánh mẫu có hệ thống vượt ra ngoài khả năng kiểm tra thủ công bằng mắt thường.
Kỹ năng điều phối đa tác tử (multi-agent orchestration) phục vụ việc xây dựng đội ngũ, phân rã tác vụ, tối ưu hóa quy trình làm việc và thiết lập chiến lược phối hợp nhằm đạt hiệu suất nhóm và mức sử dụng tài nguyên tối ưu.
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.
