logo-design: скилл, который превращает агента в дизайнера логотипов

· 2 мин чтения
skills design branding svg agent-skills
📂 Исходный код на GitHub

Скилл для Claude, Gemini CLI, Codex и других агентов: принципы и процесс дизайна логотипа, геометрическая сборка в SVG, тестовые инструменты и библиотека из более чем 1400 логотипов для изучения

logo-design: скилл, который превращает агента в дизайнера логотипов

Скилл logo-design учит кодинг-агента делать логотипы. Это редкий случай, когда агент занимается не кодом: на выходе он отдаёт файлы SVG и PNG, презентационные колоды и правила использования знака. Вся логика держится на одной мысли: финальные файлы знака нельзя рисовать «на глаз», их нужно проверять автоматически и показывать человеку до того, как на них потраят время.

Скилл сделан в открытом формате Agent Skills (папка с файлом SKILL.md и текстом инструкций на Markdown). Поэтому он работает не только в Claude Code, но и в Gemini CLI, Codex CLI, Cursor, GitHub Copilot и OpenCode. Лицензия MIT, версия на момент публикации — 1.4.4.

Какие задачи он берёт

В начале SKILL.md лежит таблица выбора режима. От неё зависит, с чего начнёт работать агент:

Запрос пользователя Режим С чего начинает
Нужен новый логотип Design С первой фазы: бриф
Оценка готового логотипа Critique Разбор по оценочному листу
Освежить или заменить знак Redesign Аудит накопленного узнавания, потом Design
Гайдлайны, суббренды, паттерны, анимация System Набор правил и модулей
Иконки и варианты из готового знака Assets Экспорт вариантов

Отдельный быстрый путь: если данных мало, агент задаёт максимум пять вопросов одним сообщением или вообще не спрашивает, а сам перечисляет свои допущения и сразу идёт к трём концепциям.

Процесс: семь фаз и одно обязательное место для остановки

Полный путь выглядит так:

  1. Бриф. Выясняются точное написание названия, чем компания занимается, кто аудитория, 3–5 прилагательных к бренду, конкуренты, ограничения и кто принимает решение. Прилагательные авторы скилла считают самым ценным входом: из них получаются визуальные подсказки.
  2. Исследование. Агент смотрит, как выглядит соседняя категория, явно выписывает её штампы и решает, где следовать за ними, а где уйти. Штампы он перечисляет прямо в тексте: для финтеха — синий цвет, стрелки вверх, щиты, глобусы; для кофе — зёрна, пар, чашки. Затем строит карту слов: название, продукт, прилагательные, обещание — в существительные, метафоры и противоположности. На пересечениях рождаются идеи.
  3. Концепции. Пишутся 8–12 идей в одну фразу, разбросанных по разным типам знака. Каждая идея обязана иметь собственную изюминку: фраза, которая подошла бы конкуренту, идеей не считается. Затем быстрая оценка и отбор трёх самых сильных и самых разных.
  4. Сборка в SVG. Сначала геометрия описывается словами — примитивы, радиусы, углы, шаг сетки. Потом пишется код: чёрное на белом, холст viewBox="0 0 256 256" для символов, точные углы (0/15/30/45/60/90), настоящие дырки через fill-rule="evenodd", никаких элементов <text> — буквы строятся кривыми.
  5. Тесты и правки. Цикл повторяется минимум дважды.
  6. Чекпоинт. Показ трёх концепций одной картинкой и остановка.
  7. Комплект. Цвета, типографика, компоновки, презентация, экспорт, гайдлайны — только после согласия.

Шестая фаза — главная мысль всего скилла. Агент показывает три концепции, свою рекомендацию и предлагает собрать комплект, после чего ждёт ответа. Он не имеет права собрать комплект без «да». Логика простая: комплект — это большая часть работы, и она имеет смысл только для уже утверждённого направления. Показ концепций первым позволяет человеку дешёво поменять курс и оставить решение за собой.

Формат сообщения на чекпоинте зафиксирован в скилле жёстко:

<картинка с обзором концепций>

### A — <название>  ·  <тип знака>   ← рекомендую
**Идея:** <одно предложение>
**Почему подходит:** <2–3 пункта, привязанных к брифу>

### B — … / ### C — …  (та же форма)

**Моя рекомендация:** <одно-два предложения, по одному честному риску на концепцию>
**Дальше:** выберите направление. Готовить полный комплект?

Почему три концепции, а не один «лучший» вариант

В скилле есть отдельная таблица выбора типа знака: словесный знак (просто название, набранное характерным шрифтом), монограмма, буквенная форма, символический знак, знак через негативное пространство, маскот, эмблема, комбинированный знак. У каждого типа указано, когда он уместен и чем плохо кончается.

