Спочатку композиція
Визначаємо формат, головний об’єкт і настрій. Асистент пропонує варіанти, ти обираєш напрям.
Перейти до завантаженнястудія креативів УкошикуЗабрати skill Креатив.
Забрати skill 
Креатив
01 02 03 04 
Наш реальний креатив · 1080 × 1350Так ми показуємо
Забирай процес.
PROMO CREATIVES SKILL 1.4.5
Креатив.
Шар за шаром.
AI-сцена, окремі деталі, справжній продукт і HTML-текст. Усі шари можна правити в коді без повторної генерації.
Від задуму до готової композиції
creative.html → PNG1080 × 1350
Місце для твоєї ідеї
<div class="creative">Твоя кухня.
Твої правила.
Твої правила.
UKOSHIKU рецепти до твого смаку
ЗА КАДРОМ
Креатив
збирається в HTML.
AI створює сцену. Ми ставимо продукт, текст і декор окремими шарами в HTML. Тому будь-який елемент можна пересунути, замінити або прибрати без нової генерації.
Кожен шар має роль
AI дає атмосферу. Скриншот показує продукт. Текст, логотип і декор живуть як окремі HTML-елементи.
Правки без нової генерації
Напиши: «пересунь телефон вище» або «прибери крихти». Асистент змінить HTML і CSS, а не згенерує банер заново.
Експорт після перевірки
Перевіряємо відступи, обрізання, шрифти й розмір полотна. Залишається і готова картинка, і макет для наступних правок.
Наш реальний креатив · 1080 × 1350ЗРОБЛЕНО ДЛЯ СВОГО ПРОДУКТУ
Так ми показуємо
Укошику.
Укошику зберігає рецепти, допомагає планувати меню й знаходити людей зі схожими смаками. У банері це показує справжній екран застосунку.
Цю сцену зібрали з AI-фону, персиків і зелені на прозорому тлі, скриншота та HTML-тексту. Хочемо інший ритм кадру, рухаємо шари в коді.
Подивитися Укошику AI-сцена Продукт HTML & CSS
ТЕПЕР ТВОЯ ЧЕРГА
Забирай процес.
Збирай своє.
Банери, дописи й каруселі. Дай асистенту бренд, матеріали та задачу. Він збере HTML-макет, який ти зможеш правити словами.
Завантажити skill ZIPВерсія 1.4.5 · MIT · без реєстрації
Швидке встановлення
Одна команда - і skill у твоєму агенті
Працює з агентами, які підтримують стандартний формат skills.
npx skills add ukoshiku/promo-creatives --skill promo-creativesПідготуй інструменти
Для локального рендеру потрібен Chrome, Chromium або Edge, Python 3.9+ та бібліотеки:
macOS / Linux: python3 -m pip install pillow numpy Windows: py -m pip install pillow numpyСтандартні встановлення браузерів знаходяться автоматично на macOS, Linux і Windows. Генератор зображень необов’язковий: можна працювати зі своїми фото.
Якщо потрібне ручне встановлення
Завантаж ZIP вище й поклади папку
promo-creativesу директорію skills:macOS / Linux: ~/.codex/skills/promo-creatives/ Windows: %USERPROFILE%\\.codex\\skills\\promo-creatives\\У Claude Code також можна встановити skill через його Marketplace.
Почни нову розмову
Перезапусти агента, додай матеріали свого бренду і спробуй цей запит:
Використай skill promo-creatives. Створи промобанер 1080 × 1350 для мого продукту. Спочатку запропонуй композицію. Скриншот, логотип і кольори додаю.
Для Claude Code є Marketplace-інсталяція, а для інших агентів — ручний ZIP. Для скриптів потрібен доступ до локальних файлів і термінала.
Кілька деталей
Що всередині архіву?
SKILL.md із процесом роботи, HTML-шаблони, довідники з композиції та Python-скрипти для рендеру й перевірок. Фото продукту та доступ до генераторів у пакет не входять.
Потрібен саме Artlist?
Ні. Artlist використано лише в цій демонстрації. Для своїх креативів можна взяти власні фото або доступний тобі генератор; його підписка чи API оплачуються окремо.
Чи треба генерувати банер заново після правки?
Ні, якщо змінюється текст, розташування, розмір або кількість уже підготовлених шарів. Асистент оновлює HTML і CSS. Нова генерація потрібна лише для нового фону або нового візуального об’єкта.
Це працює тільки для застосунків?
Ні. Skill можна використати для фізичних продуктів, сервісів, подій і власного бренду: достатньо надати матеріали та пояснити задачу.
Можна змінювати й використовувати комерційно?
Код та інструкції skill поширюються за ліцензією MIT. Права на свої фото, шрифти й згенеровані матеріали треба перевіряти окремо.