83.3K+Скачать
Перейти к руководству
ui-ux-pro-maxавтор nextlevelbuilder

UI UX Pro Max Skill.

Навык для Claude Code и Codex для UI-дизайна: интеллект UI/UX-дизайна для веб, мобильных и десктопных интерфейсов: раскладка, цвет, типографика и правила UX.

  • Web и UI
  • UI-код
Скачать OpenDesignИнструкция по использованию
nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/ui-ux-pro-max/SKILL.mdSKILL.md
--- name: ui-ux-pro-max description: UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, … --- ## When to Apply ## Rule Categories by Priority ## Running the search tool ## Workflow ## Query Contract ## If a search returns 0 results
Метаданные и заголовки разделов из исходного файла от 2026-09-14 · 15 922 символа полностью

01 Что делает

Что делает skill ui-ux-pro-max в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

UI/UX Pro Max — это skill для поиска дизайн-знаний для веб-, мобильных и десктопных интерфейсов. Он обращается к 79 стилям (50 активных), 192 продуктовым палитрам с профилями обоснования, 74 сочетаниям шрифтов, 119 UX-рекомендациям, 105 иконкам, 17 GSAP-пресетам, 25 типам диаграмм и 22 технологическим стекам. Используйте его для проектирования страниц, выбора цвета и типографики, проверки UI на доступность и согласованность, реализации навигации и анимации или улучшения удобства использования.

Он автоматически определяет стек по package.json, pubspec.yaml или xcodeproj и создаёт design system с опциональным сохранением для повторного использования между сессиями. Три параметра дизайна (вариативность, motion, плотность) настраивают результат. Skill предоставляет тематические поиски по UX, цвету, типографике, иконкам, GSAP и рекомендациям по реализации для конкретного стека.

Что он выдаёт

  • Design system с паттерном, стилем, цветами, типографикой, эффектами и анти-паттернами в формате ASCII, markdown или JSON
  • design-system/project-slug/pages/page-name.md для переопределений на уровне страницы при передаче --page
  • Тематические результаты (UX-рекомендации, цветовые палитры, сочетания шрифтов, иконки, GSAP-пресеты, рекомендации по диаграммам, инструкции по реализации для стека)
Смотрите пример запроса ↗

Как это работает

  1. 01
    Анализ требований

    Извлекает тип продукта (SaaS, e-commerce, дашборд), целевую аудиторию, ключевые слова стиля (игривый, минималистичный, тёмный режим) и определяет стек по package.json, pubspec.yaml, xcodeproj или app.json.

  2. 02
    Генерация design system

    Запустите search.py с --design-system для новых страниц или проектов.

  3. 03
    Сохранение как Master плюс переопределения

    Добавьте --persist и --output-dir, указывающий на корень проекта, чтобы записать design-system/project-slug/MASTER.md. Переопределения для конкретных страниц размещаются в pages/page-name.md.

  4. 04
    Дополнение тематическими поисками

    Запросите один домен (ux, color, typography, icons, gsap, chart, landing, google-fonts) с 2-5 значимыми терминами и одним ограничением.

  5. 05
    Правила запроса стека

    Используйте --stack с обнаруженным стеком (react, nextjs, vue, swiftui, flutter и т. д.) для получения рекомендаций, специфичных для реализации.

  6. 06
    Проверка правил перед сдачей

    Перед сдачей UI приложения прочитайте references/pro-rules.md и пройдите по каноническому чек-листу перед сдачей, охватывающему дисциплину иконок, обратную связь при взаимодействии, контраст в светлой/тёмной теме, раскладку с учётом safe-area и доступность для UI нативных/мобильных приложений.

02 Определите своё применение

Когда использовать ui-ux-pro-max Skill

Используйте навык ui-ux-pro-max в Claude Code или Codex, когда задача — UI-дизайн такого рода. Применимость и ограничения ниже взяты из собственного файла навыка.

Хорошо подходит

  • Проектирование новых страниц или создание и рефакторинг компонентов UI
  • Выбор цвета, типографики, отступов или систем разметки
  • Ревью UI на предмет UX, доступности или консистентности
  • Реализация навигации, анимации или адаптивного поведения
  • Улучшение воспринимаемого качества и удобства интерфейса

