Делаем бесплатным вайб-кодинг: Пошаговая настройка Qwen CLI (MCP + Skills + Rules)

Всем привет. Меня зовут Костя. И в этом видео мы с вами займёмся бесплатным вайп-кодингом, а именно настройкой квен-кода для дальнейшей работы. Я покажу, как установить Qн-код, как настроить MCP, Skills, Rules. То есть мы создадим спеку для нашего проекта, по которой нейросеть сможет разрабатывать проекты. Одно из преимуществ больших Квен-кода в том, что нам доступна в нём моделька Квен 3,5+, которая показывает, ну, достаточно неплохие результаты для бесплатной модельки. по которой нам доступно 2. 000 запросов в день, но никто вам не мешает менять аккаунты и, собственно, увеличивать эти запросы хоть до скольки тысяч. Перед началом установки Квен-кода вам обязательно нужно установить Node JS. Без него у вас ничего работать не будет. А установите, даже если у вас старая какая-то версия, всё равно установите новую версию, чтобы у вас была самая свежая версия. То есть здесь вам нужно будет просто скачать всё это дело, установить, я думаю, разберётесь. Далее вам нужно будет открыть терминал у себя. А на Windows это делается следующим образом. То есть вы можете просто загуглить, как открыть терминал на Windows, и у вас будет здесь такая вот инструкция. У меня это делается проще. Я просто открываю терминал, он у меня уже заранее здесь есть. И мне нужно будет вбить сюда команду. Команду вот следующую из Квен-кода. Она прямо в самой середине. Мы просто копируем, вставляем. А так как у меня не Windows, а МакоOS, мне нужно суду обязательно прописать и вставить обратно. У меня написано, что у меня установилось пять каких-то пакетов. Теперь я могу набрать Квен, и у меня он должен запуститься. У меня сразу же требует аутификации. Также потребует у вас. Нажимаете, у вас откроется сайт с квенчатом, где вам нужно будет просто конфирм нажать либо создать аккаунт и потом конфirm нажать. И всё. И, собственно, у вас полностью установлен Кве. Теперь мы можем, а, с помощью настроек здесь через слш у нас получается открываются настройки. Здесь разные, разные они есть. А нам нужен settings. Здесь мы можем, например, тему выбрать, какая вам больше подходит. Я вот выберу Дракулу. И также здесь мы можем выбрать язык. Так, сейчас у нас английский стоит, мы можем выбрать, например, русский. Также можем выбрать язык модели, но нам это не нужно. Нам главное UI. выбрать на русском, чтобы у нас весь терминал стал на русском. Далее мы Ctrl S нажимаем много раз, Ctrl C. И теперь можем вбить заново. И сейчас он у нас будет на русском языке. Видите, у нас теперь на написано, что какая команда для чего нужна полностью на русском. Далее мы снова выходим из терминала. А здесь мы пишем SD. Это для того, чтобы мы могли открыть какую-либо папку на нашем устройстве, компьютере. И можем просто вот так вот перетащить. Я её заранее создал. Это полностью пустая папка. Просто так перетаскиваем, прожимаем Enter. Убеждаемся, что мы теперь в Квен-коде находимся в нужной папке. И теперь запускаем Н там. Теперь мы можем попросить, а, создай. Во-первых, проверим модель, какая у нас установлена. Вот так вот после шум так вбивать модель, допустим, либо просто из списка, да, выбрать. Здесь будет у нас модель написано. Вот модель. Смотрим, какая у нас модель доступна. У меня это 35 п. У вас должно быть примерно так же. И далее пишем создай пустой проект Next JS. И он нам сейчас создаст пустой проект NextJS, на котором мы и будем тренироваться, когда будем устанавливать всё остальное. Так, да, всегда разрешать. Он установил нам проект. Вот он. Next up. Далее мы снова выходим отсюда, набираем CD, закидываем эту папку, чтобы мы в ней находились в проекте этого некста. Набираем снова Квен. Всё, теперь мы снова находимся в нужной нам папке. Далее нам сразу же необходимо, а прожать и это обязательно, чтобы он проинициализировал проект, понял, что тут есть, чего здесь нет. Далее, неплохо, если у вас будет какой-то редактор кода, например, а, Visual Studio CD для того, чтобы мы могли этот проект открыть в нём, потому что нам нужно будет произвести некоторые настройки. Вот он проект у

