creative-design

أنشئ واجهات أمامية مميزة وعالية الجودة للإنتاج. استخدم هذه المهارة عندما يطلب المستخدم بناء مكونات ويب، صفحات، عناصر، ملصقات، أو تطبيقات (تشمل الأمثلة مواقع الويب، صفحات الهبوط، لوحات التحكم، مكونات React، تخطيطات HTML/CSS، أو عند تنسيق/تجميل أي واجهة مستخدم ويب). ينتج رمزًا وتصميم واجهة مستخدم إبداعيًا ومصقولًا يتجنب الجماليات العامة للذكاء الاصطناعي.

ذكاء تصميم UI/UX. 50 نمطًا، 21 لوحة ألوان، 50 تنسيق خطوط، 20 مخططًا، 9 أُطُر عمل (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). الإجراءات: التخطيط، البناء، الإنشاء، التصميم، التنفيذ، المراجعة، الإصلاح، التحسين، الأمثل، التعزيز، إعادة الهيكلة، فحص كود UI/UX. المشاريع: موقع ويب، صفحة هبوط، لوحة تحكم، لوحة إدارة، تجارة إلكترونية، SaaS، ملف أعمال، مدونة، تطبيق جوال، .html, .tsx, .vue, .svelte. العناصر: زر، نافذة منبثقة، شريط تنقل، شريط جانبي، بطاقة، جدول، نموذج، مخطط. الأنماط: الزجاجية (glassmorphism)، الطينية (claymorphism)، البساطة (minimalism)، الوحشية (brutalism)، النيورومورفية (neumorphism)، شبكة بينتو (bento grid)، الوضع الداكن، الاستجابة (responsive)، التشبيه (skeuomorphism)، التصميم المسطح (flat design). المواضيع: لوحة الألوان، إمكانية الوصول، الرسوم المتحركة، التخطيط، الطباعة، تنسيق الخطوط، التباعد، التمرير، الظل، التدرج. التكاملات: shadcn/ui MCP للبحث عن المكونات والأمثلة.

مجموعة أدوات نظام تصميم واجهة المستخدم لمصمم واجهة المستخدم الأول تشمل توليد رموز التصميم، توثيق المكونات، حسابات التصميم المتجاوب، وأدوات تسليم العمل للمطورين. تُستخدم لإنشاء أنظمة التصميم، والحفاظ على الاتساق البصري، وتسهيل التعاون بين التصميم والتطوير.

أنشئ فنًا بصريًا جميلًا في مستندات .png و .pdf باستخدام فلسفة التصميم. يجب عليك استخدام هذه المهارة عندما يطلب المستخدم إنشاء ملصق أو قطعة فنية أو تصميم أو أي قطعة ثابتة أخرى. أنشئ تصاميم بصرية أصلية، ولا تنسخ أبدًا أعمال الفنانين الموجودين لتجنب انتهاكات حقوق الطبع والنشر.

التفكير في التصميم واتخاذ القرار مع التركيز على الأجهزة المحمولة لتطبيقات iOS وAndroid. التفاعل باللمس، أنماط الأداء، تقاليد المنصة. يعلّم المبادئ، وليس القيم الثابتة. يُستخدم عند بناء تطبيقات React Native أو Flutter أو التطبيقات المحمولة الأصلية.

مجموعة أدوات لتنسيق العناصر الفنية باستخدام سمة. يمكن أن تكون هذه العناصر شرائح، مستندات، تقارير، صفحات هبوط HTML، إلخ. هناك 10 سمات معدة مسبقًا مع ألوان/خطوط يمكنك تطبيقها على أي عنصر تم إنشاؤه، أو يمكنك إنشاء سمة جديدة في الوقت الفعلي.

مجموعة أدوات أبحاث وتصميم تجربة المستخدم لمصمم/باحث تجربة المستخدم الأول تشمل توليد الشخصيات المستندة إلى البيانات، ورسم خرائط الرحلات، وأطر اختبار سهولة الاستخدام، وتوليف الأبحاث. تُستخدم لأبحاث المستخدم، وإنشاء الشخصيات، ورسم خرائط الرحلات، والتحقق من صحة التصميم.

خبير في بناء تجارب ثلاثية الأبعاد للويب - Three.js، React Three Fiber، Spline، WebGL، والمشاهد التفاعلية ثلاثية الأبعاد. يشمل منشئي تكوين المنتجات، المحافظ ثلاثية الأبعاد، المواقع الغامرة، وإضافة العمق لتجارب الويب. يُستخدم عند: موقع ويب ثلاثي الأبعاد، three.js، WebGL، react three fiber، تجربة ثلاثية الأبعاد.

