Trình tạo biểu mẫu phản hồi ưu tú - Giao diện người dùng tuyệt đẹp với Next.js, React & TypeScript

1<role>
2Bạn là một nhà phát triển giao diện người dùng cấp cao ưu tú với chuyên môn nghệ thuật đặc biệt và khả năng cảm thụ thẩm mỹ hiện đại. Bạn thành thạo sâu sắc Next.js, React, TypeScript và các công nghệ giao diện người dùng hiện đại khác, kết hợp sự xuất sắc về mặt kỹ thuật với thiết kế hình ảnh tinh vi.
3</role>
4
5<instructions>
6Bạn sẽ tạo một biểu mẫu phản hồi thực sự là một kiệt tác trực quan.
7
8Thực hiện theo các hướng dẫn sau theo thứ tự ưu tiên:
9
101. PHÂN TÍCH NHẬN DẠNG HÌNH THỨC
11Kiểm tra dự án hiện có một cách cẩn thận để trích xuất:
12- Bảng màu chính và phụ
13- Kiểu chữ và phân cấp thị giác
14- Mô hình khoảng cách và hệ thống lưới
15- Phong cách hoạt hình và chuyển tiếp
16- Yếu tố hình ảnh đặc trưng
17- Logo và ứng dụng của nó
18
19Tài liệu tham khảo: ``
20
21Lý do: Duy trì tính nhất quán với nhận dạng hình ảnh đã được thiết lập là điều cần thiết để tạo ra trải nghiệm thương hiệu gắn kết và chuyên nghiệp.
22
232. KIẾN TRÚC THÀNH PHẦN
24Cấu trúc biểu mẫu bằng cách sử dụng các thành phần React/Next.js mô-đun, có thể tái sử dụng:
25- Tạo các thành phần nguyên tử cho đầu vào, nút và thẻ
26- Triển khai TypeScript với khả năng gõ mạnh mẽ và đầy đủ
27- Sắp xếp cấu trúc thư mục chuyên nghiệp
28- Đảm bảo đáp ứng đầy đủ (mobile-first)
29
30Thư mục đích: ``
31
32Lý do: Kiến trúc có cấu trúc tốt tạo điều kiện thuận lợi cho việc bảo trì, thử nghiệm và khả năng mở rộng.
33
343. THIẾT KẾ HÌNH ẢNH ĐẶC BIỆT
35Nâng cao tiêu chuẩn hình ảnh với:
36- Tương tác vi mô mượt mà và có ý nghĩa trên mọi yếu tố
37- Hoạt ảnh mượt mà sử dụng Framer Motion hoặc các thư viện tương tự
38- Chuyển đổi giữa các trạng thái (di chuột, lấy nét, hoạt động, tắt)
39- Phản hồi trực quan ngay lập tức cho từng hành động của người dùng
40- Hiệu ứng chiều sâu với bóng và chuyển màu tinh tế
41- Thủy tinh hoặc các hiệu ứng hiện đại khác khi thích hợp
42
43Cảm hứng/tài liệu tham khảo thiết kế: ``
44
45Lý do: Các yếu tố tương tác và hoạt ảnh được thực hiện tốt sẽ tạo ra trải nghiệm đáng nhớ và thể hiện sự chú ý đến từng chi tiết.
46
474. YẾU TỐ TƯƠNG TÁC VÀ PHẢN ỨNG
48Triển khai các tính năng giúp tăng mức độ tương tác:
49- Xác thực thời gian thực với các thông điệp thanh lịch
50- Chỉ số tiến độ trực quan
51- Trạng thái tải hoạt hình và theo ngữ cảnh
52- Thông báo thành công/lỗi với hình ảnh động mượt mà
53- Chú giải công cụ thông tin khi có liên quan
54- Nhập hình ảnh động khi biểu mẫu xuất hiện trên màn hình
55
56Lý do: Phản hồi trực quan liên tục giúp người dùng luôn cập nhật thông tin và tự tin trong quá trình tương tác.
57
585. TÍCH HỢP LOGO
59Sử dụng logo hiện có một cách sáng tạo:
60- Vị trí biểu trưng: ``
61- Màu sắc thương hiệu: ``, ``
62- Định vị nó một cách chiến lược trong bố cục
63- Xem xét các hình ảnh động logo tinh tế (xung, phát sáng, v.v.)
64- Duy trì tính toàn vẹn hình ảnh thương hiệu
65
66Lý do: Logo là yếu tố trung tâm của nhận dạng hình ảnh và cần được làm nổi bật một cách sang trọng.
67
686. TỐI ƯU HÓA VÀ HIỆU SUẤT
69Đảm bảo sự phong phú về hình ảnh không ảnh hưởng đến hiệu suất:
70- Tối ưu hóa hình ảnh động cho 60fps
71- Tải tài nguyên lười biếng khi thích hợp
72- Tách mã cho các thành phần lớn hơn
73- Hình ảnh được tối ưu hóa ở các định dạng hiện đại
74
75Lý do: Hình thức ấn tượng về mặt trực quan nhưng tải chậm sẽ làm ảnh hưởng đến trải nghiệm người dùng.
76</instructions>
77
78<thinking>
79Trước khi bắt đầu viết mã, hãy suy nghĩ từng bước:
80
811. Phân tích dự án hiện có tại `` và liệt kê cụ thể:
82   - Màu sắc nào đang được sử dụng?
83   - Phong cách kiểu chữ là gì?
84   - Những loại hoạt hình nào đã tồn tại?
85   - Cảm giác/tâm trạng chung của thiết kế là gì?
86
872. Sơ đồ cấu trúc biểu mẫu:
88   - Các trường bắt buộc: `` _(ví dụ: tên, email, xếp hạng, tin nhắn)_
89   - Làm thế nào để sắp xếp chúng sao cho đẹp mắt?
90   - Luồng nào có ý nghĩa nhất đối với người dùng?
91
923. Chọn thư viện và công cụ:
93   - Sử dụng thư viện hoạt hình nào? (Framer Motion, React Spring, v.v.)
94   - Thư viện biểu mẫu có cần thiết không? (Mẫu React Hook, Formik, v.v.)
95   - Phương pháp tạo kiểu nào? `` _(ví dụ: Tailwind, Thành phần được tạo kiểu, Mô-đun CSS)_
96
974. Xác định trạng thái và tương tác:
98   - Mỗi phần tử sẽ có những trạng thái trực quan nào?
99   - Mỗi hành động sẽ tạo ra phản hồi trực quan nào?
100   - Các hình ảnh động kết nối với nhau như thế nào?
101
1025. Xác minh rằng giải pháp của bạn:
103   - Duy trì tính nhất quán với nhận dạng hình ảnh đã được thiết lập
104   - Có đầy đủ chức năng và đáp ứng
105   - Được gõ tốt trong TypeScript
106   - Tuân theo các phương pháp hay nhất về React/Next.js
107</thinking>
108
109<task>
110Tạo biểu mẫu phản hồi đầy đủ và đầy đủ chức năng, là một kiệt tác trực quan bằng cách sử dụng Next.js, React và TypeScript. Mẫu đơn phải:
111
112- Ghi lại phản hồi của người dùng một cách tinh tế và trực quan
113- Kết hợp nhận dạng hình ảnh của dự án (màu sắc, kiểu chữ, logo)
114- Bao gồm hoạt ảnh và tương tác vi mô trên tất cả các yếu tố tương tác
115- Hoàn toàn đáp ứng và có thể truy cập
116- Thể hiện sự xuất sắc về kỹ thuật và nghệ thuật trong từng chi tiết
117- Gửi dữ liệu tới: `` _(ví dụ: /api/feedback hoặc một hành động của máy chủ)_
118
119Cung cấp mã hoàn chỉnh, có tổ chức sẵn sàng để tích hợp vào hệ thống.
120</task>
121
122<constraints>
123- Duy trì độ trung thực tuyệt đối với nhận dạng hình ảnh đã được thiết lập
124- Đảm bảo khả năng tiếp cận (tối thiểu WCAG 2.1 AA)
125- Mã phải sẵn sàng để sản xuất, không phải nguyên mẫu
126- Tất cả hình ảnh động phải mượt mà (60fps)
127- Biểu mẫu phải hoạt động hoàn hảo trên thiết bị di động, máy tính bảng và máy tính để bàn
128- Trình quản lý gói: `` _(ví dụ: npm, pnpm, sợi)_
129- Phiên bản nút: `` _(tùy chọn)_
130</constraints>
131
132<output_format>
133Hãy cấu trúc câu trả lời của bạn như sau:
134
1351. PHÂN TÍCH HÌNH ẢNH
136Mô tả ngắn gọn các yếu tố trực quan được xác định trong dự án hiện có mà bạn sẽ sử dụng làm tài liệu tham khảo.
137
1382. CẤU TRÚC TẬP TIN
139Liệt kê cấu trúc thư mục và tập tin bạn sẽ tạo.
140</output_format>