Модуль 3 Урок 1: ВАЙБ-КОДИНГ — Программирование на языке смыслов
🎨 0 XP
1 / 28
Модуль 3 · Урок 1

ВАЙБ-
КОДИНГ

Программирование на языке смыслов — создаём реальные приложения без знания кода

28 слайдов +2500 XP GitHub + Replit
01

Темы урока

  • Что такое вайб-кодинг и кто его придумал
  • 5 столпов: Мышление, Фреймворки, КТ, Дебаггинг, Контекст
  • HTML / CSS / JavaScript — три языка всего интернета
  • CodePen — первый запуск кода
  • GitHub — регистрация и первый репозиторий
  • Replit — деплой приложения в мир
  • Практика: трекер привычек с нуля
  • Цифровая безопасность: API-ключи
Теория · Блок 1

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

Вайб-кодинг — это Creative Mode в программировании. Как в Майнкрафте — бесконечные блоки, строишь что хочешь.

👨‍💻
Андрей Карпатый — автор термина

Сооснователь OpenAI, бывший директор ИИ в Tesla. В феврале 2025 года провозгласил новую эру: ИИ стал настолько хорош, что можно просто описывать задумку — и система строит приложение.

🚀
Илон Маск и Y Combinator

SpaceX и Tesla используют ИИ в разработке кода. В 2025 году 25% стартапов Y Combinator имеют кодовую базу, написанную ИИ на 95%.

⚡
Раньше vs сейчас
РАНЬШЕ

5 лет изучения Python, JS, баз данных, серверов... Чтобы создать одно приложение.

СЕЙЧАС

Описываешь идею на языке → ИИ генерирует код → ты проверяешь и улучшаешь. Первое приложение за 30 минут.

«Вы живёте в лучшее время, чтобы стать создателями» — Кумисай, разработчик AI Trend

Вдохновение · Реальная история

Зак Ядегари — школьник → миллионер

ПРОБЛЕМА

Девятиклассник хотел поиграть во время перемены — но все игровые сайты были заблокированы. Большинство вздохнули бы и пошли дальше.

3 ВОПРОСА
① Кто страдает? — Школьники по всему миру
② Что нужно? — Сайт с играми, который не блокируется
③ Как работает? — Обход школьных фильтров
РЕЗУЛЬТАТ

Totally Science — 5 млн пользователей. Продал за $100 000. Потом создал Cal AI — приложение, которое считает калории по фото. Сегодня приносит $30 млн в год. В 17 лет.

🤔
Твоя очередь

Какая проблема раздражает тебя каждый день? Не глобальная, не космическая — просто что-то, что мешает лично тебе.

0 / 300
Теория · 5 факторов

Мнемоника: «МФ КДК»

Мой Фокус — Качественный Детальный Код

М
Мышление

Сначала думай, потом пиши промпт

1
Ф
Фреймворки

Знай какие инструменты существуют

2
К
Контр. точки

Сохраняй каждый успех — Git

3
Д
Дебаггинг

Ошибки — часть процесса, не конец

4
К
Контекст

Больше инфо ИИ = лучше результат

5
Столп 1 / 5

Мышление — сначала думай

⚠️ ТИПИЧНАЯ ОШИБКА НОВИЧКА

Сразу бегут к ИИ: «Сделай мне классное приложение». Результат — каша. ИИ строит что-то случайное.

Прежде чем писать любой промпт — ответь на 3 вопроса:

👥
Для кого?

Кто будет пользоваться продуктом? Возраст, интересы, проблемы?

🎯
Что нужно?

Какую проблему решаем? Что пользователь хочет получить?

⚙️
Как работает?

Какие функции нужны? Как пользователь взаимодействует с продуктом?

🧠 Практика: отвечаем на 3 вопроса

Возьми идею из предыдущего слайда и ответь на все три вопроса. Потом напиши промпт для Gemini.

0 / 500
Столп 2 / 5

Фреймворки — инструменты

Фреймворк = готовый фундамент. Как набор Lego: есть наборы для замков, кораблей, городов. В программировании так же.

Язык: Python

