designавтор nextlevelbuilder

Design Skill.

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

Бренд и дизайн-системы

Скачать OpenDesign Инструкция по использованию

nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/design/SKILL.mdSKILL.md

--- name: design description: Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, … --- ## When to Use ## Sub-skill Routing ## Script Paths ## Logo Design (Built-in) ## CIP Design (Built-in) ## Slides (Built-in)

Вводная информация и заголовки разделов считаны из исходного файла 2026-09-14 · полностью 13 348 символов

01 Что делает

Что делает design Skill в Claude Code и Codex

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

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

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

Универсальный skill для дизайна, охватывающий фирменный стиль, дизайн-токены, стилизацию UI с shadcn/ui и Tailwind, генерацию логотипов (55 стилей через Gemini, Atlas Cloud или MuAPI), программы корпоративной идентичности с 50 результатами, HTML-презентации с использованием Chart.js, дизайн баннеров (22 стиля арт-дирекшна для соцсетей, рекламы, веба, печати), дизайн иконок (15 стилей, SVG-вывод через Gemini 3.1 Pro) и дизайн фото для соцсетей — Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok и Threads. Направляет задачи во внешние подскиллы для brand, design-system и ui-styling, а также предоставляет встроенные workflow для логотипов, CIP, слайдов, баннеров, иконок и фото для соцсетей с Python-скриптами, генерацией через AI и экспортом HTML-в-скриншот.

Что он выдаёт

PNG-скриншоты баннеров точных платформенных размеров, экспортированные через chrome-devtools
SVG-файлы иконок в 15 стилях с опциональным экспортом в нескольких размерах и пакетными вариациями
Изображения для соцсетей в платформенных размерах, хранящиеся в организованных директориях ресурсов

Смотрите пример запроса ↗

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

01
Маршрутизация по типу задачи
Skill направляет фирменную идентичность и голос бренда в подскилл brand, токены и спецификации — в design-system, код shadcn/ui и Tailwind — в ui-styling, а логотипы, CIP, слайды, баннеры, иконки и фото для соцсетей обрабатывает встроенными workflow.
02
Генерация логотипов с помощью AI-провайдеров
Запустите Python-скрипты для поиска среди 55 стилей, 30 цветовых палитр и 25 отраслевых гайдов, затем сгенерируйте логотипы через Gemini Nano Banana, Atlas Cloud или MuAPI с белым фоном.
03
Создание результатов CIP с мокапами
Сгенерируйте мокапы программы корпоративной идентичности для 50 результатов с помощью моделей Gemini Flash или Pro, опционально с наложением логотипа, затем отрендерите HTML-презентации результата.
04
Создание стратегических HTML-презентаций
Создавайте презентации с интеграцией Chart.js, дизайн-токенами и формулами копирайтинга, загрузив справочник по рабочему процессу создания слайдов.
05
Дизайн баннеров с HTML/CSS
Собирайте требования, изучайте Pinterest через ui-ux-pro-max, создавайте HTML/CSS баннеры с помощью frontend-design и ai-artist/ai-multimodal для визуалов, затем экспортируйте через chrome-devtools в точных размерах.
06
Экспорт и проверка скриншотов
Используйте chrome-devtools или Playwright, чтобы сделать скриншоты дизайнов в точных пиксельных размерах с 2x device scale factor, затем визуально проверьте и исправьте проблемы вёрстки перед финальным экспортом.

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

Когда использовать skill design

Используйте skill design в Claude Code или Codex, когда задача связана с брендом и дизайн-системами. Область применения и ограничения взяты из файла самого skill.

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

Создание пакетов брендовой идентики с логотипом, материалами корпоративной идентичности и презентациями pitch deck
Дизайн изображений для соцсетей на нескольких платформах: Instagram, Facebook, LinkedIn, Twitter, Pinterest и TikTok
Генерация баннеров для обложек соцсетей, рекламных кампаний, шапок сайтов и печатных материалов
Создание дизайн-систем с семантическими токенами, конфигурацией Tailwind и компонентами shadcn/ui

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

Генератор иконок выдаёт только SVG-текст, а не растровые файлы изображений

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

Ключ Gemini APIОбязательная переменная окружения для генерации логотипа, CIP и иконок через Google AI Studio
Ключ MuAPI API (опционально)Необязательная переменная окружения для использования MuAPI как альтернативного провайдера генерации изображений для логотипов
Путь к файлу логотипа для CIPПуть к существующему PNG-файлу логотипа для наложения на материалы корпоративной идентичности при генерации макетов CIP
Требования к баннеру через AskUserQuestionЦель, платформа, контент, гайдлайны бренда, стиль арт-дирекшна и количество, собранные интерактивно перед дизайном баннера
Контекст бренда для фото для соцсетейГайдлайны бренда из под-скилла brand и дизайн-токены из design-system для поддержания единообразия в изображениях для соцсетей

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

Правила, которые skill дизайна даёт Claude Code и Codex

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

