Если вы никогда не создавали приложения и слова «код», «терминал» или «фреймворк» вызывают лёгкое замешательство — эта статья для вас. Мы сделаем самое первое, самое важное действие: убедимся, что ИИ действительно может собрать работающую мини-игру буквально за несколько минут. Без подготовки, без долгих объяснений, без необходимости что-то понимать заранее.
Это демо. Оно не сделает вас профессиональным разработчиком и не принесёт денег. Но оно снимет главный барьер — страх перед началом. После этих пяти минут вы будете точно знать: техническая часть не является волшебством, и вы можете в этом участвовать.
Содержание
- Что мы сделаем за пять минут
- Что вам понадобится
- Почему именно игра
- Шаг 1. Откройте Claude Code
- Шаг 2. Создайте папку для проекта
- Шаг 3. Задайте простой запрос
- Шаг 4. Наблюдайте, как ИИ пишет код
- Шаг 5. Откройте игру в браузере
- Шаг 6. Попросите добавить что-то простое
- Что только что произошло
- Что это демо показывает, а чего не показывает
- Как превратить демо в реальный навык
- Как разговаривать с Claude Code, чтобы получать хороший результат
- Что делать, если демо пошло не по плану
- Самые распространённые страхи новичков
- Частые вопросы
- Чек-лист первого демо
- Заключение
- Источники
Что мы сделаем за пять минут
За пять минут мы:
- Откроем Claude Code.
- Попросим его создать простую браузерную игру.
- Посмотрим, как ИИ пишет код.
- Запустим игру в браузере.
- Убедимся, что всё работает.
Это не теория. Это практика. Вы увидите результат своими глазами.
Что вам понадобится
Минимум:
- Компьютер с Windows, macOS или Linux.
- Браузер.
- Claude Code — ИИ-ассистент, который умеет работать с кодом.
Желательно, но не обязательно:
- Немного любопытства.
- Готовность нажать несколько кнопок.
Вот и всё. Никаких специальных знаний, никаких курсов программирования, никаких ключей доступа. Если вы умеете открывать браузер и писать текст — вы готовы.
Почему именно игра
Игра — идеальный первый проект. Почему? Потому что:
- Результат сразу виден и понятен.
- Можно поиграть и проверить, что работает.
- Не нужно придумывать сложную бизнес-логику.
- Это весело, а значит, легче не бросить.
Мы не будем делать сложную игру. Это будет простая мини-игра: например, «Змейка» или игра, где нужно кликать по появляющимся объектам. Чем проще — тем лучше для первого раза.
Шаг 1. Откройте Claude Code
Claude Code — это ИИ-ассистент, который работает прямо в вашей папке на компьютере. Он может создавать файлы, писать код, запускать команды и показывать результат. Официальный сайт — claude.ai/code.
Если Claude Code ещё не установлен, установите его по инструкции на официальном сайте. Для многих пользователей есть простой установщик: скачали, запустили, вошли в аккаунт. Если у вас уже есть Claude Code — просто откройте его.
Как выглядит интерфейс
После запуска вы увидите окно терминала или специального интерфейса, в котором можно писать запросы. Это похоже на обычный чат, но Claude Code при этом может создавать файлы и запускать команды на вашем компьютере.
Не пугайтесь, если видите что-то непривычное. Вам не нужно разбираться во всех кнопках. Достаточно поля для ввода текста.
Шаг 2. Создайте папку для проекта
Прежде чем просить ИИ что-то сделать, создайте отдельную папку для игры. Это нужно, чтобы файлы не разбросались по компьютеру.
Например, создайте папку my-first-game на рабочем столе или в документах. В Claude Code вы можете сказать:
Создай папку для моей первой игры в C:\Users\Имя\Documents\my-first-game.
Или просто откройте эту папку в Claude Code, если программа позволяет выбрать рабочую директорию.
Шаг 3. Задайте простой запрос
Теперь самое интересное. Напишите Claude Code простой запрос на русском языке. Например:
Создай простую браузерную игру "Змейка". Игровое поле 20 на 20 клеток. Змейка движется сама, я управляю стрелками на клавиатуре. Еда появляется в случайном месте. Когда змейка ест еду, она растёт. Если врезается в стену или в себя — игра заканчивается. Сделай один HTML-файл, который открывается в браузере.
Вот что происходит дальше. Claude Code начинает думать, затем создаёт файл, пишет код, возможно, задаёт уточняющие вопросы. Вы просто наблюдаете.
Почему запрос важен
Чем конкретнее запрос, тем лучше результат. Если сказать «сделай игру», ИИ не знает, что именно вам нужно. Если сказать «сделай Змейку 20 на 20 со стрелками и едой», он понимает задачу.
Не бойтесь писать по-русски. Claude Code хорошо понимает русский язык.
Шаг 4. Наблюдайте, как ИИ пишет код
Через несколько секунд Claude Code создаст файл. Возможно, это будет index.html — обычный файл веб-страницы. Внутри будет код на трёх языках:
- HTML — отвечает за структуру страницы.
- CSS — отвечает за внешний вид.
- JavaScript — отвечает за логику игры.
Не нужно сейчас разбираться в этом коде. Просто посмотрите, что он есть. Это и есть результат работы ИИ.
Пример того, что может быть внутри:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Змейка</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
font-family: sans-serif;
background: #f5f5f5;
}
canvas {
border: 2px solid #333;
background: #fff;
}
</style>
</head>
<body>
<h1>Змейка</h1>
<p>Управляйте стрелками</p>
<canvas id="game" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const gridSize = 20;
const tileCount = 20;
let snake = [{ x: 10, y: 10 }];
let food = { x: 15, y: 15 };
let dx = 0;
let dy = 0;
document.addEventListener('keydown', changeDirection);
function changeDirection(event) {
if (event.key === 'ArrowUp' && dy === 0) { dx = 0; dy = -1; }
if (event.key === 'ArrowDown' && dy === 0) { dx = 0; dy = 1; }
if (event.key === 'ArrowLeft' && dx === 0) { dx = -1; dy = 0; }
if (event.key === 'ArrowRight' && dx === 0) { dx = 1; dy = 0; }
}
function gameLoop() {
const head = { x: snake[0].x + dx, y: snake[0].y + dy };
if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
alert('Игра окончена!');
return;
}
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
food = {
x: Math.floor(Math.random() * tileCount),
y: Math.floor(Math.random() * tileCount)
};
} else {
snake.pop();
}
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'green';
snake.forEach(part => ctx.fillRect(part.x * gridSize, part.y * gridSize, gridSize - 2, gridSize - 2));
ctx.fillStyle = 'red';
ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2);
}
setInterval(gameLoop, 150);
</script>
</body>
</html>
Это упрощённый пример. Реальный код, который создаст Claude Code, может отличаться. Но суть одна: вы попросили — ИИ написал.
Шаг 5. Откройте игру в браузере
Теперь нужно запустить игру. Если Claude Code сам не предложил открыть файл, сделайте это вручную. Найдите файл index.html в папке проекта и дважды щёлкните по нему. Он откроется в браузере.
Вы должны увидеть игровое поле, заголовок «Змейка» и инструкцию. Нажмите стрелки на клавиатуре — змейка должна двигаться. Если она съест еду — вырастет. Если врежется в стену — игра закончится.
Поздравляем. Вы только что запустили своё первое приложение.
Если что-то не работает
Если игра не запустилась или ведёт себя странно — не паникуйте. Это нормально. Скажите Claude Code, что именно пошло не так:
Игра открылась, но змейка не двигается, когда я нажимаю стрелки.
Или:
В браузере пустая страница, ничего не отображается.
ИИ исправит код. Это тоже часть процесса. Даже опытные разработчики постоянно исправляют ошибки — поэтому они и работают с ИИ.
Шаг 6. Попросите добавить что-то простое
Когда базовая игра работает, попробуйте внести небольшое изменение. Например:
Добавь счёт очков вверху экрана.
Или:
Сделай так, чтобы змейка двигалась быстрее с каждой съеденной едой.
Или:
Добавь кнопку "Начать заново" после проигрыша.
Снова наблюдайте, как Claude Code изменяет код. Снова проверяйте в браузере. Это и есть цикл вайбкодинга: идея → код → проверка → доработка.
Что только что произошло
За пять минут вы увидели главное: ИИ может превратить ваши слова в работающий код. Вы не писали код сами. Вы не знали, как устроена игра. Но у вас есть результат.
Это не значит, что вы теперь разработчик. Это значит, что вы можете быть автором идеи, продюсером, человеком, который направляет ИИ. Именно так устроен вайбкодинг: человек думает, что сделать, а ИИ помогает это реализовать.
Что это демо показывает, а чего не показывает
Это демо показывает, что технический барьер намного ниже, чем кажется. Оно показывает, что вы можете получить результат быстро и без подготовки.
Но это демо не показывает полный путь создания реального приложения. Настоящий продукт требует:
- Понимания пользователей и их проблем.
- Продуманной структуры и дизайна.
- Тестирования на разных устройствах.
- Размещения в интернете, чтобы другие люди могли открыть ссылку.
- Привлечения пользователей.
- Доработок на основе обратной связи.
Всё это — следующие шаги. Они не сложнее, чем первое демо, но их больше. Именно поэтому существуют курсы и практикумы, которые проводят человека через весь цикл.
Как превратить демо в реальный навык
Первое демо — это искра. Чтобы из искры получился огонь, нужно практиковаться. Вот несколько способов развить навык:
Меняйте игру
Попробуйте изменить правила. Пусть змейка движется быстрее. Добавьте препятствия. Сделайте двух игроков. Каждое изменение учит вас лучше понимать, как ИИ реагирует на запросы.
Сделайте другую мини-игру
Попробуйте создать игру, где нужно ловить падающие предметы, угадывать слова или собирать пары карточек. Чем больше мини-проектов вы сделаете, тем увереннее будете себя чувствовать.
Перейдите к полезному приложению
Когда игры перестанут пугать, попробуйте сделать что-то полезное: список дел, трекер привычек, калькулятор, страницу с вашими заметками. Это уже шаг к реальным продуктам.
Как разговаривать с Claude Code, чтобы получать хороший результат
После первого демо вы заметите: от того, как вы задаёте вопрос, сильно зависит ответ. Claude Code — мощный инструмент, но он не телепат. Он работает с тем, что вы ему написали. Поэтому стоит освоить несколько простых правил общения с ИИ.
Правило 1. Начинайте с контекста
Прежде чем просить что-то сделать, кратко объясните, что у вас уже есть. Например:
У меня есть HTML-файл с простой игрой Змейка. Я хочу добавить счёт очков вверху экрана. Сделай так, чтобы счёт увеличивался на 10 за каждую съеденную еду.
Такой запрос лучше, чем просто «добавь счёт», потому что ИИ понимает, от чего он отталкивается.
Правило 2. Будьте конкретны
Сравните два запроса:
- «Сделай игру красивее» — ИИ не знает, что для вас красиво.
- «Сделай фон тёмно-синим, змейку зелёной, а еду красным кружком» — ИИ понимает задачу.
Чем больше деталей, тем меньше доработок.
Правило 3. Разбивайте большие задачи на маленькие
Не просите сразу «сделай многопользовательскую игру с рейтингом и чатом». Это огромная задача даже для профессионала. Лучше разбейте:
- Сначала сделайте локальную игру.
- Потом добавьте сохранение счёта.
- Потом добавьте таблицу лидеров.
- Потом, возможно, добавьте сетевой режим.
Каждый маленький шаг проще проверить и исправить.
Правило 4. Если что-то не так — покажите
Если ИИ сделал не то, что вы хотели, не ругайте его абстрактно. Покажите:
Игра запускается, но змейка проходит сквозь стены вместо того, чтобы проигрывать.
Если не знаете, где ошибка, просто опишите поведение:
Когда я нажимаю стрелку вниз, змейка ускоряется вместо того, чтобы двигаться вниз.
ИИ справится.
Правило 5. Не бойтесь задавать глупые вопросы
Claude Code не осуждает и не смеётся. Можно спросить:
Объясни простыми словами, что делает эта часть кода.
Или:
Почему игра не работает, если я открываю файл с телефона?
ИИ не только исправит, но и объяснит. Это бесплатный tutor, который всегда рядом.
Правило 6. Сохраняйте работающие версии
Перед каждым крупным изменением говорите ИИ:
Сохрани текущую версию как файл game-v1.html, а потом уже делай изменения.
Тогда, если что-то сломается, у вас всегда будет рабочая копия. Это как сохранение в игре перед боссом.
Правило 7. Экспериментируйте с формулировками
Если первый запрос не дал нужного результата, попробуйте переформулировать. Добавьте пример. Уточните ограничения. Иногда один и тот же вопрос, заданный иначе, даёт совсем другой ответ.
Хороший навык в вайбкодинге — это не знание синтаксиса, а умение договариваться с ИИ так, чтобы он понял ваш замысел.
Что делать, если демо пошло не по плану
Даже в самом простом демо иногда что-то идёт не так. Это нормально. Разберём типичные ситуации и то, что с ними делать.
Ситуация 1. Файл открывается, но экран пустой
Скорее всего, где-то в коде ошибка, и браузер не может понять, что рисовать. Откройте консоль браузера — обычно это клавиша F12, вкладка Console. Если видите красные строки с ошибками, просто скопируйте их и покажите Claude Code. Исправит.
Ситуация 2. Игра не реагирует на клавиши
Проверьте, что окно браузера активно. Иногда клавиши работают только после клика по игровому полю. Скажите ИИ: «Добавь подсказку, что нужно кликнуть на поле, чтобы управление заработало».
Ситуация 3. Игра слишком быстрая или слишком медленная
В коде есть число, которое отвечает за скорость. Не бойтесь попросить: «Сделай скорость змейки чуть медленнее». Или попросите добавить кнопки сложности: лёгкий, средний, сложный.
Ситуация 4. Дизайн выглядит ужасно
Это нормально для первого раза. Попросите Claude Code сделать минимальный красивый интерфейс. Дайте конкретные пожелания: цвета, шрифты, отступы. Или попросите: «Сделай дизайн в тёмной теме с современными кнопками».
Ситуация 5. Я не понимаю, что написал ИИ
Не обязательно понимать сразу. Спросите Claude Code объяснить любую строчку. Со временем вы начнёте узнавать повторяющиеся элементы. Но понимание не должно быть барьером для действия.
Ситуация 6. Хочу закрыть и забыть
Это тоже бывает. Первый опыт может напугать. Но попробуйте сделать паузу и вернуться через день. Часто на следующий день проблема решается за пять минут. Главное — не превращать одну неудачу в приговор.
Самые распространённые страхи новичков
«Я не пойму код»
Вы не обязаны понимать каждую строчку кода. На первом этапе важно понимать идею и видеть результат. Со временем вы начнёте узнавать повторяющиеся элементы. Но понимание приходит через практику, а не через чтение учебников.
«Я сломаю что-то важное»
Нет. Вы работаете в отдельной папке с игрой. Даже если удалите всё, ничего страшного не произойдёт. Можно попросить Claude Code создать файл заново.
«ИИ сделает всё за меня, и я ничему не научусь»
ИИ делает техническую работу, но вы учитесь формулировать задачи, проверять результат, думать о продукте. Это другие, но не менее важные навыки. Кроме того, чем больше вы практикуетесь, тем больше понимаете.
«У меня нет времени на полноценное обучение»
Демо заняло пять минут. Мини-игру можно сделать за вечер. Реальное приложение — за несколько недель. Вы можете двигаться в своём темпе. Главное — начать.
«А вдруг у меня не получится?»
У вас уже получилось. Вы только что запустили игру. Дальше — дело количества попыток.
Частые вопросы
Обязательно ли делать именно игру?
Нет. Можно сделать простую страницу, калькулятор, таймер, список дел. Игра выбрана потому, что результат наглядный и весёлый.
Нужно ли устанавливать программы?
Нужен Claude Code. Базовая игра открывается прямо в браузере, поэтому дополнительных сложных инструментов не требуется.
Сколько времени занимает такое демо?
Само создание простой игры занимает буквально несколько минут. Если вы совсем новичок и дополнительно разбираетесь с установкой Claude Code, может уйти 15–30 минут.
Что делать, если я не знаю, что спросить у ИИ?
Начните с простого: «Сделай простую игру Змейка в одном HTML-файле». Потом добавляйте детали по одной. ИИ подскажет, что можно улучшить.
Это реальное приложение, которым можно поделиться?
Пока что нет. Файл лежит на вашем компьютере. Чтобы поделиться ссылкой, нужно выложить файл в интернет. Это следующий шаг, и он тоже несложный.
Нужно ли мне учить программирование?
Не обязательно. Для простых проектов достаточно уметь объяснять ИИ, что вы хотите. Но базовое понимание принципов поможет вам задавать более точные вопросы и быстрее исправлять ошибки.
Можно ли таким образом сделать приложение для телефона?
В демо мы сделали браузерную игру, которая открывается и на телефоне тоже. Но полноценное мобильное приложение для App Store или Google Play — это следующий уровень сложности. С него лучше не начинать.
Что дальше после демо?
Дальше — практика. Сделайте несколько мини-игр, попробуйте полезные приложения, изучите, как выкладывать проекты в интернет. Или присоединитесь к практикуму, где вас проведут через весь путь.
Чек-лист первого демо
- Я открыл Claude Code.
- Я создал отдельную папку для игры.
- Я написал простой запрос на русском языке.
- Я увидел, как ИИ создал файл с кодом.
- Я открыл файл в браузере.
- Я увидел работающую игру.
- Я попробовал управлять игрой.
- Я понимаю, что это демо, а не готовый продукт.
- Я готов сделать ещё несколько мини-проектов.
- Я понимаю, что техническая часть — не волшебство, а инструмент.
Заключение
За пять минут вы сделали то, что многие годами откладывали: запустили своё первое приложение. Это было просто, потому что ИИ взял на себя техническую часть. Ваша задача — придумывать, формулировать и проверять.
Это демо — всего лишь первый шаг. Но он важнее, чем кажется. Он доказывает, что вы можете. Что создание приложений доступно не только программистам. Что у вас есть инструмент, который превращает идеи в результат.
Если вы хотите пойти дальше — от демо к реальному приложению, которым пользуются другие люди — присоединяйтесь к практикуму skillmake. Там мы помогаем нетех-новичкам пройти весь путь: от первой идеи до запущенного продукта с помощью ИИ. Без паники, без жаргона, шаг за шагом.
Источники
[^1]: Официальный сайт Claude Code — claude.ai/code [^2]: Документация по HTML на MDN — developer.mozilla.org/ru/docs/Web/HTML [^3]: Документация по JavaScript на MDN — developer.mozilla.org/ru/docs/Web/JavaScript
Читай дальше
Все статьиНе просто статьи — тебя доведут до результата
В практикуме за 1999 ₽ рядом живая команда практикующих разработчиков и маркетологов: ведём по шагам до твоего работающего приложения. Не «ролики и сам разбирайся» — помогаем на каждом затыке.
Перейти к практикуму