Первый проект: сайт-визитка

В этой главе мы пройдём полный цикл создания проекта через вайб-кодинг: от пустой папки до работающего сайта. Используем Claude Code, но всё то же самое работает и с Qwen Code.

Подготовка

Создаём папку проекта

mkdir Projects/portfolio
cd Projects/portfolio

Открываем в VS Code

code .

Или: VS Code → Файл → Открыть папку → выбери portfolio.

Создаём CLAUDE.md

Создай файл CLAUDE.md в корне папки с описанием проекта:

# Портфолио — сайт-визитка

## О проекте
Одностраничный сайт-портфолио. Тёмная тема, минималистичный дизайн.

## Стек
- HTML, CSS, JavaScript
- Без фреймворков и зависимостей
- Всё в одной папке, без сборщиков

## Содержание сайта
- Имя и краткое описание
- Список проектов (3-4 карточки)
- Контакты и ссылки на соцсети
- Адаптивно под мобильные

## Правила
- Весь CSS внутри HTML (один файл)
- Плавные анимации при наведении
- Шрифт: системный sans-serif

Зачем это делать

CLAUDE.md — это как бриф для дизайнера. Чем точнее ты опишешь, что хочешь — тем точнее будет результат. Без брифа ИИ будет угадывать, и результат может не совпасть с ожиданиями.

Создаём сайт

Запусти Claude Code (или Qwen Code) в терминале:

claude

Промпт 1: Базовая структура

Создай файл index.html — одностраничный сайт-портфолио.
Следуй описанию из CLAUDE.md.

Дизайн:
- Фон: тёмный градиент от #0f0c29 через #302b63 к #24243e
- Текст: белый, полупрозрачный для второстепенного
- Акцентный цвет: #7c3aed (фиолетовый)
- Скруглённые карточки проектов с hover-эффектом
- Плавное появление элементов при загрузке (CSS-анимация)

Секции:
1. Hero: имя "Андрей", подпись "Строю проекты с помощью ИИ"
2. Проекты: 3 карточки (Telegram-бот, Сайт-портфолио, Автоматизации)
3. Контакты: ссылки на Telegram, YouTube, GitHub

ИИ создаст файл index.html. Это займёт 20-40 секунд.

Смотрим результат

1. Нажми правой кнопкой на index.html в панели файлов VS Code
2. Выбери Open with Live Server (если установлено)
3. Или открой файл двойным кликом в проводнике

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

Вносим правки через диалог

Промпт 2: Корректируем дизайн

Не закрывай Claude Code — пиши прямо в том же сеансе:

Сделай следующие изменения:
1. Имя "Андрей" — увеличь шрифт до 4em
2. Карточки проектов — добавь иконки-эмодзи перед названиями
3. Внизу страницы добавь копирайт: "© 2025 Андрей. Сделано с помощью ИИ"
4. Кнопки контактов расположи горизонтально с одинаковыми отступами

ИИ внесёт изменения в тот же файл. Обнови страницу — увидишь результат.

Промпт 3: Добавляем фичу

Добавь переключатель темы (светлая/тёмная) в правый верхний угол.
Иконка — солнце/луна. При переключении все цвета плавно меняются.
Запомни выбор пользователя в localStorage.

ИИ добавит JavaScript-логику для переключения темы.

Как правильно формулировать промпты

Вот несколько правил, которые сэкономят тебе время:

Будь конкретным

❌ Плохо:

Сделай красиво

✅ Хорошо:

Фон: градиент от #1a1a2e к #16213e. Шрифт заголовка: 3em, bold.
Кнопки: скруглённые (8px), с фиолетовой рамкой (#7c3aed),
при наведении — фон полупрозрачный фиолетовый.

Описывай результат, не процесс

❌ Плохо:

Напиши CSS-класс с flexbox, выровняй по центру, добавь gap

✅ Хорошо:

Расположи три карточки в ряд, с равными промежутками, 
по центру страницы. На мобильных — в столбик.

Давай задачи маленькими порциями

❌ Плохо:

Сделай полный интернет-магазин с каталогом, корзиной, оплатой,
личным кабинетом, админкой и уведомлениями на почту

✅ Хорошо:

Сделай главную страницу каталога: 
сетка из 6 карточек товаров с фото, названием и ценой.

Потом:

Добавь корзину: кнопка "В корзину" на каждой карточке,
счётчик товаров в шапке.

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

Ошибка в коде

Если сайт не открывается или выглядит криво:

Сайт не отображается корректно. Вот что я вижу: [опиши проблему].
Почини.

Или ещё проще:

Ошибка: [скопируй текст ошибки из консоли браузера]. Почини.

Чтобы открыть консоль браузера: нажми F12 → вкладка Console.

ИИ сделал не то

Нет, я имел в виду другое. Мне нужно:
[объясни подробнее, с конкретными деталями]

ИИ сломал то, что работало

Если ИИ при внесении правки сломал что-то другое:

После последних изменений перестала работать [что именно].
Верни как было и внеси только те изменения, которые я просил.

Или откати через Git:

git diff          # посмотреть что изменилось
git checkout .    # откатить все изменения к последнему коммиту

Сохраняем прогресс через Git

После того как сайт выглядит хорошо — сохрани его состояние:

git init                    # инициализировать Git (один раз)
git add .                   # добавить все файлы
git commit -m "first version of portfolio site"  # сохранить снимок

Теперь можно смело экспериментировать — если что-то сломается, всегда можно откатиться:

git checkout .              # вернуться к последнему коммиту

Чеклист

• [ ] Папка проекта создана
• [ ] CLAUDE.md написан
• [ ] Сайт сгенерирован через ИИ
• [ ] Внесены 2-3 правки через диалог
• [ ] Git инициализирован, первый коммит сделан

---

Что дальше?

У тебя есть работающий сайт на компьютере! В следующей главе мы выложим его в интернет — арендуем сервер, подключимся к нему и привяжем домен.