🌐
Django / Flask
Сайты и веб-приложения
📊
Pandas / NumPy
Данные, таблицы, цифры
🧠
TensorFlow / PyTorch
Создание собственных ИИ-моделей
⚡
FastAPI
Быстрый сервис для других приложений

Для веба (наш старт)

HTML
HTML — скелет
Структура: заголовки, кнопки, картинки
CSS
CSS — внешний вид
Цвета, форма, размер, дизайн
JS
JavaScript — поведение
Нажал кнопку → что-то произошло

💡 Важно: ты не обязан знать всё наизусть! Спроси ИИ: «Какой инструмент лучше подойдёт для моей задачи?» — и получи чёткий ответ.

Практика · Промпты

Промпты для Gemini — старт проекта

🇷🇺 Шаг 1 — Анализ проблемы

У меня есть проблема с [ОПИСАНИЕ ПРОБЛЕМЫ]. Я хочу создать [ЧТО ИМЕННО]. Ответь коротко на три вопроса: Кто страдает от этой проблемы? Что им нужно? Как это должно работать?

🇷🇺 Шаг 2 — Выбор инструментов

Какой инструмент / фреймворки использовать для моей задачи для старта? Задача: [ОПИСАНИЕ ПРОЕКТА]. Предложи самый простой вариант для начинающего.

🇷🇺 Шаг 3 — Генерация кода

Напиши мне полный код на HTML (включая CSS и JavaScript внутри одного файла) для [ОПИСАНИЕ ПРОЕКТА]. Функции: [СПИСОК ФУНКЦИЙ]. Стиль: современный, тёмный/светлый фон. Без пояснений — только код.

Инструмент · CodePen

CodePen — первый запуск кода

CodePen — онлайн-редактор кода. Три окна + результат внизу. Идеально чтобы быстро проверить код от ИИ.

1
codepen.io → Start Coding
Открой сайт, нажми зелёную кнопку. Появятся три окна: HTML, CSS, JS.
2
Вставь код в окно HTML
Ctrl+V (или Cmd+V на Mac). Сразу видишь результат внизу. Увеличь нижнее окно мышью.
3
Зарегистрируйся через Google
Sign Up → Google аккаунт. Без этого код не сохранится!
⚠️ Если закроешь вкладку без регистрации — потеряешь всю работу
4
Save → Your Work
Нажми Save вверху. Дай проекту имя. Включи Auto-save. Теперь код в безопасности.
CodePen — три языка
HTML → скелет страницы
<h1>Заголовок</h1>
<button>Нажми</button>