меня открылся. Я просто перетащил этот проект. Далее нам нужно здесь создать папку точкан. Назовём её. Это обязательно, кстати, именно такое название. Точкан. Внутри нам нужно создать новый файл. Назовём его settings. jonjon. Это тоже обязательно именно такое название. Здесь мы можем настройки для нашего квена вписывать, которые он будет подтягивать. Нам нужно сейчас MCP подключить. Давайте разбираться, что такое MCP. MCP - это сервера. Допустим, GitHub получает доступ к вашим проектам. Вы можете с помощью этого MCP, а, загружать свои проекты куда-то в интернет и хранить код там. Ну, то есть это GitHub называется. КоTex 7. Он имеет доступ ко всей документации современной, вообще самой последней по всем каким-либо фреймворкам, языкам программирования и так далее и скармливать это вашей нейросети. То есть, допустим, Play WR, он управляет браузером, позволяет вашей нейронке смотреть результат в браузере, условно того, что вы накодили, чтобы она могла там посмотреть, может быть, что-то поправить и так далее. В общем, MCP - это такие своеобразные улучшения для вашей нейросети и в целом для Квенкода. Я вам предлагаю не из этого сайта установить, хотя вы можете порыться, посмотреть, нужен ли он вам. Тут действительно есть какое-то описание, благодаря которому вы можете что-то понять, а как бы хотите ли вы использовать в вашем проекте его или нет. То есть здесь топ самых лучших. Почитайте, поймёте. Я вам покажу на примере шотсина, как это всё устанавливать. У нас вот есть шn - это такой визуальный, можно сказать, улушайзер, который имеет доступ к различным компонентам Реакта некста, с помощью которых ваша нейронка сможет гораздо лучше делать визуал. У нас вот такой вот MCP сервер есть. Нам бы понять, как его устанавливать. Вот у нас есть здесь NPX UI MCP server. Нам для того, чтобы вот это вот всё добавить себе, нужно заранее знать структуру, как Qнкод вообще принимает вот эти вот все MCP сервера для того, чтобы он их автоматически в проекте запускал. Для этого у нас существует документация. Документация у нас полностью на русском языке. Вот мы тут выбираем русский язык, находим MCP. Вот у нас здесь есть полная инструкция по установке MCP. Нас будет интересовать вот что-то вроде такого. Ну вот, вот такое вот нам что-то нужно будет. Я сейчас а скопирую здесь и мы дальше поговорим. Итак, смотрите, вот такой вот у нас будет трафарет, по которому в дальнейшем вы сможете другие MCP сервера подключать. Вот. То есть, э, у нас вот такой вот трафарет. Просто мы пишем comand mpx аргументы -y и какой именно. То есть примерно это будет строчка вот отсюда. Вот эта вот, если мы сравним, она будет одна и та же. А всё остальное просто скопируйте. Далее, если вам нужно будет ещё один MCP сервер, вы здесь просто напишите вот такой вот а запятую и сюда нового всё вставите вот так вот. И здесь уже другой пропишете MCP сервер, который вам нужен. У меня пока что один. Для того, чтобы убедиться, что MCP сервер запущен, вам нужно из квена выйти и заново выйти. Видите, он подключается к MCP серверам. Сейчас пройдёт время, он к нему подключится. Всё. Далее мы MCP здесь набираем лист и смотрим, какие у нас MCP подключены. Сейчас у нас SHCN готов. 10 инструментов, пять промтов. То есть у него есть, то есть он сейчас с ним может спокойно работать. Далее нам бы неплохо было установить ещё и себе а-а skills, то есть навыки. Что такое навыки, можете здесь почитать. Ну то есть это заранее прописанный промт, которому он будет, соответственно, следовать. У нас также нужно будет QN отдельную папку skills создать и далее уже название моего скила, то есть добавлять какой-либо файл в формате Skills MD. Смотрите, как это будет у нас работать. Далее нам неплохо было бы восстановить себе скилсы либо навыки. А вот тут вы можете найти в документациях. Тут всё на русском. Можете почитать, что это такое.

