Загрузить скриншот сайта и попросить "найди ошибки" легко. Полученный список ещё придётся разбирать: где на странице видно проблему, что модель предположила и какую правку можно передать разработчику. Эту работу полезно задать прямо в промпте.

Один кадр показывает расположение элементов, видимый текст и состояние страницы в момент съёмки. Работу формы после отправки, скорость загрузки и переход по кнопке по нему проверить нельзя. Для таких выводов понадобятся действия в браузере и дополнительные данные.

Что приложить к запросу

Выберите модель или режим с поддержкой изображений. Такая возможность описана, например, в документации Яндекс AI Studio. Наличие текстового чата само по себе её не подтверждает.

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

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

Учебный промпт для первого разбора

Ниже шаблон для страницы услуги. Подставьте своё описание и приложите разрешённый к передаче скриншот.

"На изображении страница [какая услуга]. Посетитель: [кто и с какой задачей]. Главное действие: [что должен сделать]. Ширина окна и масштаб браузера: [значения].

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

Выбери до пяти замечаний, связанных с указанным действием. Не делай выводов о работе кнопок, скорости и отправке формы по одному кадру. Для каждой правки предложи способ проверки на сайте. Если подтверждённых замечаний нет, так и напиши".

Число замечаний здесь ограничивает объём ответа. Оно не означает, что на любой странице найдутся пять ошибок.

Как превратить ответ в задачу

Сначала сопоставьте каждое наблюдение с изображением. Если модель ссылается на обрезанный текст, проверьте исходный кадр: возможно, обрезан сам скриншот. Если замечание касается перехода или отправки формы, откройте сайт и воспроизведите действие.

Затем сформулируйте задачу так, чтобы её можно было принять после исправления. Учебный пример: "На узком экране подпись кнопки переносится и выходит за её границы. Проверить в браузере при указанной ширине; если проблема воспроизводится, исправить размеры и перенос. После правки вся подпись должна помещаться внутри кнопки". Это пример формулировки, такой дефект в статье не исследовался.

Места для проверки стоит сохранять вместе с замечаниями. Тогда разработчику будет проще понять, к какому экрану и состоянию относится каждая задача.

Какие замечания по скриншотам вам чаще приходится уточнять перед передачей в разработку?

#Промпты #Нейросети #РазработкаСайтов