Claude Code для новичка: что он умеет и с какой задачи начать

Claude Code можно освоить на маленьком проекте, результат которого вы способны проверить сами. Для первого знакомства подойдёт локальная страница с описанием услуги и раскрывающимися ответами на вопросы. У неё нет оплаты, клиентской базы и действующего сайта, который можно случайно испортить. Зато вы пройдёте весь путь: установите программу, войдёте в аккаунт, дадите задание, откроете результат и исправите конкретную ошибку.

Ниже - такой маршрут. Учебная страница посвящена ремонту настольных ламп. Название мастерской и условия вымышлены. Команды установки сверены с документацией 19 сентября 2026 года; генерация страницы в рамках этой статьи не выполнялась. Пример результата показывает, что следует получить и проверить, а не изображает проведённый тест.

Что делает Claude Code и какие слова нужно понимать

Claude Code - агент для работы с проектом. Он может читать файлы, изменять их и выполнять команды. Это позволяет попросить его создать страницу непосредственно в папке на компьютере, вместо того чтобы вручную переносить каждый фрагмент из чата. Возможности описаны в обзоре Anthropic.

Проект в нашем упражнении - обычная папка с файлами. Терминал - окно, в котором вы вводите команды компьютеру. Командная строка, или CLI, - текстовый способ управления программой. Знать программирование, чтобы открыть терминал, не требуется: важно понимать назначение каждой команды.

HTML задаёт содержание веб-страницы, CSS - её оформление. В упражнении они будут находиться в одном файле index.html. Его можно открыть браузером. Локальная страница существует на вашем компьютере; сама по себе она не становится общедоступным сайтом.

Разрешения определяют, какие действия агент может выполнить. Запрос «ничего не меняй» полезен как инструкция, но отдельной технической блокировкой не является. Поэтому мы зададим режим работы явно и начнём с пустой папки.

Что проверить до установки

Понадобятся компьютер, интернет, браузер и подходящий доступ к Claude Code. Наличие бесплатного чата Claude не означает включённый доступ к Claude Code. В официальном руководстве перечислены подписки и вариант входа через Console, связанный с API. Актуальную совместимость системы и доступность по стране проверяйте в инструкции установки до покупки.

Для упражнения достаточно текстового редактора: Блокнота на Windows или редактора, который сохраняет обычный текст на macOS. Word не подходит для создания HTML-файла: он предназначен для документов другого формата.

Не подключайте папку с рабочими договорами или весь диск. Создайте отдельное место для учебных файлов. Если пользуетесь корпоративным компьютером, учитывайте правила установки программ и использования внешних сервисов. Переносить в упражнение реальные клиентские данные незачем.

Заранее решите, через какой аккаунт будете работать. Подписка и API-доступ имеют разные условия расхода. Для первого запуска не нужно автоматически подключать дополнительную оплату при достижении лимита: сначала разберитесь, что именно включено в вашем варианте.

Как установить программу и убедиться, что она запускается

Выберите команду для своей системы и вставьте её в терминал одной строкой. Это команды с официальных страниц Anthropic. Они скачивают и запускают установщик, поэтому адрес нужно сверять, а не брать из случайного комментария.

На Windows откройте PowerShell через поиск меню «Пуск»:

irm https://claude.ai/install.ps1 | iex

На macOS откройте приложение Terminal, на Linux - терминал вашей системы:

curl -fsSL https://claude.ai/install.sh | bash

Не выполняйте оба варианта. После завершения установки введите:

claude --version

Ожидаемый признак успеха - номер версии и название Claude Code. Если команда не найдена, откройте новое окно терминала и повторите проверку. Если ошибка осталась, используйте раздел troubleshooting в официальной инструкции, а не устанавливайте ещё несколько копий наугад.

Отдельная команда диагностики:

claude doctor

Она проверяет установку и настройки. Это полезно, когда программа уже обнаруживается, но ведёт себя неожиданно. Сохраните текст ошибки; при обращении за помощью предварительно убедитесь, что в нём нет персональных путей или доступов. Процедура проверки описана в Advanced setup.

На Windows не путайте PowerShell с CMD. Если программа пишет, что команда irm неизвестна, проверьте, в каком окне вы находитесь. Не нужно ради учебной страницы устанавливать Linux-среду, базу данных или набор библиотек.

Как войти и выбрать режим с подтверждением действий

Первый запуск предлагает пройти авторизацию. Откроется браузер, где нужно выбрать свой аккаунт и завершить вход. Подробности и доступные способы приведены в Quickstart и Authentication.

Для нашего упражнения запускайте программу так:

claude --permission-mode default

Значение default выбирает режим, который интерфейс называет Manual. Это важно: слово default здесь является именем режима, а не обещанием, что он установлен у всех по умолчанию. Поведение стартового режима может зависеть от плана и настроек. Аргумент подтверждён в CLI reference.

После входа откройте /permissions внутри Claude Code и просмотрите правила. В чистом учебном проекте не нужны заранее разрешённые внешние команды. Если программа уже использовалась на компьютере, старые разрешения могут влиять на поведение. Manual не отменяет все существующие настройки и не запрещает чтение доступных файлов. О различиях режимов и правил есть отдельная документация.

Если при запуске предлагается использовать API-ключ, хотя вы собирались войти через подписку, не подтверждайте непонятный способ оплаты. На компьютере могла остаться настройка другого проекта. Уточните её происхождение; ключ не нужно копировать в переписку или публиковать на скриншоте.

Подготовьте папку и полный учебный бриф

Если Claude Code уже открыт, завершите эту сессию командой /exit. Через Проводник или Finder создайте новую пустую папку lamp-demo в удобном месте. Откройте терминал в ней либо перейдите командой cd, после которой указан путь к вашей папке в кавычках.

Например, если вы сами создали папку по такому адресу на Windows:

cd "C:\Users\YourName\Documents\lamp-demo"

Замените YourName своим именем пользователя и проверьте реальное расположение. Это учебный путь, его не нужно воспроизводить буквально. На macOS путь может выглядеть как "/Users/YourName/Documents/lamp-demo".

Создайте в папке обычный текстовый файл brief.txt с содержимым ниже. На Windows при сохранении выберите UTF-8 и проверьте расширение: файл не должен называться brief.txt.txt.

УЧЕБНЫЙ ПРОЕКТ. Компания и условия вымышлены.

Название: Мастерская «Лампа».
Услуга: диагностика и ремонт настольных ламп.
Результат страницы: объяснить порядок обращения.
Реальную отправку заявок не подключать.

Подзаголовок:
«Поможем понять, можно ли отремонтировать вашу настольную лампу».

Порядок обращения:
1. Сфотографируйте лампу целиком и место неисправности.
2. Опишите, что перестало работать.
3. Мастер уточнит, нужна ли диагностика в мастерской.

Частые вопросы:
Вопрос: Можно ли узнать стоимость по фотографии?
Ответ: По фотографии можно обсудить проблему. Окончательная стоимость
зависит от диагностики и согласуется до ремонта.

Вопрос: Нужно ли привозить лампу сразу?
Ответ: Сначала отправьте описание неисправности. Мастер подскажет
следующий шаг.

Вопрос: Вы ремонтируете любую лампу?
Ответ: Возможность ремонта зависит от конструкции и доступности
деталей. Это нужно уточнить до передачи лампы.

Кнопка: «Что подготовить для обращения».
Действие кнопки: перейти к списку из трёх шагов на этой же странице.
Контактных данных нет. Не придумывать адрес, телефон, цены и отзывы.

Бриф фиксирует содержание и границы. Благодаря этому вы сможете проверить не только внешний вид, но и точность текста. Сохраните его до генерации; не поручайте агенту сначала придумать условия мастерской.

Первый запрос: попросите план, затем разрешите создание

Находясь в папке lamp-demo, запустите Claude Code в Manual, как показано выше. Убедитесь, что указан именно учебный каталог. Отправьте:

Прочитай brief.txt. Пока не создавай и не меняй файлы.
Коротко перечисли содержание будущей страницы и предложи план.
Нужна локальная страница в одном index.html со встроенным CSS.
Без установки пакетов, внешних библиотек, сетевых запросов,
аналитики и настоящей отправки формы.
FAQ должен раскрываться мышью и клавиатурой.
Если требований не хватает, перечисли вопросы.

План должен быть соразмерным: заголовок, описание, три шага, кнопка-якорь и FAQ. Если предлагаются сервер, регистрация или платный сервис, спросите, зачем они нужны при заданных условиях. В этом упражнении они не решают дополнительной задачи.

Проверьте, что агент понял действие кнопки. Переход к разделу страницы не должен превратиться в отправку сообщения. Затем дайте разрешение на реализацию:

План подходит. Создай index.html по brief.txt.
Тексты и ограничения сохрани. Для FAQ используй стандартные
HTML-элементы details и summary. Сделай страницу читаемой
на узком экране. После создания перечисли файлы, объясни,
как открыть страницу, и честно укажи, что проверено,
а что требует моего просмотра в браузере.

details и summary - встроенные элементы HTML для раскрывающегося содержимого. В нашем примере они уменьшают количество собственного кода. Если агент запрашивает разрешение на создание файла, проверьте путь и действие, затем подтвердите именно его. Не нужно заранее разрешать любые будущие команды.

Как должен выглядеть результат

Ожидаемая структура папки проста:

lamp-demo/
  brief.txt
  index.html

Допустим отдельный файл с пояснением, если вы его попросили. Десятки служебных файлов и загрузка зависимостей для этого задания требуют объяснения.

Откройте index.html двойным щелчком. Если открывается редактор, выберите «Открыть с помощью» и браузер. В адресной строке будет локальный путь. Для этой страницы с встроенными стилями сервер не требуется; поведение более сложных сайтов может отличаться.

