#Дайте Claude скриншот

_{Начальный уровень · Факультатив · около 15 минут · Нужно: Первое изменение: от запроса до коммита · Сверено с Claude Code v2.1.285 (stable) 05.10.2026}

#Цель

К концу этого факультатива вы сможете добавить в разговор скриншот или изображение и получить изменение по тому, что на нём видно.

#Что понадобится

Ваша копия шаблона для практики без незакоммиченных изменений и системный инструмент для скриншотов.
Расход лимита: небольшой.

Примечание

В Codespace Claude Code работает внутри codespace, а не на вашем компьютере (Development containers), поэтому давайте ему скриншоты в виде файлов там. Сохраните каждый скриншот на компьютере, переименуйте его так, как называет эта страница (shot.png, затем test-summary.png), и перетащите из файлового менеджера компьютера на папку .practice в проводнике codespace (GitHub Codespaces). Там, где разбор примера говорит вставить изображение, спрашивайте с указанием пути, например Look at this image: .practice/shot.png. В задании «Ваша очередь» пропустите строку с mv.

#Идея

Некоторые вещи быстрее показать, чем описать: ошибку на экране, вёрстку, схему. Claude Code читает изображения, и добавить изображение в разговор можно тремя способами (Common workflows):

перетащить изображение в окно Claude Code;
скопировать изображение и вставить его через Ctrl+V (в iTerm2 работает и Cmd+V; в Windows и WSL — Alt+V) (Interactive mode);
указать путь к нему в промпте, например «Look at this image: /path/to/shot.png».

#Разбор примера

В своей копии для практики запустите проверку ссылок на её примерах:

npm run linkcheck -- samples

Она выведет битую ссылку в guide.md, а затем 1 broken link(s). 2. Сделайте скриншот этого вывода и скопируйте его в буфер обмена. На Mac нажимайте Ctrl вместе с обычными клавишами, например Ctrl+Shift+Cmd+4: без него macOS сохраняет скриншот файлом, по умолчанию на рабочий стол (Take a screenshot on Mac). 3. Запустите claude и вставьте изображение. В поле промпта появится метка [Image #1] (Interactive mode). Если метки нет, изображение не добавилось: перетащите файл скриншота в окно Claude Code или укажите путь, как в задании «Ваша очередь». Затем попросите:

This is the link checker's output. Change the last line so it also says how many Markdown files were checked, like "1 broken link(s) in 2 files".

Одобрите правку, если Claude спросит. Затем во втором терминале в той же папке снова выполните npm run linkcheck -- samples. Теперь последняя строка называет число файлов.
Во втором терминале выполните git diff, чтобы увидеть изменение. Затем уберите изменение из примера в сторону, чтобы задание «Ваша очередь» начиналось с чистого листа:

git stash push --include-untracked -m b-images-example

После этого git status показывает nothing to commit, working tree clean.

#Ваша очередь

Во втором терминале выполните npm test и сделайте скриншот конца вывода: последних нескольких названий тестов и итога под ними. Сохраните его файлом, затем перенесите в папку .practice/ своей копии для практики. Git игнорирует эту папку, так что изображение никогда не появится среди изменений:

mv "<your screenshot file>" .practice/test-summary.png

WSL: Windows сохраняет файл на собственном диске, который в WSL доступен через /mnt/c (Working across file systems): C:\Users\<user name>\shot.png — это /mnt/c/Users/<user name>/shot.png. 2. В Claude Code (запустите claude, если он не работает) спросите о нём по пути: Look at this image: .practice/test-summary.png. What does each line of this summary mean? 3. Попросите небольшое изменение по изображению, например более понятное название одного из показанных тестов, и одобрите правку, если Claude спросит. Проверьте её через git diff во втором терминале.

#Проверка

У этого факультатива нет npm run check: отметьте каждый пункт сами. Факультатив пройден, когда выполнено всё это:

git diff показывает изменение, о котором вы попросили по изображению.
Самопроверка (не тестируется): одно изображение вы добавили вставкой или перетаскиванием, а другое — по пути (в Codespace оба по пути).

Закончив, уберите своё изменение в сторону, чтобы следующий урок начинался с чистого листа: git stash push --include-untracked -m b-images. После этого git status показывает nothing to commit, working tree clean.

#Осторожно

Изображение уходит Claude вместе с вашим промптом. Обрежьте всё личное — токены, адреса почты, данные клиентов, — прежде чем вставлять его.

#Что дальше

Work with images: другие способы работы с изображениями, например с макетами дизайна.

_{Источники: Common workflows · Interactive mode · Development containers · GitHub Codespaces · Take a screenshot on Mac · Working across file systems}

_{Назад к оглавлению Начального уровня · Тема: Память и контекст · Застряли на уроке?}