● مجتمع
nextlevelbuilder
⚡ فوري
UI/UX Pro Max Skill
بواسطة nextlevelbuilder · nextlevelbuilder/ui-ux-pro-max-skill
أوقف Claude عن توليد واجهات مستخدم قبيحة. هذه المهارة تعلّمه التصميم الحقيقي — مقاييس الخط، إيقاع التباعد، أنظمة الألوان، وإمكانية الوصول — عبر الويب والمحمول وسطح المكتب.
UI/UX Pro Max مهارة معرفة تصميم شاملة تحقن ذكاءً تصميميًا في أي agent يحمّلها. تغطي الطباعة ونظرية اللون والتباعد/الشبكة والحركة وإمكانية الوصول (WCAG 2.2) والأنماط الخاصة بالمنصة (Apple HIG، Material 3، Fluent). تتناسب تناسبًا ممتازًا مع بيئات shadcn/Tailwind لكنها غير مرتبطة بها.
لماذا تستخدمه
الميزات الأساسية
- مقاييس طباعية مع إيقاع رأسي
- أنظمة ألوان مع tokens دلالية ووضع مظلم وإمكانية وصول
- مقياس تباعد + أنماط شبكة
- إرشادات الحركة (مدد، تسهيل، متى تُحرّك)
- أنماط المنصة: ويب، iOS HIG، Material 3، macOS
- قائمة تحقق إمكانية الوصول (افتراضيات WCAG 2.2 AA)
عرض مباشر
كيف يبدو في الممارسة
جاهز
حالات الاستخدام
استخدامات عملية: UI/UX Pro Max Skill
متى تستخدمه: مخرج shadcn يعمل لكن يبدو جاهزًا من الرف.
الخطوات
-
التشخيص
Use UI/UX Pro Max. Audit the design system in /src/ui — type, spacing, color tokens. Score each.✓ تم النسخ
→ بطاقة تقييم لكل محور مع مشكلات محددة
-
ضبط الـ tokens
Recommend a 4-step type scale + 4-step spacing scale aligned to 4px grid.✓ تم النسخ
→ جدول tokens
-
التطبيق
Update tokens.css and rerun. Diff what changed in the rendered look.✓ تم النسخ
→ طباعة أدق، إيقاع متسق
النتيجة: واجهة مستخدم لا تصرخ 'صُنعت في 5 دقائق'.
المزالق
- الإفراط في tokenization — كل قيمة تصبح متغيرًا — متغيرات للـ tokens المتكررة؛ القيم الحرفية جيدة للاستخدامات الفردية
متى تستخدمه: لديك سطح iOS وتريده يبدو أصيلًا لا كحساء منصات متعددة.
الخطوات
-
المواصفات
Design a settings screen for iOS — group cells, navigation, light/dark, accessibility callouts. Reference HIG.✓ تم النسخ
→ مواصفات مع مراجع HIG
-
التنفيذ
Translate to SwiftUI. Use system fonts, semantic colors, dynamic type.✓ تم النسخ
→ كود SwiftUI يبدو أصيلًا للنظام
النتيجة: شاشة تجتاز اختبار العين 'يبدو أصيلًا'.
المزالق
- الألوان المُبرمَجة تكسر الوضع المظلم — استخدم ألوان النظام الدلالية؛ المهارة تفرض هذا
متى تستخدمه: تحتاج WCAG 2.2 AA على تدفق حرج.
الخطوات
-
التدقيق
Audit /components/Form.tsx against WCAG 2.2 AA. Find issues with contrast, labels, focus order.✓ تم النسخ
→ قائمة مشكلات مع الخطورة
-
الإصلاح
Apply fixes. Verify with screen-reader semantic outline.✓ تم النسخ
→ قائمة المشكلات تقلص؛ المخطط الدلالي يُقرأ بنظافة
النتيجة: مكوّن يجتاز التدقيق + اختبار المستخدم الفعلي.
المزالق
- الإصلاحات التلقائية تكسر التخطيط البصري — أعد الرسم بعد كل إصلاح؛ فحص انحدار بصري
التركيبات
اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10
نظام تصميم + أنظمة مرجعية بجودة العلامة التجارية
Use UI/UX Pro Max for fundamentals + open-design for brand styles.✓ تم النسخ
تطبيق تغييرات tokens عبر قاعدة الكود
Update tokens.css and propagate; run audit.✓ تم النسخ
التكلفة والحدود
تكلفة التشغيل
- حصة API
- N/A
- الرموز لكل استدعاء
- ثقيل في التدقيق الأول؛ أخف للمتابعات
- التكلفة المالية
- مجاني
- نصيحة
- دقّق مكوّنًا مكوّنًا، لا التطبيق كله دفعة واحدة
الأمان
الصلاحيات والأسرار ونطاق الأثر
الحد الأدنى من الصلاحيات: Read project files
تخزين بيانات الاعتماد: لا شيء
نقل البيانات الخارجي: لا شيء
استكشاف الأخطاء
الأخطاء الشائعة وحلولها
Recommendations clash with brand guidelines
قدّم قيود العلامة التجارية مسبقًا؛ المهارة تحترمها
Skill triggers too aggressively
حدّد النطاق بدليل أو استدعِ صراحةً
البدائل
UI/UX Pro Max Skill مقابل البدائل
| البديل | متى تستخدمها | المقايضة |
|---|
| open-design-skill | تريد قوالب نظام تصميم بجودة العلامة التجارية | أساسيات أقل، جلدات جاهزة أكثر |
| Hand-curated design tokens | مصمم في الحلقة بالفعل | جهد أكبر |