Глава 3: Быстрое прототипирование с помощью ИИ

3.1 Что такое "вайб-кодинг"?

"Вайб-кодинг" (от англ. vibe coding) — это современный подход к созданию кода. Вместо того чтобы писать каждую строчку вручную, ты описываешь ИИ (как ChatGPT или DeepSeek), что ты хочешь получить, а он генерирует готовый код.

Это как если бы ты объяснял архитектору: "Мне нужен уютный дом с большой гостиной, панорамными окнами и камином", а он бы сразу выдал тебе готовый проект. Мы потом изучим этот проект и внесём свои правки.

Зачем это нужно?

Скорость: За несколько минут получаем рабочий прототип.
Мотивация: Сразу видим красивый, а не пустой, результат.
Обучение: Легче разбираться в готовом, работающем коде, чем писать его с чистого листа.

3.2 Формулируем запрос для ИИ

Открой свой любимый ИИ-чат (ChatGPT, DeepSeek, Claude и т.д.). Точный запрос — залог хорошего результата.

Пример отличного запроса:

"Привет! Мне нужен код простого, современного и элегантного сайта-визитки на HTML и CSS. Тема сайта — 'Мастерская деревянных изделий ручной работы'. Сайт должен содержать:
Шапку (header) с логотипом (можно текст) и навигационным меню: Главная, О нас, Галерея, Контакты.
Главный герой-баннер (hero section) с крупным заголовком, кратким описанием и кнопкой "Посмотреть работы".
Секцию "О нас" с текстом и небольшой декоративной картинкой.
Секцию "Галерея" с сеткой из 6-8 прямоугольных карточек-заглушек для будущих фотографий работ.
Подвал (footer) с контактной информацией (адрес, email, телефон) и копирайтом.
Стили: Используй современные CSS-приёмы: плавные переходы (transitions), тени для блоков, приятную цветовую палитру (например, натуральные оттенки дерева: коричневый, бежевый, тёмно-зелёный). Сделай сайт адаптивным, чтобы он хорошо смотрелся на мобильных устройствах.
Пожалуйста, предоставь полный код в двух файлах: index.html и style.css. Код должен быть чистым, хорошо прокомментированным на русском языке."

Почему этот запрос хорош?

Чётко описана тема (деревянные изделия).
Перечислена структура (шапка, баннер и т.д.).
Даны конкретные требования по стилю (цвета, адаптивность).
Указан формат вывода (два файла).
Попросил комментарии — это критически важно для обучения.

Отправь запрос. ИИ сгенерирует код за 20-30 секунд.

3.3 Получаем и изучаем готовые файлы

ИИ выдаст тебе что-то вроде этого (код сокращён для примера):

Файл index.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Деревянная Мастерская | Изделия ручной работы</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- Шапка с навигацией -->
    <header class="header">
        <div class="container">
            <a href="#" class="logo">🪵 Деревянная Мастерская</a>
            <nav class="nav">
                <a href="#home">Главная</a>
                <a href="#about">О нас</a>
                <a href="#gallery">Галерея</a>
                <a href="#contacts">Контакты</a>
            </nav>
        </div>
    </header>

    <!-- Главный баннер -->
    <section class="hero" id="home">
        <div class="container">
            <h1>Уникальные изделия из дерева</h1>
            <p>Каждая вещь создана с душой и вниманием к деталям. Натуральные материалы, традиционные техники, современный дизайн.</p>
            <a href="#gallery" class="btn">Посмотреть работы</a>
        </div>
    </section>

    <!-- Секция "О нас" -->
    <section class="about" id="about">
        <div class="container">
            <h2>О нашей мастерской</h2>
            <div class="about-content">
                <p>Мы — небольшая семейная мастерская, посвятившая себя работе с деревом... [текст сгенерирован ИИ]</p>
                <img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Интерьер мастерской" class="about-img">
            </div>
        </div>
    </section>

    <!-- Секция "Галерея" -->
    <section class="gallery" id="gallery">
        <div class="container">
            <h2>Наши работы</h2>
            <div class="gallery-grid">
                <!-- Карточка 1 -->
                <div class="gallery-item">
                    <div class="item-placeholder"><i class="fas fa-couch"></i></div>
                    <h3>Мебель</h3>
                </div>
                <!-- ... ещё 5 карточек ... -->
            </div>
        </div>
    </section>

    <!-- Подвал -->
    <footer class="footer" id="contacts">
        <div class="container">
            <p>📞 +7 (999) 123-45-67</p>
            <p>✉️ hello@woodmaster.ru</p>
            <p>📍 г. Москва, ул. Лесная, д. 10</p>
            <p class="copyright">© Деревянная Мастерская, 2023</p>
        </div>
    </footer>
</body>
</html>

Файл style.css

/* Базовые сбросы и настройки */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    line-height: 1.6;
    color: #333;
    background-color: #fefefe;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Стили шапки... */
