Для визуально важных сайтов навык сначала генерирует референсы изображений, затем разбирает их и только после этого пишет frontend. Так разработчик получает реализацию, привязанную к конкретной композиции, типографике, цветам и отступам, а не к общему шаблону.

Возможности

Задаёт последовательность работы: генерация изображений → анализ → реализация.
Для Codex рекомендует отдельное крупное изображение на каждую секцию, чтобы текст и детали интерфейса оставались читаемыми.
Предлагает заново генерировать неясную секцию или деталь, а не вырезать её из старого изображения.
Требует анализировать текст, типографику, отступы, кнопки, компоненты, цвета и структуру страницы до начала кодирования.
Помогает избежать перегруженного hero-блока, вложенных карточек и мелких декоративных элементов.

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

При создании hero-секции, landing page или многостраничного маркетингового сайта.
При редизайне, когда важны визуальное качество и точное следование референсу.
Для продуктовых страниц, портфолио и editorial-сайтов.
Когда доступна генерация изображений и нужно сначала получить визуальную основу для frontend.

Примеры

Базовые параметры дизайна из навыка:

DESIGN_VARIANCE: 8
VISUAL_DENSITY: 3
ART_DIRECTION: 8
IMPLEMENTATION_CLARITY: 9
IMAGE_USAGE_PRIORITY: 9
SPACING_GENEROSITY: 9
ANALYSIS_PRECISION: 10
IMAGE_GENERATION_EAGERNESS: 10
UI_SIMPLICITY_DISCIPLINE: 9

Пример структуры сайта на 4 секции:

1. Hero
2. Features
3. Social proof / testimonial
4. CTA

Установка

npx skills add https://github.com/leonxlnx/taste-skill --skill image-to-code