Настраиваем рабочее место

Три инструмента вайбкодера: VS Code (мастерская), Claude Code (напарник), GitHub (облачное хранилище). Настроим всё за один урок.

1. VS Code — ваша мастерская

VS Code — бесплатная программа, где живут все ваши проекты. Как Word для документов, только для сайтов и приложений.

Установка:

1. Заходим на code.visualstudio.com
2. Нажимаем синюю кнопку Download
3. Mac: перетаскиваем в папку «Программы»
4. Windows: запускаем установщик, жмём «Далее»

2. Папки — адрес вашего проекта

Каждый проект живёт в своей папке. Без папки Claude не знает, куда сохранять файлы.

Как создать:

1. Откройте «Документы» на компьютере
2. Создайте папку Projects (для всех проектов)
3. Внутри создайте папку проекта, например my-first-project

Правила именования:

• Только латиница: my-project, а не мой-проект
• Без пробелов: дефис вместо пробела
• Без спецсимволов: никаких !, #, @
• Всё строчными: my-first-project

Открываем в VS Code: File → Open Folder → выбираем папку проекта

3. Claude Code — ваш напарник

Claude Code — это ИИ, который живёт прямо в VS Code. Вы говорите, что хотите — он делает.

Главное отличие от ChatGPT:

• ChatGPT в браузере — советчик. Даёт ответ, дальше делаете сами
• Claude Code — исполнитель. Сам создаёт файлы, сам пишет код, сам сохраняет

Установка:

1. В VS Code нажмите иконку с квадратиками слева (или Cmd+Shift+X / Ctrl+Shift+X)
2. В поиске найдите «Claude Code» от Anthropic (проверьте издателя!)
3. Нажмите Install
4. Авторизуйтесь через браузер

Подписка:

• Pro — $20/мес — для старта и обучения хватит
• Max — $100–200/мес — для активной работы, без ограничений

Проверка: напишите в чат Claude Code: «Привет! Ты меня слышишь?». Если ответил — всё работает.

4. Создаём первые страницы

HTML — это рецепт блюда. Браузер — повар, который готовит по рецепту. Вам не нужно учить HTML — Claude знает его идеально.

Визитка — одним сообщением

Скопируйте промпт, подставьте свои данные и отправьте в Claude Code:

Создай интерактивный файл vizitka.html — персональную визитку. Данные:
Имя: {Ваше имя и фамилия}
Специализация: {Чем вы занимаетесь}
Telegram: {ссылка на ваш ТГ}
Дизайн:
Тёмный фон (#0a0a0a)
Имя крупно, с градиентным свечением
Социальные сети — иконки с hover-эффектом
Кнопка «Написать мне» с анимацией
Красиво и на компьютере, и на телефоне
Всё в одном HTML-файле, без внешних зависимостей. Для иконок используй SVG.

Мини-лендинг для продукта

Создай файл landing.html — интерактивный мини-лендинг для продукта. Данные:
Название продукта: {Например: «TaskFlow — умный планировщик»}
Описание: {Одно предложение о продукте}
Добавь 3 сильных преимущества: {Чем полезен продукт}
Напиши для кого подходит и почему это выгодно
Добавь кнопку с призывом к действию
Дизайн:
Тёмный фон с градиентом
Заголовок с градиентным текстом
Три карточки преимуществ с иконками
Кнопка CTA с пульсирующей анимацией
Адаптивный для телефона
Всё в одном HTML-файле, без зависимостей. SVG для иконок.

Как посмотреть результат

• Простой способ: найдите файл в папке проекта, дважды кликните
• Лучший способ: скажите Claude «Запусти страницу в браузере» — он покажет адрес http://localhost:3000
• На телефоне: скажите «Покажи адрес для телефона» (телефон и компьютер должны быть в одной Wi-Fi сети)

Меняем на лету

Не нравится результат? Просто скажите Claude:

• «Поменяй градиент на зелёно-голубой»
• «Добавь секцию Отзывы»
• «Сделай кнопку больше»

Claude меняет файл → браузер обновляется автоматически. Шаг за шагом, пока не будете довольны.

5. GitHub — облачное хранилище

Два слова, которые нужно запомнить:

• Commit (коммит) = сохранился на своём компьютере
• Push (пуш) = загрузил сохранение в облако

Регистрация:

1. Заходим на github.com → Sign Up
2. Вводим email, пароль, имя пользователя
3. Подтверждаем email

Подключаем проект — одной фразой:

Подключи проект к GitHub. Создай репозиторий и отправь файлы

Ритм сохранений:

Если что-то сломалось:

Покажи историю коммитов

Выберите нужное сохранение:

Верни проект к коммиту — Добавил визитку

Всё, что было после — отменится. Проект вернётся к рабочему состоянию.

Домашнее задание

1. Установить VS Code + Claude Code (если не сделали на уроке)
2. Создать визитку — подставить свои данные в промпт выше
3. Создать мини-лендинг — придумать свой продукт
4. Открыть обе страницы в браузере и на телефоне
5. Создать GitHub-аккаунт, подключить проект, сделать commit и push
6. Скриншот визитки + ссылка на GitHub → отправить в чат обучения