CSS → внешний вид
button { background: purple; }
h1 { color: #B5ED18; }

JS → поведение
button.onclick = () => {
  alert('Привет!');
}
💡 ЛАЙФХАК

Если в HTML уже есть CSS и JS — всё равно вставляй в первое окно HTML. CodePen понимает это автоматически.

⚠️ ПОМНИ

Без регистрации — обновил страницу = потерял всё. Регистрируйся сразу!

Столп 3 / 5

Контрольные точки и Git

😱 СТРАШНАЯ ИСТОРИЯ

Две недели работы над кодом. На 15-й день решаешь переделать одну часть. ИИ пишет новый код — и удаляет старый. Всё. Две недели в мусор.

⏰
Git — машина времени

Как фотоальбом написанного сочинения. Каждый раз когда хорошо написал — делаешь «снимок» (коммит). Сломал — возвращаешься к последнему снимку.

☁️
GitHub — облачный сейф

Хранит код в интернете. Даже если компьютер сломается — код останется. Правило: сделал что-то работающее → сделай коммит.

Словарь Git
Коммит — снимок кода в конкретный момент. Как Ctrl+S, только умный.
Репозиторий — папка с твоим проектом + вся история изменений.
Push — отправить код с компьютера в GitHub (в облако).
Pull — скачать код из GitHub на компьютер.
Branch — параллельная версия проекта. Экспериментируй не ломая основной код.
Инструмент · GitHub · Шаг 1

Регистрация на GitHub

1
Открой github.com
В браузере введи github.com (не .ru, не .net). Нажми зелёную кнопку «Sign up» в правом верхнем углу.
🔒 Проверь адрес: именно github.com — это важно для безопасности
2
Введи email и пароль
Используй рабочий email (лучше Gmail). Придумай уникальный пароль — не тот, что используешь везде. Запиши его в надёжное место.
3
Придумай username
Это твоё имя разработчика на всю жизнь. Советы: имя + специализация (например, aitrend-arman). Работодатели ищут людей по GitHub username.
✨ Хороший username: zakyadegari, arman-dev, asel-ai — коротко и профессионально
4
Подтверди email
GitHub пришлёт письмо с кодом. Открой почту, скопируй 6-значный код, вставь на сайте.
5
Добро пожаловать в GitHub!
Пройди короткий опрос (можно пропустить). Выбери бесплатный план Free. Ты теперь разработчик с профилем!
🐙
Что ты получаешь
→Профиль разработчика — как LinkedIn, только для кода
→Бесконечное хранение кода в облаке
→Зелёные квадратики активности — работодатели смотрят!
→Доступ к миллионам open-source проектов

Важно! GitHub — это твоё портфолио разработчика. Каждый проект, который ты сюда загрузишь, станет доказательством твоих навыков. Именно GitHub-профиль смотрят при найме в IT.

Инструмент · GitHub · Шаг 2

Создаём первый репозиторий

1
Нажми «+» → New repository
В верхнем правом углу есть иконка «+». Нажми и выбери New repository.
2
Назови репозиторий
Repository name: habit-tracker (или своё название). Без пробелов — используй дефис. Добавь описание: «Трекер привычек — мой первый проект».
📁 Репозиторий = папка проекта в облаке. Имя лучше давать по-английски строчными буквами.
3
Выбери Public
Public — все видят твой код. Хорошо для портфолио. Private — только ты. Для учёбы выбирай Public — пусть видят твой прогресс!
4
Add README file ✓
Поставь галочку напротив Add a README file. README — это описание твоего проекта, которое все читают первым.
5
Create repository!
Нажми зелёную кнопку Create repository. Готово — твой первый репозиторий создан! URL: github.com/твой-username/habit-tracker
Структура репозитория
📁 habit-tracker (репозиторий)
├── 📄 README.md ← описание проекта
├── 📄 index.html ← главный файл
├── 📁 css/ ← стили (если отдельно)
└── 📁 js/ ← скрипты (если отдельно)

Commits history:
✓ Initial commit — 2 часа назад
✓ Add habit tracking — 1 час назад
✓ Fix tree animation bug — 30 мин назад
Инструмент · GitHub · Шаг 3

Загружаем код в репозиторий

1
Способ 1: Add file → Upload
В репозитории нажми Add file → Upload files. Перетащи свой HTML-файл или нажми «choose your files». Напиши commit message: «Add habit tracker v1».
2
Способ 2: Создай файл прямо в GitHub
Add file → Create new file. Назови index.html. Вставь код из CodePen (Ctrl+A, Ctrl+C → Ctrl+V). Commit changes.
💡 Этот способ проще — не нужно скачивать файл с CodePen
3
Напиши commit message
Перед сохранением всегда пиши понятное описание: «Add tree animation», «Fix habit counter bug», «Add new habit input». Потом сам скажешь спасибо.
4
Commit changes → готово!
Нажми зелёную кнопку Commit changes. Файл сохранён навсегда. Смотри — в репозитории появился твой index.html!
✅ Хорошие commit messages
Add: habit tracker main page
Fix: tree emoji display bug
Update: add new habit input field
❌ Плохие commit messages
изменения
asdfjkl
...
Инструмент · GitHub Pages · Деплой

Бесплатный сайт через GitHub Pages

GitHub Pages = бесплатный хостинг для твоего HTML-сайта. Никаких денег, никаких серверов — просто включи одну настройку.

1
Settings репозитория
Открой репозиторий, нажми вкладку Settings (шестерёнка вверху справа).
2
Pages в левом меню
В левой колонке найди раздел Pages.
3
Source → Deploy from branch
В разделе Source выбери Deploy from a branch. Ветка: main. Папка: / (root). Нажми Save.
⏰ Подожди 1-3 минуты — GitHub строит твой сайт
4
Твой сайт в интернете!
Обнови страницу Settings → Pages. Появится зелёная плашка с адресом: username.github.io/habit-tracker. Это реальный сайт в интернете!
🌍
Твой адрес в интернете
https://твой-username.github.io/habit-tracker

Открывается на любом устройстве в мире. Можешь отправить другу — он откроет твоё приложение прямо в браузере.

Каждый раз когда делаешь коммит в репозиторий — GitHub Pages автоматически обновляет твой сайт. Поправил код → через 1-2 минуты изменения видны в интернете!

Столп 4 / 5

Дебаггинг — кибер-детектив

🐛
Откуда слово «баг»?

В 1947 году программисты буквально нашли мотылька внутри компьютера, который сломал программу. С тех пор ошибка в коде = баг, поиск ошибок = дебаггинг.

🔍
Разница: новичок vs профи

Не в том, у кого нет ошибок — а в том, как быстро их находят и исправляют. Зак Ядегари: ИИ позволил дебажить в 10 раз быстрее.

Как настоящий кибер-детектив — собери улики, потом иди к ИИ:

📸
Улика 1

Скриншот того, что видишь на экране

📋
Улика 2

Точный текст ошибки (если есть)

💬
Улика 3

Что делал до того, как сломалось?

🔍 Промпт для дебаггинга

У меня возникла ошибка: [ОПИСАНИЕ ЧТО НЕ РАБОТАЕТ]. Когда я [ЧТО ДЕЛАЛ], происходит [ЧТО ПРОИСХОДИТ ВМЕСТО ОЖИДАЕМОГО]. Прикладываю скриншот и мой код. Исправь код и объясни что было не так.

Столп 5 / 5

Контекст и итерации

ИИ — не волшебник. Это умный помощник, который работает с той информацией, что ты даёшь. Больше контекста → лучше результат.

Итерация = 1 круг улучшения
v1.0 Базовая функция работает, пусть некрасиво
v1.1 Улучшен дизайн, цвета, шрифты
v1.2 Добавлена одна новая функция
v1.3 Друг протестировал → исправлены баги
Промпт с контекстом
🔄 Промпт для итерации

В моём коде не хватает [ОПИСАНИЕ ФУНКЦИИ]. Вот мой текущий код: [КОД]. Добавь эту функцию, не ломая остальное. Объясни что изменил.

✅ После каждой итерации — новый коммит в GitHub с понятным описанием!

Инструмент · Replit

Replit — деплой в один клик

Replit — онлайн-IDE с автоматическим хостингом. Пишешь код прямо в браузере → нажимаешь Run → приложение живёт в интернете.

🆚
CodePen vs Replit vs GitHub Pages
CodePen

Быстрое прототипирование. Только HTML/CSS/JS. Нет бэкенда.

GitHub Pages

Бесплатный хостинг для статических сайтов. Только HTML/CSS/JS.

Replit ⭐

Полноценные приложения: Python, Node.js, базы данных. Деплой в один клик. Отличен для сложных проектов.

Replit также имеет встроенный AI Assistant (Ghostwriter) который помогает писать и объяснять код прямо в редакторе — не нужно переключаться между вкладками.

1
replit.com → Sign Up
Регистрируйся через Google. Бесплатный план даёт много возможностей.
2
Create Repl
Нажми «+» → Create Repl. Выбери шаблон: HTML, CSS, JS (для нашего трекера). Дай название.
3
Вставь код в index.html
В файловом дереве слева открой index.html. Вставь код из CodePen. Нажми Run (зелёная кнопка вверху).
4
Поделись ссылкой!
Справа вверху — кнопка Share. Скопируй ссылку на работающее приложение и отправь другу или куратору.
Практика · Задание 1

Трекер привычек с деревом

🟢 Стартовое Вайб-кодинг
Повтори за Кумисай — создай трекер
Ровно то, что мы делали в уроке. Пройди все шаги самостоятельно: Gemini → CodePen → исправь баг → добавь функцию → GitHub → GitHub Pages.
Шаги выполнения
  • Спроси Gemini: «Кто страдает? Что нужно? Как работает?» — для трекера привычек
  • Сгенерируй HTML-код через Gemini (попроси деревце которое растёт)
  • Вставь в CodePen, проверь что работает
  • Найди хотя бы 1 баг — исправь через Gemini с описанием ошибки
  • Добавь 1 новую функцию (поле для ввода новых привычек)
  • Загрузи в GitHub репозиторий с 3 коммитами
  • Включи GitHub Pages — получи ссылку на сайт
Интерактив · Конструктор

Собери промпт для первого проекта

Тип приложения:

📋 Трекер привычек
🍕 Список покупок
⏰ Таймер / Секундомер
🎮 Простая мини-игра
📝 Заметки / To-do
🌦️ Погода / Калькулятор

Стиль дизайна:

🌑 Тёмная тема
☀️ Светлая тема
💜 Фиолетовый градиент
🌿 Минималистичный зелёный

Дополнительная функция:

🔔 Уведомления / анимации
📊 Статистика / прогресс
💾 Сохранение данных
🎨 Кастомизация цветов

Готовый промпт:

Выбери блоки выше чтобы собрать промпт...
Квиз · Проверь себя

7 вопросов о вайб-кодинге

Вопрос 1 / 7

Мини-игра · Сортировка

Хорошая практика или ошибка?

Нажми на карточку, потом на нужную зону.

✅ Хорошая практика
❌ Плохая практика / ошибка
Практика · Задание 2

Создай свой первый проект

🟢 Лёгкое
Клон трекера привычек

Повтори точно за уроком: трекер с деревом. Измени только одно: тему (привычки для учёбы / спорт / утренняя рутина). Задеплой на GitHub Pages.

🟡 Среднее
Калькулятор / Список задач с локальным хранением

Создай приложение с более сложной логикой: калькулятор с историей вычислений, или список задач с сохранением (попроси ИИ использовать localStorage). Минимум 3 коммита в GitHub.

🔴 Сложное
Мини-игра с системой очков

Создай браузерную мини-игру: угадай число, кликер, Memory (перевернуть карточки). Система очков, анимации, красивый дизайн. Реплой через Replit. Запиши Loom-видео как объясняешь что создал.

Практика · Задание 3

Кибер-детектив: найди баг

🟡 Среднее Дебаггинг
Сломанный код — найди и исправь 3 бага
Ниже — код с намеренными ошибками. Твоя задача: вставить в CodePen, найти что не работает, исправить через Gemini с правильным описанием.
<!DOCTYPE html>
<html><body>
<h1 style="colr: red">Счётчик кликов</h1>
<p id="count">0</p>
<button onclick="increment()">+1</button>
<script>
  let count = 0;
  function increment() {
    count = count + 1
    document.getElementById("counts").textContent = count;
  }
</script></body></html>
Найди все 3 ошибки:
  • Ошибка в CSS-свойстве (опечатка в названии)
  • Несовпадение ID элемента (getElementById ищет неправильный ID)
  • Попробуй добавить кнопку «-1» — ИИ напишет код
0 / 500
Цифровая безопасность

API-ключи — не показывай никому

🎮
Аналогия: аккаунт в Steam

Год прокачки, редкие скины, высокий уровень. Поделился паролем — на следующий день аккаунт пустой. API-ключ работает точно так же.

🔑
Что такое API-ключ?

Специальный код доступа к внешним сервисам (OpenAI, Google Maps, Stripe). Если кто-то получит твой ключ — будет использовать за твой счёт. Ты получишь огромный счёт.

🚫
НИКОГДА не делай это

Не выкладывай API-ключи в GitHub (публичный репозиторий). Не показывай на скриншотах или видео. Не вставляй в публичный код.

⚠️
Слепое доверие к ИИ-коду

ИИ может написать код который удалит файлы или сделает что-то неожиданное. Правило: перед запуском кода — попроси ИИ объяснить простыми словами что произойдёт.

✅
Правильно

Храни ключи в .env файлах (не загружаются в GitHub). Добавь файл .gitignore со строкой .env. Никогда не коммить секреты.

Практика · Задание 4

Три итерации своего проекта

🔴 Сложное Итерации + GitHub
Улучши проект за 3 итерации с коммитами
Возьми свой первый проект (трекер или свой). Сделай 3 итерации — каждая с новой функцией, каждая с коммитом в GitHub.
Три шага
  • Итерация 1: добавь кнопку сброса / очистки всех данных
  • Итерация 2: добавь счётчик — сколько задач выполнено / всего
  • Итерация 3: улучши дизайн — новые цвета, анимация при нажатии, красивые кнопки
  • После каждой итерации — коммит с понятным именем (3 коммита всего)
  • В конце — включи GitHub Pages и пришли ссылку
0 / 600
Чек-лист · Урок 1

Что ты освоил?

✓
Понимаю что такое вайб-кодинг и кто его придумал (Андрей Карпатый)
✓
Знаю мнемонику «МФ КДК» и что означает каждая буква
✓
Умею задавать 3 вопроса перед промптом: для кого, что нужно, как работает
✓
Знаю разницу между HTML (скелет), CSS (вид), JS (поведение)
✓
Вставил код в CodePen и зарегистрировался — код сохранён
✓
Создал аккаунт на GitHub с профессиональным username
✓
Создал первый репозиторий с README и хотя бы 1 коммитом
✓
Включил GitHub Pages — у меня есть живой сайт с реальной ссылкой
✓
Умею дебажить: скриншот + описание + код → отправить ИИ
✓
Понимаю почему API-ключи нельзя показывать публично
Практика · Промпты RU + EN

Промпты для вайб-кодинга

🇷🇺 Промпт для анализа идеи

У меня есть проблема: [ОПИСАНИЕ]. Помоги мне создать веб-приложение. Ответь на три вопроса: 1) Кто страдает от этой проблемы? 2) Что им нужно? 3) Как это должно работать? Затем предложи структуру приложения и какие HTML/CSS/JS функции использовать.