مبادئ Tailwind CSS الإصدار 4. تكوين يعتمد على CSS أولاً، استعلامات الحاوية، الأنماط الحديثة، بنية رموز التصميم.

إنشاء فن خوارزمي باستخدام p5.js مع العشوائية المولدة بواسطة البذور واستكشاف تفاعلي للمعاملات. استخدم هذا عندما يطلب المستخدمون إنشاء فن باستخدام الكود، الفن التوليدي، الفن الخوارزمي، حقول التدفق، أو أنظمة الجسيمات. قم بإنشاء فن خوارزمي أصلي بدلاً من نسخ أعمال الفنانين الحاليين لتجنب انتهاكات حقوق الطبع والنشر.

مراجعة كود واجهة المستخدم للتأكد من الامتثال لإرشادات واجهة الويب. استخدم عند الطلب "مراجعة واجهة المستخدم الخاصة بي"، "فحص إمكانية الوصول"، "تدقيق التصميم"، "مراجعة تجربة المستخدم"، أو "فحص موقعي مقابل أفضل الممارسات".

خبير في بناء تجارب غامرة مدفوعة بالتمرير - سرد قصصي بتقنية التمرير المتوازي، رسوم متحركة بالتمرير، سرد تفاعلي، وتجارب ويب سينمائية. مثل التفاعلات في صحيفة نيويورك تايمز، صفحات منتجات آبل، وتجارب ويب حائزة على جوائز. يجعل المواقع تبدو كتجارب، وليست مجرد صفحات. يُستخدم عند: رسوم متحركة بالتمرير، التمرير المتوازي، سرد قصصي بالتمرير، قصة تفاعلية، موقع ويب سينمائي.

دليل شامل لإنشاء مخططات البرمجيات باستخدام صيغة Mermaid. يُستخدم عندما يحتاج المستخدمون إلى إنشاء أو تصور أو توثيق البرمجيات من خلال المخططات بما في ذلك مخططات الفئات (نمذجة النطاق، التصميم الموجه للكائنات)، مخططات التسلسل (تدفقات التطبيقات، تفاعلات API، تنفيذ الكود)، المخططات الانسيابية (العمليات، الخوارزميات، رحلات المستخدم)، مخططات علاقات الكيانات (مخططات قواعد البيانات)، مخططات هندسة C4 (سياق النظام، الحاويات، المكونات)، مخططات الحالة، مخططات git، مخططات الفطيرة، مخططات جانت، أو أي نوع آخر من المخططات. تشمل المحفزات الطلبات مثل "رسم مخطط"، "تصور"، "نمذجة"، "رسم خريطة"، "عرض التدفق"، أو عند شرح هندسة النظام، تصميم قاعدة البيانات، هيكل الكود، أو تدفقات المستخدم/التطبيق.

يخطط وينشئ ويحسن حملات التسويق بما في ذلك استراتيجية المحتوى ووسائل التواصل الاجتماعي والبريد الإلكتروني والتحليلات. يساعد في تطوير استراتيجيات الدخول إلى السوق، ورسائل الحملة، وقياس الأداء.

منسق تطوير الألعاب. يوجه إلى المهارات الخاصة بالمنصة بناءً على احتياجات المشروع.

إنشاء وتحرير ومراجعة مخططات draw.io. يُستخدم لتحرير ملفات .drawio بصيغة XML، وتحويلها إلى PNG، وضبط التخطيط، واستخدام أيقونات AWS.

استخدم خادم Figma MCP لجلب سياق التصميم، لقطات الشاشة، المتغيرات، والأصول من Figma، ولترجمة عقد Figma إلى كود الإنتاج. يتم التفعيل عندما تتضمن المهمة عناوين URL الخاصة بـ Figma، معرفات العقد، تنفيذ التصميم إلى الكود، أو إعداد MCP الخاص بـ Figma واستكشاف الأخطاء وإصلاحها.

ترجم عقد Figma إلى كود جاهز للإنتاج بدقة بصرية 1:1 باستخدام سير عمل Figma MCP (سياق التصميم، لقطات الشاشة، الأصول، وترجمة اتفاقيات المشروع). يتم التفعيل عندما يقدم المستخدم روابط Figma أو معرفات العقد، أو يطلب تنفيذ التصاميم أو المكونات التي يجب أن تطابق مواصفات Figma. يتطلب اتصالًا فعالًا بخادم Figma MCP.

أخصائي إمكانية الوصول إلى الويب للامتثال لمعايير WCAG، وتنفيذ ARIA، والتصميم الشامل. يُستخدم عند تدقيق المواقع الإلكترونية لمشاكل إمكانية الوصول، وتنفيذ معايير WCAG 2.1 AA/AAA، والاختبار باستخدام برامج قراءة الشاشة، أو ضمان الامتثال لقانون ADA. خبير في HTML الدلالي، والتنقل باستخدام لوحة المفاتيح، وتوافق تقنيات المساعدة.

