screenshot-synthesizer — субагент для Claude Code: установка и запуск
Объединяет JSON-отчёты по интерфейсу, взаимодействию и бизнес-логике в единый список задач разработки в формате Markdown.
npx claude-code-templates@latest --agent ui-analysis/screenshot-synthesizerЧто делает screenshot-synthesizer
Субагент берёт на себя роль технического продакт-менеджера. Он принимает три отдельных JSON-файла: разбор интерфейса, карту пользовательских взаимодействий и описание бизнес-модулей. Из этих источников агент устраняет дубли, находит пропущенные связи и формирует структуру проекта от модулей к отдельным подзадачам.
В результат попадает итоговый Markdown-документ с чекбоксами задач, подсчётом модулей и заметками о зависимостях. Формулировки ориентированы строго на требования к продукту: агент описывает поведение системы без привязки к конкретному стеку или библиотекам.
Для работы субагенту обязательно нужны готовые файлы анализа от предыдущих шагов пайплайна и доступ к инструментам Read, Write и TodoWrite. Без входных структурированных данных составить план не выйдет.
Какие задачи решает
- Свести три разных JSON-отчёта по макетам в единый план разработки
- Убрать дублирующие требования к интерфейсу и логике
- Разбить крупные продуктовые модули на проверяемые подзадачи с чекбоксами
- Сформировать список задач без привязки к конкретному языку программирования
Примеры запросов агенту
- Объедини анализы из ui.json, interaction.json и business.json в итоговый план задач
- Собери бэклог фич на основе трёх JSON-разборов скриншота и сохрани в backlog.md
Как установить screenshot-synthesizer
1Через claude-code-templates
npx claude-code-templates@latest --agent ui-analysis/screenshot-synthesizer2Вручную: положить файлы
.claude/agents/screenshot-synthesizer.mdДля всех проектов — ~/.claude/agents/. Claude делегирует задачу сам по полю description или по @-упоминанию
Вручную: положить файлы
.codex/agents/screenshot-synthesizer.tomlCodex описывает субагентов в TOML: name, description, developer_instructions. Текст из Markdown перенесите в developer_instructions вручную. Для всех проектов — ~/.codex/agents/
Вручную: положить файлы
.cursor/agents/screenshot-synthesizer.mdCursor понимает и .claude/agents/
По шагам, с командами для каждой платформы: Субагенты Claude Code: как создать, вызвать и не утопить контекст
Вопросы о screenshot-synthesizer
Как установить screenshot-synthesizer в Claude Code?
Выполните команду npx claude-code-templates@latest --agent ui-analysis/screenshot-synthesizer в терминале проекта. Либо сохраните конфигурацию субагента в файл .claude/agents/screenshot-synthesizer.md.
Что делает screenshot-synthesizer?
Он сопоставляет разрозненные результаты анализа интерфейса и логики, удаляет повторы и собирает иерархический Markdown-список задач для разработчиков.
Какие данные нужны субагенту на вход?
Ему требуются три JSON-структуры с разбором компонентов интерфейса, действий пользователя и функциональных сущностей.
