Полный гайд по Qwen CLI: настраиваем MCP, Agent Skills и Rules для реальной разработки
Что такое Вайб-кодинг
Вайб-кодинг (Vibe Coding) - это подход к программированию, при котором вы описываете желаемый результат на естественном языке, а ИИ (чаще всего языковая модель вроде Claude, ChatGPT, а в данной статье Qwen) генерирует за вас код.
Типичный процесс выглядит так: вы говорите что-то вроде «сделай мне лендинг с формой подписки и анимацией при скролле», ИИ выдаёт рабочий код, вы смотрите результат и уточняете - «сделай кнопку крупнее, добавь тёмную тему» и так далее. По сути, программирование превращается в диалог.
Это хорошо работает для прототипов, внутренних инструментов и небольших проектов. Для сложных продакшн-систем вайбкодинг пока скорее отправная точка (например, засетапить проект) - без понимания кода трудно отлаживать, масштабировать и поддерживать результат.
В этой статье разберёмся, как начать вайбкодить с Qwen CLI и абсолютно бесплатно: сделаем небольшое приложение и познакомимся с MCP, Rules и Skills.
Установка и настройка Qwen CLI
Что нам понадобиться:
После того как всё подготовили, необходимо в консоли установить qwen-code через npm:
npm install -g @qwen-code/qwen-code@latest
Как только пакет установится на вашу машину, можно приступать к вайб-кодингу, просто вызвав команду:
qwen
Но при первом использовании вас попросят авторизоваться. Выберите аутентификацию Qwen OAuth (бесплатно) и следуйте инструкциям для входа.
Вообще, что умеет Qwen Code:
- Создаёт фичи по описанию.
- Отлаживает и исправляет ошибки: опишите баг или вставьте сообщение об ошибке. Qwen Code проанализирует вашу кодовую базу, найдёт проблему и реализует исправление.
- Ориентируется в любой кодовой базе: Qwen Code учитывает всю структуру вашего проекта, может находить актуальную информацию в интернете, а с помощью MCP - подтягивать данные из внешних источников, таких как Google Drive, Figma и другие.
- Автоматизирует рутину: исправляйте мелкие проблемы с линтером, разрешайте конфликты слияния.
У Qwen CLI множество настроек, все можно посмотреть здесь. Чтобы перейти к настройкам, введите в консоли:
/settings
В основном в этих настройках нам понадобится поменять, например, тему, выбрать модель, язык интерфейса и так далее. Настроек много, советую всё потыкать.
MCP
MCP - это открытый стандарт, который позволяет ИИ-ассистентам безопасно подключаться к внешним источникам данных и инструментам. До появления MCP разработчикам приходилось писать уникальные плагины и коннекторы для каждой отдельной нейросети (отдельно для ChatGPT, отдельно для Claude, отдельно для локальных моделей).
Кратко: единый универсальный язык для общения ИИ с вашим компьютером и сервисами.
Для того чтобы использовать MCP с Qwen, необходимо создать папку .qwen, в которой будет храниться файл settings.json. В этот файл мы и будем добавлять коннекторы. Но где же их взять? Для этого есть сервис mcpmarket.com. На нём собрано множество MCP-сервисов, которые вы можете использовать в своей работе - подключиться к Figma, Blender, Playwright и пр.
Пример json'а с подключенным MCP:
{
"mcpServers": {
"pythonTools": {
"command": "python",
"args": ["-m", "my_mcp_server", "--port", "8080"],
"cwd": "./mcp-servers/python",
"env": {
"DATABASE_URL": "$DB_CONNECTION_STRING",
"API_KEY": "${EXTERNAL_API_KEY}"
},
"timeout": 15000
}
}
}
Больше можно прочитать в самой доке Qwen MCP.
Agent Skills
Это способ передать нейросети не просто «калькулятор» (или другие tools или тулзы, с помощью которых мы апгрейдим нашу нейронку), а целую методичку и набор инструментов, которые она сама достанет с полки ровно в тот момент, когда столкнется с профильной задачей.
Пример того как выглядит структура навыка:
.skills/
└── check-npm-deps/ # Папка конкретного навыка
├── SKILL.md # Главный файл с метаданными и инструкциями
├── package-template.json # Вспомогательный файл-шаблон
└── audit-script.sh # Исполняемый скрипт
У нас в примере, который мы рассмотрим позже, скиллы будут находиться в папке .qwen/skills.
Пример того, что содержится в SKILL.md:
---
name: your-skill-name
description: Краткое описание того, что делает этот навык и когда его использовать
---
# Название вашего навыка
## Инструкции
Предоставьте четкие пошаговые указания для Qwen Code.
## Примеры
Приведите конкретные примеры использования этого навыка.
Но как же работают навыки? Давайте рассмотрим на практике:
- Discovery: Когда ИИ-агент запускается, он не читает весь файл
SKILL.md. Он заглядывает только в его шапку (YAML frontmatter) и считывает name и description (описание). ИИ запоминает: «Ага, у меня есть навык check-npm-deps, который нужен для решения проблем сpackage-lock.jsonи зависимостями». Это занимает всего пару десятков токенов. - Matching: Вы пишете агенту: «У коллеги падает
npm install, проверь версии библиотек». - Activation. Модель понимает, что задача идеально ложится под описание навыка. Только в этот момент агент подтягивает в свой контекст всё содержимое файла
SKILL.md(подробные пошаговые инструкции) и получает доступ к скриптам в папке.
Где можно скачать готовые скиллы:
Здесь можно побольше почитать про Agent Skills:
Rules
Rules - это устав, должностная инструкция (звучит бюрократично, но так понятнее) и стандарты, которым ИИ подчиняется всегда.
Главное отличие таких правил в том, что они постоянно висят в контексте. При каждом вашем запросе, будь то «напиши функцию» или «почему падает тест», нейросеть сначала прогоняет свой ответ через фильтр этих глобальных инструкций.
Что обычно пишут в правилах:
- Технологический стек и архитектура: «Этот проект написан на Next.js 14 с App Router. Используй Tailwind CSS для стилей».
- Стандарты кодирования: «Никогда не используй any в TypeScript. Функции должны быть стрелочными. Ошибки всегда логируй через Sentry».
- Тон и формат общения: «Отвечай коротко. Давай только код без долгих извинений и объяснений, если я не попросил об обратном».
- Жесткие ограничения: «Никогда не удаляй таблицы в базе данных напрямую».
Разница между Skills и Rules.
-
Правило (Rule) скажет ИИ: «В этом проекте мы жестко фиксируем версии зависимостей. При добавлении новых библиотек никогда не используй знаки
^или~вpackage.json». Это базовый стандарт, который ИИ должен помнить всегда, чтобы потом система установила в точности те же зависимости, что и у вас. -
Навык (Skill) даст ИИ инструмент: Скрипт check-lockfile, который ИИ может по своей инициативе запустить, чтобы залезть в package-lock.json, проверить сложную структуру под-зависимостей конкретного пакета (например, строго ли там зафиксирована версия 0.21.1) и убедиться, что у коллеги при выполнении npm install ничего не сломается.
Чтобы задать правила для Qwen CLI, необходимо добавить файл QWEN.md (обязательно заглавными буквами). QWEN.md - это, грубо говоря, мастер-промпт проекта, который будет учитываться во время любого запроса.
После генерации кода мы должны перепроверить, что он там нагенерил, добавить свои правила и вычистить то, в чём он ошибся. Используйте обычный синтаксис Markdown, чтобы описать стандарты и ограничения. Вот пример того, как это можно структурировать:
# Session Rules
## Архитектура и стек
- Используй TypeScript и строгую типизацию. Никакого `any`.
- Пиши функциональные компоненты, не используй классы.
## Работа с зависимостями
**CRITICAL:** В этом проекте мы жестко фиксируем версии пакетов.
Никогда не используй плавающие версии (символы `^` или `~`) при добавлении библиотек. package-lock.json фиксирует точные версии (например, строго 0.21.1) всех установленных пакетов и их собственных под-зависимостей. ИИ-агент не должен нарушать этот механизм, чтобы когда коллега напишет `npm install`, система установила в точности те же зависимости, что и у остальных.
## Формат общения
- Выдавай готовый код без лишних извинений и долгих вступлений вроде «Конечно, вот ваш код».
- Логируй ошибки только через нашу внутреннюю систему, а не через `console.log`.
⚠️ Важный нюанс (Qwen CLI Trick)
У моделей семейства Qwen (особенно если вы используете локальные версии Coder) есть известная особенность — разработчики в сообществе часто жалуются на «избирательное выполнение правил». Нейросеть иногда «забывает» мягкие инструкции, увлекаясь написанием кода.
Чтобы Qwen CLI точно слушался, применяйте жесткий «инженерный» подход:
-
Используйте капслок для самых важных вещей: CRITICAL:, MANDATORY:, ALWAYS.
-
Если правило часто нарушается, добавьте приписку: - this is NON-NEGOTIABLE (это не обсуждается).
-
Давайте конкретный шаблон или пример прямо в тексте правила - моделям проще копировать паттерн, чем следовать абстрактному описанию.
Практика: создаем Next.js приложение (Зоомагазин) с нуля
Чтобы создать приложение, нужны требования. Писать их самим не хочется, поэтому делегируем задачу нейросети. Подойдет любая модель из топ-5, но в этом примере я использую DeepSeek для создания md-файлов.
Почему не Qwen? У него бывают сложности с рендерингом Markdown в веб-интерфейсе. Конечно, можно использовать CLI - кому как удобнее. Отправляем нейронке промпт и получаем структурированные требования.
Что мы сообщим нейронке:
-
Что у нас за проект.
-
Какой стек выбрать? (Тут мы тоже можем попросить нейронку подобрать технологии под наш проект).
-
Какие будут страницы.
-
Какой стиль.
-
и так далее.
Пример промта
Выступай в роли опытного системного аналитика и Product-менеджера. Составь подробный документ с требованиями (Product Requirements Document) для разработки веб-приложения интернет-зоомагазина. Ответ предоставь строго в виде кода для Markdown файла (.md).
Технологический стек: > - Фронтенд и серверная часть: Next.js, UI: Shadcn UI.
База данных: MySQL
Описание функционала и экранов:
Главная страница (Каталог):
Навигация в виде табов для быстрого перехода к категориям: Акции, Кошки, Собаки, Грызуны, Рыбы, Птицы, Ветаптека.
Компактный промо-слайдер со скидками (например, на корма, лекарства и спецпредложения). Не должен занимать весь экран.
Выдача товаров в виде сетки карточек. В карточке: фото, название, цена и кнопка добавления в корзину.
При клике на карточку осуществляется переход на страницу описания продукта.
Страница продукта:
Подробное описание товара, характеристики, увеличенное фото, цена.
Кнопка «Добавить в корзину» (с возможностью выбора количества).
Корзина:
Список всех добавленных товаров (с возможностью удалить позицию или изменить количество).
Общая итоговая сумма заказа.
Кнопка «Заказать». Опиши базовый флоу оформления заказа (ввод контактов, адреса доставки).
Требования к структуре генерируемого .md файла:
Обзор проекта и цели.
Пользовательские роли (Гость, Клиент).
Функциональные требования (постранично).
Нефункциональные требования (адаптивность под мобильные устройства, производительность).
Базовая схема базы данных MySQL (основные таблицы: users, products, categories, orders и их связи).
Передаем наш промпт нейронке и получаем такой ответ - просто превосходно:
Не забываем перепроверять то, что нам нагенерила нейронка. Но чтобы разработка шла гладко, необходимы четкие этапы. Попросим нейросеть на основе созданного md-файла составить пошаговый план.
Пример промпта:
Опираясь на предыдущие требования к зоомагазину, создай поэтапный план разработки.
Мне нужно, чтобы работа была разбита на множество мелких, логичных шагов (от инициализации проекта до настройки БД и верстки компонентов).
После каждого шага должны быть инструкции, как проверить промежуточный результат и отследить ошибки в терминале. Оформи ответ в виде Markdown-файла.
Опять перепроверим, что нам нагенерила нейронка. После того как мы получили требования, начнем вайб-кодить. Создаем проект в любой директории и добавляем два наших файла.
Но нам еще нужно донастроить наш проект. Создаем папку .qwen, а в ней - файл settings.json: здесь будут наши настройки для Qwen CLI. Первое, что мы сделаем, - это подключим MCP. Будем использовать Shadcn UI v4 MCP Server с помощью него визуал нашего приложения будет выглядить лучше.
Добавляем файл SKILL.md в нашу папку .qwen/fix. Навык возьмер отсюда https://mcpmarket.com/tools/skills/react-code-fix-linter.
Далее нам нужно объяснить нейронке, что мы от неё хотим.
Пример промпта:
Создай проект используя документацию проекта в файле @PRD.md
и следуя плану из файла @STEPS.md
И работа пошла - обратите внимание, что нейронка взяла план из нашего файла.
Получилось что-то такое.
Кстати, чтобы сделать проект, я потратил всего 12% контекста.
Так что эксперементируйте.
Заключение
Вот так, потратив минимум времени на рутину (и элегантно делегировав написание требований другой нейросети), мы с нуля подняли рабочий каркас Next.js-приложения. И всё это - не выходя из терминала и израсходовав всего 12% контекста!
Это больше не слепая генерация кусков кода формата «сделай мне красиво». В связке с Qwen CLI, жесткими правилами проекта (Rules), внешними коннекторами (MCP) и узконаправленными навыками (Skills) языковая модель превращается во вменяемого ассистента.
Да, результат всё еще нужно контролировать. Но согласитесь, выступать в роли тимлида, который просто ревьюит код и задает вектор (вайб!), гораздо приятнее, чем вручную настраивать роутинг и центрировать дивы.
Вы можете попробовать разные CLI: