ui-ux-pro-max
أنشئ تصاميم UI/UX احترافية باستخدام ذكاء نظام التصميم
متاح أيضًا من: DCjanus,nextlevelbuilder
يتطلب إنشاء تصاميم UI/UX احترافية معرفة عميقة بإمكانية الوصول، ونظرية الألوان، والخطوط، وأنماط خاصة بالمكدس التقني. توفر هذه المهارة قاعدة بيانات قابلة للبحث تضم أكثر من 50 نمط تصميم، ولوحات ألوان، وأزواج خطوط، وإرشادات تنفيذ لمساعدتك على بناء واجهات مصقولة بشكل أسرع.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "ui-ux-pro-max". ابحث عن نظام تصميم 'beauty spa wellness elegant'
النتيجة المتوقعة:
تم إنشاء نظام التصميم:
- نمط المنتج: قائم على الخدمة مع التركيز على الحجز
- نمط الواجهة: بساطة ناعمة مع أشكال عضوية
- لوحة الألوان: أخضر حكيم أساسي، خلفية كريمية، لمسات من ذهب الوردي
- الخطوط: Playfair Display (للعناوين) + Lato (للنص)
- التأثيرات: ظلال خفيفة، تدرجات لطيفة، انتقالات سلسة
استخدام "ui-ux-pro-max". احصل على إرشادات UX لإمكانية الوصول للحركة
النتيجة المتوقعة:
تم العثور على إرشادات UX:
1. prefers-reduced-motion: تحقق من استعلام الوسائط ووفّر بديلاً ثابتاً
2. حدود المدة: استخدم 150-300ms للتفاعلات الدقيقة
3. أداء التحويل: حوّل transform/opacity، وليس width/height
4. حالات التحميل: اعرض شاشات هيكلية أو دوائر تحميل للعمليات غير المتزامنة
التدقيق الأمني
آمنStatic analysis flagged 1395 patterns across 28 files, but all findings are false positives. The 'weak cryptographic algorithm' detections are triggered by BM25 scoring math (log functions) in a text search engine, not actual cryptography. 'Hardcoded URL' findings are documentation URLs in CSV data files. 'External commands' are bash examples in documentation showing how to run the Python search tool. The skill performs local file operations on its own data files with no network calls, no dynamic code execution, and no user input processing.
درجة الجودة
ماذا يمكنك بناءه
مطور واجهات أمامية يبني لوحة تحكم جديدة
يحتاج مطور إلى إنشاء لوحة تحكم إدارية لمنتج SaaS. يستخدم المهارة للحصول على توصيات نظام التصميم لـ 'لوحة تحكم SaaS'، واسترجاع لوحات ألوان يمكن الوصول إليها لواجهات كثيفة البيانات، والحصول على إرشادات خاصة بـ React لتحسين الأداء.
مؤسس منفرد ينشئ صفحة هبوط
يحتاج مؤسس ليس مصمماً إلى صفحة هبوط احترافية لشركته الناشئة. يبحث عن 'مركز تجميل وسبا wellness service' للحصول على نظام تصميم كامل مع النمط والألوان والخطوط وأنماط صفحة الهبوط، ثم يستخدم إرشادات Tailwind CSS لتنفيذها.
مصمم يضمن الامتثال لإمكانية الوصول
يريد مصمم التأكد من أن واجهته تلبي إرشادات WCAG. يستعلم عن نطاق ux للحصول على 'إمكانية الوصول التباين التركيز' للحصول على قواعد محددة حول نسب تباين الألوان، وحالات التركيز، والتنقل بلوحة المفاتيح مع أمثلة الكود.
جرّب هذه الموجهات
ابحث عن أنماط التصميم المطابقة لـ 'لوحة تحكم داكنة بسيطة'. اعرض لي أهم 3 توصيات أنماط مع مخططات ألوانها وخصائصها الرئيسية.
أنشئ نظام تصميم كامل لـ 'لوحة تحكم تداول عملات رقمية fintech'. ضمّن نمط المنتج، ونمط الواجهة، ولوحة الألوان، والطباعة، والتأثيرات. سمِّ المشروع 'CryptoVault'.
راجع مكون الزر هذا بحثاً عن مشاكل إمكانية الوصول: [الصق الكود]. تحقق من إرشادات WCAG لتباين الألوان، وحالات التركيز، وحجم هدف اللمس. قدم إصلاحات محددة.
أبني شريط تنقل متجاوب مع Tailwind CSS. ابحث عن إرشادات 'navbar responsive floating' في مكدس html-tailwind ووفّر كود التنفيذ مع سمات aria المناسبة.
أفضل الممارسات
- ابدأ دائماً باستخدام العلم --design-system للحصول على توصيات شاملة مع التعليل قبل التنفيذ
- تحقق من إرشادات إمكانية الوصول أولاً - تباين الألوان (4.5:1)، وحالات التركيز، وأهداف اللمس (44x44px كحد أدنى)
- استخدم عمليات البحث الخاصة بالمكدس للحصول على أنماط التنفيذ التي تتبع اتفاقيات الإطار
تجنب
- استخدام الرموز التعبيرية كأيقونات واجهة بدلاً من مكتبات أيقونات SVG المناسبة مثل Heroicons أو Lucide
- تنفيذ حالات التمرير باستخدام تحويلات scale التي تسبب تحول التخطيط
- استخدام بطاقات زجاجية شفافة (bg-white/10) في الوضع الفاتح حيث تصبح غير مرئية