Запусти Claude Code и собери первую страницу

Хочешь попробовать Claude Code, но не понимаешь, что сделать первым? Соберем личную страницу, откроем ее в браузере и внесем одну правку. Ты увидишь весь круг работы: задача, файлы, результат и проверка. Без сервера, базы данных и публикации.

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

Что ты получишь

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

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

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

Компьютер с интернетом и доступ к Claude Code. Подойдет подписка Claude Pro, Max, Team или Enterprise. Другой вариант: Claude Console с оплаченными API-кредитами. Бесплатного аккаунта Claude для этого недостаточно. Актуальные варианты доступа.

Нужны 4 ГБ оперативной памяти или больше и поддерживаемая система: например, macOS 13+, Windows 10 версии 1809+ или Ubuntu 20.04+. Для первого запуска ниже используем VS Code версии 1.94 или новее. Полные системные требования. Если предпочитаешь отдельное приложение или терминал, способы запуска собраны внизу. Устанавливать все три варианта не нужно.

1. Установи расширение в VS Code

1. Скачай VS Code и открой его.
2. Открой расширения: Cmd+Shift+X на Mac или Ctrl+Shift+X в Windows/Linux.
3. Найди Claude Code от Anthropic и нажми Install.
4. Открой палитру команд: Cmd+Shift+P на Mac или Ctrl+Shift+P в Windows/Linux. Найди Claude Code: Open in New Tab.
5. Нажми Sign in и пройди вход в браузере.

Расширение включает Claude Code для своей панели. Отдельная установка через терминал для этого не нужна. Если панель не появилась, перезапусти VS Code. Официальная инструкция.

2. Открой пустую папку

Создай на компьютере папку my-first-page и открой ее через File / Open Folder в VS Code. Это будет отдельный проект для первого эксперимента.

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

3. Дай задачу с понятным результатом

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

Скопируй запрос в панель Claude Code:

Собери мою личную страницу в текущей папке на HTML, CSS и JavaScript. Без сервера, базы данных, библиотек и внешних ресурсов.

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

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

Затем покажи короткий план. После моего подтверждения создай файлы. Главный файл назови index.html. Страница должна открываться двойным щелчком по index.html, без отдельного сервера.

Проверь относительные пути и ссылки. Объясни, как открыть результат. Ничего не публикуй.

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

4. Открой результат и проверь

В левой панели файлов VS Code найди index.html. Нажми на него правой кнопкой и выбери Reveal in Finder на Mac или Reveal in File Explorer в Windows. В открывшейся папке запусти файл двойным щелчком. В Linux открой эту папку своим файловым менеджером и запусти файл в браузере. Должна появиться твоя страница в браузере.

Проверь:

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

Фраза «готово» в чате не заменяет просмотр страницы. Если Claude не смог открыть браузер или выполнить какую-то проверку, эту часть пройди сам.

5. Внеси одну конкретную правку

Например:

На узком экране карточки проектов должны идти в один столбец. Увеличь основной текст до 18 px, сохрани цвета, содержание и остальные разделы. Внеси правку в файлы и перечисли изменения. Если можешь проверить результат в браузере, сделай это и сообщи, что проверил.

Обнови страницу в браузере и посмотри, появилась ли правка. Если результат не тот, покажи снимок экрана и объясни, какой участок нужно изменить.

Если страница вообще не открывается, отправь такой запрос:

Я открываю index.html двойным щелчком, но результат не работает. Сейчас вижу: [опиши проблему или приложи снимок экрана]. Найди причину в файлах проекта и исправь ее. Сохрани способ запуска без сервера. Объясни, что изменилось и как проверить исправление.

Еще две первые задачи

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

Разобрать несколько своих документов

Создай в проекте папку materials, положи туда два-три текстовых файла .txt или .md и попроси:

Прочитай документы в папке materials. Создай summary.md: основные решения, открытые вопросы и следующие действия. Для каждого решения укажи имя файла, из которого оно взято. Если документы противоречат друг другу, покажи обе версии. Исходные файлы не меняй.

Открой summary.md в VS Code. Проверь несколько решений по названным исходным файлам. Для сканов, Word и других форматов сначала нужны извлечение текста или подходящий инструмент: переименование расширения не преобразует документ.

Исправить ошибку в существующем проекте

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

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

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

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

claude --version

claude

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

Выбери следующий маленький результат

Для выбора дополнений под свои задачи есть общая подборка навыков Claude. Для повторяющейся работы пригодится инструкция, как описать процесс для агента.

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

Бесплатный Telegram

В Telegram показываю другие проекты с ИИ и приемы, которые можно пробовать постепенно. После первой страницы выбирай задачу, результат которой сможешь открыть и проверить сам.

Бесплатный Telegram →