Как пользоваться Claude Code: первый проект, запросы и проверка результата

Открыли Claude Code, а дальше непонятно, что ему писать. Можно попросить «сделай сайт», но какой сайт получится и как его потом править — пока загадка.

Друзья, начнём с небольшой задачи. Соберём учебную страницу специалиста: услуги, примеры работ, контакты. На ней разберём, как выбрать папку, написать задание, получить первую версию и внести правки.

Вам не нужно заранее учить все команды. Будем разбираться по мере работы. Готовые промпты есть ниже, их можно брать и адаптировать под себя.

В статье используются скриншоты учебных страниц Daily Prompts. Расположение кнопок в самом Claude сверяйте со своей версией приложения. Погнали.

Что такое Claude Code

Claude Code — помощник для разработки от Anthropic. В доступной ему среде он может читать файлы, менять код и выполнять команды. Результат остаётся в проекте, с которым вы работаете. Официальный обзор.

То есть вы можете попросить добавить раздел на страницу, а потом открыть изменённый файл и посмотреть результат. Не нужно переносить каждую правку из обычного чата вручную.

Начать удобнее с понятной задачи. Страницу специалиста легко проверить: заголовок читается, услуги на месте, кнопка ведёт к контакту. Сразу видно, что нужно поправить.

Что понадобится для работы

В этом руководстве используем Claude Desktop и вкладку Code. По официальной инструкции для неё нужна платная подписка. Условия доступа проверьте перед оплатой: они могут меняться. Отдельно устанавливать терминальную версию Claude Code и Node.js для этого способа работы не требуется. Инструкция Anthropic.

Ещё подготовим отдельную папку, например first-claude-site. В неё можно положить:

• Короткий текст о себе.
• Услуги, которые хотите показать.
• Собственные работы и изображения.
• Ссылку для связи.

Если материалов пока нет, используйте учебный пример и обозначьте это. Не добавляйте в папку пароли, ключи доступа и конфиденциальные документы.

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

Шаг 1. Выбираем Code и папку проекта

Открываем Claude, переходим во вкладку Code. Для работы на своём компьютере выбираем локальную среду и папку first-claude-site.

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

Перед первым сообщением посмотрите название папки. Если рядом открыто несколько проектов, их легко перепутать.

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

Шаг 2. Разбираемся, что лежит в папке

Если в проекте уже есть файлы, сначала попросим помощника их посмотреть. Пока без изменений:

Посмотри выбранную папку и объясни простыми словами:
1. Что это за проект и какие в нём основные файлы.
2. Как открыть или запустить его на моём компьютере.
3. Какие проверки уже есть.
4. Что пока нельзя установить по файлам.
Ничего не меняй и не устанавливай. Сначала дай краткий ответ.

Так вы получите понятное описание проекта и способ запуска. Заодно проверите, что работаете с нужной папкой. Если ожидали портфолио, а помощник рассказывает про магазин, стоит остановиться и посмотреть путь.

Если папка пустая, просто напишите об этом. Тогда можно сразу перейти к заданию на первую страницу.

Шаг 3. Даём Claude Code понятное задание

Нейронке нужны исходные данные. Кому предназначен сайт, что на нём будет и какое действие должен сделать посетитель.

Для учебной страницы используем такой промпт:

Нужна учебная страница дизайнера Анны.
Посетитель — владелец небольшого бренда, которому нужны логотип и упаковка.
Он должен понять состав услуг, посмотреть примеры и перейти к контакту.

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

Сначала покажи структуру и список файлов. К сборке переходи после моего ответа.

Под свой сайт замените имя, услуги и действие посетителя. Если текст о вас лежит в about.txt, укажите файл прямо в запросе. Помощнику будет проще найти нужный материал.

Можно добавить визуальный ориентир. Только поясните, что именно нравится: крупные заголовки, спокойный фон, расположение работ. Иначе ИИ будет сам решать, какую часть примера вы хотели повторить.

Шаг 4. Смотрим план и запускаем сборку