Учебный образец содержания на экране:

Мастерская «Лампа»

Поможем понять, можно ли отремонтировать вашу настольную лампу.

[Что подготовить для обращения]

1. Сфотографируйте лампу целиком и место неисправности.
2. Опишите, что перестало работать.
3. Мастер уточнит, нужна ли диагностика в мастерской.

Частые вопросы
> Можно ли узнать стоимость по фотографии?
> Нужно ли привозить лампу сразу?
> Вы ремонтируете любую лампу?

Цвета и размеры не обязаны совпасть с каким-то скрытым эталоном. Главное, чтобы посетитель понял предложение и нашёл условия. Не принимайте фразу агента «готово» вместо открытия файла: он мог проверить наличие HTML, но не посмотреть реальное отображение.

Проверьте страницу по пяти наблюдаемым результатам

Проверка должна повторять действия посетителя. Откройте страницу заново и пройдите последовательность без помощи агента.

Действие	Ожидаемый результат	Пример причины отказа
Прочитать первый экран	Понятны услуга и следующий шаг	Появилась неподтверждённая гарантия ремонта
Нажать основную кнопку	Страница переходит к шагам	Кнопка ничего не делает
Раскрыть каждый вопрос	Появляется полный ответ из брифа	Ответ обрывается или изменён смысл
Пройти клавишей Tab и нажать Enter	До элементов можно добраться, FAQ управляется	Видно только управление мышью
Сузить окно браузера	Текст и кнопки остаются доступны	Горизонтальный скролл скрывает часть ответа

Дополнительно выделите текст и сравните условия с brief.txt. Особенно важны слова «зависит», «согласуется» и «нужно уточнить»: при стилистической правке они могут незаметно исчезнуть.

Если вы открываете страницу на другом устройстве, передайте только учебный файл удобным вам способом. Включать публичную публикацию ради первой проверки необязательно. Сначала достаточно узкого окна и доступных средств просмотра; перед настоящим запуском сайта потребуется тест на реальном телефоне.

Запишите результат проверки. Например: «все ответы совпадают; переход работает; на узком окне кнопка выходит за край». Такой отчёт уже позволяет поручить следующую правку.

Как исправлять ошибки и не потерять рабочую версию

Перед заметной доработкой сохраните копию принятого index.html в отдельном месте. Для небольшого упражнения этого достаточно. В реальном проекте обычно используют Git - систему истории изменений, позволяющую сравнивать версии и возвращаться к сохранённому состоянию.

Задание на исправление должно связывать наблюдение и ожидаемый результат:

В index.html кнопка выходит за правый край при ширине окна
примерно 360 пикселей. Исправь только расположение и размер кнопки.
Сохрани тексты, ответы FAQ и действие перехода к шагам.
Объясни причину и перечисли изменённые участки.
Не подключай внешние библиотеки.

После исправления обновите страницу в браузере и повторите проверку кнопки. Затем раскройте FAQ: исправление одного участка не должно ломать соседний.

Если агент дважды предлагает похожие правки без результата, приостановите редактирование. Попросите назвать проверенные гипотезы и одну новую проверку. Например, проблема может быть в длинном тексте, фиксированной ширине или отступах. Формулировка «попробуй ещё» не помогает отличить причины.

Что пошло не так	Что сделать
Файл открылся как текст	Проверить расширение и выбранную программу
Браузер показывает старый вариант	Сохранить файл, обновить страницу, проверить путь
Агент создал слишком сложный проект	Вернуться к ограничению «один HTML, без пакетов»
Появились выдуманные условия	Вернуть исходный бриф и указать точную подмену
Запрошен непонятный доступ	Не подтверждать автоматически; выяснить цель действия
Выбрана не та папка	Завершить сессию и открыть нужный каталог

Как понять, что первое упражнение закончено

Результат готов, когда у вас есть открывающаяся страница, совпадающие с брифом тексты и запись выполненных проверок. Сохраните бриф, принятый файл и оставшиеся вопросы. Не добавляйте в этот же заход оплату и личный кабинет только потому, что первый экран получился.

Следующей задачей может стать ещё одна простая страница или изменение существующего блока по знакомой схеме. Перед переходом к рабочему сайту определите способ публикации, получение заявок, владельца доступов и поддержку. Если вы не можете оценить последствия ошибки, эту часть полезно поручить специалисту с конкретными критериями приёмки.

Самое ценное после первого упражнения - способность описать результат и заметить расхождение. Именно она позволяет пользоваться агентом осмысленно: вы понимаете, что поручили, что получили и что ещё требуется проверить.

Источники

• Обзор Claude Code - назначение инструмента.
• Quickstart - установка и первый запуск.
• Advanced setup - требования и диагностика установки.
• Authentication - способы входа.
• CLI reference и Permissions - режим запуска и разрешения.

Если хотите применить этот подход к своему сайту, обсудите задачу с MAU. Можно начать с брифа и списка того, что уже удалось проверить.