И какие инструменты нам понадобятся для вайб-кодинга
Каждый раз когда ты открываешь сайт, происходит разговор между двумя компьютерами
Браузер = гость |Сервер = кухня |Запрос = заказ |Ответ = блюдо
HTML определяет структуру: заголовки, текст, картинки, кнопки.
<h1> — заголовок<p> — параграф текста<img> — картинка<button> — кнопка<!DOCTYPE html>
<"text-[#a78bfa]">class="text-[#f472b6]">html>
<"text-[#a78bfa]">class="text-[#f472b6]">head>
<"text-[#a78bfa]">class="text-[#f472b6]">title>Мой сайт</"text-[#a78bfa]">class="text-[#f472b6]">title>
</"text-[#a78bfa]">class="text-[#f472b6]">head>
<"text-[#a78bfa]">class="text-[#f472b6]">body>
<"text-[#a78bfa]">class="text-[#f472b6]">h1>Привет, мир!</"text-[#a78bfa]">class="text-[#f472b6]">h1>
<"text-[#a78bfa]">class="text-[#f472b6]">p>Это мой первый сайт</"text-[#a78bfa]">class="text-[#f472b6]">p>
<"text-[#a78bfa]">class="text-[#f472b6]">button>Нажми меня</"text-[#a78bfa]">class="text-[#f472b6]">button>
</"text-[#a78bfa]">class="text-[#f472b6]">body>
</"text-[#a78bfa]">class="text-[#f472b6]">html>Превью в браузере:
Это мой первый сайт
CSS определяет как выглядит: цвета, шрифты, размеры, расположение.
Тот же HTML, но с добавлением CSS выглядит совсем по-другому →
body {
background: #1a1a2e;
color: white;
font-family: Arial;
padding: 40px;
}
h1 {
color: #a855f7;
font-size: 36px;
}
button {
background: #06b6d4;
color: white;
padding: 10px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
}Превью с CSS:
Это мой первый сайт
Весь код — обычные текстовые файлы. Сайт = набор файлов. Кликни на файл чтобы увидеть содержимое.
Текстовый способ управлять компьютером. Быстрее и мощнее чем мышкой.
Попробуй ввести: pwd, ls, cd my-project, cd ..
pwdГде я?Показывает текущую папку= адресная строкаlsЧто тут?Показывает содержимое= окно файловcdПерейди!Переход в другую папку= клик по папкеУмный редактор кода со встроенным AI. Пишешь задачу на русском языке — AI генерирует код.
Ты пишешь:
"Сделай кнопку которая меняет цвет при нажатии"
AI отвечает кодом:
<button onclick="this.style.background= '#'+Math.random().toString(16) .slice(2,8)"> Нажми меня </button>
AI-ассистент прямо в терминале. Может создавать, редактировать файлы и запускать команды. Понимает весь проект целиком.
Используем вместе — они дополняют друг друга
| Cursor | Claude Code | |
|---|---|---|
| Интерфейс | Графический (GUI) | Терминал (CLI) |
| Удобно для | Точечных правок | Больших задач |
| Видно файлы | Да, как в проводнике | Через команды |
| AI общение | Чат в боковой панели | Прямо в терминале |
| Автоматизация | Средняя | Высокая |
Используем Cursor чтобы видеть код + Claude Code чтобы автоматизировать