Знайте границы

  • Чистая backend-логика, проектирование API или базы данных
  • Невизуальная работа по производительности, инфраструктуре или DevOps
  • Невизуальные скрипты, если задача не меняет то, как что-то выглядит, ощущается, движется или с чем взаимодействуют

Что предоставить

  • Тип продукта и аудиторияSaaS, e-commerce, портфолио, дашборд, развлечения, инструмент или продуктивность, а также возрастная группа и контекст использования (в дороге, отдых, работа)
  • Ключевые слова стиляИгривый, яркий, минималистичный, тёмная тема, content-first, immersive или другие прилагательные, описывающие желаемое визуальное направление
  • Название проекта для сохраненияПередайте -p "Project Name" в --design-system, чтобы назвать подкаталог design-system и файл MASTER.md
  • Дизайн-параметры (опционально)Три слайдера от 1 до 10: --variance (от центрированного до смелого/асимметричного), --motion (от сдержанной до сложной хореографии), --density (от просторного до плотного/шкала отступов дашборда)

03 Внутри скилла

Правила, которые skill ui-ux-pro-max задаёт Claude Code и Codex

8 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт для агента — та часть файла, которая влияет на результат.

  1. Доступность превыше всего

    Приоритет 1 (КРИТИЧНО). Обеспечьте контраст 4.5:1, alt-тексты, навигацию с клавиатуры и aria-labels. Никогда не убирайте focus rings и не используйте кнопки только с иконкой без подписей.

  2. Минимальный размер областей касания 44×44px

    Приоритет 2 (КРИТИЧНО). Область касания и взаимодействия должна быть не менее 44×44px, с отступами 8px+ и обратной связью при загрузке. Избегайте зависимости только от hover и мгновенных изменений состояния (0ms).

  3. Повторить запрос один раз при пустом результате

    Если поиск возвращает 0 результатов, повторите запрос один раз с более узким запросом или явным указанием домена/стека.

  4. Используйте наименьший режим поиска

    Выбирайте --design-system для нового проекта или страницы, один явный --domain для конкретной проблемы или бага компонента, --stack для известного стека реализации.

  5. Никогда не предполагайте стек

    Определяйте стек по package.json, pubspec.yaml, xcodeproj, Package.swift, composer.json или app.json. Если ничего не удаётся определить, а рекомендации по стеку важны, спросите пользователя.

  6. Вызывайте поиск по полному пути

    Всегда запускайте python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" с полным путём, а не относительным.

  7. Не перезаписывайте master без авторизации

    Если design-system/project-slug/MASTER.md существует, --persist пропускает запись и оставляет файл без изменений, если не передан --force.

  8. Запрашивайте семантический результат до стека

    Для багов текстовой раскладки и компактных компонентов сначала ищите семантический результат UX (баланс строк заголовка-сироты, перенос текста бейджа-чипа), затем определённый стек для реализации.

04 Применение

Установите ui-ux-pro-max в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте ui-ux-pro-max в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

Общая форма CLI skills для .claude/skills/ui-ux-pro-max/SKILL.md; репозиторий может документировать собственный путь.

Дайте skill первую задачу по дизайну интерфейса

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt
Design a dashboard page for a SaaS analytics product targeting data teams. The interface should feel modern and minimal with good dark mode support. Use the detected Next.js stack for implementation guidance. Persist the design system so the team can reference it across sessions.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

  • Проверяйте возвращённый домен, идентичность верхнего результата и соответствие продукту и платформе пользователя перед применением результатов поиска
  • Повторите запрос один раз с более узкой формулировкой или явным domain/stack, если вывод пуст или не по теме.
  • Прочитайте существующий MASTER.md перед тем, как решить, оправдан ли --force для его регенерации
  • Для работы над доступностью запрашивайте один наблюдаемый результат за раз, используя явные термины результата доступности, и проверяйте, что результат соответствует конкретному взаимодействию или критерию WCAG

В OpenDesign ui-ux-pro-max встроен: Plugins → Skills, выберите его в верхней панели.

Скачать OpenDesignЧитать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author
nextlevelbuilder
Repository
github.com/nextlevelbuilder/ui-ux-pro-max-skill Ветка main
Файл skill
.claude/skills/ui-ux-pro-max/SKILL.md Контрольная сумма содержимого зафиксирована при верификации; коммит 7f69fed
License
MIT Из LICENSE.
Звёзды репозитория
127 450 Снимок GitHub от 2026-09-14 для всего репозитория nextlevelbuilder/ui-ux-pro-max-skill, который содержит 7 skills в этом каталоге. Не является рейтингом или счётчиком использования для ui-ux-pro-max.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звёзд проверены. Включён в основной OpenDesign (проверено 2026-08-28); запись живого запуска на этой странице отсутствует.

Внутри SKILL.md

  1. Когда применятьИспользуйте для структуры UI, визуального дизайна, взаимодействия, качества UX. Пропускайте для backend, API, инфраструктуры.
  2. Категории правил по приоритету10 категорий от Accessibility (КРИТИЧНО) до Charts (НИЗКИЙ) с ключевыми проверками и антипаттернами
  3. Запуск инструмента поискаВызывайте search.py по полному пути из директории skill. Требуется Python 3.x, без внешних зависимостей.
  4. Контракт запросаВыбирайте наименьший режим поиска. Одно доминирующее намерение, 2-5 терминов, проверяйте domain/fit, повторите один раз при пустом результате.
  5. Шаг 1: Анализ требований пользователяИзвлеките тип продукта, аудиторию, ключевые слова стиля и определите стек по package.json или эквиваленту.
  6. Шаг 2: Генерация design systemИспользуйте --design-system для новых страниц/проектов. Агрегирует совпадения по продукту/стилю/цвету/лендингу/типографике.
  7. Шаг 2b: Сохранение design systemДобавьте --persist и --output-dir для записи MASTER.md. Существующий Master пропускается, если не авторизован --force.
  8. Шаг 2c: Design DialsОпциональные слайдеры 1-10 для вариативности, движения, плотности для настройки вывода --design-system.
  9. Шаг 3: Дополнение детальными запросамиЗапрашивайте домены product, style, color, typography, google-fonts, chart, ux, landing, icons, gsap, react, web.
  10. Шаг 4: Рекомендации по стекуИспользуйте --stack с определённым стеком для специфических указаний по реализации. Доступно 22 стека.
  11. Если поиск возвращает 0 результатовПовторите один раз с более узким запросом. Если результат всё равно пуст, обратитесь к таблице приоритетов и сообщите пользователю.
  12. Советы для лучших результатовОдно намерение, 2-5 терминов на запрос. Повторите один раз. Используйте --design-system для нового, --domain для узкого.
Собственное описание skill
Интеллектуальный помощник для UI/UX проектирования веб-приложений, мобильных и десктопных интерфейсов. Этот skill используется при проектировании, создании, ревью или исправлении интерфейсов, включая страницы, компоненты, дизайн-системы, доступность, взаимодействие, адаптивную вёрстку, типографику, цвет, графики и реализацию UI для конкретных стеков. Локальные данные: 79 стилей (50 активных), 192 палитры и профиля продуктов, 74 пары шрифтов, 119 UX-руководств, 105 иконок, 17 пресетов GSAP, 25 типов графиков и 22 стека.

Описание из front-matter SKILL.md. Полный файл занимает около 15 922 символов. Прочитайте полный файл на GitHub.

06 Перед установкой

Вопросы о skill ui-ux-pro-max

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Что нужно для работы skill?

Скрипт поиска требует Python 3.x без внешних зависимостей. Его нужно запускать по полному пути из директории skill с помощью python, python3 или py -3. В README есть инструкции по установке, если Python отсутствует.

Как переопределить design system для конкретной страницы?

Передайте --page "page-name" при сохранении, чтобы создать design-system/project-slug/pages/page-name.md. При сборке этой страницы агент сначала читает MASTER.md, затем проверяет, существует ли pages/page-name.md. Если да, его правила переопределяют Master. Иначе используются только правила Master.

UI UX Pro Max

Запустите ui-ux-pro-max на реальной задаче UI-дизайна.

Skill ui-ux-pro-max входит в состав OpenDesign. Скачайте приложение, выберите skill в Plugins → Skills, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesignВсе навыки
Терминал
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max