Перейти к руководству
imagegen-frontend-webавтор Leonxlnx

ImageGen Frontend Web Skill.

Навык для Claude Code и Codex для UI-дизайна: секция за секцией генерирует референсы дизайна для сайтов.

  • Web и UI
  • Image
Leonxlnx/taste-skill · skills/imagegen-frontend-web/SKILL.mdSKILL.md
--- name: imagegen-frontend-web description: Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / … --- ## 1. ACTIVE BASELINE CONFIGURATION ## 2. THE COMBINATORIAL VARIATION ENGINE ## 3. FRONTEND REFERENCE RULE ## 4. HERO MINIMALISM RULES ## 5. IMAGE COUNT & PAGE SLICING ## 6. CREATIVITY ESCALATION RULE
Метаданные и заголовки разделов считаны из исходного файла 2026-09-14 · 36 780 символов

01 Что делает

Что делает skill imagegen-frontend-web в Claude Code и Codex

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

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

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

Skill генерирует премиальные референсы дизайна сайта в виде отдельных горизонтальных изображений — одно изображение на секцию. Он обеспечивает разнообразие композиции за пределами избитого паттерна «текст слева / изображение справа», уверенно использует фоны на всю ширину, варьирует масштаб героя (огромный/средний/мини) и сохраняет единую палитру во всех секциях. Предназначен для лендингов, маркетинговых сайтов и продуктовых макетов, которые разработчики или модели для кода могут воссоздать.

Он использует настраиваемые базовые параметры: DESIGN_VARIANCE 8, VISUAL_DENSITY 4, ART_DIRECTION 8, IMPLEMENTATION_CLARITY 9, IMAGE_USAGE_PRIORITY 9, SPACING_GENEROSITY 8. Skill преодолевает стандартные шаблоны ИИ через комбинаторную вариативность — выбирая одну парадигму темы, характер типографики, архитектуру героя, систему секций и сюжетный стержень концепции — при этом сохраняя дисциплину конверсии и равномерные щедрые отступы между секциями.

Что он выдаёт

  • Горизонтальные изображения (16:9, 16:10 или 21:9), отображающие одну сфокусированную секцию на кадр с высокой детализацией
  • Набор изображений с подписями по разделам: «Раздел X из N: <название>» до тех пор, пока не будет предоставлено полное количество
  • Единый брендовый мир во всех кадрах: одна и та же палитра, семейство типографики, идентичность CTA, радиус скругления, обработка изображений, тональность голоса
Смотрите пример запроса ↗

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

  1. 01
    Читает бриф и адаптирует базовые параметры

    Skill внимательно читает запрос пользователя, а затем настраивает параметры (вариативность дизайна, визуальную плотность, арт-дирекшн, ясность реализации, использование изображений, отступы, вариативность макета, дисциплину конверсии), масштаб героя, режим фона, использование градиентов и разнообразие композиции в соответствии с брифом.

  2. 02
    Выбирает один вариант из каждой комбинаторной категории

    Skill фиксирует одну парадигму темы, один характер фона, один характер типографики, одну архитектуру героя, одну систему секций, ровно 4 фирменных компонента, ровно 2 языка с намёком на движение и один сюжетный стержень концепции — всё на основе запроса.

  3. 03
    Генерирует одно горизонтальное изображение на секцию

    Каждая секция получает своё отдельное горизонтальное изображение 16:9, 16:10 или 21:9. Skill никогда не объединяет несколько секций в один кадр и не возвращает единый вытянутый срез.

  4. 04
    Варьирует композиционные опоры и режимы фона

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

  5. 05
    Проводит проверку ясности из 21 пункта перед выводом

    Перед финализацией skill проверяет иерархию, чистоту героя, визуальную отличительность, отсутствие признаков ИИ, премиальное ощущение, пригодность для кода, согласованность нескольких изображений, силу визуального ряда, свободное пространство, равномерные отступы, осмысленную креативность и правильное количество изображений.

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

