Работа со скриншотами и изображениями

Время: 15 мин | Уровень: Базовый

Цель урока

Научиться анализировать скриншоты и визуальные референсы с помощью Claude Code для получения описаний, рекомендаций и структурированной информации.

Что вы узнаете

• Как добавлять изображения в Claude Code
• Как анализировать скриншоты и референсы
• Как получать рекомендации на основе визуальных материалов
• Как создавать описания стиля для брифов

Реальный кейс: Lenny Rachitsky использует Claude Code для работы со скриншотами — AI анализирует изображения, улучшает их качество и извлекает информацию из визуальных материалов. Источник

Почему это важно

Аналогия: Claude Code работает как опытный арт-директор — вы показываете ему картинку, он описывает стиль, выделяет детали и даёт рекомендации.

Типичные задачи:

• Скриншот референса → описание стиля для брифа
• Креатив конкурента → анализ и рекомендации
• Скриншот UI → извлечение структуры и элементов
• Фото с мероприятия → описание для контента

Как добавить изображение в Claude Code

Способ 1: Drag & Drop

Просто перетащите изображение в окно Claude Code. Это самый быстрый способ.

Способ 2: Копирование из буфера

1. Скопируйте изображение (Cmd/Ctrl+C)
2. Вставьте в Claude Code (Cmd/Ctrl+V)

Работает со скриншотами, картинками из браузера, изображениями из Figma.

Способ 3: Ссылка на файл

Если изображение уже в проекте:

Проанализируй @company-context/sample-reference.png

Какие форматы поддерживаются

Анализ скриншотов

Базовый анализ

Опиши, что ты видишь на этом скриншоте

Claude опишет основные элементы: структуру, цвета, текст, композицию.

Анализ UI/UX

Проанализируй этот интерфейс:
1. Какие основные элементы?
2. Как организована навигация?
3. Какие паттерны используются?

Извлечение текста

Извлеки весь текст из этого скриншота и структурируй его

Полезно для:

• Скриншотов постов конкурентов
• Фото презентаций с мероприятий
• Изображений документов

Анализ референсов

Описание визуального стиля

Опиши визуальный стиль этого референса:
- Цветовая палитра
- Типографика
- Композиция
- Настроение
- Ключевые элементы

Сравнение референсов

Добавьте несколько изображений и попросите сравнить:

Сравни эти два референса:
- Что общего?
- Чем отличаются?
- Какой больше подходит для [описание задачи]?

Создание мудборда

На основе этих 3 референсов создай описание мудборда:
- Общий стиль
- Цветовая палитра (с hex-кодами если возможно)
- Ключевые элементы
- Tone of voice визуалов

Получение рекомендаций

Анализ креативов конкурентов

Проанализируй этот креатив конкурента:
1. Что работает хорошо?
2. Что можно улучшить?
3. Какие идеи можно адаптировать для нас?

Рекомендации по улучшению

Посмотри на этот баннер и дай рекомендации:
- Как улучшить читаемость?
- Как усилить CTA?
- Какие элементы отвлекают внимание?

Соответствие брифу

Вот бриф: [текст брифа]
Вот референс: [изображение]

Оцени, насколько референс соответствует брифу.
Что нужно изменить?

Создание описаний для брифов

Описание стиля для дизайнера

На основе этого референса создай описание стиля для дизайнера:
- Визуальный язык
- Цвета и их использование
- Типографика
- Иконки и графические элементы
- Что обязательно сохранить
- Чего избегать

Техническое задание из скриншота

На основе этого скриншота создай ТЗ для разработчика:
- Список экранов
- Основные компоненты
- Интерактивные элементы
- Состояния (hover, active, disabled)

Практика

Для практики: Используйте файл company-context/sample-reference.png или любой свой скриншот.

Задание 1: Анализ референса для дизайнера

Шахзод (дизайнер): “Клиент прислал референс дашборда — опиши стиль, чтобы я мог начать работу.”

Задача: Получить детальное описание визуального стиля референса.

Исходные данные: company-context/sample-reference.png

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

Проанализируй @company-context/sample-reference.png для дизайнера:
1. Цветовая палитра (основные и акцентные цвета)
2. Типографика (какие шрифты, размеры, стили)
3. Композиция (как организованы элементы)
4. Настроение (какие эмоции вызывает)
5. Ключевые элементы дашборда

Задание 2: Создание дизайн-брифа

Бехзод: “Сделай бриф по этому референсу — передадим в студию для лендинга.”

Задача: Создать дизайн-бриф на основе референса.

Исходные данные: company-context/sample-reference.png

Ожидаемый результат: Готовый бриф с описанием стиля для передачи дизайнеру.

На основе @company-context/sample-reference.png создай дизайн-бриф:

## Задача
Лендинг для UzTech Business в стиле референса

## Что берём из референса
[опиши]

## Цветовая схема
[извлеки из референса]

## Типографика
[опиши]

## Композиция и layout
[опиши]

## Чего избегать
[что не подойдёт для узбекской аудитории]

Задание 3: Извлечение информации из скриншота

Азиза (копирайтер): “Я записала заметки с созвона с клиентом — вот скриншот. Что там главное?”

Задача: Извлечь структурированную информацию из скриншота заметок.

Исходные данные: Любой скриншот заметок или поста

Ожидаемый результат: Извлечённый текст + анализ ключевых моментов.

Из этого скриншота:
1. Извлеки весь текст
2. Выдели 3 ключевых момента
3. Что требует уточнения?

Типичные запросы для работы с изображениями

Советы

Давайте контекст

Без контекста:

Проанализируй картинку

С контекстом:

Это референс для лендинга B2B-продукта.
Проанализируй, что из стиля подойдёт для нашей аудитории (топ-менеджеры 40+)

Задавайте конкретные вопросы

Размыто:

Что думаешь о дизайне?

Конкретно:

Оцени по критериям:
1. Читаемость текста (1-10)
2. Заметность CTA (1-10)
3. Соответствие целевой аудитории

Используйте несколько изображений

Claude может анализировать несколько изображений в одном запросе. Это удобно для:

• Сравнения вариантов
• Создания общего мудборда
• Поиска закономерностей

Что не стоит делать

• Не загружайте очень большие файлы — сжимайте изображения до 2-4 МБ
• Не ожидайте pixel-perfect анализа — Claude видит общую картину
• Не просите редактировать изображения — Claude анализирует, но не редактирует (это в следующем уроке про генерацию)

Резюме

• Изображения добавляются через drag & drop, копирование или @-ссылку
• Claude анализирует стиль, извлекает текст, даёт рекомендации
• Контекст задачи улучшает качество анализа
• Можно работать с несколькими изображениями одновременно

Следующий шаг

Вы научились анализировать существующие изображения. В следующем уроке познакомимся с генерацией изображений — как создавать визуалы с нуля.

Урок 3.3: Генерация изображений

Тизер основного курса: В основном курсе вы освоите Browser Use — автоматизацию браузера, которая позволяет Claude самостоятельно находить референсы, делать скриншоты сайтов и собирать визуальные материалы. Также научитесь создавать skills для автоматической обработки мудбордов.