ui-ux-pro-max
Создание профессиональных UI/UX дизайнов с использованием интеллекта дизайн-системы
Auch verfügbar von: nextlevelbuilder,sickn33,DCjanus
Создание профессиональных UI/UX дизайнов требует глубоких знаний в области доступности, теории цвета, типографики и паттернов для конкретных стеков технологий. Этот навык предоставляет поисковую базу данных из 50+ стилей дизайна, цветовых палитр, шрифтовых пар и руководств по реализации, помогая вам быстрее создавать отполированные интерфейсы.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "ui-ux-pro-max". Поиск дизайн-системы 'beauty spa wellness elegant'
Erwartetes Ergebnis:
Дизайн-система сгенерирована:
- Паттерн продукта: Сервисный бизнес с фокусом на бронирование
- UI стиль: Мягкий минимализм с органическими формами
- Цветовая палитра: Шалфейно-зелёный основной, кремовый фон, акценты розового золота
- Типографика: Playfair Display (заголовки) + Lato (основной текст)
- Эффекты: Тонкие тени, мягкие градиенты, плавные переходы
Verwendung von "ui-ux-pro-max". Получить UX руководства для доступности анимации
Erwartetes Ergebnis:
UX руководства найдены:
1. prefers-reduced-motion: Проверить media query и предоставить статичную фоллбэк версию
2. Лимиты длительности: Использовать 150-300ms для микро-взаимодействий
3. Производительность transform: Анимировать transform/opacity, а не width/height
4. Состояния загрузки: Показывать skeleton экраны или спиннеры для асинхронных операций
Sicherheitsaudit
SicherStatic 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.
Qualitätsbewertung
Was du bauen kannst
Frontend разработчик, создающий новую панель управления
Разработчику нужно создать административную панель управления для SaaS продукта. Он использует навык для получения рекомендаций дизайн-системы для 'SaaS dashboard', извлечения доступных цветовых палитр для интерфейсов с большим количеством данных и получения руководств для React по оптимизации производительности.
Соло-основатель, создающий лендинг
Основатель без дизайнерского опыта нуждается в профессиональной лендинг-странице для своего стартапа. Он ищет 'beauty spa wellness service' для получения полной дизайн-системы со стилем, цветами, типографикой и паттернами лендинга, затем использует руководства Tailwind CSS для реализации.
Дизайнер, обеспечивающий соответствие требованиям доступности
Дизайнер хочет убедиться, что его UI соответствует руководствам WCAG. Он запрашивает ux домен для 'accessibility contrast focus', чтобы получить конкретные правила о коэффициентах контрастности цветов, состояниях фокуса и навигации с клавиатуры с примерами кода.
Probiere diese Prompts
Найти стили дизайна, соответствующие 'minimalist dark mode dashboard'. Показать топ-3 рекомендации стилей с их цветовыми схемами и ключевыми характеристиками.
Сгенерировать полную дизайн-систему для 'fintech crypto trading dashboard'. Включить паттерн продукта, UI стиль, цветовую палитру, типографику и эффекты. Назвать проект 'CryptoVault'.
Проверить этот компонент кнопки на проблемы доступности: [вставить код]. Проверить по руководствам WCAG для контраста цветов, состояний фокуса и размера области нажатия. Предоставить конкретные исправления.
Я создаю адаптивный navbar с Tailwind CSS. Найти руководства 'navbar responsive floating' в стеке html-tailwind и предоставить код реализации с правильными aria атрибутами.
Bewährte Verfahren
- Всегда начинайте с флага --design-system для получения комплексных рекомендаций с обоснованием перед реализацией
- Сначала проверьте руководства по доступности — контраст цветов (4.5:1), состояния фокуса и области нажатия (минимум 44x44px)
- Используйте поиск по конкретному стеку для получения паттернов реализации, следующих конвенциям фреймворка
Vermeiden
- Использование emoji как UI иконок вместо правильных SVG библиотек иконок, таких как Heroicons или Lucide
- Реализация hover состояний с scale transform, вызывающими сдвиг макета
- Использование прозрачных стеклянных карточек (bg-white/10) в светлом режиме, где они становятся невидимыми