То есть это условный промт, где чётко прописано, что нужно делать, в какой последовательности и с чем. То есть создать скилл можно, нам нужно будет создать папку сначала, затем а в эту папку закинуть другую папку с названием моего скила, допустим, мои skill name и уже туда вовнутрь skill md поместить с названием скила, с кратким его описанием, с инструкциями, с примерами. То есть, как это может выглядеть, мы можем посмотреть, наверное, где-нибудь ещё, например, на сайте. Вот у нас тоже mcpmarket. com есть. Здесь у нас есть вот я выбрал develops agent skills, то есть скилы для разработки. И у нас существуют вот такие скилы, то есть какие-то улучшают работу на реакте, какие-то на нексте, какие-то там помогают с Гос Пайтоном и так далее. Давайте для примера создадим свой первый скилл. Смотрите, у нас как здесь написано в документации, что нам необходимо создать папку skill skills. Вот давайте здесь создадим. Вот она точка. В нём нужна папочка Skills. И внутри Skills нам уже нужно какой-то скилл создать. Я его создавать с нуля не буду, конечно же. Я возьму с этого сайта какой-нибудь, допустим, React. И мы просто вот берём и скачиваем себе скил. Распаковываем его. И вот он у нас есть skill MD. Я его копирую, иду в проект Next Up. А, так, не, а Quen Skills. Закидываю пока что сюда. Так, далее. Смотрим, как он называется. Fix. Создаём новую папку, пишем fix и закидываем этот скилл туда. Всё, первый скилл у нас создан. Теперь то, что касается спеки проекта. То есть нам обязательно нужна спека проекта, по которому он нам будет создавать наш проект. Для этого мы воспользуемся квеном. Нам нужен чат обычный. Я покажу вам самый простой, самый примитивный способ, как вы можете такие спеки создавать. А именно, вам нужно, а, нейросетий объяснить, что у вас за проект. То есть обычным текстом либо голосовым сообщением. Это вообще неважно. Неважно даже в какой нейросети, по большому счёту, в любой современной, там в топ-пять нейросетей, которые вы знаете. Допустим, GPT. Ну, сегодня мы раз про квен говорим, я в квенздам. То есть вам нужно наговорить, какой у вас проект, а объяснить, какие у вас будут экраны, то есть заранее подумать, какие вам нужны будут экраны, а в каком стиле. Может быть, у вас есть примеры таких сайтов или веб-приложений, на которые он должен ориентироваться. А заранее попросить его, допустим, а подбери мне, подбери современные технологии. налоги для создания веб-проекта, допустим, пиццерии. А можно таким образом сначала технологии подобрать? То есть вы должны описать, что вам нужно, какой функционал, а затем попросить сформировать для вас а спеку для нейросети, для вайп-кодинга. Таким образом, он создать именно в формате Markдаун, конечно же, просить. Э, таким образом он создаст для вас спеку. Далее вы можете попросить, а, чтобы он создал дополнительную спеку, чтобы, а, он шёл, то есть, по шагам относительно вашей предыдущей спеки. То есть вариации, как вы можете создавать эту спеку, огромное количество. То есть вы можете заранее вот подготовить все технологии, которые вам нужны. А, допустим, вот NOD JS что-то Progress SQL предлагает самые-самые различные технологии. То есть он даже учёл, что есть 152 ФЗ для скорости работы и скорости работы, что есть уведомление. То есть он всё это способен продумать за вас, а вам только потом нужно будет попросить его создать уже более подробно что-то. То есть я, например, сейчас наговорил в чате GPT а-а голосовое, примерно описал то, что мне нужно, и попросил это оформить в виде Markу File and MD. То есть это самый-самый примитивный вариант. Просто наговариваете, что вам надо, объясняете, из чего должен состоять проект, как именно выглядеть. Описываете логику, описываете функционал и далее просите

