imagegen-frontend-webуникальный дизайн лендингов
leonxlnx/taste-skill
Антидот против purple gradient hero и floating blobs. Создаёт самобытные landing page дизайны с конкретными эстетическими направлениями.
Установка
npx -y skills add leonxlnx/taste-skill --skill imagegen-frontend-web --agent claude-codeImagegen Frontend Web
Элитный скилл арт-дирекции frontend-изображений: генерация премиальных, конверсионно-ориентированных референсов дизайна сайтов. Уровень Awwwards. Оптимизирован для лендингов, маркетинговых сайтов и продуктовых компов, которые разработчики или модели кода могут точно воссоздать.
Жёсткое правило вывода — читать первым
Генерировать одно отдельное горизонтальное изображение НА КАЖДУЮ секцию. Всегда. Без исключений.
- 1 секция → 1 изображение
- 4 секции → 4 изображения
- 8 секций → 8 изображений
- «лендинг» без счётчика → 6 секций по умолчанию → 6 изображений
- «полный шаблон сайта» → 8 секций → 8 изображений
Никогда не объединять несколько секций в один кадр. Никогда не возвращать одно высокое изображение со всей страницей. Это правило отменяет любой дефолт модели.
Смещение в сторону разнообразия hero-компоновок
Дефолтный hero «текст слева / картинка справа» — самый заезженный AI-паттерн. Он допустим, но не должен быть первым инстинктом. Рассмотрите альтернативы:
- По центру поверх фонового изображения
- Внизу слева поверх изображения
- Внизу справа поверх изображения
- Ведущий верхний левый угол
- Стек по центру
- Изображение как канвас
- Редакционный off-grid
- Mini minimalist
- Текст справа / картинка слева (инвертированный классик)
Базовая конфигурация
| Параметр | Значение | Шкала |
|---|---|---|
| DESIGN_VARIANCE | 8 | 1 = жёсткий/симметричный, 10 = артовый/асимметричный |
| VISUAL_DENSITY | 4 | 1 = воздушный/галерейный, 10 = насыщенный/интенсивный |
| ART_DIRECTION | 8 | 1 = безопасный коммерческий, 10 = смелое творческое заявление |
| IMPLEMENTATION_CLARITY | 9 | 1 = свободный мудборд, 10 = очень кодируемый UI-референс |
| IMAGE_USAGE_PRIORITY | 9 | 1 = преимущественно типографический, 10 = сильно image-led |
| SPACING_GENEROSITY | 8 | 1 = компактный/плотный, 10 = очень просторный/дышащий |
| LAYOUT_VARIATION | 8 | 1 = одна якорная компоновка, 10 = смелое разнообразие |
| CONVERSION_DISCIPLINE | 8 | 1 = чистый арт-мудборд, 10 = чёткая воронка + баланс дизайна |
Маппинг брифа на направление
| Если пользователь говорит | Hero Scale | Фон | Компоновка |
|---|---|---|---|
| «minimalist» / «clean» / «ultra simple» | Mini Minimalist | Ровные поверхности, тонкая текстура | Стек по центру, щедрое негативное пространство |
| «editorial» / «magazine» / «fashion» | Mid Editorial или Giant Statement | Редакционное боковое изображение, duotone | Off-grid editorial, асимметричные смещения |
| «cinematic» / «premium» / «luxury» / «bold» | Giant Statement | Full-bleed с тональным оверлеем, виньетка + продукт | Внизу слева поверх фона, image-as-canvas |
| «SaaS» / «product» / «dashboard» / «fintech» | Mid Editorial | Ровный + inline-ассет, flat block + кроп | Чёткое обрамление продукта, trust-якоря |
| «agency» / «creative studio» / «portfolio» | Giant Statement или Mini Minimalist | Смело варьировать (full-bleed, diptych, duotone) | Off-grid, poster-like |
Стандарты качества
Ломайте дефолты стандартной генерации изображений:
- Не: центрированный тёмный hero
- Не: фиолетово-синее AI-свечение
- Не: плавающие бессмысленные блобы
- Не: спам дженерик dashboard-карточками
- Не: слабая типографическая иерархия
- Не: клонированные секции
- Не: «люкс» как просто бежевый текст с серифом
Результат должен ощущаться: арт-дирекционным, премиальным, визуально запоминающимся, структурированным, читаемым, implementation-friendly.
Принципы арт-дирекции
- Адаптация под бриф: бриф пользователя всегда перекрывает дефолты. Прочитайте промпт внимательно, затем адаптируйте параметры, масштаб hero, фоновый режим и разнообразие компоновки.
- Изображение как основной материал: используйте изображения в том числе как full-bleed фоны, не только как inline-ассеты.
- Разнообразие компоновки: не дефолтить в «текст слева, картинка справа». Перемещайте текст вниз-влево, по центру, вверх-справа через секции.
- Дышащие секции: не упаковывать страницу. Предпочитать чуть больше пространства между секциями, чем дефолтное.
- Конверсионная осознанность: каждая секция выполняет работу (зацепить / доказать / обучить / конвертировать).
- Моменты второго прочтения: проектировать детали, которые замечаются при внимательном рассмотрении после первого просмотра.
- Единая палитра: один последовательный набор цветов по всем изображениям.
Из того же репозитория
design-taste-frontend — базовая дизайн-система для Claude
leonxlnx/taste-skill
Устанавливает три параметра дизайна для Claude: вариативность (асимметрия), интенсивность движения (анимации) и визуальная плотность. База для предсказуемого UI-стиля.
high-end-visual-design — Awwwards-уровень визуального дизайна
leonxlnx/taste-skill
Для по-настоящему премиального UI вместо обычного Inter и скруглённых углов. Enforces Awwwards-уровень: чёткие антипаттерны и правила исполнения для каждого решения.
redesign-existing-projects — редизайн шаблонных AI-сайтов
leonxlnx/taste-skill
Аудит существующего кода на шаблонные паттерны (центрированный hero, дефолтные шрифты) и системный редизайн с конкретными правилами и измеримым улучшением.
minimalist-ui — редакционный минимализм UI
leonxlnx/taste-skill
Запрещает AI-клише: Inter/Roboto, Lucide icons, тяжёлые тени и скруглённые углы. Editorial minimalism с конкретными заменами для каждого запрещённого паттерна.
full-output-enforcement — запрет обрезки кода
leonxlnx/taste-skill
Запрещает Claude обрезать код: "// rest of code here", "let me know if you want more" и другие паттерны усечения. Всегда полный вывод без сокращений.
industrial-brutalist-ui — индустриальный брутализм в UI
leonxlnx/taste-skill
Если хотите интерфейс как руководство аэрокосмической техники 60-х или военный терминал — это тот скилл. Строго опинионированный, с конкретными правилами.