Как перестать бояться вайбкодить: разбираемся в интерфейсе Kodik

Чтобы впервые попробовать вайбкодинг, достаточно написать первый промпт. Но дальше быстро возникает вопрос: а что вообще происходит в интерфейсе AI-редактора, кроме кнопки «Отправить»? Разбираем базовые возможности на примере Kodik — понятно и без сложных терминов.

Начнём с того, что ближе всего к промпту: а что вообще делают выпадающие меню рядом с ним? Если нажать на «Выполнить», то видны ещё «Спросить» и «План». Чем эти варианты различаются и зачем вообще нужны?

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

Для такого помогает режим «План». В этом случае ИИ помогает вместе разобраться «что мы собираемся делать», но никак не меняет файлы. Режим «Спросить» устроен похоже: там тоже можно просто общаться с ИИ без изменений в коде. Но он больше подходит не для планирования, а для вопросов, которые возникают уже по ходу работы.

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

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

Kodik поддерживает все топовые модели, и чтобы выпадающее меню не получалось слишком длинным, не показывает там сразу все. В конце идёт кнопка «управление моделями» — вот по ней можно увидеть полный список и выбрать, какие варианты должны отображаться в меню, а какие вам не нужны.

Кнопка "@" помогает сослаться в промпте на конкретный файл: можно попросить ИИ внести изменения именно в него, или объяснить его внутреннюю логику. На кнопки вроде MCP поначалу можно не обращать внимания, в первых проектах они вам вряд ли понадобятся.

Кроме поля диалога с ИИ, в Kodik видны файлы проекта и их содержимое. Так что любой файл, созданный ИИ, можно открыть и посмотреть, что именно он там написал. Общая идея выглядит так:

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

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

А во-вторых, не требуется разбираться во всём сразу. Достаточно понять несколько простых вещей, чтобы начать более уверенно чувствовать себя в редакторе. А остальное можно разбирать постепенно по мере сил и желания.

Проще всего начать с лёгкого примера. Например, попросить ИИ: «Создай HTML-страницу Hello World». Он создаст на вашем компьютере файл с расширением .html. Если открыть папку и кликнуть по файлу, он откроется в браузере:

А если открыть Kodik и кликнуть на тот же файл там, можно увидеть, как он выглядит «изнутри». На этой странице нет сложной логики, только надпись. Поэтому и код здесь проще: это разметка, которая сообщает браузеру, как эту надпись отобразить.

Не обязательно понимать сразу все строки, можно обратить внимание на что-то одно. Скажем, тут видны сразу две надписи «Hello world» (одну окружает «title», другую «h1»), а зачем понадобились две?

Об этом можно спросить у ИИ. Либо экспериментировать самостоятельно: в открытом файле добавить в конце первой надписи «hello world» слова «надпись 1», а в конце второй — «надпись 2». Сохранить файл, а затем обновить страницу в браузере и посмотреть: что изменилось?

Теперь видно разницу: первая надпись — это то, что попадает в название вкладки, а вторая — то, что отображается на самой странице.

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

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

Если вы делаете пробный маленький проект для себя, то сложно при этом что-то «испортить»: в худшем случае просто начнёте заново.

В Kodik много функций, и не всегда легко помнить, где именно находится нужная настройка или действие. Но на такой случай есть специальное меню «Показать все команды» (и для него есть сочетание клавиш Ctrl + Shift + P). В поле ввода можно начать набирать текстом любую интересующую вас команду, чтобы её найти.

Например, вы захотели изменить в Kodik цветовую тему, но не помните, где это делается. Если открыть «Показать все команды» и начать вводить «тема», то пункт быстро найдётся, как видно на скриншоте выше.

И дальше, перейдя к этому пункту, можно легко сделать Kodik хоть красным:

Не все возможности редактора встроены в него изначально. Но это нормально: Kodik поддерживает большинство расширений Visual Studio Code, с помощью которых можно добавлять новые инструменты и функции.

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

В Kodik изначально нет специальной функции именно для такого. Зато для этого есть популярное расширение CodeSnap.

Чтобы установить расширение, можно на самой левой панели Kodik кликнуть на иконке «Extensions», ввести в поиске его название (в данном случае «codesnap»), и дальше на нужном расширении нажать на «Install». Рядом с каждым из них в поиске подписано число его установок, так что можно поначалу ориентироваться на самые популярные.

Когда CodeSnap установлен, становится можно в любой момент вызвать его в Kodik через поле «Все команды», о котором мы рассказали выше. Тогда рядом с кодом появится «поле скриншота», показывающее «как может выглядеть готовый». Если просто выделить в коде любые строки, они сразу же попадают в это поле. И если нравится, как выглядит результат, можно сразу его сохранить.

Расширения есть на самые разные случаи жизни. Например, Bookmarks позволяет делать «закладки в коде» на случай, если вам хочется возвращаться не просто к каким-то файлам, а к конкретным местам в них. А линтеры (вроде SonarQube for IDE) подсвечивают некоторые проблемы в коде, помогая его улучшать.

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

Но если постоянно переключаешься туда-сюда, это может стать неудобным. Если бы всё было видно сразу на одном экране, разбираться стало бы проще. Для подобного есть расширение Better SVG. После его установки всё сразу, и если меняешь код, то изображение меняется моментально:

Так что расширения полезно устанавливать в зависимости от того, что именно вы чаще всего делаете. Например, если начали делать много проектов на одном и том же языке программирования — посмотрите, есть ли расширение для него.

Возможностей Kodik гораздо больше, чем можно уместить в одном тексте. Пока мы даже не затрагивали более сложные вещи вроде терминала и Git. Так что в будущем расскажем ещё много интересного.

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

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

А мы напоследок напоминаем: попробовать Kodik можно бесплатно, скачав с официального сайта.