Создаём первый проект в ИИ-редакторе кода

Сейчас у многих возникает вопрос: «Я не программист, но похоже, что ИИ-кодинг уже может и мне чем-то пригодиться. А как подступиться без опыта? C чего начать, чтобы разобраться?»

Создаём первый проект в ИИ-редакторе кода

Мы слышим такие вопросы регулярно, потому что делаем Kodik — редактор кода с ИИ. Попробовать его можно бесплатно, первые промпты за наш счёт. А какими эти промпты делать-то?

Вообще говоря, здесь нет строгих правил. Можно просто запрашивать всё, что взбредёт в голову, и смотреть, что получится. Это уже будет познавательно.

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

Шаг 1. Подготовить инструмент

Вы можете использовать любой подходящий вам инструмент ИИ-кодинга, но мы объясним на примере Kodik. В его случае при использовании в России не сталкиваешься с региональными ограничениями, так что начинающим может быть особенно удобно.

Начать с Kodik просто: скачать с сайта, установить, открыть в нём папку, где хотите хранить файлы своего проекта. В его окне можно будет видеть и сами файлы из этой папки (когда они появятся), и специальную колонку справа для чата с ИИ:

Создаём первый проект в ИИ-редакторе кода

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

Что здесь значит «Auto»? Kodik поддерживает различные современные ИИ-модели (от GPT и Claude до DeepSeek и Kimi). И в авторежиме он сам определяет, какой именно из моделей логичнее отправить ваш запрос. В первый раз проще всего так и действовать, чтобы сосредоточиться на сути проекта, а не разнице моделей.

Но если вам интересно выбирать модель самостоятельно, это тоже можно делать. Достаточно переключиться с режима «Auto» на какую-то конкретную. Главное в этом — помнить, что разные модели с разной скоростью расходуют имеющиеся кредиты (разница подписана в меню выбора). Так что «самая мощная модель» не обязательно «самая лучшая для вас»: с простыми задачами справятся и более бюджетные.

Шаг 2. Выбрать идею

Сначала надо решить, что хочешь сделать. Сайт, приложение, игру? А о чём именно?

Интересное преимущество ИИ-кодинга: если у вас есть смутная идея и ещё не определились полностью, то можно прямо в самом редакторе кода обсудить и доработать её с ИИ. Для подобного в Kodik есть режимы «Спросить» и «План», где модель охотно помогает всё продумывать, но ещё не начинает писать код.

А для первых проектов полезны такие соображения:

  • Сначала лучше всего что-то с мгновенным визуальным результатом. Чтобы как только ИИ сгенерировал код, можно было сразу открыть результат и быстро понять, нравится или что-то надо изменить.
  • Первые проекты разумно делать максимально простыми. Если есть сложная идея, её лучше запомнить на будущее.
  • Модели могут ошибаться, и без опыта не стоит браться за то, где их ошибка может вам навредить (грубо говоря, «приложение, которое за меня заполняет документы»).

И по таким критериям хорошо подходят мини-игры, созданные с помощью HTML и JavaScript.

Их можно сразу же открывать в браузере. Вся игра может умещаться в одном HTML-файле, который можно легко отправить другу или выложить в интернет. Ошибки тут вряд ли приведут к чему-то страшному, в худшем случае просто не получится поиграть.

Поэтому дальше мы рассмотрим именно такое направление. А какую именно мини-игру делать? Если у вас есть идея — смело воплощайте её. Но если нет, то вот варианты, которые начинаются с самого простого:

Шаг 3. Повторить известное

ИИ-модели обучались на всём, что уже известно человечеству. Поэтому самое простое, что возможно придумать в вайбкодинге — это сказать что-то вроде «сделай тетрис для браузера». Не придётся подробно объснять машине особенности игры, когда она и так её уже знает.

Вместо тетриса подойдёт и что угодно «известное и простое». Можно воплотить хоть хиты из 80-х вроде Arkanoid, в которые люди когда-то рубились на игровых автоматах, хоть нашумевшую в 2014-м игру «2048». Для некоторых игр ИИ может создавать не одну HTML-страницу, а целый ряд файлов — обычно тогда он поясняет, какой нужно открыть для запуска игры (или можно спросить у него). А также можно создавать несколько мини-игр в рамках одного проекта, не требуется заводить новую папку под каждую.

Создаём первый проект в ИИ-редакторе кода

