Создание пользовательских интерфейсов требует поиска правильного стиля, цветов и паттернов компоновки. Этот навык предоставляет комплексную базу данных из 50 дизайнерских стилей, 21 цветовой палитры, 50 пар шрифтов и рекомендаций для конкретных фреймворков для создания профессиональных интерфейсов.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "ui-ux-pro-max". Create a glassmorphism style landing page for a SaaS product using React and Tailwind CSS
النتيجة المتوقعة:
Landing page structure with hero section, features, and CTA using Tailwind CSS with glassmorphism style
استخدام "ui-ux-pro-max". Generate a color palette for a SaaS application with professional tones
النتيجة المتوقعة:
Color palette with primary blue (#2563EB), secondary teal (#14B8A6), coral CTA (#F97316), and neutral grays for a SaaS application
استخدام "ui-ux-pro-max". Recommend font pairing for a modern web application
النتيجة المتوقعة:
Font pairing using Inter for headings (700 weight) and Open Sans for body text (400 weight) with 16px base size
التدقيق الأمني
آمنAll 910 static findings are false positives. The scanner incorrectly flagged hexadecimal color codes (#2563EB) as weak cryptographic algorithms, documentation URLs as hardcoded URLs, and legitimate UI/UX terms like 'debounce' as keylogger keywords. The skill contains only design data (styles, palettes, typography, frameworks) and has no network calls, file system access, or credential handling.
درجة الجودة
ماذا يمكنك بناءه
Рекомендации по дизайну для фронтенд-разработки
Получайте рекомендации по дизайну и рекомендации для конкретных фреймворков при создании пользовательских интерфейсов для веб-приложений или мобильных приложений
Вдохновение для дизайна продуктовых интерфейсов
Изучайте стили дизайна, цветовые палитры и типографские сочетания для поиска вдохновения при создании новых продуктовых интерфейсов
Документация дизайн-систем
Находите подходящие UI паттерны и структуры компонентов при документировании дизайн-систем и библиотек компонентов
جرّب هذه الموجهات
Create a [style] style landing page for a [product_type] using [framework]
Design a [product_type] dashboard with [color_scheme] colors, [font_pairing] fonts, and [chart_type] charts using [framework]
Create a [product_type] with [style1] and [style2] hybrid styling, including color palette with [primary_color] as primary, [secondary_color] as secondary, typography pairing [heading_font] and [body_font], accessibility-compliant [component] components, and framework guidelines for [framework]
Build a complete [product_type] application interface including: 1) Landing page with [style1] style and brand colors, 2) Dashboard with [chart_type] visualizations and [color_scheme] theme, 3) Mobile-responsive [component] components using [framework] best practices, 4) Typography system with [font_pairing], 5) Accessibility features following WCAG guidelines. Include framework-specific code patterns, component hierarchy, and state management approach.
أفضل الممارسات
- Начните с определения типа продукта и отрасли, чтобы сузить выбор подходящих стилей дизайна из базы данных
- Используйте рекомендации для конкретных фреймворков, чтобы убедиться, что паттерны кода соответствуют вашему технологическому стеку
- Учитывайте требования доступности, выбирая цветовые сочетания, соответствующие коэффициентам контрастности WCAG
تجنب
- Избегайте смешения более двух конфликтующих стилей дизайна без чёткой визуальной иерархии
- Не используйте декоративные шрифты для основного текста, так как они снижают читаемость
- Избегайте игнорирования специфичных для фреймворка соглашений, поскольку они помогают поддерживать согласованность кода
الأسئلة المتكررة
Как выбрать правильный стиль дизайна для моего проекта?
Могу ли я использовать этот навык для дизайна мобильных приложений?
Как этот навык помогает с доступностью?
Какие форматы вывода предоставляет этот навык?
Как категоризированы стили дизайна?
Работает ли этот навык с дизайн-системами?
تفاصيل المطور
المؤلف
nextlevelbuilderالترخيص
MIT
المستودع
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/ui-ux-pro-max/مرجع
main