screenshot-interaction-analyzer — субагент для Claude Code: разбор UI
Субагент читает скриншот интерфейса и описывает, что на нём можно нажать, куда ведут переходы и какие состояния меняются. Пригодится, когда есть картинка экрана, а макета или описания флоу нет.
npx claude-code-templates@latest --agent ui-analysis/screenshot-interaction-analyzerЧто делает screenshot-interaction-analyzer
Субагент работает как аналитик взаимодействий. Он смотрит на скриншот и раскладывает его на слои: кликабельные элементы, поля ввода, навигация, переходы состояний и обратная связь вроде индикаторов загрузки или диалогов подтверждения. Основные действия он помечает приоритетом — высокий, средний или низкий.
На выходе — структурированный JSON. Внутри блоки primary_actions, navigation с текущим положением пользователя, input_flows с полями и способом отправки формы, state_transitions с парой «триггер — результат» и user_journeys со списком возможных путей. Такой формат удобно передавать дальше: в тесты, в задачи на вёрстку или в описание прототипа.
Инструменты у субагента ограничены: Read и TodoWrite. Значит, картинку он только читает и план ведёт, а по коду не ходит — если нужно сверить анализ с реальной разметкой, это уже отдельный шаг. Файл агента кладётся в .claude/agents/screenshot-interaction-analyzer.md.
Какие задачи решает
- разобрать скриншот на кликабельные элементы и их приоритет
- восстановить навигацию и понять, где сейчас находится пользователь
- описать поля формы и то, как она отправляется
- составить список переходов состояний по клику или тапу
- собрать возможные пользовательские сценарии по одному экрану
Примеры запросов агенту
- проанализируй скриншот экрана оформления заказа и верни JSON с действиями и переходами
- посмотри на этот скриншот и опиши, какие поля ввода и фильтры тут есть
- разбери навигацию на скриншоте и перечисли возможные пути пользователя
Как установить screenshot-interaction-analyzer
1Через claude-code-templates
npx claude-code-templates@latest --agent ui-analysis/screenshot-interaction-analyzer2Вручную: положить файлы
.claude/agents/screenshot-interaction-analyzer.mdДля всех проектов — ~/.claude/agents/. Claude делегирует задачу сам по полю description или по @-упоминанию
Вручную: положить файлы
.codex/agents/screenshot-interaction-analyzer.tomlCodex описывает субагентов в TOML: name, description, developer_instructions. Текст из Markdown перенесите в developer_instructions вручную. Для всех проектов — ~/.codex/agents/
Вручную: положить файлы
.cursor/agents/screenshot-interaction-analyzer.mdCursor понимает и .claude/agents/
По шагам, с командами для каждой платформы: Субагенты Claude Code: как создать, вызвать и не утопить контекст
Вопросы о screenshot-interaction-analyzer
Как установить screenshot-interaction-analyzer в Claude?
Через шаблоны: выполните npx claude-code-templates@latest --agent ui-analysis/screenshot-interaction-analyzer, затем файл .claude/agents/screenshot-interaction-analyzer.md попадёт в проект.
Что делает screenshot-interaction-analyzer?
Анализирует скриншот интерфейса и возвращает JSON с кликабельными элементами, навигацией, полями ввода, переходами состояний и возможными сценариями пользователя.
Какие инструменты доступны субагенту?
Только Read и TodoWrite. Он читает изображение и ведёт список задач, но не открывает и не правит код проекта.
