UI/UX Design Pro Skill — плагин
Скилл для агента с базой из 107 стилей, 127 палитр и 107 шрифтовых пар: генерирует дизайн-систему и проверяет код интерфейса
- 100 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Читает справочные данные и проверяет файлы интерфейса, сеть для работы не нужна
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add plugins/ui-ux-design-pro-skillОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Читает справочные данные и проверяет файлы интерфейса, сеть для работы не нужна
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
UI/UX Design Pro Skill дает агенту справочник по дизайну интерфейсов и команды на Bun для работы с ним. В базе 107 стилей (от glassmorphism до data brutalism), 127 цветовых палитр по отраслям, 107 шрифтовых пар, 150 правил подбора и 150 рекомендаций по UX, а также заметки по 16 стекам: React, Next.js, Vue, Nuxt, Angular, Svelte, Astro и другим. Поиск идет через движок Orama. Команда `generate` по описанию проекта собирает дизайн-систему в Markdown: фирменные цвета, шкалы оттенков 50–950, типографику, компоненты с примерами на React и Tailwind и заметки по доступности. Команда `search` ищет стили, палитры и шрифты по запросу, `icons` подбирает иконки, а `audit` проверяет файл интерфейса по 12 правилам качества и доступности, в том числе на типичные ошибки сгенерированного ИИ кода. Скилл требует от агента сначала прочитать справочные документы и только потом проектировать. По умолчанию он выбирает светлую тему, темную использует по явной просьбе.
Для кого. Дизайнерам и фронтенд-разработчикам, которые просят Claude Code или Cursor собрать лендинг, дашборд или SaaS-интерфейс и хотят системный дизайн вместо шаблонного.
Подходит, если
- Нужен дашборд для финтеха, и агент должен выбрать палитру, шрифты и плотность по отрасли
- Проекту требуется дизайн-система в одном Markdown-файле с токенами и примерами компонентов
- Готовый компонент React стоит проверить на доступность и признаки сгенерированного ИИ кода командой `audit`
- Для лендинга хочется перебрать стили (liquid glass, bento grid, brutalism) и сравнить их
Не подходит, если
- Среда без Bun: CLI работает только на нем
- Нужен готовый макет в Figma: скилл выдает только Markdown и код, файлов дизайна среди результатов нет
- Проект уже живет по строгой корпоративной дизайн-системе, и новую выбирать не из чего
Пример запроса к агенту
Собери дизайн-систему для дашборда финтеха на Next.js через ui-ux-design-pro и проверь компонент src/App.tsx командой auditОграничения
- CLI работает на Bun 1.0 и новее, без него команды `search`, `generate`, `icons` и `audit` не запускаются.
- Автор рекомендует GPT-5.3 Codex или Gemini 3.0 Pro, на других моделях качество результата не проверялось.
- Данные о стилях и палитрах лежат в CSV внутри репозитория и обновляются только его автором.
- Аудит использует 12 правил и находит типовые проблемы, а полную проверку доступности вручную он не заменяет.
Как отключить. Удалите папку скилла `ui-ux-design-pro` из каталога скиллов агента. Если ставили как плагин Claude Code, отключите плагин командой `/plugin`.
Частые вопросы
Как поставить UI/UX Design Pro в Claude Code?
Выполните `npx skills add https://github.com/saifyxpro/ui-ux-design-pro-skill --skill ui-ux-design-pro`. Для команд CLI еще нужен Bun: после клонирования выполните `bun install` в папке `skills/ui-ux-design-pro/cli`.
Какие команды есть в CLI?
Четыре: `search` ищет стили, палитры и шрифты, `icons` подбирает иконки, `generate` создает дизайн-систему в Markdown, `audit` проверяет файл интерфейса. Запуск: `bun run skills/ui-ux-design-pro/cli/index.ts search "SaaS dashboard" --domain style`.
Чем он отличается от UI UX Pro Max?
Оба дают агенту базу стилей и палитр и умеют собирать дизайн-систему. Здесь она собрана вокруг CLI на TypeScript под Bun с поиском Orama, а команда `audit` проверяет код по 12 правилам.
Для каких фреймворков есть заметки?
Для 16 стеков: React, Next.js, Vue, Nuxt, Angular, Remix, SolidJS, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose и Nuxt UI. Стек передается в `generate` флагом `--stack`.
Какая тема интерфейса по умолчанию?
Светлая. Скилл переходит на темную, только если пользователь прямо попросил об этом.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
ПлагиныСкилл с базой стилей, палитр, шрифтовых пар и UX-правил, который генерирует дизайн-систему под тип продукта
45 скиллов по корпоративному UX для агентов: палитры, типографика, формы, доступность WCAG и проверка интерфейса на удобство.
Скилл дизайна интерфейсов: арт-дирекция под продукт, общий DESIGN.md, токены, проверка верстки и доступности в браузере.
Скиллы против шаблонных интерфейсов: сетка, типографика, анимация и отступы, плюс генерация референсов для веба и мобильных
Скиллы для дизайн-инженеров: быстрая чистка интерфейса, доступность, метаданные и производительность анимаций
Реестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| UI/UX Design Pro Skill (эта карточка) | нет | 100 | |
| UI UX Pro Max | нет | 148 899 | похожий скилл с базой стилей и палитр, здесь добавлены CLI на Bun и аудит кода по 12 правилам |
| k-style-ui-ux | нет | 400 | плагин, который по PRD собирает черновик мобильных экранов в корейском стиле |
Коротко о README
README открывается списком достоинств: 107 стилей, 127 палитр, 107 шрифтовых пар, 16 стеков. Дальше идут требования (Bun), установка через `npx skills add`, примеры «до и после» с лендингом и дашбордом, схема работы поискового движка и таблица команд CLI.
Бейдж для README
Исходный SKILL.md
--- name: ui-ux-design-pro description: > Senior-level UI/UX design expert for building data-driven, premium production interfaces. Use when you need to: 1. Design complex applications (dashboards, SaaS, AI tools) from scratch 2. Generate comprehensive design systems (tokens, palettes, typography) 3. Audit existing UI for quality, accessibility, and "craft" 4. Search for proven real-world design patterns and implementation details ---