Зачем создавать ещё один тетрис, когда их уже миллион? Сама игра-то ясна, но на таком знакомом и простом примере легче разобраться с новым процессом. Можно впервые увидеть, как в папке «сам собой» возникает файл с кодом. Можно открыть этот файл в браузере и впервые поиграть во что-то, созданное по твоей команде. А если открыть тот же файл в самом Kodik, можно увидеть сам код и менять что-то в нём вручную.

Когда делаешь простенькую игру для самого себя, смотреть в код совершенно не обязательно. Можно просто «вайбкодить», только разговаривая с ИИ-агентом. Многие так и делают.

Но если интересно разобраться в коде, ИИ полезен и в этом. Можно прямо в Kodik просить агента: «А объясни простым языком, что именно делают вот эти строки». Так что ИИ может не только «заменять» ручное программирование, но и наоборот: помогать обучаться ему.

Хорошо, с тетрисом разобрались, что дальше?

Шаг 4. Видоизменить известное

ИИ позволяют оттолкнуться от чего-то давно существовавшего, но дальше менять это «под себя», дополнять, усложнять. И так можно прийти от чего-то банального к уникальному.

Когда ИИ-агент сделал вам что-то базовое вроде тетриса, интересное только начинается. Теперь можно сказать ему это изменить и доработать.

Самая простая доработка: можете сказать изменить цвета на ваши любимые. И вот уже это не просто один тетрис из миллиона, а специальный, учитывающий лично ваши вкусы.

И дальше можно пробовать менять всё, на что только хватит фантазии:

  • Что получится, если в тетрисе фигуры будут падать снизу вверх?
  • А если добавить новую фигуру из пяти квадратов?
  • А можно ли как-то скрестить тетрис со «змейкой»?

Увлекательно пробовать всё приходящее в голову. Многие идеи могут на практике оказываться неудачными, но это не страшно. Когда ИИ быстро делает их по запросу, легко попробовать целый ряд — и найти среди всех что-то реально интересное.

А пока это пробуешь, начинаешь лучше понимать «что вообще возможно». Сознание постепенно перестраивается и привыкает к новым реалиям, где в простеньких проектах от идеи до её реализации всего один промпт.

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

Шаг 5. Воплотить жанр

Усложним дальше. Тетрис един для всего мира. Но в мини-играх есть ещё и популярные жанры, когда одну идею развивали по-разному.

Например, есть много 2D-платформеров в духе классических «Super Mario»: с разными персонажами, уровнями, атмосферами. Есть много игр «Три в ряд», оформленных по-разному. И так далее.

Поэтому следующий возможный шаг — попробовать сделать новую игру в существующем жанре. Что, если в «три в ряд» вместо надоевших «кристалликов» будут листья разных деревьев? А что, если сделать игру про что-то из собственной жизни?

Мы в анонсе уже показывали мини-игру, где кот едет на пылесосе и перепрыгивает мебель. Если вдуматься, главная механика ведь та же самая, что у встроенной в Google Chrome игры, где динозавр перепрыгивает кактусы. Это жанр «endless runner».

И когда endless runner не про абстрактного динозавра, а про конкретного кота, жанр сразу становится индивидуальнее. Так что можно подумать «какой жанр мне близок», а дальше подумать «с какими уровнями и атмосферой я бы хотел такой воплотить».

Можно добавить туда себя и друзей (и сделать сюрприз кому-то из них на день рождения). Можно даже брендировать игру, чтобы кто-то мог и получать удовольствие от неё, и запоминать ваш бренд.

И в процессе всего этого тоже лучше понимаешь возможности ИИ-кодинга.

Шаг 6. Зайти дальше

Это всё была разминка, помогающая «впервые встать на лёд». Дальше — интереснее:

  • Что, если сделать не такую минималистичную игру, а посложнее?
  • Что, если от игр перейти к небольшим приложениям с практической пользой?
  • Что, если пользоваться не просто окошком ввода промпта, а осваивать весь инструментарий?

О подобных вещах мы расскажем в следующих текстах. Но вы можете не дожидаться их, а экспериментировать в этом направлении самостоятельно. Вайбкодинг отчасти тем и увлекателен, что можно не спрашивать у кого-то разрешения, а пробовать что вздумается. Главное — помнить, что вайбкодить без проверки кода можно себе в удовольствие в маленьких личных проектах, но не в больших профессиональных с высокой ценой ошибки.

А напоследок напомним: скачать Kodik можете на сайте, и при первом использовании получаешь стартовый набор кредитов бесплатно. Так что первый опыт можно получить, ничего не теряя.

6
Начать дискуссию