image-to-code

Image-to-code — это скилл для переноса выбранного визуального образца в работающий адаптивный фронтенд. В качестве исходного ориентира инструкция допускает скриншот, макет, изображение, результат Image Gen, ссылку на продукт, файл Figma, Storybook, путь к существующему коду, дизайн-систему или набор брендовых материалов. Сначала нужно однозначно определить именно выбранный визуальный target. Если пользователь указал вариант из набора изображений, используется фактически выбранный результат, а не порядок первоначальных идей; если ссылку или изображение нельзя разрешить однозначно, работа останавливается до уточнения. Письменного общего брифа без конкретного визуального образца для запуска недостаточно. Перед реализацией скилл предлагает загрузить контекст пользователя и выполнить preflight, когда доступна локальная оболочка. При этом не требуется просматривать все сохранённые материалы: проверяются только те ссылки, файлы, токены, компоненты, изображения и настройки браузера, которые нужны текущей задаче. Визуальная цель рассматривается как источник требований к структуре страницы. Нужно разобрать её секции, измерить взаимное расположение, отступы и размеры элементов, а также подобрать шрифты и библиотеку иконок, которые соответствуют образцу. Отдельное внимание уделено растровым и декоративным ресурсам. Для каждой картинки в референсе следует определить назначение и при необходимости создать отдельный визуальный asset через Image Gen. Это относится к hero-изображениям, фонам, иллюстрациям, превью, текстурам, логотипам и аватарам. Сгенерированные ресурсы должны сохранять общую палитру, стиль и направление исходного дизайна. Пустые заглушки не заменяют требуемый контент. Текст, который является частью постера, упаковки, вывески или другого изображения, должен оставаться в самом asset; редактируемый интерфейсный текст можно размещать HTML-слоями только тогда, когда он действительно показан как UI поверх изображения. Скилл запрещает рисовать собственные визуальные элементы ради имитации референса: нельзя подменять изображения CSS-рисунками, самодельными SVG, inline-SVG, набором div/span, градиентами, emoji или текстовыми glyph-иконками. Для обычных значков нужно выбрать подходящую установленную библиотеку. После этого строится не только статичный экран: навигация, ссылки, вкладки, меню, CTA, поля, фильтры, переключатели и формы из основного пользовательского пути должны работать. Для ключевого сценария предусматриваются видимые состояния hover, focus, выбранное, открытое и закрытое, loading, empty и success; второстепенные элементы могут оставаться визуальными, если они не входят в ядро опыта. Если референс относится к мобильному интерфейсу, целевой размер по умолчанию — 390×844, если пользователь не назвал другой телефон. Поверхность приложения должна помещаться в этот кадр: недопустимы горизонтальная прокрутка, обрезанный текст, скрытые элементы управления и кнопка основного действия за границей экрана. Для десктопного образца используется десктопная компоновка. Новые маршруты, авторизация, постоянное хранилище, backend, интеграции и исчерпывающие edge cases не добавляются без отдельной потребности. Проверка результата является обязательной частью workflow. Нужно запустить локальное приложение, открыть его через предусмотренный Browser Choice, проверить отрендеренную страницу и основные взаимодействия, посмотреть ошибки консоли и выполнить design QA. Старт сервиса или успешная сборка сами по себе не доказывают, что визуальный результат проверен. Отчёт design QA сравнивает тот же viewport и то же состояние взаимодействия с референсом; найденные P0, P1 и P2 исправляются с повторным захватом экрана, пока итог не станет passed. Если захват или сравнение заблокированы, итог должен быть blocked, а не формально успешным.