Оформи подписку Claude Pro

Claude Code работает только с подпиской. Это AI, который будет писать код за тебя весь квест. $20/мес — единственная обязательная трата.

Перейди на claude.ai
Нажми Continue with Google (быстрее всего) или введи email и нажми Continue with email
Скачай десктоп-приложение — кнопка Download desktop app внизу страницы. В нём ты и будешь работать — это главный инструмент квеста

После регистрации зайди в Settings → Subscription
Выбери тариф Pro за $20/мес
Введи данные карты и оплати

Подсказка

Нужна карта, принимающая международные платежи в долларах. Тариф Max ($100/мес) не нужен — Pro хватает на весь квест.

Как проверить

В настройках (claude.ai → Settings) виден статус подписки Pro, приложение Claude скачано.

Запусти Claude Code в приложении

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

Claude Code встроен прямо в приложение Claude — отдельная вкладка Code. Ничего больше ставить не нужно: открыл приложение, вошёл, переключился на Code — и можно работать.

1. Войди в приложение Claude

Открой скачанное приложение и войди в свой аккаунт — тот же, на котором оформил Pro.

2. Переключись на вкладку Code

Вверху переключись на вкладку Code — она рядом с Chat и Cowork.

3. Поздоровайся

Напиши что угодно, например:

Привет! Расскажи коротко, что ты умеешь.

Подожди пару секунд — Claude ответит прямо в приложении.

Подсказка

Не бойся экспериментировать — попроси Claude рассказать ещё что-нибудь. Он не сломает твой компьютер. Та же вкладка Code есть в вебе и на телефоне, но для квеста удобнее десктоп.

Как проверить

Ты на вкладке Code, отправил сообщение и получил ответ.

Собери первую страницу

За одну минуту ты проходишь весь рабочий цикл квеста и видишь, что код — это не страшно.

Проверим, что всё работает, — и ты впервые увидишь, как слова превращаются в страницу. Это тестовая страница «на пощупать», не твой будущий сайт — его соберём дальше.

1. В Claude Code (вкладка Code) напиши:

Создай HTML-файл с заголовком «Привет, мир» и открой его в браузере.

2. Claude спросит разрешение создать файл (и, возможно, выбрать папку) — разреши. Страница откроется в браузере.

3. Поправь — напиши:

Сделай заголовок крупнее и синим.

4. Обнови страницу — видишь правку.

Подсказка

Если Claude просто описал страницу, но не создал файл — попроси явнее: «создай файл hello.html и открой его в браузере».

Как проверить

HTML-файл создан, страница открылась и изменилась после правки.

Поставь VS Code — для файлов и как запасной редактор

Дальше Claude будет создавать десятки файлов. VS Code — чтобы видеть их и не терять ориентацию (а не чтобы читать код). И запасной вход к Claude, если приложение чем-то не зайдёт.

VS Code пригодится для двух вещей: смотреть файлы, которые создаёт Claude, и как альтернатива — если тебе удобнее видеть Claude прямо в редакторе, а не в приложении. Я сам чаще в приложении, но многим в редакторе спокойнее.

А. Установи VS Code

Перейди на code.visualstudio.com, нажми Download (сайт сам определит систему)
На Mac — перетащи в «Программы». Открой

Кнопка Download на code.visualstudio.com

Б. Поставь расширение Claude Code

Нажми иконку расширений слева (квадратики) или Cmd+Shift+X
Набери Claude Code, выбери расширение от Anthropic (с галочкой) → Install
Появится иконка Claude Code в боковой панели → нажми → Sign In → войди в аккаунт

Расширение Claude Code в маркетплейсе VS Code

В. Посмотри файлы своего проекта

Файл → Открыть папку → выбери папку, где Claude создал страницу из задачи 3
Слева появится дерево файлов — здесь видно всё, что создаёт Claude

Тебе не нужно понимать каждый файл — это понимает Claude. Достаточно знать, где что лежит. Как в доме: чтобы жить, не обязательно разбираться в проводке, достаточно знать, где выключатели.

Как проверить

В VS Code слева видно дерево файлов проекта; расширение Claude Code отвечает.

Поставь терминал Warp (про запас)

На платных шагах (сервер, деплой) пара команд пройдёт через терминал. Пусть будет готов заранее — это разовая установка.

Терминал в квесте почти не понадобится — Claude делает всё сам. Но дальше, когда дойдём до своего сервера, он пригодится. Поставь сейчас, чтобы потом не отвлекаться. Warp — удобный современный терминал.

Установи Warp

Перейди на warp.dev, нажми Download
Перетащи в «Программы», открой — увидишь приветствие

Не хочешь ставить — на Mac уже есть встроенный Терминал (Cmd+Space → «Терминал»). Для квеста сгодится любой.

Как проверить

Warp (или встроенный Терминал) открывается.

Подготовка

Открой весь квест