До создания файлов проверьте структуру. Все нужные разделы есть. Лишних функций не появилось. Понятно, как открыть результат.

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

Когда план подходит, отправляем:

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

У Anthropic есть полезная рекомендация: заранее давать агенту понятные способы проверить работу. Например, что должна делать кнопка или какой результат ожидается на конкретных данных. Практики работы с Claude Code.

В нашем случае проверка простая: страница открывается, разделы на месте, контакт ведёт по нужной ссылке.

Шаг 5. Открываем сайт и проверяем основное действие

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

Пример учебной страницы. По скриншоту виден дизайн; работу кнопки проверяем отдельным нажатием.

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

Фразы «сайт готов» недостаточно. У помощника могло не быть браузера, и он проверил только файлы. Попросите объяснить, какие действия он действительно выполнил:

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

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

Шаг 6. Просим конкретную правку

Допустим, заголовок занимает почти весь экран. Кнопку не видно, пока не прокрутишь страницу. Опишем именно это:

На первом экране кнопка оказывается ниже видимой области.
Сократи заголовок и уменьши вертикальные отступы.
Сохрани смысл: Анна делает логотипы и упаковку для небольших брендов.
Другие разделы не переделывай.
После изменения повторно проверь первый экран в широком и узком окне.

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

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

Меняйте проект небольшими шагами. Тогда будет понятно, после какой правки возникла ошибка.

Шаг 7. Проверяем мобильную версию

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

Так выглядит учебный пример в мобильной ширине. После заметных правок этот экран тоже нужно проверить заново.

Если у Claude Code доступен браузер, попросите проверить несколько размеров окна. Затем при возможности откройте страницу на телефоне. Узкое окно компьютера и настоящий телефон — разные проверки.

Нашли ошибку — опишите, где она появляется. Например: «После открытия меню кнопка закрытия оказывается за экраном». С такой информацией помощнику проще разобраться.

Как сохранить правила в CLAUDE.md

Когда в проекте появились постоянные договорённости, их удобно записать в CLAUDE.md. Это файл инструкций для Claude Code. То, где он лежит, влияет на область действия правил. Документация о памяти проекта.

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

Для нашей страницы хватит короткого текста:

# Учебная страница специалиста

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

Не складывайте сюда всю переписку. Оставьте правила, которые будут нужны и завтра, и через неделю. Текущее состояние проекта можно записать отдельно.

Попросить помощника собрать файл можно так:

Предложи короткий CLAUDE.md из наших постоянных договорённостей.
Не включай временные задачи и не добавляй правил от себя.
Покажи текст до сохранения.

Что делать, если Claude Code ошибается

Для начала опишите, что сломалось. Какое действие выполнили, что ожидали увидеть и что получилось. Текст ошибки передайте точно, но уберите пароли и ключи, если они туда попали.

Заготовка запроса:

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

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

Для этого и нужна история изменений. Освоить её полезно сразу после первой страницы, пока проект ещё небольшой.

Что осваивать дальше

Когда научились собирать страницу и править её, можно переходить к приложению с действиями. Например, к задачнику.

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

Работы станет больше, но основа знакомая. Описываем задачу, смотрим план, делаем небольшую версию и проверяем каждое нужное действие.

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

Дальше по теме

• Что такое вайбкодинг и как начать с первого сайта.
• Claude Code или Codex: как выбрать инструмент.

Частые вопросы

Обязательно ли пользоваться терминалом?

Для описанного здесь способа работы достаточно вкладки Code. Терминал можно освоить позже, когда он понадобится для вашей задачи.

Можно ли писать Claude Code по-русски?

Задание и правки можно формулировать по-русски. Названия файлов, команды и сообщения об ошибках передавайте точно, без пересказа.

Нужно ли открывать доступ ко всем папкам?

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

Можно ли сразу менять настоящий сайт?

Лучше сначала сделать учебную копию. Для рабочего сайта понадобится сохранённая версия и способ проверить изменения до публикации.

Почему у меня получается другой дизайн?

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