design

nextlevelbuilder/ui-ux-pro-max-skill · Agent Skill

Создает визуальный контент: логотипы, фирменный стиль, баннеры, иконки, презентации и изображения для соцсетей.

Перейти к установке ↓

Обзор

АвторnextlevelbuilderОрганизация
Репозиторийnextlevelbuilder/ui-ux-pro-max-skill ↗
Папка скиллаdesign
Звёзды125 906
Файлы1
ЛицензияMIT
Обновлён2 сентября 2026 г.
СсылкиИсходник скилла ↗ · Репозиторий ↗

Проверка Mozgi

Что мы нашли в файлах скилла. Подробности — по подписке.

Безопасность
средний риск · обнаружено 2 момента, требующих внимания
Совместимость
нужны дополнительные программы
Похожие скиллы
найдено 139 похожих скиллов
Ещё в подписке

Установка

Скилл — это папка с файлом SKILL.md. Выберите своего агента и скопируйте команды в терминал (macOS, Linux или Git Bash на Windows) в корне проекта.

Скопируйте промпт и вставьте в Claude, Codex или другого ассистента: он сам проверит скилл и подключит его.

Установи мне скилл «design» с mozgi.io (https://mozgi.io/skills/design/).

1. Скачай архив: https://mozgi.io/skills/design/download
   Если не скачивается — возьми папку скилла из исходника: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/design
2. Прочитай SKILL.md и остальные файлы. Проверь, что скилл безопасен: нет скрытых команд, отправки данных наружу или скриптов, которые делают не то, что описано. Если что-то подозрительно — остановись и скажи мне.
3. Положи папку «design» в папку скиллов своего агента: .claude/skills/ для Claude Code, .agents/skills/ для Codex, .cursor/skills/ для Cursor, .gemini/skills/ для Gemini CLI. В проекте — внутри проекта, иначе в домашней папке (~/.claude/skills/ и т. п.).
4. Убедись, что получилось <папка скиллов>/design/SKILL.md.
5. Коротко расскажи, что умеет этот скилл, и предложи попробовать его на моей задаче.

Если какой-то шаг не можешь сделать сам — подскажи, что нажать или ввести.

Файлы скилла

1 файл Скачать ZIP

Просмотрите SKILL.md и сопутствующие файлы перед установкой. Клик по файлу — предпросмотр.

Содержимое SKILL.md

Оригинальный текст автора · только чтение

Design

Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social photos, icons.

When to Use

  • Brand identity, voice, assets
  • Design system tokens and specs
  • UI styling with shadcn/ui + Tailwind
  • Logo design and AI generation
  • Corporate identity program (CIP) deliverables
  • Presentations and pitch decks
  • Banner design for social media, ads, web, print
  • Social photos for Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok

Sub-skill Routing

| Task | Sub-skill | Details |

|------|-----------|---------|

| Brand identity, voice, assets | brand | External skill |

| Tokens, specs, CSS vars | design-system | External skill |

| shadcn/ui, Tailwind, code | ui-styling | External skill |

| Logo creation, AI generation | Logo (built-in) | references/logo-design.md |

| CIP mockups, deliverables | CIP (built-in) | references/cip-design.md |

| Presentations, pitch decks | Slides (built-in) | references/slides.md |

| Banners, covers, headers | Banner (built-in) | references/banner-sizes-and-styles.md |

| Social media images/photos | Social Photos (built-in) | references/social-photos-design.md |

| SVG icons, icon sets | Icon (built-in) | references/icon-design.md |

Script Paths

Script paths in this skill and its references/ are relative to the directory that contains this SKILL.md, not to the project: scripts/<file> is this skill's own scripts/ folder, and ../<skill>/scripts/<file> is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as docs/brand-guidelines.md, assets/design-tokens.json or src/ relative to it.

Logo Design (Built-in)

55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana, Atlas

Cloud, and MuAPI image generation.

Logo: Generate Design Brief

python3 scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"

Logo: Search Styles/Colors/Industries

python3 scripts/logo/search.py "minimalist clean" --domain style
python3 scripts/logo/search.py "tech professional" --domain color
python3 scripts/logo/search.py "healthcare medical" --domain industry

Logo: Generate with AI

ALWAYS generate output logo images with white background.

python3 scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
python3 scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage
python3 scripts/logo/generate.py --brand "TechFlow" --provider atlas
python3 scripts/logo/generate.py --brand "TechFlow" --provider muapi
python3 scripts/logo/generate.py --brand "TechFlow" --provider muapi --muapi-model nano-banana-pro

IMPORTANT: When scripts fail, try to fix them directly.

After generation, ALWAYS ask user about HTML preview via AskUserQuestion. If yes, invoke /ui-ux-pro-max for gallery.

CIP Design (Built-in)

50+ deliverables, 20 styles, 20 industries. Gemini Nano Banana (Flash/Pro).

CIP: Generate Brief

python3 scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"

CIP: Search Domains

python3 scripts/cip/search.py "business card letterhead" --domain deliverable
python3 scripts/cip/search.py "luxury premium elegant" --domain style
python3 scripts/cip/search.py "hospitality hotel" --domain industry
python3 scripts/cip/search.py "office reception" --domain mockup

CIP: Generate Mockups

# With logo (RECOMMENDED)
python3 scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

# Full CIP set
python3 scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set

# Pro model (4K text)
python3 scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro

# Without logo
python3 scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt

Models: flash (default, gemini-2.5-flash-image), pro (gemini-3-pro-image-preview)

CIP: Render HTML Presentation

python3 scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output

Tip: If no logo exists, use Logo Design section above first.

Slides (Built-in)

Strategic HTML presentations with Chart.js, design tokens, copywriting formulas.

Load references/slides-create.md for the creation workflow.

Slides: Knowledge Base

| Topic | File |

|-------|------|

| Creation Guide | references/slides-create.md |

| Layout Patterns | references/slides-layout-patterns.md |

| HTML Template | references/slides-html-template.md |

| Copywriting | references/slides-copywriting-formulas.md |

| Strategies | references/slides-strategies.md |

Banner Design (Built-in)

22 art direction styles across social, ads, web, print. Uses frontend-design, ai-artist, ai-multimodal, chrome-devtools skills.

Load references/banner-sizes-and-styles.md for complete sizes and styles reference.

Banner: Workflow

1. Gather requirements via AskUserQuestion — purpose, platform, content, brand, style, quantity

2. Research — Activate ui-ux-pro-max, browse Pinterest for references

3. Design — Create HTML/CSS banner with frontend-design, generate visuals with ai-artist/ai-multimodal

4. Export — Screenshot to PNG at exact dimensions via chrome-devtools

5. Present — Show all options side-by-side, iterate on feedback

Banner: Quick Size Reference

| Platform | Type | Size (px) |

|----------|------|-----------|

| Facebook | Cover | 820 x 312 |

| Twitter/X | Header | 1500 x 500 |

| LinkedIn | Personal | 1584 x 396 |

| YouTube | Channel art | 2560 x 1440 |

| Instagram | Story | 1080 x 1920 |

| Instagram | Post | 1080 x 1080 |

| Google Ads | Med Rectangle | 300 x 250 |

| Website | Hero | 1920 x 600-1080 |

Banner: Top Art Styles

| Style | Best For |

|-------|----------|

| Minimalist | SaaS, tech |

| Bold Typography | Announcements |

| Gradient | Modern brands |

| Photo-Based | Lifestyle, e-com |

| Geometric | Tech, fintech |

| Glassmorphism | SaaS, apps |

| Neon/Cyberpunk | Gaming, events |

Banner: Design Rules

  • Safe zones: critical content in central 70-80%
  • One CTA per banner, bottom-right, min 44px height
  • Max 2 fonts, min 16px body, ≥32px headline
  • Text under 20% for ads (Meta penalizes)
  • Print: 300 DPI, CMYK, 3-5mm bleed

Icon Design (Built-in)

15 styles, 12 categories. Gemini 3.1 Pro Preview generates SVG text output.

Icon: Generate Single Icon

python3 scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
python3 scripts/icon/generate.py --name "dashboard" --category navigation --style duotone

Icon: Generate Batch Variations

python3 scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons

Icon: Multi-size Export

python3 scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons

Icon: Top Styles

| Style | Best For |

|-------|----------|

| outlined | UI interfaces, web apps |

| filled | Mobile apps, nav bars |

| duotone | Marketing, landing pages |

| rounded | Friendly apps, health |

| sharp | Tech, fintech, enterprise |

| flat | Material design, Google-style |

| gradient | Modern brands, SaaS |

Model: gemini-3.1-pro-preview — text-only output (SVG is XML text). No image generation API needed.

Social Photos (Built-in)

Multi-platform social image design: HTML/CSS → screenshot export. Uses ui-ux-pro-max, brand, design-system, chrome-devtools skills.

Load references/social-photos-design.md for sizes, templates, best practices.

Social Photos: Workflow

1. Orchestrate — project-management skill for TODO tasks; parallel subagents for independent work

2. Analyze — Parse prompt: subject, platforms, style, brand context, content elements

3. Ideate — 3-5 concepts, present via AskUserQuestion

4. Design — /ckm:brand → /ckm:design-system → randomly invoke /ck:ui-ux-pro-max OR /ck:frontend-design; HTML per idea × size

5. Export — chrome-devtools or Playwright screenshot at exact px (2x deviceScaleFactor)

6. Verify — Use Chrome MCP or chrome-devtools skill to visually inspect exported designs; fix layout/styling issues and re-export

7. Report — Summary to plans/reports/ with design decisions

8. Organize — Invoke assets-organizing skill to sort output files and reports

Social Photos: Key Sizes

| Platform | Size (px) | Platform | Size (px) |

|----------|-----------|----------|-----------|

| IG Post | 1080×1080 | FB Post | 1200×630 |

| IG Story | 1080×1920 | X Post | 1200×675 |

| IG Carousel | 1080×1350 | LinkedIn | 1200×627 |

| YT Thumb | 1280×720 | Pinterest | 1000×1500 |

Workflows

Complete Brand Package

1. Logo → scripts/logo/generate.py → Generate logo variants

2. CIP → scripts/cip/generate.py --logo ... → Create deliverable mockups

3. Presentation → Load references/slides-create.md → Build pitch deck

New Design System

1. Brand (brand skill) → Define colors, typography, voice

2. Tokens (design-system skill) → Create semantic token layers

3. Implement (ui-styling skill) → Configure Tailwind, shadcn/ui

References

| Topic | File |

|-------|------|

| Design Routing | references/design-routing.md |

| Logo Design Guide | references/logo-design.md |

| Logo Styles | references/logo-style-guide.md |

| Logo Colors | references/logo-color-psychology.md |

| Logo Prompts | references/logo-prompt-engineering.md |

| CIP Design Guide | references/cip-design.md |

| CIP Deliverables | references/cip-deliverable-guide.md |

| CIP Styles | references/cip-style-guide.md |

| CIP Prompts | references/cip-prompt-engineering.md |

| Slides Create | references/slides-create.md |

| Slides Layouts | references/slides-layout-patterns.md |

| Slides Template | references/slides-html-template.md |

| Slides Copy | references/slides-copywriting-formulas.md |

| Slides Strategy | references/slides-strategies.md |

| Banner Sizes & Styles | references/banner-sizes-and-styles.md |

| Social Photos Guide | references/social-photos-design.md |

| Icon Design Guide | references/icon-design.md |

Scripts

| Script | Purpose |

|--------|---------|

| scripts/logo/search.py | Search logo styles, colors, industries |

| scripts/logo/generate.py | Generate logos with Gemini AI |

| scripts/logo/core.py | BM25 search engine for logo data |

| scripts/cip/search.py | Search CIP deliverables, styles, industries |

| scripts/cip/generate.py | Generate CIP mockups with Gemini |

| scripts/cip/render-html.py | Render HTML presentation from CIP mockups |

| scripts/cip/core.py | BM25 search engine for CIP data |

| scripts/icon/generate.py | Generate SVG icons with Gemini 3.1 Pro |

Prerequisites

Python: This skill uses Python scripts. On Windows, use python instead of python3 (e.g., python scripts/logo/search.py instead of python3 scripts/logo/search.py).

Check if Python is installed:

python3 --version || python --version

Setup

export GEMINI_API_KEY="your-key"  # https://aistudio.google.com/apikey
pip install google-genai pillow

# Optional MuAPI provider (no extra Python package required)
export MUAPI_API_KEY="your-key"

MuAPI uses the asynchronous model endpoint and prediction result API. See the

MuAPI API reference ↗ for authentication

and the nano-banana model contract ↗

or nano-banana-pro model contract ↗

for the current model-specific schemas. The logo generator supports both documented

model slugs and sends their shared required prompt plus optional aspect_ratio

fields; the Pro model also accepts an optional resolution field that this focused

logo workflow leaves at the provider default.

> Note for Windows: Use python instead of pip where needed (e.g., python -m pip install ...).

Integration

External sub-skills: brand, design-system, ui-styling

Related Skills: frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools

Вопросы и ответы

Что делает скилл design?

Создает визуальный контент: логотипы, фирменный стиль, баннеры, иконки, презентации и изображения для соцсетей.

Как установить design?

Откройте блок «Установка» на этой странице и выберите своего агента — Claude Code, Codex, Cursor или Gemini CLI: там готовые команды, которые копируют папку скилла в нужное место. Либо скопируйте промпт из вкладки «Через ассистента» — ассистент сам проверит и подключит скилл.

С какими нейросетями работает design?

Скиллы — это обычные инструкции в Markdown (формат Agent Skills), поэтому design подходит любому агенту, который читает SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode и другие. Модель загружает инструкции только когда задача подходит под описание скилла.

Скилл design бесплатный?

Скилл опубликован автором nextlevelbuilder в открытом доступе под лицензией MIT. Сам скилл ничего не стоит — вы платите только своему провайдеру нейросети за использованные токены.

Безопасно ли устанавливать скиллы?

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

Чем скилл отличается от MCP-сервера или плагина?

MCP-сервер и плагин дают модели новые инструменты — код, который выполняется и возвращает результат. Скилл даёт знания и порядок действий: как подходить к задаче, какие шаги делать и как выглядит хороший результат. Ему не нужен сервер или ключ API.

Похожие скиллы

Все скиллы →
slides Создавайте стратегические HTML-презентации с Chart.js, токенами дизайна, адаптивными макетами, формулами копирайтинга и контекстными стратегиями слайдов. nextlevelbuilder141k ui-styling Создавайте красивые, доступные интерфейсы пользователя с помощью компонентов shadcn/ui (основанных на Radix UI + Tailwind), утилитарного стиля Tailwind CSS и визуальных дизайнов на основе холста. Используйте при построении интерфейсов пользователя, реализации систем дизайна, создании адаптивных макетов, добавлении доступных компонентов (диалогов, выпадающих списков, форм, таблиц), настройке тем и цветов, реализации темного режима, генерации визуальных дизайнов и плакатов, или установлении последовательных шаблонов стиля во всех приложениях. nextlevelbuilder141k ui-ux-pro-max Комплексный интеллект дизайна UI/UX с 50+ стилями, 97 палитрами и 9 технологическими стеками для создания профессиональных интерфейсов. nextlevelbuilder141k banner-design Разработайте баннеры для социальных сетей, рекламы, героев сайтов, творческих активов и печати. Несколько вариантов художественного направления с визуальными эффектами, сгенерированными ИИ. Действия: разработка, создание, генерация баннера. Платформы: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, герой сайта, печать. Стили: минималистичный, градиент, смелая типография, фото-базированный, иллюстрированный, геометрический, ретро, стеклянный морфизм, 3D, неон, дуотон, редакционный, коллаж. Использует навыки ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal. nextlevelbuilder141k design Комплексный дизайнерский навык: бренд-идентичность, дизайн-токены, стилизация UI, генерация логотипов (55 стилей, Gemini AI), корпоративная программа идентичности (50 поставляемых материалов, макеты CIP), презентации в HTML (Chart.js), дизайн баннеров (22 стиля, социальные/рекламные/веб/печатные), дизайн иконок (15 стилей, SVG, Gemini 3.1 Pro), социальные фотографии (HTML→скриншот, мультиплатформенные). Действия: разработка логотипа, создание CIP, генерация макетов, создание слайдов, дизайн баннера, генерация иконки, создание социальных фотографий, изображений для социальных сетей, бренд-идентичности, дизайн-системы. Платформы: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads. nextlevelbuilder141k design-system Архитектура токенов, спецификации компонентов и генерация слайдов. Трехслойные токены (примитив→семантика→компонент), переменные CSS, масштабы间距/типографии, спецификации компонентов, стратегическое создание слайдов. Используется для дизайн-токенов, системного дизайна, презентаций в соответствии с брендом. nextlevelbuilder141k