Агент открывает страницу, делает скриншоты на разных ширинах, находит проблемы вёрстки и чинит их в исходниках.
Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.
Значения сразу появятся в превью, коде и при копировании.
Проведи визуальное ревью сайта и исправь найденные проблемы в исходном коде. Сайт: [URL — например, http://localhost:3000] Страницы: [КАКИЕ СТРАНИЦЫ ИЛИ «весь сайт»] Шаг 1. Сбор информации. Определи по файлам проекта фреймворк (package.json, next.config, vite.config), способ стилизации (CSS, CSS Modules, Tailwind, CSS-in-JS) и где лежат стили и компоненты. Шаг 2. Осмотр. Открой каждую страницу в браузере, сделай скриншоты на ширинах 375, 768, 1280 и 1920 px, при возможности сними DOM. Ищи: - вёрстка: вылезание за край, горизонтальный скролл, наложения, обрезанный текст, сломанная сетка; - адаптивность: мелкие цели касания, нечитаемый текст, неправильный перенос; - согласованность: разные отступы, цвета, радиусы и шрифты у одинаковых элементов; - доступность: контраст, видимый фокус, подписи у полей и иконок-кнопок; - медиа: искажённые пропорции, размытые или отсутствующие изображения. Каждой проблеме присвой важность: критично, высоко, средне, низко. Шаг 3. Исправления. Правь источник, а не симптом: нужный компонент или токен, а не !important. Следуй существующим паттернам проекта. Шаг 4. Повторная проверка. Сделай скриншоты заново и убедись, что исправлено и ничего не сломалось. Повторяй шаги 2–4, пока критичных и высоких проблем не останется. Итоговый отчёт: таблица «проблема — где — важность — что сделано — файл», затем то, что осталось и почему.
```text Проведи визуальное ревью сайта и исправь найденные проблемы в исходном коде. Сайт: [URL — например, http://localhost:3000] Страницы: [КАКИЕ СТРАНИЦЫ ИЛИ «весь сайт»] Шаг 1. Сбор информации. Определи по файлам проекта фреймворк (package.json, next.config, vite.config), способ стилизации (CSS, CSS Modules, Tailwind, CSS-in-JS) и где лежат стили и компоненты. Шаг 2. Осмотр. Открой каждую страницу в браузере, сделай скриншоты на ширинах 375, 768, 1280 и 1920 px, при возможности сними DOM. Ищи: - вёрстка: вылезание за край, горизонтальный скролл, наложения, обрезанный текст, сломанная сетка; - адаптивность: мелкие цели касания, нечитаемый текст, неправильный перенос; - согласованность: разные отступы, цвета, радиусы и шрифты у одинаковых элементов; - доступность: контраст, видимый фокус, подписи у полей и иконок-кнопок; - медиа: искажённые пропорции, размытые или отсутствующие изображения. Каждой проблеме присвой важность: критично, высоко, средне, низко. Шаг 3. Исправления. Правь источник, а не симптом: нужный компонент или токен, а не !important. Следуй существующим паттернам проекта. Шаг 4. Повторная проверка. Сделай скриншоты заново и убедись, что исправлено и ничего не сломалось. Повторяй шаги 2–4, пока критичных и высоких проблем не останется. Итоговый отчёт: таблица «проблема — где — важность — что сделано — файл», затем то, что осталось и почему. ```
{
"messages": [
{
"role": "user",
"content": "Проведи визуальное ревью сайта и исправь найденные проблемы в исходном коде.\n\nСайт: [URL — например, http://localhost:3000]\nСтраницы: [КАКИЕ СТРАНИЦЫ ИЛИ «весь сайт»]\n\nШаг 1. Сбор информации. Определи по файлам проекта фреймворк (package.json, next.config, vite.config), способ стилизации (CSS, CSS Modules, Tailwind, CSS-in-JS) и где лежат стили и компоненты.\n\nШаг 2. Осмотр. Открой каждую страницу в браузере, сделай скриншоты на ширинах 375, 768, 1280 и 1920 px, при возможности сними DOM. Ищи:\n- вёрстка: вылезание за край, горизонтальный скролл, наложения, обрезанный текст, сломанная сетка;\n- адаптивность: мелкие цели касания, нечитаемый текст, неправильный перенос;\n- согласованность: разные отступы, цвета, радиусы и шрифты у одинаковых элементов;\n- доступность: контраст, видимый фокус, подписи у полей и иконок-кнопок;\n- медиа: искажённые пропорции, размытые или отсутствующие изображения.\nКаждой проблеме присвой важность: критично, высоко, средне, низко.\n\nШаг 3. Исправления. Правь источник, а не симптом: нужный компонент или токен, а не !important. Следуй существующим паттернам проекта.\n\nШаг 4. Повторная проверка. Сделай скриншоты заново и убедись, что исправлено и ничего не сломалось. Повторяй шаги 2–4, пока критичных и высоких проблем не останется.\n\nИтоговый отчёт: таблица «проблема — где — важность — что сделано — файл», затем то, что осталось и почему."
}
]
}