Скриншот показывает один кадр, но не структуру компонентов, состояния формы, адаптивные правила и поведение. Преврати изображение в спецификацию: измеримые пропорции, иерархию, повторяющиеся элементы, действия и состояния. Затем собери собственный интерфейс, не копируя чужие логотипы, тексты или фирменные иллюстрации.
Сначала зафиксируй геометрию и неопределённость
Запиши размер viewport, ширину контентной области, поля, число колонок и интервалы. Если контейнер центрирован, вычисли отступы. Например, условный контейнер 1120 px в окне 1440 px оставляет по (1440 − 1120) / 2 = 160 px с каждой стороны. Это оценка по примеру, а не измерение существующего сайта.
Создай несколько общих tokens (--content-max, --page-gutter, --card-gap) и outline страницы: шапка → главный блок → действие → контент → нижняя навигация. Для каждой части запиши назначение и поведение. По одному кадру нельзя узнать, фиксирована ли карточка, что происходит после клика, как выглядит ошибка или какое содержимое приходит с сервера. Отметь эти пункты как предположения, не дорисовывай их как факты.
Промпт, который отдаёт спецификацию
Передай агенту изображение и текстовое описание с явными ограничениями. Например:
Воспроизведи структуру этого экрана, используя наши тексты и компоненты. Сначала перечисли измеренные пропорции, повторяющиеся элементы и предположения. Сохрани смысловой порядок секций. Укажи, какие элементы являются ссылками, кнопками и полями; для каждого действия опиши результат и состояния loading/empty/error. Не копируй брендовые материалы. Покажи дизайн tokens и responsive-поведение для 360, 768 и 1440 CSS px. После реализации перечисли файлы и неизвестные, которые требуют решения.
Если интерфейс уже есть, добавь путь к компонентам и попроси сначала показать план правки. Сравнивай одно и то же состояние данных и одинаковый масштаб браузера; иначе визуальное сравнение мало что говорит.
От макета к работающей странице
Разделяй два прохода. Сначала добейся layout и типографической иерархии: ширина контейнера, сетка, ритм, размеры текста. Затем реализуй поведение: ссылки ведут на ожидаемые адреса, кнопки выполняют действие, поля имеют постоянные labels и сообщают об ошибках. Используй семантический HTML — заголовки по порядку, ссылки для переходов, кнопки для действий. React описывает интерфейс через компоненты и состояния; конкретный стек проекта должен совпадать с его lock-файлом и документацией (React: Learn).
Картинки и шрифты бери из собственных или лицензированных источников. Если в референсе график, укажи реальные данные либо подпиши макетные значения как условные. Для статуса используй не один цвет, но и текст или форму.
Приёмка на разных состояниях
Проверь страницу на узком телефоне, промежуточной ширине и широком экране. Сетка должна перестраиваться по содержимому, а не просто уменьшаться. Пройди таблицу: загрузка, пустой результат, ошибка и успешное действие. Проверь длинное название, раскрытое меню, hover/focus/disabled и ввод только клавиатурой. Сравни не только внешний край карточек: убедись, что поле имеет доступное имя, CTA остаётся рядом с нужным объектом, а текст можно увеличить и перевести.
Для сравнения снимков зафиксируй viewport, масштаб, состояние данных и текст. Проверь DOM и accessibility tree, затем открой DevTools и осмотри консоль/network. Это помогает найти визуальные и клиентские ошибки, но само по себе не подтверждает корректность backend, оплаты или доставки формы. WCAG задаёт более широкий набор требований к web-контенту (W3C: WCAG); сходство одного скриншота не является аудитом доступности.