# web-design-reviewer

Открывает сайт в браузере, ищет проблемы вёрстки, адаптива и доступности и правит их прямо в исходниках. Пригодится, когда нужно проверить UI без ручного обхода страниц.

- команда · `type=command` · Claude Code · 605 установок
- Автор: davila7
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/commands/design/web-design-reviewer.md
- Обновлён: 2026-10-24
- HTML: https://affpapa.org/nevibecode/commands/web-design-reviewer

## Что делает

Команда проходит по страницам запущенного сайта, снимает скриншоты и вытаскивает DOM, а потом ищет типовые дефекты: вылезание контента за родителя, наложение элементов, сломанный адаптив, низкий контраст текста, отсутствие состояния фокуса, картинки без alt. Проверка идёт на четырёх ширинах экрана — 375px, 768px, 1280px и 1920px.

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

Что нужно заранее: сайт должен быть запущен — локальный сервер вроде `http://localhost:3000`, стейджинг или прод для чтения без правок. Для съёмки экрана и навигации нужна браузерная автоматизация, а для правок — исходники в рабочей папке. Из инструментов команде разрешены `Bash` и `Read`.

## Установка

### Claude Code (родная платформа)

1. **Через claude-code-templates**
```bash
npx claude-code-templates@latest --command design/web-design-reviewer
```

2. **Вручную: положить файлы**
- Файл: `.claude/commands/web-design-reviewer.md` — Вызов — /web-design-reviewer. Для всех проектов — ~/.claude/commands/

### Codex

**Вручную: положить файлы**
- Файл: `~/.codex/prompts/web-design-reviewer.md` — Вызов — /prompts:web-design-reviewer. В Codex этот формат помечен устаревшим, замена — скиллы

### GitHub Copilot

**Вручную: положить файлы**
- Файл: `.github/prompts/web-design-reviewer.prompt.md`

### Gemini CLI

**Вручную: положить файлы**
- Файл: `.gemini/commands/web-design-reviewer.toml` — Gemini хранит команды в TOML: текст запроса — в поле prompt

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/commands/design/web-design-reviewer.md

## Когда брать
- найти, почему блок вылезает за пределы экрана на мобильном
- проверить контраст текста и состояние фокуса при навигации с клавиатуры
- поймать наложение элементов и разъехавшиеся отступы между похожими блоками
- проверить вёрстку сразу на 375, 768, 1280 и 1920 пикселях
- исправить найденный дефект в исходниках, а не только описать его

## Примеры запросов агенту
- Проверь дизайн сайта на `http://localhost:3000`, начни с главной
- Посмотри UI на мобильной ширине и почини то, что сломалось
- Найди проблемы с доступностью: контраст, фокус, alt у картинок

## Похожие
- [frontend-design-direction](https://affpapa.org/nevibecode/skills/frontend-design-direction.md) — скилл · 5300 установок
- [test-generate](https://affpapa.org/nevibecode/commands/test-generate.md) — команда · ★ 41823
- [design-system-setup](https://affpapa.org/nevibecode/commands/design-system-setup.md) — команда · ★ 41823
- [design-review](https://affpapa.org/nevibecode/commands/design-review.md) — команда · ★ 41823
- [typescript-scaffold](https://affpapa.org/nevibecode/commands/typescript-scaffold.md) — команда · ★ 41823
- [full-stack-feature](https://affpapa.org/nevibecode/commands/full-stack-feature.md) — команда · ★ 41823

Из того же набора: [davila7/claude-code-templates](https://affpapa.org/nevibecode/by/davila7/claude-code-templates.md) — 495 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md