Самый быстрый старт в вайб-кодинге

Эта глава — для тех, кто хочет попробовать вайб-кодинг прямо сейчас, бесплатно, за 15 минут. Никаких подписок, никаких кредитных карт — только VS Code, бесплатный ИИ-инструмент и твой первый проект.

Шаг 1: Скачай и установи VS Code

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

1. Перейди на официальный сайт: code.visualstudio.com
2. Нажми большую синюю кнопку Download — сайт сам определит твою систему (Windows / Mac)
3. Запусти скачанный файл
4. При установке обязательно поставь галочку «Add to PATH» (она может называться «Добавить в PATH»)
5. Нажимай «Далее» → «Установить» → «Готово»

Проще говоря

PATH — это список мест, где компьютер ищет программы, когда ты вводишь команду в терминале. Если VS Code не добавлен в PATH, терминал его «не видит». Это как если бы ты установил приложение на телефон, но оно не появилось на рабочем столе.

Проверка: открой VS Code. Если видишь окно с приветствием — всё работает.

Шаг 2: Установи Node.js

Node.js нужен для работы многих инструментов и проектов. Без него Qwen Code не установится.

1. Перейди на официальный сайт: nodejs.org
2. Скачай версию LTS (она слева, с пометкой «Рекомендовано»)
3. Запусти установщик, нажимай «Далее» → «Установить»
4. Перезапусти VS Code после установки

Проверка: открой терминал в VS Code (меню Вид → Терминал или горячая клавиша Ctrl+`) и напиши:

node -v

Если увидишь номер версии (например, v22.14.0) — Node.js установлен.

Шаг 3: Установи Qwen Code

Qwen Code — это бесплатный open-source ИИ-помощник, который живёт в твоём терминале. Полный аналог Claude Code, но с 1000 бесплатных запросов в день. Никаких подписок, никаких кредитных карт.

3.1 — Установка

Открой терминал в VS Code и введи одну команду:

Windows (запусти CMD от имени администратора):

npm install -g @qwen-code/qwen-code@latest

Mac / Linux (альтернативный способ):

bash -c "$(curl -fsSL https://qwen-code-assets.oss-cn-hangzhou.aliyuncs.com/installation/install-qwen.sh)"

Проверка: после установки напиши в терминале:

qwen --version

Если увидишь номер версии — Qwen Code установлен.

3.2 — Авторизация (бесплатно)

1. В терминале VS Code напиши: qwen
2. Qwen Code запустится и предложит авторизоваться
3. Введи команду /auth
4. Выбери Qwen OAuth — откроется браузер для входа
5. Зарегистрируйся или войди (можно через Google)
6. Готово — у тебя 1000 бесплатных запросов в день

Проще говоря

Авторизация — это как показать паспорт на входе. Ты один раз подтвердил, что ты — это ты, и дальше тебя пускают бесплатно. Qwen Code запоминает авторизацию, повторно входить не нужно.

3.3 — Расширение для VS Code (опционально)

Qwen Code также работает как расширение прямо в VS Code:

1. Нажми Ctrl+Shift+X (расширения)
2. В поиске напиши Qwen Code
3. Нажми Install
4. Слева появится иконка Qwen Code — можно общаться с ИИ через боковую панель

Но для старта хватит и терминала — расширение можно поставить потом.

Шаг 4: Создай папку для проекта

1. Создай на компьютере папку Projects (если ещё нет)
2. Внутри создай папку my-first-site
3. В VS Code: Файл → Открыть папку → выбери my-first-site

Теперь VS Code «смотрит» в эту папку — всё, что создаст ИИ, появится здесь.

Шаг 5: Твой первый промпт

Открой терминал в VS Code, перейди в папку проекта и запусти Qwen Code:

cd Projects/my-first-site
qwen

Qwen Code запустится. Теперь напиши ему:

Создай одностраничный сайт-визитку. Тёмный фон (#1a1a2e), белый текст.
По центру страницы:
- Моё имя: "Андрей" (большой шрифт)
- Подпись: "Строю проекты с помощью ИИ"
- Три кнопки-ссылки в ряд: Telegram, YouTube, GitHub
- Кнопки с эффектом при наведении

Всё в одном файле index.html. Адаптивно под мобильные.

Нажми Enter и смотри, как ИИ создаёт файл. Qwen Code покажет, что он делает — создаёт файл, пишет код. Если спросит подтверждение — нажми y (yes).

Шаг 6: Смотрим результат

После того как Qwen Code создал файл index.html:

1. Найди его в панели файлов VS Code (слева)
2. Нажми правой кнопкой → Open with Live Server (если установлено расширение Live Server)
3. Или просто открой файл двойным кликом в проводнике — он откроется в браузере

Ты увидишь: готовый сайт-визитку с тёмным фоном, именем, подписью и кнопками.

Что получилось

Вот что ИИ обычно создаёт по такому промпту:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Андрей</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            background: #1a1a2e;
            color: #ffffff;
            font-family: 'Segoe UI', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .container { text-align: center; }
        h1 { font-size: 3em; margin-bottom: 10px; }
        .subtitle { font-size: 1.2em; opacity: 0.7; margin-bottom: 40px; }
        .links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
        .links a {
            color: #fff;
            text-decoration: none;
            padding: 12px 28px;
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 8px;
            transition: all 0.3s;
        }
        .links a:hover {
            background: rgba(255,255,255,0.1);
            border-color: #7c3aed;
            transform: translateY(-2px);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Андрей</h1>
        <p class="subtitle">Строю проекты с помощью ИИ</p>
        <div class="links">
            <a href="#">Telegram</a>
            <a href="#">YouTube</a>
            <a href="#">GitHub</a>
        </div>
    </div>
</body>
</html>

Попробуй внести правки

Напиши Qwen Code прямо в том же сеансе:

Добавь градиентный фон вместо однотонного. 
И сделай так, чтобы имя появлялось с плавной анимацией.

ИИ внесёт изменения — обнови страницу в браузере и увидишь результат. Так работает вайб-кодинг: говоришь → получаешь → просишь исправить → получаешь снова.

---

Также пригодится: Python и Git

Для более серьёзных проектов (боты, скрипты, серверные приложения) понадобятся ещё два инструмента:

Python

1. Перейди на официальный сайт: python.org/downloads
2. Скачай последнюю версию
3. При установке обязательно поставь галочку «Add Python to PATH»
4. Проверка: python --version в терминале

Git

1. Перейди на официальный сайт: git-scm.com
2. Скачай и установи
3. При установке можно оставить все настройки по умолчанию
4. Проверка: git --version в терминале

Но для первого проекта они не нужны — хватит VS Code, Node.js и Qwen Code.

---

Что дальше?

Ты только что сделал свой первый проект через вайб-кодинг! Дальше можно:

• Установить Claude Code — более мощный ИИ-помощник (платный)
• Выложить проект в интернет — через Vercel за 5 минут
• Арендовать сервер — для серьёзных проектов