Всегда генерировать логотипы с белым фоном
Генерация логотипа должна выдавать изображения с белым фоном во всех случаях.
Пути к скриптам указаны относительно каталога skill
Пути к скриптам в этом skill и его папке references указаны относительно каталога, содержащего SKILL.md, а не корня проекта.
Спрашивать пользователя об HTML-превью после генерации логотипов
После генерации логотипов всегда спрашивайте пользователя через AskUserQuestion, хочет ли он галерею предпросмотра в HTML, и если да — вызывайте skill ui-ux-pro-max для её создания.
Исправлять неудачные скрипты напрямую
Если Python-скрипты завершаются с ошибкой при выполнении, пытайтесь исправить их напрямую, а не сообщать об ошибке.
Используйте рекомендуемое наложение логотипа для CIP
При генерации мокапов CIP использование существующего файла логотипа с флагом --logo — рекомендуемый подход.
Текст в баннере не должен превышать 20% для рекламы
Для рекламных баннеров держите покрытие текстом ниже 20% от общей площади, так как платформы Meta штрафуют объявления с большим объёмом текста.
Используйте Python вместо Python3 в Windows
В системах Windows заменяйте python3 на python во всех примерах команд по всему skill.
Критически важный контент баннера в центральных безопасных зонах
Размещайте весь критически важный контент баннера в центральной безопасной зоне 70-80%, чтобы обеспечить видимость на всех платформах.

04 Применение

Установить design в Claude Code или Codex

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

Добавить design в Claude Code, Codex или ваш агент

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

Terminal

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

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

Дайте Skill первую рабочую задачу по бренду и дизайн-системе

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

Starter prompt

Design a complete brand package for [TechFlow], a B2B SaaS startup in the fintech space. Create a minimalist logo with tech-appropriate colors, generate a full corporate identity program including business cards, letterhead, and email signature, then build a 10-slide pitch deck presentation with our Q4 metrics [revenue chart data] and competitive positioning [market analysis]. Export everything with consistent design tokens.

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

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

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

Убедитесь, что CTA-кнопки баннера соответствуют минимальной высоте 44px и расположены в правом нижнем углу
Убедитесь, что печатные баннеры используют 300 DPI, цветовой режим CMYK и включают вылет (bleed) 3-5мм

В OpenDesign импортируйте дизайн по ссылке из SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

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

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

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

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

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

Внутри SKILL.md

Когда использоватьПеречисляет случаи применения: фирменный стиль, design tokens, стилизация UI, логотипы, CIP, презентации, баннеры, социальные фото, иконки
Маршрутизация подскиловНаправляет задачи во внешние skill для бренда/дизайн-системы/ui-styling или во встроенные workflow logo/CIP/slides/banner/social/icon
Пути к скриптамОбъясняет, что пути к скриптам указаны относительно директории skill, а не корня проекта
Дизайн логотипа (встроенный)Команды для поиска среди 55 стилей и генерации логотипов через Gemini, Atlas Cloud или MuAPI с белым фоном
Дизайн CIP (встроенный)Команды для поиска среди 50 типов материалов и генерации мокапов корпоративного стиля с моделями Flash или Pro
Слайды (встроенный)Ссылается на создание стратегических HTML-презентаций с Chart.js и формулами копирайтинга
Дизайн баннеров (встроенный)Workflow для разработки в 22 стилях арт-дирекшн с использованием frontend-design, ai-artist и chrome-devtools для экспорта
Дизайн иконок (встроенный)Команды для генерации SVG-иконок в 15 стилях с использованием только текстового вывода Gemini 3.1 Pro
Социальные фото (встроенный)Workflow для дизайна социальных изображений на нескольких платформах от HTML до экспорта скриншотов с проверкой
WorkflowsПоследовательности для создания полного бренд-пакета и новой design system через под-skills
ТребованияТребование к Python с инструкциями для Windows по командам python и python3
НастройкаПеременные окружения для API-ключей Gemini и MuAPI, а также установка пакетов Python

Собственное описание skill

«Комплексный дизайн-skill: айдентика бренда, дизайн-токены, стилизация UI, генерация логотипов (55 стилей, Gemini, Atlas Cloud или MuAPI 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.»

Описание из front-matter в SKILL.md. Полный файл составляет около 13 348 символов. Читать полный файл на GitHub.

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

Вопросы о skill design

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

Как запускать скрипты Python в Windows?

Замените python3 на python во всех примерах команд. Например, используйте python scripts/logo/search.py вместо python3 scripts/logo/search.py. То же самое относится к командам pip, где может потребоваться python -m pip install.

Design

Запустите design на реальной задаче по бренду и дизайн-системе.

Скачайте OpenDesign, импортируйте design по ссылке на его SKILL.md, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesign Все навыки

Терминал

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

Что делает design Skill в Claude Code и Codex

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

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

Когда использовать skill design

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

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

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

Правила, которые skill дизайна даёт Claude Code и Codex

Всегда генерировать логотипы с белым фоном

Пути к скриптам указаны относительно каталога skill

Спрашивать пользователя об HTML-превью после генерации логотипов

Исправлять неудачные скрипты напрямую

Используйте рекомендуемое наложение логотипа для CIP

Текст в баннере не должен превышать 20% для рекламы

Используйте Python вместо Python3 в Windows

Критически важный контент баннера в центральных безопасных зонах