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

High-level purpose

This guide walks through installing and configuring the Qwen CLI (local agent/assistant) to perform automated, agent-driven “vibe-coding” (wipe-coding). The workflow:

• Create a Next.js project from a written project spec.
• Connect external tools (MCPs) and pre-written agent Skills.
• Run and iterate the resulting app locally.

The demo used Qwen free model (Qwen 3.5+). The presenter stated roughly 2,000 free requests/day (can be increased by swapping accounts).

Key product and technology concepts

• Qwen CLI: a command-line interface that runs a Qwen-based coding agent, configures UI/settings, creates projects, and runs agents that read project specs and act.
• MCP (Machine Control Points): external connectors/servers the agent can use. Examples: Git providers, file system access, browser automation (Playwright), DB connectors, long-session memory, documentation providers. MCPs extend the agent’s capabilities (read/write repos, open pages, run automation, access docs).
• Skills: packaged, pre-written prompts + instructions/examples that the agent can use as capabilities (for example, React/Next helper skills). Stored in a /skills folder as skill.md files and loaded by Qwen.
• Project spec & Steps: project.md (Markdown project specification) and steps.md (step-by-step roadmap) that the agent reads to implement the project iteratively.
• Prompt engineering / meta-prompts: a “prompt-for-prompts” file that asks structured questions so the agent can generate a refined prompt tailored to your app (frameworks, UI style, features).

Prerequisites

• Node.js (use the latest version).
• A terminal (Windows/Mac) and a code editor (Visual Studio Code recommended).
• Qwen CLI installation command (copied from Qwen docs / CLI page).
• Authentication via the Qwen chat web page (confirm/create account after installing the CLI).

Installation & initial setup

1. Install Node.js (latest).
2. Install Qwen CLI (run the install command from Qwen CLI docs in your terminal).
3. Authenticate: run the Qwen command, follow the link to Qwen chat in your browser, and confirm/create an account.
4. Configure Qwen CLI UI settings (for example, change theme and CLI language via the settings command).
5. Create a project:
   • Use Qwen CLI to create an empty Next.js project (for example: “create an empty NextJS project”).
   • cd into the project folder and initialize the project so the agent recognizes the repo.
6. Create .qwen/settings.json (a dot folder plus settings.json) to store local Qwen config.

MCP installation & connection

• Read Qwen docs (the demo used Russian docs) for MCP integration templates.
• MCP template pattern: an npx command is typically used to register MCPs (e.g., npx <mcp-install> with arguments). Multiple MCPs can be comma-separated in the config.
• Example MCP in the demo: a “visual enhancer” MCP that provides React/Next components (author referred to it as “shcn” / “shn” as an example).
• After editing settings, exit and restart Qwen CLI so it connects to MCPs.
• Run qwen mcp list (or equivalent) to confirm MCPs are connected and to view available tools/prompts.

Skills creation & installation

• Skills live under a /skills directory; each skill is a skill.md file containing description, instructions, and examples.
• You can download existing skills (the presenter used mcpmarket.com as an example marketplace) and place them into your project’s /skills folder (e.g., skills/react/skill.md).
• Reload or reinitialize Qwen for skills to become available to the agent.

Creating the project specification and roadmap

• Use any modern LLM/chat (Qwen, GPT, Claude) to describe your project: features, screens, tech choices, and examples.
• Ask the model to produce:
  • project.md — project specification in Markdown describing architecture, tech stack, tables, endpoints, pages, styles.
  • steps.md — a step-by-step development roadmap with iterative tasks.
• Save these Markdown files in the project folder and attach/reference them when running the Qwen agent.

Agent execution workflow

• Tell Qwen CLI to create the project, reference project.md and steps.md, and include configured MCPs/Skills.
• The agent:
  • Reads the specs and roadmap.
  • Selects required MCPs/Skills.
  • Runs tasks iteratively (double-checks, runs installs, modifies files).
• Qwen can automatically search for and suggest MCPs/Skills relevant to the project. The presenter recommended searching for MCPs/Skills in English and suggested using GPT/Claude for better selection.

Prompt engineering workflow

• Upload a prompt template that asks structured questions (the demo’s example asked five key questions about scope and functionality).
• The agent asks you those questions, then generates a high-quality prompt to drive the coding process.
• This meta-prompt method customizes the generated prompt to your needs (UI visuals, frameworks, icons, styles, etc.) and improves results.

Example outcome (demo)

• The presenter built a pizzeria Next.js app using this workflow.
• Started the dev server with npm run dev and previewed the site on localhost.
• Demo features shown: sliders, product images, add-to-cart, and cart flows — the site worked according to the spec.

Recommendations, caveats, and tips

• Always use the latest Node.js.
• Use an editor like VS Code to view and edit generated project files.
• Qwen free tier is useful but limited; better MCP/skill selection may be achieved with more powerful LLMs (Claude, GPT).
• Search for MCPs/Skills in English for better results — many MCP lists and skill marketplaces exist.
• Use structured Markdown specs and step roadmaps — the agent executes more reliably when given formatted instructions.
• Be aware that some names/terms in video transcripts can be OCR/mis-transcriptions; assume references to Qwen CLI, MCP examples, and skill marketplaces.

Note: transcript contains some auto-generated inaccuracies (e.g., “shcn”, “QVN”, “Quen”). Treat these as likely misspellings or OCR errors.

Quick checklist to replicate

1. Install Node.js -> install Qwen CLI -> authenticate.
2. Configure CLI UI (language/theme) -> create project via Qwen (Next.js).
3. cd into project -> initialize Qwen in the project.
4. Create .qwen/settings.json -> add MCP configuration (use the npx template).
5. Restart Qwen CLI -> qwen mcp list (verify connections).
6. Add /skills/<skill>/skill.md for needed capabilities.
7. Produce project.md and steps.md (via chat/LLM) and place them into the project.
8. Run Qwen “create” (or appropriate command) referencing the docs/specs -> let the agent implement.
9. npm run dev -> test the app on localhost.

Primary speaker and sources

• Speaker: Kostya (presenter).
• Tools / sources referenced: Qwen CLI (Qwen 3.5+), Qwen chat web auth, Qwen documentation (Russian), MCP servers and marketplaces (example: mcpmarket.com), Node.js, Next.js, Visual Studio Code, Playwright (example browser-control MCP), GPT/Claude (for MCP/skill selection).