🇬🇧 Same prompt in English

I have a problem: [DESCRIPTION]. Help me create a web application. Answer three questions: 1) Who suffers from this problem? 2) What do they need? 3) How should it work? Then suggest the app structure and which HTML/CSS/JS features to use.

🇷🇺 Промпт для объяснения кода

Объясни мне этот код простыми словами. Что произойдёт когда я его запущу? Есть ли в нём что-то опасное или неожиданное? Вот код: [ВСТАВЬ КОД]

Вызов · По уровням

Выбери свой уровень

🟢 Лёгкий — Зак уровень
Трекер привычек задеплоен

Повтори урок шаг за шагом: Gemini → HTML → CodePen → GitHub → GitHub Pages. Пришли куратору ссылку github.io. Твой первый продукт в интернете!

🟡 Средний — Карпатый уровень
Своя идея + 3 коммита + исправленный баг

Реши свою реальную проблему через вайб-кодинг. Задай 3 вопроса, сгенерируй через Gemini, найди и исправь баг. Минимум 3 разных коммита с описанием. GitHub Pages ссылка.

🔴 Сложный — Зак $30M уровень
Полноценный продукт с Replit + Loom

Создай приложение с настоящей ценностью: мини-игра, полезный инструмент, решение реальной проблемы. Деплой через Replit (не только GitHub Pages). 5+ коммитов. Запиши 2-минутное Loom-видео: показываешь продукт и объясняешь как работает.

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

Стань создателем

📋 Задание

Создай своё оригинальное веб-приложение — не трекер привычек, а что-то своё. Реши проблему, которая раздражает тебя лично. Задеплой на GitHub Pages или Replit.

⭐ Требования
  • →Ответы на 3 вопроса (для кого, что, как)
  • →Минимум 3 функции в приложении
  • →GitHub репозиторий с 3+ коммитами
  • →Живая ссылка (GitHub Pages или Replit)
  • →Найти и исправить хотя бы 1 баг
🏆 Бонус XP

+100 XP — деплой через Replit (не только Pages)
+50 XP — README с описанием проекта
+200 XP — Loom-видео с демо

💬 Discord

Поделись ссылкой в нашем Discord-канале. Получи фидбэк от Кумисай и одноклассников!

Discord →

Твой результат за урок

0 XP

«Зак начал в 9-м классе. Ты можешь начать сегодня.»