# screenshot-interaction-analyzer

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

- субагент · `type=agent` · Claude Code · 414 установок
- Автор: davila7
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/agents/ui-analysis/screenshot-interaction-analyzer.md
- Обновлён: 2026-10-24
- HTML: https://affpapa.org/nevibecode/agents/screenshot-interaction-analyzer

## Что делает

Субагент работает как аналитик взаимодействий. Он смотрит на скриншот и раскладывает его на слои: кликабельные элементы, поля ввода, навигация, переходы состояний и обратная связь вроде индикаторов загрузки или диалогов подтверждения. Основные действия он помечает приоритетом — высокий, средний или низкий.

На выходе — структурированный JSON. Внутри блоки `primary_actions`, `navigation` с текущим положением пользователя, `input_flows` с полями и способом отправки формы, `state_transitions` с парой «триггер — результат» и `user_journeys` со списком возможных путей. Такой формат удобно передавать дальше: в тесты, в задачи на вёрстку или в описание прототипа.

Инструменты у субагента ограничены: `Read` и `TodoWrite`. Значит, картинку он только читает и план ведёт, а по коду не ходит — если нужно сверить анализ с реальной разметкой, это уже отдельный шаг. Файл агента кладётся в `.claude/agents/screenshot-interaction-analyzer.md`.

## Установка

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

1. **Через claude-code-templates**
```bash
npx claude-code-templates@latest --agent ui-analysis/screenshot-interaction-analyzer
```

2. **Вручную: положить файлы**
- Файл: `.claude/agents/screenshot-interaction-analyzer.md` — Для всех проектов — ~/.claude/agents/. Claude делегирует задачу сам по полю description или по @-упоминанию

### Codex

**Вручную: положить файлы**
- Файл: `.codex/agents/screenshot-interaction-analyzer.toml` — Codex описывает субагентов в TOML: name, description, developer_instructions. Текст из Markdown перенесите в developer_instructions вручную. Для всех проектов — ~/.codex/agents/

### Cursor

**Вручную: положить файлы**
- Файл: `.cursor/agents/screenshot-interaction-analyzer.md` — Cursor понимает и .claude/agents/

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

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

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

## Похожие
- [screenshot](https://affpapa.org/nevibecode/skills/nexu-io-screenshot.md) — скилл · 2700 установок
- [interaction-patterns-components](https://affpapa.org/nevibecode/skills/interaction-patterns-components.md) — скилл · 539 установок
- [interaction-design](https://affpapa.org/nevibecode/skills/secondsky-interaction-design.md) — скилл · 441 установка
- [full-page-screenshot](https://affpapa.org/nevibecode/skills/nexu-io-full-page-screenshot.md) — скилл · 2800 установок
- [argent-screenshot-diff](https://affpapa.org/nevibecode/skills/argent-screenshot-diff.md) — скилл · 25000 установок
- [browser-screenshot-diff](https://affpapa.org/nevibecode/skills/browser-screenshot-diff.md) — скилл · 696 установок

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

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