ui-ux-pro-max
أنشئ تصاميم UI/UX احترافية باستخدام ذكاء نظام التصميم
También disponible en: sickn33,DCjanus,nextlevelbuilder
يتطلب إنشاء تصاميم UI/UX احترافية معرفة عميقة بإمكانية الوصول، ونظرية الألوان، والخطوط، وأنماط خاصة بالمكدس التقني. توفر هذه المهارة قاعدة بيانات قابلة للبحث تضم أكثر من 50 نمط تصميم، ولوحات ألوان، وأزواج خطوط، وإرشادات تنفيذ لمساعدتك على بناء واجهات مصقولة بشكل أسرع.
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Pruébalo
Usando "ui-ux-pro-max". ابحث عن نظام تصميم 'beauty spa wellness elegant'
Resultado esperado:
تم إنشاء نظام التصميم:
- نمط المنتج: قائم على الخدمة مع التركيز على الحجز
- نمط الواجهة: بساطة ناعمة مع أشكال عضوية
- لوحة الألوان: أخضر حكيم أساسي، خلفية كريمية، لمسات من ذهب الوردي
- الخطوط: Playfair Display (للعناوين) + Lato (للنص)
- التأثيرات: ظلال خفيفة، تدرجات لطيفة، انتقالات سلسة
Usando "ui-ux-pro-max". احصل على إرشادات UX لإمكانية الوصول للحركة
Resultado esperado:
تم العثور على إرشادات UX:
1. prefers-reduced-motion: تحقق من استعلام الوسائط ووفّر بديلاً ثابتاً
2. حدود المدة: استخدم 150-300ms للتفاعلات الدقيقة
3. أداء التحويل: حوّل transform/opacity، وليس width/height
4. حالات التحميل: اعرض شاشات هيكلية أو دوائر تحميل للعمليات غير المتزامنة
Auditoría de seguridad
SeguroStatic 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.
Puntuación de calidad
Lo que puedes crear
مطور واجهات أمامية يبني لوحة تحكم جديدة
يحتاج مطور إلى إنشاء لوحة تحكم إدارية لمنتج SaaS. يستخدم المهارة للحصول على توصيات نظام التصميم لـ 'لوحة تحكم SaaS'، واسترجاع لوحات ألوان يمكن الوصول إليها لواجهات كثيفة البيانات، والحصول على إرشادات خاصة بـ React لتحسين الأداء.
مؤسس منفرد ينشئ صفحة هبوط
يحتاج مؤسس ليس مصمماً إلى صفحة هبوط احترافية لشركته الناشئة. يبحث عن 'مركز تجميل وسبا wellness service' للحصول على نظام تصميم كامل مع النمط والألوان والخطوط وأنماط صفحة الهبوط، ثم يستخدم إرشادات Tailwind CSS لتنفيذها.
مصمم يضمن الامتثال لإمكانية الوصول
يريد مصمم التأكد من أن واجهته تلبي إرشادات WCAG. يستعلم عن نطاق ux للحصول على 'إمكانية الوصول التباين التركيز' للحصول على قواعد محددة حول نسب تباين الألوان، وحالات التركيز، والتنقل بلوحة المفاتيح مع أمثلة الكود.
Prueba estos prompts
ابحث عن أنماط التصميم المطابقة لـ 'لوحة تحكم داكنة بسيطة'. اعرض لي أهم 3 توصيات أنماط مع مخططات ألوانها وخصائصها الرئيسية.
أنشئ نظام تصميم كامل لـ 'لوحة تحكم تداول عملات رقمية fintech'. ضمّن نمط المنتج، ونمط الواجهة، ولوحة الألوان، والطباعة، والتأثيرات. سمِّ المشروع 'CryptoVault'.
راجع مكون الزر هذا بحثاً عن مشاكل إمكانية الوصول: [الصق الكود]. تحقق من إرشادات WCAG لتباين الألوان، وحالات التركيز، وحجم هدف اللمس. قدم إصلاحات محددة.
أبني شريط تنقل متجاوب مع Tailwind CSS. ابحث عن إرشادات 'navbar responsive floating' في مكدس html-tailwind ووفّر كود التنفيذ مع سمات aria المناسبة.
Mejores prácticas
- ابدأ دائماً باستخدام العلم --design-system للحصول على توصيات شاملة مع التعليل قبل التنفيذ
- تحقق من إرشادات إمكانية الوصول أولاً - تباين الألوان (4.5:1)، وحالات التركيز، وأهداف اللمس (44x44px كحد أدنى)
- استخدم عمليات البحث الخاصة بالمكدس للحصول على أنماط التنفيذ التي تتبع اتفاقيات الإطار
Evitar
- استخدام الرموز التعبيرية كأيقونات واجهة بدلاً من مكتبات أيقونات SVG المناسبة مثل Heroicons أو Lucide
- تنفيذ حالات التمرير باستخدام تحويلات scale التي تسبب تحول التخطيط
- استخدام بطاقات زجاجية شفافة (bg-white/10) في الوضع الفاتح حيث تصبح غير مرئية