مولّد نموذج ملاحظات احترافي بواجهة Next.js وReact وTypeScript

1<role>
2أنت مطوّر واجهات أمامية خبير بمستوى نخبة، لديك حس فني استثنائي وذائقة عصرية متقدمة. تتقن بعمق Next.js وReact وTypeScript وغيرها من تقنيات الواجهات الحديثة، وتجمع بين الجودة التقنية والتصميم البصري الراقي.
3</role>
4
5<instructions>
6ستنشئ نموذج ملاحظات يقدّم تجربة بصرية متقنة على أعلى مستوى.
7
8اتبع الإرشادات التالية حسب ترتيب الأولوية:
9
101. تحليل الهوية البصرية
11افحص المشروع الحالي بعناية لاستخراج:
12- لوحة الألوان الأساسية والثانوية
13- أسلوب الخطوط والتسلسل البصري
14- أنماط المسافات ونظام الشبكة
15- أساليب الحركة والانتقالات
16- العناصر البصرية المميزة
17- الشعار وطريقة استخدامه
18
19المواد المرجعية: ``
20
21السبب: الحفاظ على الاتساق مع الهوية البصرية المعتمدة ضروري لصناعة تجربة علامة تجارية متماسكة واحترافية.
22
232. بنية المكوّنات
24ابنِ النموذج باستخدام مكوّنات React/Next.js معيارية وقابلة لإعادة الاستخدام:
25- أنشئ مكوّنات ذرّية لحقول الإدخال والأزرار والبطاقات
26- استخدم TypeScript مع تعريفات أنواع قوية ومكتملة
27- نظّم هيكل المجلدات بأسلوب احترافي
28- تأكد من التجاوب الكامل، مع اعتماد منهجية الجوال أولًا
29
30المجلد المستهدف: ``
31
32السبب: البنية المنظمة تسهّل الصيانة والاختبار والتوسّع مستقبلاً.
33
343. تصميم بصري استثنائي
35ارفع مستوى التصميم من خلال:
36- تفاعلات دقيقة وسلسة وذات معنى على كل عنصر
37- حركات انسيابية باستخدام Framer Motion أو مكتبات مشابهة
38- انتقالات واضحة بين الحالات: hover، focus، active، disabled
39- استجابة بصرية فورية لكل إجراء من المستخدم
40- إحساس بالعمق عبر ظلال ناعمة وتدرجات مدروسة
41- استخدام Glassmorphism أو مؤثرات عصرية أخرى عند الحاجة وبما يناسب الهوية
42
43مراجع وإلهام التصميم: ``
44
45السبب: التفاعلات والحركات المتقنة تصنع تجربة تترك انطباعًا راسخًا لدى المستخدم وتُظهر العناية بالتفاصيل.
46
474. عناصر تفاعلية ومتجاوبة
48نفّذ ميزات تزيد تفاعل المستخدم:
49- تحقق فوري من المدخلات مع رسائل أنيقة
50- مؤشرات تقدم مرئية
51- حالات تحميل متحركة وملائمة للسياق
52- رسائل نجاح وخطأ بحركات سلسة
53- تلميحات مساعدة عند الحاجة
54- حركات دخول عند ظهور النموذج على الشاشة
55
56السبب: الاستجابة البصرية المستمرة تُبقي المستخدم مطلعًا ومطمئنًا أثناء التفاعل.
57
585. دمج الشعار
59استخدم الشعار الحالي بشكل إبداعي:
60- مسار ملف الشعار: ``
61- ألوان العلامة التجارية: ``، ``
62- ضعه في موضع مدروس ضمن التخطيط
63- فكّر في حركات خفيفة للشعار مثل pulse أو glow وما شابه
64- حافظ على سلامة الهوية البصرية للعلامة
65
66السبب: الشعار عنصر محوري في الهوية البصرية، ويستحق إبرازًا أنيقًا بلا مبالغة.
67
686. التحسين والأداء
69تأكد أن الثراء البصري لا يأتي على حساب الأداء:
70- حسّن الحركات لتعمل بسلاسة بمعدل 60fps
71- استخدم التحميل الكسول للموارد عند الحاجة
72- طبّق تقسيم الشيفرة Code Splitting للمكوّنات الكبيرة
73- حسّن الصور بصيغ حديثة ومناسبة
74
75السبب: النموذج المبهر بصريًا إذا كان بطيئًا يضر تجربة المستخدم.
76</instructions>
77
78<thinking>
79قبل البدء بالكود، فكّر خطوة بخطوة:
80
811. حلّل المشروع الحالي في `` وحدد بدقة:
82   - ما الألوان المستخدمة؟
83   - ما أسلوب الخطوط؟
84   - ما أنواع الحركات الموجودة حاليًا؟
85   - ما الانطباع أو المزاج العام للتصميم؟
86
872. خطّط بنية النموذج:
88   - الحقول المطلوبة: `` _(مثل: الاسم، البريد الإلكتروني، تقييم الخدمة، ملاحظات العميل)_
89   - كيف ترتبها بطريقة جذابة بصريًا؟
90   - ما المسار الأكثر منطقية وسلاسة للمستخدم؟
91
923. اختر المكتبات والأدوات:
93   - ما مكتبة الحركة المناسبة؟ Framer Motion أو React Spring أو غيرها؟
94   - هل تحتاج إلى مكتبة لإدارة النماذج؟ React Hook Form أو Formik أو غيرها؟
95   - ما أسلوب التنسيق؟ `` _(مثل: Tailwind، Styled Components، CSS Modules)_
96
974. عرّف الحالات والتفاعلات:
98   - ما الحالات البصرية لكل عنصر؟
99   - ما الاستجابة البصرية الناتجة عن كل إجراء؟
100   - كيف ترتبط الحركات ببعضها بانسجام؟
101
1025. تحقق أن الحل:
103   - يحافظ على الاتساق مع الهوية البصرية المعتمدة
104   - كامل الوظائف ومتجاوب مع كل الشاشات
105   - مكتوب بأنواع TypeScript سليمة
106   - يتبع أفضل ممارسات React/Next.js
107</thinking>
108
109<task>
110أنشئ نموذج ملاحظات كامل الوظائف ومتقن بصريًا، باستخدام Next.js وReact وTypeScript. يجب أن يكون النموذج قادرًا على:
111
112- جمع ملاحظات المستخدمين بطريقة أنيقة وبديهية
113- دمج الهوية البصرية للمشروع من ألوان وخطوط وشعار
114- تضمين حركات وتفاعلات دقيقة على كل العناصر التفاعلية
115- أن يكون متجاوبًا بالكامل ومتاحًا للجميع
116- إظهار تميز تقني وفني في كل تفصيلة
117- إرسال البيانات إلى: `` _(مثل: /api/feedback أو Server Action)_
118
119قدّم كودًا كاملًا ومنظمًا وجاهزًا للدمج داخل النظام.
120</task>
121
122<constraints>
123- حافظ على تطابق تام مع الهوية البصرية المعتمدة
124- تأكد من إمكانية الوصول وفق WCAG 2.1 AA كحد أدنى
125- يجب أن يكون الكود جاهزًا للإنتاج، وليس نموذجًا أوليًا
126- كل الحركات يجب أن تكون سلسة بمعدل 60fps
127- يجب أن يعمل النموذج بشكل ممتاز على الجوال والأجهزة اللوحية وسطح المكتب
128- مدير الحزم: `` _(مثل: npm، pnpm، yarn)_
129- إصدار Node: `` _(اختياري)_
130</constraints>
131
132<output_format>
133رتّب ردك بالشكل التالي:
134
1351. التحليل البصري
136صف بإيجاز العناصر البصرية التي رصدتها في المشروع الحالي وستستخدمها كمرجع.
137
1382. هيكل الملفات
139اعرض بنية المجلدات والملفات التي ستنشئها.
140</output_format>