إنشاء تصورات بيانات تفاعلية باستخدام d3.js. يجب استخدام هذه المهارة عند إنشاء مخططات مخصصة، رسوم بيانية، مخططات شبكية، تصورات جغرافية، أو أي تصور بيانات معقد قائم على SVG يتطلب تحكمًا دقيقًا في العناصر البصرية، الانتقالات، أو التفاعلات. استخدم هذا لإنشاء تصورات مخصصة تتجاوز مكتبات المخططات القياسية، سواء في React، Vue، Svelte، جافا سكريبت العادي، أو أي بيئة أخرى.

أفضل الممارسات لـ Remotion - إنشاء الفيديو في React

المعرفة والأدوات لإنشاء صور GIF متحركة محسّنة لـ Slack. توفر القيود، وأدوات التحقق، ومفاهيم الرسوم المتحركة. استخدمها عندما يطلب المستخدمون صور GIF متحركة لـ Slack مثل "اصنع لي صورة GIF لـ X يقوم بـ Y لـ Slack."

خبير في بناء المحافظ التي تؤدي فعليًا إلى الحصول على وظائف وعملاء - ليس فقط عرض الأعمال، بل خلق تجارب لا تُنسى. يشمل محافظ المطورين، ومحافظ المصممين، والمحافظ الإبداعية، والمحافظ التي تحول الزوار إلى فرص. يُستخدم عند: المحفظة، الموقع الشخصي، عرض الأعمال، محفظة المطور، محفظة المصمم.

استخدم عند العمل مع ملفات *.excalidraw أو *.excalidraw.json، أو عند ذكر المستخدم للرسوم البيانية/مخططات التدفق، أو طلب تصور الهندسة المعمارية - يقوم بتفويض جميع عمليات Excalidraw إلى الوكلاء الفرعيين لمنع استنفاد السياق بسبب JSON المفصل (الملفات الفردية: 4k-22k توكن، قد تتجاوز حدود القراءة)

إنشاء وثائق المعمارية باستخدام مخططات Mermaid لنموذج C4. استخدمها عند الطلب لإنشاء مخططات المعمارية، توثيق معمارية النظام، تصور هيكل البرمجيات، إنشاء مخططات C4، أو توليد مخططات السياق/الحاوية/المكون/النشر. تشمل المحفزات "مخطط المعمارية"، "مخطط C4"، "سياق النظام"، "مخطط الحاوية"، "مخطط المكون"، "مخطط النشر"، "توثيق المعمارية"، "تصور المعمارية".

استخدم عندما يقوم Codex ببناء أو تطوير لعبة ويب (HTML/JS) ويحتاج إلى حلقة تطوير + اختبار موثوقة: نفذ تغييرات صغيرة، شغّل سكربت اختبار يعتمد على Playwright مع دفعات إدخال قصيرة وتوقفات متعمدة، افحص لقطات الشاشة/النصوص، وراجع أخطاء الكونسول باستخدام render_game_to_text.

استخدم عندما يطلب المستخدم إنشاء أو تعديل الصور عبر واجهة برمجة تطبيقات الصور من OpenAI (على سبيل المثال: إنشاء صورة، تعديل/تلوين/قناع، إزالة أو استبدال الخلفية، خلفية شفافة، صور المنتجات، الفن المفاهيمي، الأغلفة، أو نسخ متعددة)؛ قم بتشغيل أداة سطر الأوامر المرفقة (`scripts/image_gen.py`) وتتطلب مفتاح `OPENAI_API_KEY` للاتصالات الحية.

أنشئ شرائح عرض تقديمي احترافية باستخدام Marp مع 7 ثيمات جميلة (الافتراضي، البسيط، الملون، الداكن، التدرج، التقنية، الأعمال). استخدمها عندما يطلب المستخدمون إنشاء شرائح، عروض تقديمية، أو مستندات Marp. تدعم الثيمات المخصصة، تخطيطات الصور، وطلبات "اجعلها تبدو جيدة" مع تحسينات جودة تلقائية.

توليد الميمات باستخدام واجهة برمجة التطبيقات memegen.link. استخدمها عندما يطلب المستخدمون الميمات، أو يرغبون في إضافة الفكاهة إلى المحتوى، أو يحتاجون إلى وسائل بصرية لوسائل التواصل الاجتماعي. تدعم أكثر من 100 قالب شائع مع نص مخصص وتنسيق.

القواعد: - الحفاظ على المعنى والمصطلحات التقنية. - إبقاء مقاطع markdown/code دون تغيير. - إرجاع كائن JSON صالح فقط: {"text":"..."} النص: