UI UX Pro Max

Установка

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл дает агенту локальную базу для дизайна интерфейсов: 79 стилей, 192 палитры, 74 шрифтовые пары, 25 типов графиков, 119 UX-правил и рекомендации для 22 стеков. Поиск по базе идет через BM25 на Python. По запросу агент подбирает стиль, цвета и типографику под тип продукта, пишет код и проверяет результат на типичные UX-ошибки. Версия 2.0 добавила генератор дизайн-системы с 192 отраслевыми правилами.

Для кого. Разработчики и дизайнеры, которые верстают лендинги, дашборды и мобильные экраны с помощью агента.

Пример запроса к агенту

Сделай дашборд аналитики для клиники в темной теме, подбери палитру и графики

Ограничения

Для поиска нужен Python 3, скрипты используют только стандартную библиотеку и не ходят в сеть. Брендинг, логотипы, презентации и генерация изображений вынесены в платную версию. Старый пакет uipro-cli устарел, актуальный называется ui-ux-pro-max-cli.

Как отключить. Выполните uipro uninstall, для конкретного агента uipro uninstall --ai claude, для глобальной установки uipro uninstall --global.

Проверка безопасности

• Устанавливается глобальный npm-пакет
• Скилл запускает локальные Python-скрипты

Коротко о README

UI UX Pro Max описан как скилл с дизайн-экспертизой для интерфейсов на разных платформах. В README перечислены объемы базы, таксономия стилей и правила для устойчивой верстки текста и компактных элементов. Установка через маркетплейс Claude Code или CLI uipro для двух десятков агентов, включая глобальную установку. Отдельно описано сравнение с платной версией.

SKILL.md

---
name: banner-design
description: "Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional generated or supplied visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage."
argument-hint: "[platform] [style] [dimensions]"
license: MIT
metadata:
  author: claudekit
  version: "1.0.0"
---

# Banner Design - Multi-Format Creative Banner System

Design banners across social, ads, web, and print formats. Generate multiple art direction options with CSS-built, user-supplied, or optionally generated visual elements. This skill handles banner design only. It does not handle video editing, full website design, or print production.

## When to Activate

- User requests banner, cover, or header design
- Social media cover/header creation
- Ad banner or display ad design
- Website hero section visual design
- Event/print banner design
- Creative asset generation for campaigns

## Available Resources

This workflow is self-contained: it requires no sibling skills or skill-relative scripts. Use `references/banner-sizes-and-styles.md` for the bundled size, safe-zone, and art-direction guidance. Browser research, image generation, and screenshot tooling are optional capabilities; when unavailable, use supplied assets, CSS-built visuals, and the runtime's standard preview or capture workflow.

## Workflow

### Step 1: Gather Requirements (AskUserQuestion)

Collect via AskUserQuestion:
1. **Purpose** — social cover, ad banner, website hero, print, or creative asset?
2. **Platform/size** — which platform or custom dimensions?
3. **Content** — headline, subtext, CTA, logo placement?
4. **Brand** — existing brand guidelines, logo files, colors, or typography?
5. **Style preference** — any art direction? (show style options if unsure)
6. **Quantity** — how many options to generate? (default: 3)

### Step 2: Research & Art Direction

1. Read `references/banner-sizes-and-styles.md` for the target format, safe zone, and suitable styles.
2. If browser research is available and permitted, collect 3–5 references for composition and art-direction inspiration. Otherwise, work from the bundled reference and any examples supplied by the user.
3. Select 2–3 complementary art directions and state how each supports the banner's purpose.

### Step 3: Design & Generate Options

For each art direction option:

1. **Create the banner in HTML/CSS**
   - Use the exact platform dimensions from the size reference
   - Apply safe-zone rules (critical content in the central 70–80%)
   - Use at most 2 typefaces, a single CTA, and text contrast of at least 4.5:1
   - Apply the user's supplied logo, colors, typography, and imagery; do not invent brand rules

2. **Choose a visual source**
   - Prefer user-supplied or appropriately licensed assets when provided
   - Use gradients, geometric forms, type, and other CSS-built visuals for a dependency-free result
   - If the runtime provides an authorized image-generation capability, it may generate a background or illustration at the target aspect ratio
   - Keep generated visual prompts free of text, letters, and words so final copy remains editable and accessible in HTML

Похожие