его сформировать MD файл по вашей вот этой вот спике. Ну, по- вашему, собственно, того, что вы наговорили ему, естественно. А если вы хотите подготовиться гораздо лучше, то вам необходимо сначала технологии узнать, как на каких лучше технологиях сделать, то есть пообщаться с ним. Я думаю, нейросети в современном мире вообще решают большинство ваших проблем, связанных вообще с вайп-кодингах, да, и не только, на самом деле, практически совсем. И вот он, собственно, создаёт для вас спеку, то есть какие технологии, что, где, когда, backend base и так далее, какие там таблицы будут. То есть он за вас это всё продумает и сейчас всё напишет. То есть вот она нам спекуту написали. Закидываете следующий промт. Я его также наговорил в чате GPT, то есть теперь использую предыдущую спеку. о чём я ему объясняю, чтобы он создал пошаговое руководство для, ну, ещё одну, ещё одну спеку пошаговому руководства, чтобы он это всё делал не зараз, а постепенно, ну, то есть итерациями, условно. И вот условно он написал теперь всё по шагам. То есть это roadmap разработки называется. И теперь он по шагам будет, ну, неросетка будет идти, смотреть шаги и всё это делать. Только единственное, что вообще всё это на английском надо. Я объясню, почему. И ещё он не в формате всё сделал. Нужно в формате Mark down точка MD. Объясняем то, что нам это нужно не просто текстом, а в формате маркдауна. Сейчас он всё это переделает. И затем мы эти два файлика можем отсюда взять, скачать. Вот я скачал первый. Сейчас он создаст, и мы скачаем второй. А вот и второй файлик в иде MD файла. Всё это мы тоже берём, открываем в папки. Нет, нам не надо в эскоде. Всё это берём, смотрим. Так, вот этот файл нам нужен первым. Здесь у нас будет А так, давайте отсюда начнём со второго файла. Здесь у нас будет steps, то есть шаги, а здесь у нас будет сам project. Далее вот эти вот файлы нам необходимо скопировать отсюда и закинуть наш проект. Вот он. Quincд Next Up. Сюда их закидываем. Далее нам нужно всего лишь объяснить нейросети, что от неё необходимо, и всё. Обязательно убедитесь, что вы находите в нужной папке, то есть Next Up. И далее мы напишем: "Создай проект, используй документацию проекта и MCP". И обязательно прикрепите ей, что за документация, а именно это у нас Так, это у нас Давайте я так пониже сделаю. Project MD. Вот так она выглядит. И Steps. Далее мы можем скинуть ей и всё. и она как бы прочитает сейчас эти файлики и поймёт, что нужно делать дальше. Как видите, она поняла, какие шаги нужны. Вот она всё по шагам разбила так же, как в степсах написано. И сейчас оно всё будет создавать по шагам. Таким вот образом. Всё, она уже поняла, что ей нужно установить. Как установить? Она сейчас это будет всё перепроверять 200 раз, я думаю. Понятно? А мы вернёмся к вообще к скилам, к MCP и так далее. Смотрите, чтобы понять, какой у вас проект, а, ну вот, допустим, вот я описал, да, уже проект, какой у нас существует. Давайте опираться от него. Теперь вы можете что сделать? Найди, найди в интернете, а, MCP и Skills длякодинга. Ищи на английском. Найди. А, найти, найди. Опять буду писать MCP skills. Ладно. Найдим себе skills, подходящее конкретно моему проекту. Напиши актуальный