Когда использовать imagegen-frontend-web Skill

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

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

  • Лендинги, маркетинговые сайты и продуктовые макеты, которые разработчикам или моделям для кода нужно точно воссоздать
  • Премиальные дизайны с чёткими конверсионными воронками — а не чистые арт-мудборды
  • Дизайны на основе изображений, использующие фотографию как основной дизайнерский материал
  • Разработчики или модели для кода, которым нужны очень пригодные для кода UI-референсы
  • Сайты, требующие смелого разнообразия композиции по секциям, чтобы избежать повторяющихся макетов ИИ

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

  • Запросы, требующие одно объединённое вытянутое изображение вместо отдельных кадров по секциям
  • Безопасные коммерческие макеты без творческих амбиций и смелых решений

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

  • Тип сайта и цель конверсииSkill определяет тип сайта (лендинг, маркетинговый сайт, страница продукта, портфолио, SaaS, e-commerce, агентство, редакционный сайт) и основную цель конверсии из промпта, чтобы направлять дизайн-решения.
  • Количество секций или значение по умолчаниюУкажите количество секций, иначе skill по умолчанию использует 6 для лендингов и 8 для полноценных сайтов.
  • Ключевые слова настроения брендаСлова вроде minimalist, clean, editorial, magazine, cinematic, atmospheric, premium, luxury, SaaS, product, fintech, agency, creative studio, e-commerce задают масштаб hero-блока, режим фона, использование градиентов и выбор композиции.
  • Индустрия или регион для культурного соответствияЕсли в брифе указана индустрия или регион, skill подбирает палитру и типографический характер соответствующим образом — не используя нейтральный вид SF-стартапа по умолчанию, если это не намеренно обобщённый SaaS.

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

Правила, которые skill imagegen-frontend-web задаёт Claude Code и Codex

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

  1. Избегайте hero-блока с текстом слева и изображением справа по умолчанию

    Стандартный hero-блок «текст слева, изображение справа» — самый переиспользуемый паттерн ИИ.

  2. Варьируйте композицию — должно появиться минимум 3 разных якоря

    Каждая секция выбирает один композиционный якорь (по центру, ведущий элемент слева сверху, слева снизу над изображением, кластер CTA справа снизу, левая треть/правые две трети, правая треть/левые две трети, по центру внизу, редакционная композиция вне сетки, стек по центру, изображение как холст).

  3. Количество секций по умолчанию в зависимости от типа запроса

    Для лендинга или шаблона сайта по умолчанию — 6 секций (6 изображений). Для полноценного сайта или маркетингового сайта по умолчанию — 8 секций (8 изображений). Для страницы продукта или портфолио по умолчанию — 6 секций.

  4. Делайте заголовок hero-блока коротким и мощным

    H1 должен визуально читаться как премиальное заявление. Заголовки обычно должны звучать как 5-10 сильных слов, а не как абзац.

04 Применение

Установить imagegen-frontend-web в Claude Code или Codex

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

Добавить imagegen-frontend-web в Claude Code, Codex или ваш агент

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

Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill imagegen-frontend-web

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

Дайте skill первую задачу по дизайну интерфейса

Адаптируйте этот промт с вашим содержимым и ограничениями, затем запустите его в Claude Code или Codex.

Example prompt
design 8 sections for a fintech website

Источник: пример SKILL.md (буквально).

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

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

  • Общее число изображений равно числу секций — никогда меньше
  • Страница «дышит» — расстояние между секциями равномерное и контролируемое, не слишком плотное
  • Композиция варьируется между секциями — якоря и режимы фона чередуются
  • По этому референсу можно писать код

В OpenDesign imagegen-frontend-web включён по умолчанию: Plugins → Skills, выберите его в верхней панели.

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

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

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

Author
Leonxlnx
Repository
github.com/Leonxlnx/taste-skill Ветка main
Файл skill
skills/imagegen-frontend-web/SKILL.md Контрольная сумма содержимого записана при верификации; коммит ccbc156
License
MIT Из LICENSE.
Звёзды репозитория
86 946 Снимок GitHub от 2026-09-14 для всего репозитория Leonxlnx/taste-skill, который содержит 11 навыков в этом каталоге. Не является рейтингом или счётчиком использования imagegen-frontend-web.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звёзд проверены. Включён в основной OpenDesign (проверено 2026-08-28); запись живого запуска на этой странице отсутствует.

Внутри SKILL.md

  1. ЖЁСТКОЕ ПРАВИЛО ВЫВОДА — ЧИТАТЬ ПЕРВЫМВсегда генерируйте одно отдельное горизонтальное изображение на каждую секцию, никогда не объединяйте несколько секций в один кадр
  2. СМЕЩЕНИЕ КОМПОЗИЦИИ HERO-БЛОКА — ЧИТАТЬ ПЕРВЫМИзбегайте переиспользуемого hero-блока по умолчанию «текст слева, изображение справа»; предпочитайте альтернативы, например по центру над фоном или слева снизу над изображением
  3. 1. АКТИВНАЯ БАЗОВАЯ КОНФИГУРАЦИЯЗадаёт параметры: DESIGN_VARIANCE 8, VISUAL_DENSITY 4, ART_DIRECTION 8, IMPLEMENTATION_CLARITY 9, IMAGE_USAGE_PRIORITY 9, SPACING_GENEROSITY 8, адаптируется из промпта
  4. 2. ДВИЖОК КОМБИНАТОРНЫХ ВАРИАЦИЙВыберите один вариант из каждой категории: парадигма темы, характер фона, характер типографики, архитектура героя, система секций, 4 знаковых компонента, 2 языка движения, повествовательный стержень
  5. 4. ПРАВИЛА МИНИМАЛИЗМА В HEROДержите hero чистым, заголовок коротким и мощным, приоритет негативному пространству, избегайте перегрузки первого экрана пилюлями и деталями
  6. 5. КОЛИЧЕСТВО ИЗОБРАЖЕНИЙ И НАРЕЗКА СТРАНИЦЫОдно горизонтальное изображение на секцию; для лендинга по умолчанию 6, для полного сайта — 8; смешивайте разнообразие размеров секций; обеспечьте непрерывность между кадрами
  7. 6. ПРАВИЛО НАРАЩИВАНИЯ КРЕАТИВНОСТИДемонстрируйте реальные творческие амбиции, усиливая как минимум 3 параметра: композицию, типографику, контраст масштабов, концепцию hero, обработку изображений, ритм секций, кадрирование
  8. 7. ХУДОЖЕСТВЕННОЕ НАПРАВЛЕНИЕ С ФОКУСОМ НА ИЗОБРАЖЕНИЯАктивно используйте изображения как основной дизайн-материал: постановочная фотография, изображения продукта, редакционные изображения, кропы, обрамлённые панели, слоистые композиции
  9. 8. ПРАВИЛА ПРОТИВ AI-ШЛАКАЗапрещено: бесконечные центрированные секции, фиолетово-синие AI-градиенты, плавающие блобы, спам глассморфизма, градиентные заголовки, обобщённый текст, полосы с логотипами-марквизами, фейковые KPI
  10. 10. ПРАВИЛО РИТМА СЕКЦИЙВарьируйте ритм секций, меняя плотность, соотношение изображения и текста, выравнивание, масштаб, свободное пространство, группировку карточек, интенсивность фона; избегайте повторяющихся шаблонных блоков
  11. 12. ДИСЦИПЛИНА ПЛОТНОСТИ И ОТСТУПОВСтраница должна дышать; используйте равномерные вертикальные отступы между основными секциями, избегайте скачков от тесноты к пустоте, свободное пространство — это инструмент дизайна
  12. 13. ПРАВИЛА ЦВЕТА И МАТЕРИАЛОВИспользуйте одну контролируемую палитру: 1 основной цвет, 1 вторичный, 1 акцентный, нейтральная шкала; допустимы профессиональные тональные градиенты; запрещены радужные блобы-сетки
Собственное описание skill
«Премиум-навык для направления изображений фронтенда, генерирующий референсы дизайна веб-сайтов высокого уровня с фокусом на конверсию. КРИТИЧЕСКОЕ ПРАВИЛО ВЫВОДА — генерируйте ОДНО отдельное горизонтальное изображение ДЛЯ КАЖДОЙ секции. Лендинг с 8 секциями даёт 8 изображений. Никогда не объединяйте несколько секций в одно изображение. Обеспечивает разнообразие композиций (не всегда текст слева / изображение справа), свободу использования фоновых изображений, вариативность CTA, вариативность масштаба хиро (гигантский / средний / мини-минималистичный), концептуальный нарративный стержень, моменты второго прочтения и единую согласованную палитру во всех изображениях. Оптимизирован для лендингов, маркетинговых сайтов и продуктовых композиций, которые разработчики или кодовые модели могут точно воссоздать.»

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

ImageGen Frontend Web

Запустить imagegen-frontend-web на реальной задаче UI-дизайна.

Навык imagegen-frontend-web входит в OpenDesign. Скачайте приложение, выберите навык в Plugins → Skills, вставьте промпт выше и прочитайте план перед результатом.

Терминал
npx skills add https://github.com/Leonxlnx/taste-skill --skill imagegen-frontend-web