Решение принимается по порядку, и первый уверенный «да» обычно и есть ответ. Короткое имя из восьми букв или меньше — словесный знак. Имя длинное или его трудно произнести — монограмма. В названии или истории есть яркий образ — символический знак. Идея есть, а предмета нет — абстрактный знак. Знак будет жить в основном как иконка приложения или аватар — снова буквенная форма, а компоновка потом. Наследие, членство, авторитет — эмблема. Тепло, семья, игра — маскот.

Если сомневаешься, авторы советуют в первом раунде проверить три разных типа и выбрать, сравнив живые варианты. Сравнение работает лучше, чем рассуждение.

Чем знак проверяется

Два скрипта на Python, без единой внешней зависимости, проверяют каждый концепт перед показом.

svg_audit.py переводит правила рисования в проверки. Он смотрит на живой текст, встроенные растровые картинки, фильтры, число цветов, градиенты, обводки, прямые углы, промахнувшиеся на доли градуса, крошечные детали, центрирование и сложность. Сложность он сравнивает с библиотекой. Вот реальный вывод из репозитория — два файла, один рекомендованный, второй нет:

$ python3 scripts/svg_audit.py a-lockup.svg b-emblem.svg

=== a-lockup.svg
viewBox 0 0 905 256 · aspect 3.535 (horizontal) · colours 1 · anchors 205
· INFO [complexity] 205 anchor points (library median 75, p75 155). Check every point earns its place.
production-readiness score: 99/100

=== b-emblem.svg
viewBox 0 0 256 256 · aspect 1.0 (square) · colours 1 · anchors 374
▲ WARN [complex] 374 anchor points — more than 95% of comparable reference logos (median 53).
▲ WARN [near-miss-angle] 8 straight edge(s) are 0.3–3° off a clean angle … (expected for type set on a curve)
▲ WARN [tiny-detail] 6 sub-shape(s) smaller than 1/48 of the canvas: 4.3×3.1 at (40,77) …
production-readiness score: 76/100

Про «anchor points» стоит сказать отдельно. Это опорные точки кривых. Чем их больше, тем труднее править форму и тем выше шанс получить бугристый контур. Медиана по всей библиотеке — 75 точек, по квадратным символам — 53. Образцовые знаки библиотеки сбиваются в начало шкалы: сильные знаки собраны из малого числа осознанных точек.

preview_sheet.py собирает HTML-лист проверок: размерная лестница вниз до 16 пикселей, один цвет, выворотка, размытие «прищуренным взглядом», зеркало и поворот на 180 градусов, контексты (фавикон, иконка, шапка, карточка), сравнение бок о бок и тест на полке рядом с конкурентами.

Дальше идёт ручная доводка, которую скилл называет «проходом по ремеслу»:

  • Тест буквы. Каждая изменённая буква должна читаться как задуманная с первого взгляда. Если K читается как h — переделывать.
  • Стыки. Каждое место, где штрихи сходятся, проверяется на случайные зазубрины и на тонкие перемычки, которые забиваются краской при печати.
  • Тест на равных. Знак ставится рядом с 3–4 образцовыми знаками того же размера и должен выглядеть так же законченно.
  • Буквальность. Если концепция — просто нарисованный продукт (чашка для кофе), её надо либо докрутить, либо выбросить.

Плюс оптические правки: круглые и острые формы слегка выходят за рамку, примерно на 1–3%, у скруглённых форм выравнивается разница в толщине штрихов на концах, горизонтали слегка утончаются, а центр смещается чуть выше геометрического.

Красные флаги

Скилл перечисляет то, что нельзя показывать вообще: клипарт в лоб (зуб для стоматолога, дом для риелтора), штампы категории без изюминки, инициалы в стоковом шрифте без изменений, больше трёх цветов без идеи, градиенты и тени, которые спасают слабую форму, детали мельче примерно 1/48 знака, волосяные линии, углы почти-прямые, бугристые кривые из-за лишних точек, живой <text>, встроенные картинки, фильтры и маски в финальном файле, концепция, для понимания которой нужен абзац, и всё, что похоже на существующий логотип.

Библиотека из 1432 логотипов

Главный актив репозитория — папка с SVG-файлами реальных логотипов: 1432 файла, около 1200 брендов, у 233 есть и полный знак, и отдельная иконка. Каждый файл разобран по полочкам: тип знака, техника, геометрия, сюжет, типографика, настроение, отрасль.

Картина по библиотеке:

Что Значение
Типы знаков абстрактные 24%, комбинированные 21%, символические 20%, буквенные 15%, словесные 10%, эмблемы 4%, маскоты 4%, монограммы 3%
Цвета медиана 2 цвета, у 75% — не больше трёх, градиенты у 19%
Форма 55% файлов почти квадратные, у 9 из 10 брендов с парой файлов словесный знак широкий, иконка — почти квадрат
Геометрия круг — самый частый базовый элемент (26%), дальше органика, квадрат, произвольная форма
Техники знак внутри фигуры 32%, негативное пространство 20%, монолиния 17%, цветовые сегменты 14%
Шрифты геометрический гротеск 49%, свои буквы 19%, антиква 3%