список. То есть он сейчас пойдёт в интернет, посмотрит, какие вообще MCP есть. И опираясь на вот эту всю документацию, описание вашего проекта, он сейчас пойдёт и найдёт те скилы MCP сервера, которые необходимы именно вам, именно вашему проекту. То есть я таким образом вам рекомендую искать их. То есть не просто какие-то существующие, хотя это тоже вариант, как бы искать самые лучшие, использовать самые лучшие, но также вы можете вот таким способом воспользоваться. То есть найти те MCP, которые именно вашему проекту подходит. То есть он подобрал нам следующее. Model context прокоil. Файловая система даёт доступ к файловой системе, чтение запись. Подключает progress базы данных, веб-ресурсы гитрепозитори, долгая памяти сессия. То есть он нам уже под подбирает. Также он нам скилы, я так понимаю, тоже какие-то подбирает. Шат CN Superbй, конфигурация для запуска. Но я думаю, вы поняли. Также вот он нам написал, что нам нужно сразу же. Вот это вот можно просто скопировать в MCP вставить, это уже будет работать. Единственное, что здесь нужно поменять моменты, но, конечно, а лучше просить нейросеть какую-то помощнее, вам подбирать либо эти скилы, либо прямо писать, что как-нибудь вот так вот подбери мне скилы с этого сайта либо с каких-то подобных таких сайтов. На самом деле огромное количество существует, которые, а, хранят в себе списки MCP серверов и списки скилов. То есть их гораздо больше, но Квен, ну, не самый лучший для подбора таких систем. Я просто вам показал как вариант. Лучше, конечно, использовать клод либо GPT. Они более лучше списки подбирают, более из актуальных, более актуальные. Также помимо этого способа существуют лайфхаки в виде заранее подготовленного промта для создания промтов. Например, вот у меня есть промтн, я его сюда закидываю файликом и пишу: "А, помоги создать промт для, мм, для нейросети, для создания веб-приложения пиццерии". Допустим, это может быть что угодно, не обязательное веб-приложение пиццерия, это может быть мобильное приложение или всё, что вам необходимо. Может, автоматизация какая-то. Отправляете и сейчас он прочитает этот промген файл и поможет нам создать наш проект. То есть он будет нам задавать вопросы, и уже на основе этих вопросов создаст другой промт. Вот он. Приветствует. Я промт инженер, архитектор Промтов. Чтобы спроектировать эффективную архитектуру промта, ответьте на пять следующих вопросов. А масштаб и функционал. Что именно должно включать приложение? Только лендинг смену или полноценная корзина. Вот. И он вас будет опрашивать таким образом. И, соответственно, вам вы сможете как бы создать уже свой промт более интересный, более крутой, потому что здесь хотя бы есть вопрос, на который вы можете ответить. Итак, я ему ответил на его вопросы, и, соответственно, он сейчас нам либо создаст уже готовый промт, либо начнёт задавать другие вопросы. И таким образом мы шаг за шагом придём к тому, что он для нас создаст какой-то хороший промт, отвечая, ну, когда мы будем отвечать на его вопросы, он будет это учитывать при создании своего промта. И вот такой вот он нам простой промт подготовил, что типография, типографика, вернее, визуал, много воздуха, то есть Italian Premium, а какой фреймворк, какой язык, стили, иконки и так далее. То есть вот такой вот он нам промт может написать, если мы будем использовать для этого заранее подготовлен промт для создания промтов. В общем-то, у нас, кстати, уже проект полностью готов. Вот он написал, что он его сделал. В общем, можно его посмотреть. Для этого мы открываем новый терминал. Пишем здесь SD. Вот эти файлы и сам проект. Я оставлю ссылку на него у себя в Telegram-канале, если вам интересно. Итак, def quen cod

next up. Открываем. И здесь пишем следующую команду. На самом деле эти команды можно узнавать у самой NРC, но я и так её знаю. NPM run de. И сейчас он у нас проект должен был запустить, но не запустил, потому что я ошибся и он мне не открыл проект. Да. Вот теперь Next. Теперь я пишу NPN Runf. Так. И он запустил проект. Теперь нажимая на вот этот локальный хост, у нас откроется наша пиццерия. Что мы тут видим? А, видим мы у нас следующее. У нас здесь слайдеры есть. Так, пиццы со стоков. Он взял картинки, кстати, это видно. Так, ну тут всё работает. Так, а давайте в корзину добавим. Так, добавлено. Так, напитки тоже всё со стоков это взято. Десерты тоже какой-нибудь десерт возьмём. Ну, в целом получилось, ну, прилично. Так, посмотрим, работает ли всё. Так, здесь у нас, допустим, цену побольше. Так, допустим, пинокота мы не будем. Доставка 30 минут оформить зака. Ну да, в принципе, всё работает, всё классно, всё круто получилось. Такая вот у нас пиццерия по нашей спеке получилась. Ну что ж, вот такое вот видео. Если оно вам понравилось, было полезно чем-то, то ставьте лайки, подписывайтесь на канал, обязательно оставляйте комментарии. А что вам, может быть, ещё рассказать? Может быть, чему я уделил меньше внимания? Чему стоило бы больше внимания уделить? Расскажите, как вы подготавливаете свои проекты, какие используете скилы, какие используете, а, MCP, это всё будет полезная информация. Я вас благодарю ещё раз за просмотр. До скорых встреч. Пока. y