Конспекты
Смарт-конспекты YouTube-видео — ключевые идеи и инсайты без необходимости смотреть часовые ролики
Загрузка...
Смарт-конспекты YouTube-видео — ключевые идеи и инсайты без необходимости смотреть часовые ролики
Пошаговая настройка Quen-Code: установка Node.js, подключение MCP-серверов, настройка Skills и создание проектов на Next.js с помощью AI-агента.
🎯 О чём этот конспект: Подробное руководство по установке и глубокой настройке Quen-Code — бесплатной альтернативы платным AI-редакторам. Разбирается работа с моделью Qwen 2.5 Coder (2000 запросов в день), подключение MCP-серверов, создание кастомных навыков (Skills) и генерация технической документации (PRD) для автоматической сборки проектов.
👤 Кому будет полезно: Вайбкодерам, разработчикам и энтузиастам, которые хотят создавать IT-продукты с помощью AI-агентов без затрат на подписки типа Cursor или Windsurf.
✨ Что получите: Готовую рабочую среду с настроенным терминалом, подключенными инструментами визуализации (shadcn/ui) и пошаговый алгоритм создания SaaS-проекта (на примере приложения пиццерии) с нуля.
Контекст: Quen-Code — это CLI-инструмент (интерфейс командной строки), который превращает ваш терминал в мощного AI-помощника. Для его работы критически важно наличие свежей версии Node.js. Основное преимущество — доступ к мощной модели Qwen 2.5 Coder с лимитом 2000 бесплатных запросов в сутки, что значительно превышает бесплатные лимиты конкурентов.
Выгода: Полностью бесплатный доступ к топовой open-source модели для кодинга без необходимости оплаты зарубежных сервисов.
Как применить:
sudo в начале):npm install -g @quen/codequen в терминале. Откроется браузер для подтверждения аккаунта (нужно войти через GitHub или Google на сайте Quen)./settings. Выберите тему (например, Dracula) и установите язык UI на Русский. Нажмите Ctrl+S для сохранения и Ctrl+C для выхода, затем перезапустите quen.Результат: Готовый к работе терминальный AI-агент с русскоязычным интерфейсом.
Контекст: MCP — это стандарт, позволяющий нейросети подключаться к внешним инструментам: файловой системе, GitHub, браузеру или библиотекам компонентов. В видео рассматривается подключение shadcn/ui через MCP, что позволяет нейросети не просто писать код, а использовать готовые визуальные компоненты профессионального уровня.
Выгода: AI получает «глаза» и дополнительные «руки», что на порядок повышает качество верстки и функционала.
Как применить:
.quen и внутри неё файл settings.json.settings.json следующий код для подключения сервера shadcn:/mcp listРезультат: В списке должен появиться shadcn с доступными инструментами. Теперь AI может самостоятельно устанавливать и настраивать UI-компоненты.
Контекст: Skills — это структурированные инструкции (промпты) в формате Markdown, которые объясняют нейросети, как именно работать с конкретным стеком (React, Next.js, Python). Это позволяет избежать «галлюцинаций» и заставляет AI следовать лучшим практикам разработки.
Выгода: Повышение точности кода и соблюдение архитектурных стандартов проекта.
Как применить:
.quen создайте папку skills.react-expert) и поместите туда файл skill.md.skill.md:# React Expert Skill
---
## Description
Инструкции по созданию высокопроизводительных компонентов на React.
---
## Instructions
1. Используй только функциональные компоненты.
2. Обязательно типизируй пропсы через TypeScript.
3. Используй Tailwind CSS для стилизации.Результат: AI-агент начинает действовать как узкопрофильный эксперт в выбранной технологии.
Контекст: Чтобы AI не совершал ошибок, ему нужно скормить два файла: project.md (что мы строим) и steps.md (в каком порядке). Автор рекомендует использовать ChatGPT или Claude для генерации этих файлов: просто наговорите голосом описание проекта и попросите оформить в Markdown.
Выгода: Проект собирается итерациями, что минимизирует ошибки в логике и архитектуре.
Как применить:
project.md.steps.md.Создай проект, используя документацию проекта и MCP.
Файлы: project.md и steps.md. Иди строго по шагам.Результат: AI начнет последовательно выполнять задачи: от инициализации репозитория до финальной верстки страниц.
В: Что делать, если команда quen не распознается после установки?
О: Убедитесь, что путь к npm-пакетам добавлен в системную переменную PATH. Также попробуйте перезагрузить терминал или использовать команду npx @quen/code.
В: Можно ли использовать Quen-Code для существующих проектов?
О: Да. Перейдите в папку проекта через cd, запустите quen и выполните команду /init. AI проанализирует структуру файлов и будет готов к работе.
В: Как увеличить лимит в 2000 запросов?
О: Лимит привязан к аккаунту. Вы можете выйти из текущего аккаунта и авторизоваться под новым, чтобы обнулить счетчик запросов.
В: Зачем нужен файл settings.json внутри папки .quen?
О: Это локальные настройки конкретного проекта. Там прописываются MCP-сервера и специфические параметры поведения AI, которые будут приоритетнее глобальных настроек.
В: Обязательно ли использовать английский язык в документации?
О: Желательно. Хотя интерфейс может быть на русском, технические задания (project.md) лучше писать на английском — модель Qwen 2.5 Coder точнее следует инструкциям на английском языке.
Конспект создан на основе видео «Настройка Quen-Code для вайб-кодинга» канала Костя. Все права на оригинальный материал принадлежат авторам. Источник: https://youtu.be/kgldtyFKCnU