Summary of "Делаем бесплатным вайб-кодинг: Пошаговая настройка 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.mdfiles and loaded by Qwen. - Project spec & Steps:
project.md(Markdown project specification) andsteps.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
- Install Node.js (latest).
- Install Qwen CLI (run the install command from Qwen CLI docs in your terminal).
- Authenticate: run the Qwen command, follow the link to Qwen chat in your browser, and confirm/create an account.
- Configure Qwen CLI UI settings (for example, change theme and CLI language via the settings command).
- Create a project:
- Use Qwen CLI to create an empty Next.js project (for example: “create an empty NextJS project”).
cdinto the project folder and initialize the project so the agent recognizes the repo.
- 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
npxcommand 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
/skillsdirectory; each skill is askill.mdfile 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
/skillsfolder (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.mdandsteps.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 devand 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
- Install Node.js -> install Qwen CLI -> authenticate.
- Configure CLI UI (language/theme) -> create project via Qwen (Next.js).
cdinto project -> initialize Qwen in the project.- Create
.qwen/settings.json-> add MCP configuration (use thenpxtemplate). - Restart Qwen CLI ->
qwen mcp list(verify connections). - Add
/skills/<skill>/skill.mdfor needed capabilities. - Produce
project.mdandsteps.md(via chat/LLM) and place them into the project. - Run Qwen “create” (or appropriate command) referencing the docs/specs -> let the agent implement.
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).
Category
Technology
Share this summary
Is the summary off?
If you think the summary is inaccurate, you can reprocess it with the latest model.
Preparing reprocess...