.header {
    background-color: #2c1810; /* Тёмно-коричневый */
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo {
    color: #e6d2b9; /* Светлый беж */
    font-size: 1.8rem;
    font-weight: bold;
    text-decoration: none;
}

.nav a {
    color: #e6d2b9;
    text-decoration: none;
    margin-left: 2rem;
    transition: color 0.3s ease;
}

.nav a:hover {
    color: #c9a769; /* Золотистый при наведении */
}

/* Стили героя... */
.hero {
    background: linear-gradient(rgba(44, 24, 16, 0.7), rgba(44, 24, 16, 0.7)),
                url('https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
    color: white;
    text-align: center;
    padding: 8rem 0;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.btn {
    display: inline-block;
    background-color: #4a7c59; /* Тёмно-зелёный */
    color: white;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    margin-top: 2rem;
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: #3a6348;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .hero h1 { font-size: 2.5rem; }
    .nav a { margin-left: 1rem; }
    .about-content { flex-direction: column; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

Первое, что нужно сделать:

Скопируй оба блока кода в отдельные текстовые файлы на своём основном компьютере.
Назови их index.html и style.css.
Открой файл index.html в своём браузере (просто перетащи его в окно браузера). Увидишь уже готовый, красивый сайт! Покликай меню, посмотри, как он адаптируется при изменении размера окна.

3.4 Копируем файлы на сервер

Теперь нужно перенести наше творение на сервер, чтобы оно было доступно по IP-адресу.

Способ 1: Простой (через терминал и scp). Этот способ хорош, если ты работаешь с виртуальной машиной.

На своём основном компьютере открой терминал (PowerShell в Windows, Terminal в macOS/Linux).
Перейди в папку, где сохранил файлы. Например:
```
cd ~/Desktop/my_site_files
```
Используй команду scp для безопасного копирования. Подставь свой IP:
```
scp index.html style.css alex@192.168.1.100:/tmp/
```
Введи пароль пользователя alex на виртуальной машине.
Теперь на виртуальной машине перемести файлы из /tmp/ в корневую папку сайта, заменив стандартный index.html:
```
sudo mv /tmp/index.html /tmp/style.css /var/www/html/
```
Система спросит, перезаписать ли существующий index.html. Нажми Y.

Способ 2: Наглядный (через общую папку VirtualBox). Если scp кажется сложным, настрой общую папку между основной системой и виртуальной машиной.

В VirtualBox: Останови машину -> Настройки -> "Общие папки" -> Добавить новую (укажи папку на своём компьютере и отметь "Автоподключение").
Запусти машину. Внутри неё смонтируй папку:
```
sudo mount -t vboxsf имя_общей_папки /mnt/
```

Скопируй файлы:

sudo cp /mnt/index.html /mnt/style.css /var/www/html/

3.5 Волшебство!

Вернись в браузер основного компьютера, где у тебя открыта страница http://ТВОЙ_IP.
ОБНОВИ СТРАНИЦУ (клавиша F5 или Ctrl+R).

Стандартная страница Apache исчезла! Вместо неё ты видишь свой собственный, красивый сайт о деревянных изделиях, созданный ИИ за пару минут. Все разделы, меню, кнопки — всё работает.

Что произошло технически: Ты заменил дефолтный файл index.html в папке /var/www/html/ на свой. Когда Apache получил запрос на главную страницу (/), он нашёл твой файл index.html, прочитал его, увидел ссылку на style.css, взял и его, и отдал всё твоему браузеру. Браузер получил инструкции (HTML) и стили (CSS) и отрисовал ту страницу, которую ты видишь.

Практическое задание к главе 3:

Независимый запрос: Придумай свою тему для сайта (например, "Фотоблог путешественника", "IT-фрилансер", "Кондитерская"). Сформулируй новый запрос к ИИ и получи другой набор файлов. Посмотри, как меняется код в зависимости от темы.
Быстрое редактирование: Попробуй прямо в терминале сервера изменить какой-нибудь текст на сайте. Например:
```
sudo nano /var/www/html/index.html
```
Найди строчку с телефоном и поменяй цифры. Сохрани (Ctrl+O, Enter, Ctrl+X). Обнови страницу в браузере — изменения появятся мгновенно.
Замена картинок: В коде от ИИ картинки ведут на Unsplash (это нормально для прототипа). Позже мы научимся загружать свои.

Вывод главы: Ты освоил мощнейший современный инструмент — генерацию кода с помощью ИИ. Теперь у тебя есть работающий, визуально приятный сайт. Но это пока "чёрный ящик". В следующей главе мы этот ящик откроем и начнём понимать каждую строчку кода, чтобы стать полноправным хозяином своего сайта.

ПредыдущаяГлава 2: Знакомство с веб-сервером Apache СледующаяГлава 4: Анатомия HTML и CSS

Последнее обновление 1 месяц назад