Поиск идёт через search_library.py с фильтрами по типу, технике, геометрии, отрасли, цвету, настроению и сюжету. Флаг --summary показывает, что уже сделано в категории, а --exemplary отдаёт файлы, отмеченные как образцовые для разбора.

Две честные оговорки. Первая: библиотека сильно смещена в сторону технологий — 21% приходится на инструменты для разработчиков, 17% на фреймворки. Еда, мода, медицина, гостиничный бизнес там почти не представлены. Вторая: все эти логотипы — товарные знаки их владельцев. Они лежат в репозитории только для изучения, лицензия MIT на них не распространяется, а обводить чужие знаки нельзя.

Установка

Для Claude Code есть путь через маркетплейс плагинов:

/plugin marketplace add kaankiziltug/logo-design-skill
/plugin install logo-design@logo-design-skill

Для Claude.ai и Claude Desktop: скачать архив со страницы релизов или собрать архив самому (python3 tools/package_skill.py) и загрузить в Settings → Capabilities → Skills. Если есть ограничение на размер, подойдёт урезанный архив без самих SVG-файлов.

Для остальных агентов достаточно скопировать папку:

git clone https://github.com/kaankiziltug/logo-design-skill.git
cp -r logo-design-skill/skills/logo-design ~/.gemini/skills/logo-design
cp -r logo-design-skill/skills/logo-design ~/.codex/skills/logo-design
Агент Личная папка В одном проекте
Gemini CLI ~/.gemini/skills/logo-design .gemini/skills/logo-design
Codex CLI ~/.codex/skills/logo-design .codex/skills/logo-design
Cursor, GitHub Copilot, OpenCode по документации агента обычно skills/ в проекте

Дальше — новая сессия и просьба нарисовать логотип. Скилл лучше всего работает с моделью, которая умеет смотреть на картинки: агент сам отрисовывает черновики в PNG и разглядывает их, прежде чем что-то показать.

Что внутри репозитория

skills/logo-design/
├── SKILL.md          # процесс, чекпоинт, принципы, красные флаги, список инструментов
├── references/       # подгружаются по необходимости
│   ├── principles.md, discovery-brief.md, mark-types.md, visual-techniques.md
│   ├── color.md, typography.md, process.md, svg-construction.md
│   ├── testing-checklist.md, presentation-delivery.md, identity-system.md
│   └── redesign.md, critique.md, library-guide.md
├── scripts/          # восемь скриптов на Python
├── templates/        # шаблон гайдлайнов и пример спецификации презентации
└── assets/library/   # 1432 SVG, catalog.json, classifications.json, stats.json, gallery.html

Восемь скриптов покрывают весь цикл: обзорная картинка концепций, поиск по библиотеке, аудит SVG, тестовый лист, презентационная колода с шестью мокапами под отрасль клиента, рендер в PNG и сборка favicon.ico, экспорт вариантов (чёрный, белый, моноцвет, квадрат, фавикон, иконка приложения, веб-набор) и служебный скрипт для пересборки каталога.

Примеры и проверка качества

В репозитории лежат 28 вымышленных брифов — от тихой роскоши и неоновых фестивалей до B2B-сервисов, финтеха и здоровья. Каждый прогоняли от брифа до колоды. По каждому видно ровно то, что агент показывает на чекпоинте: серые концепции в настоящих размерах 64/32/16 пикселей с рекомендацией, а затем цветная версия выбранного направления на мокапах, подходящих отрасли.

Отдельная деталь про честность работы. В последней десятке примеров клиент в четырёх случаях выбрал не тот концепт, который рекомендовал скилл. Агент не спорил — он переделывал выбранный вариант и только потом красил его. Это ровно то, ради чего и нужна остановка на чекпоинте.

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

Что скилл не обещает

Гарантировать чистоту по товарным знакам он не может — авторы прямо отправляют к профессиональному поиску. Лицензии шрифтов тоже остаются на пользователе: скилл требует сказать, какие шрифты предполагались и были ли буквы построены контурами. И отдельно: если агент не смог отрисовать файл и посмотреть на него, он обязан об этом сказать, а не выдавать непроверенный результат за протестированный.

Подробности — в SKILL.md, разбор принципов — в principles.md, выбор типа знака — в mark-types.md, статистика библиотеки — в library-guide.md, а условия использования чужих знаков — в TRADEMARKS.md.

Источник: https://github.com/kaankiziltug/logo-design-skill