Разбор со скриншотами · 16 кадров
Claude Code Plan Mode: сначала план, потом код
Как Claude Code изучает вашу кодовую базу, предлагает план внедрения и ждёт вашего одобрения — на реальной задаче, один скриншот на шаг.
Около 6 мин · 16 шагов, каждый со ссылкой на точную секунду исходного видео
Коротко
Plan mode заставляет Claude Code сначала исследовать проект и только потом писать код. Переключите индикатор режима до «plan mode on», опишите задачу — Claude просканирует файлы и вернёт нумерованный план внедрения с точными файлами и строками. Дальше три варианта: принимать правки автоматически, подтверждать каждую вручную или ответить «No, keep planning» с обратной связью. В ходе выполнения план превращается в зачёркнутый чек-лист, а Bash-команды можно разрешить «больше не спрашивать» для конкретной директории. Plan mode хорош, когда изменения размазаны по многим файлам, но каждое по отдельности простое; для узких, но сложных по логике задач лучше добавить в промпт «think hard» или «ultrathink».
Об исходном видео
Все скриншоты на этой странице взяты из урока курса по Claude Code от Net Ninja — «Planning & Thinking», записанного в VS Code на реальном Next.js-блоге под названием shinobi.
Кадры используются с указанием авторства, каждый шаг ведёт обратно к точной секунде видео. Текстовая инструкция — наша собственная работа, а не переписанные субтитры.
Что такое plan mode
Один индикатор под полем ввода определяет, как поведёт себя Claude.
- 1
Переключаемся в plan mode
Plan mode — одна из позиций индикатора режима под полем ввода Claude Code. Прокрутите его (в этой сборке alt+m — сам индикатор пишет «plan mode on (alt+m to cycle)») через «accept edits on», и он станет зелёным: теперь Claude будет исследовать и планировать, не трогая файлы. Идеальный режим по умолчанию для задач, которые затрагивают много файлов, но по отдельности несложны.
Внизу поля ввода горит «plan mode on (alt+m to cycle)» — до одобрения плана Claude ничего не изменит.Смотреть с 0:38
Реальная задача под plan mode
Запрос на компонент аватара: от промпта через исследование кодовой базы к плану из шести шагов.
- 2
Описываем задачу, plan mode остаётся включённым
Демо-задача: «Can you make a custom component for an Avatar (no pic, only initial) and find any places in the project where it can replace Avatar-like templates». В промпте хорошо всё: чёткое ограничение (только инициалы, без картинок) и требование найти и заменить все существующие заглушки аватаров. Enter запускает лишь исследование — правок пока нет.
Задача про аватар введена в поле промпта, внизу всё ещё горит plan mode on.Смотреть с 1:10 - 3
Сначала исследование, потом план
Перед любыми предложениями Claude Code запускает read-only поиск: один проход по шаблону «avatar|Avatar|initial|profile|user» находит 4 файла-кандидата, второй сканирует весь репозиторий .tsx/.ts/.jsx/.js и находит 100. Claude объясняет, что делает («I’ll analyze the codebase to understand where an Avatar component could be useful and plan its implementation»). В plan mode такие проверки безопасны — файлы не трогаются.
Два вызова Search и строка статуса — единственное, что делает Claude в plan mode, это чтение.Смотреть с 1:18 - 4
План начинается с находок
План приходит под заголовком «Ready to code?». Сначала раздел «Current Avatar Usage Found»: Blog Post Cards в src/app/blog/page.tsx:56-58 (инлайн-div с градиентом для инициалов автора) и Recent Activity в src/components/BlogSidebar.tsx:43 (цветная точка). Точные файлы и строки — то, что делает план Claude Code проверяемым: обе позиции можно открыть и сверить.
«Ready to code? Here is Claude’s plan» — начиная с двух найденных мест с аватарами.Смотреть с 1:34 - 5
Шесть шагов на пять файлов
Раздел Proposed Avatar Component обещает src/components/ui/Avatar/Avatar.tsx с отображением инициалов, размерами sm/md/lg/xl и шестью цветовыми вариантами — по образцу существующего в проекте компонента Button. Дальше Implementation Plan перечисляет шесть шагов по порядку: создать компонент, заменить код аватара в карточках блога (строки 56-58), прокачать BlogSidebar, добавить аватар в шапку отдельного поста, создать тестовый файл по образцу тестов Button и добавить ссылку на предпросмотр в навигацию «as per project instructions».
Полный план внедрения — каждый шаг называет свой файл, так что объём работ виден до одобрения.Смотреть с 2:02
Читаем план и одобряем
Диалог подтверждения — суть plan mode: сначала прочитайте план, потом отвечайте.
- 6
Три варианта ответа на план
Любая сессия plan mode заканчивается одной и той же развилкой: «Would you like to proceed?» и три опции. «Yes, and auto-accept edits» отдаёт Claude весь план на самотёк. «Yes, and manually approve edits» одобряет план, но каждую правку подтверждаете вы. «No, keep planning» возвращает план с вашей обратной связью. Если план вы действительно прочитали, первый вариант — быстрый путь; именно его выбирают в видео.
Would you like to proceed? Авто-принятие, ручное подтверждение или продолжить планирование — развилка plan mode.Смотреть с 2:26 - 7
План превращается в чек-лист
После одобрения план становится списком Update Todos, который зачёркивается пункт за пунктом — все шесть задач по аватару уже перечёркнуты. Plan mode не разрешает shell-команды заранее: при запуске тестов всплывает диалог Bash command для «npm run test — Run tests to verify Avatar component works correctly», и вариант 2 навсегда разрешает их для этой директории проекта — дальнейшие прогоны идут без вопросов.
Все задачи зачёркнуты, рядом диалог разрешения на npm run test — одно «больше не спрашивать» закрывает весь прогон.Смотреть с 3:10
Приёмка результата
Чек-лист, код, навигация, страница предпросмотра и живой блог.
- 8
Каждый пункт плана отмечен
В конце — сводка с зелёными галочками: Avatar Component Created в src/components/ui/Avatar/Avatar.tsx, Blog Post Cards Updated (инлайн-аватар заменён в src/app/blog/page.tsx:57), Individual Blog Posts Enhanced, Sidebar Enhanced, Tests Created, Navigation Updated и Preview Page Created на /avatar. Сверить её с шестью шагами плана — самая быстрая приёмка: те же пункты, те же файлы, без сюрпризов.
Итоговая сводка повторяет план шаг за шагом — все тесты Avatar проходят.Смотреть с 3:58 - 9
Компонент соответствует плану
Открываем сгенерированный Avatar.tsx и сверяем обещания: интерфейс AvatarProps с name, size ('sm' | 'md' | 'lg' | 'xl') и variant ('primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'gradient'), инициалы через name.charAt(0).toUpperCase() и карты классов размеров/вариантов в той же структуре, что и у Button проекта.
Avatar.tsx в VS Code — props, размеры и варианты ровно как в плане.Смотреть с 4:42 - 10
Даже ссылка в навигации была в плане
Шаг 6 плана гласил «Add link to Avatar preview in header navigation» — и вот он: в шапке главной Shinobi между Preview и About появился пункт Avatar. Мелочь, но она показывает, что plan mode выполняет обещания — включая легко теряемую правку навигации.
В шапке главной появилась ссылка Avatar — шестой шаг плана, выполненный дословно.Смотреть с 4:58 - 11
Страница предпросмотра со всеми вариантами
На localhost:3000/avatar новая страница предпросмотра показывает всю матрицу компонента: ряд Sizes от Small до X-Large и сетку Variants с кругами Primary, Secondary, Success, Warning, Danger и Gradient. Один взгляд подтверждает, что компонент работает во всём пространстве пропсов — именно для этого и существует preview-страница.
Страница /avatar: четыре размера, шесть цветов, всё отрисовано живьём.Смотреть с 5:14 - 12
Новый компонент на живых страницах
Кульминация: в списке блога на localhost:3000/blog у каждой карточки рядом с «By Net Ninja» стоит фиолетовый аватар «N», а в той же вью сайдбар Recent Activity показывает аватары вместо цветных точек. Первые два шага плана — карточки блога и BlogSidebar — видны на одном экране.
Карточки постов и сайдбар Recent Activity уже используют компонент Avatar.Смотреть с 5:22
Если план уехал — пишем правило
Claude выполнил план честно — сам план разошёлся с конвенциями проекта, поэтому правка идёт в CLAUDE.md.
- 13
Превращаем отклонение в правило
Plan mode выполнил план безукоризненно — но план добавил отдельную страницу /avatar и ссылку в шапке, хотя CLAUDE.md проекта требовал держать примеры компонентов на странице предпросмотра. Исправление — два промпта («убери страницу аватара, перенеси примеры в preview»), а затем в CLAUDE.md записывается постоянное правило: «when making new page components, always add a link to that page in the header. Only do this for page components, not UI or other drop-in components». Урок: читайте план и закрепляйте в правилах всё, что пришлось исправить.
В CLAUDE.md появляется правило про page-компоненты, а сводка Claude подтверждает удаление лишней страницы.Смотреть с 6:02
Родственник plan mode: расширенное мышление
Широкий охват — plan mode. Узкая задача с тяжёлой логикой — ключевые слова think.
- 14
Для сложной логики — «think hard»
Режим мышления решает обратную задачу: не широкий охват, а тяжёлая логика. Демо-промпт просит реализовать систему комментариев с аутентификацией, модерацией и обновлениями в реальном времени и содержит фразу «Think hard about this implementation». Увидев «think» (или усиленную версию) в промпте, Claude Code включает расширенное мышление: тратит больше токенов в обмен на более глубокий анализ до появления плана.
Промпт про систему комментариев с «Think hard» — plan mode всё ещё включён, поэтому на выходе план, а не код.Смотреть с 8:52 - 15
Поток рассуждений в реальном времени
С расширенным мышлением Claude Code транслирует ход мыслей серым курсивом под маркером «Thinking…» ещё до появления плана: «This is a comprehensive feature request that requires careful planning. Let me think through all the components needed for a comment system: 1. Database Schema… 2. Authentication… 3. Database… 4. API Routes…». Читать этот поток — самый дешёвый способ поймать неверное допущение заранее.
Серый курсивный блок — реальные рассуждения Claude, идущие до плана.Смотреть с 9:00 - 16
Четыре уровня, максимум — ultrathink
Глубина мышления регулируется самими словами: «think» — небольшая добавка, дальше «think hard», «think harder», а введённое здесь в поле ввода «ultrathink» — максимальный бюджет. Расплата всегда одна — токены: чем дольше думает Claude, тем дороже ход, поэтому большие бюджеты берегите для вопросов уровня архитектуры, а не для переименования переменной.
Вводим «ultrathink» — самый мощный триггер мышления, который распознаёт Claude Code.Смотреть с 10:54