Вайб-кодинг для новичков: с чего начать

Вайб-кодинг — это создание программ с использованием искусственного интеллекта. Обычно в роли ИИ выступают LLM — Large Language Model, или большие языковые модели. Неважно, просите вы сделать небольшую функцию или сайт целиком, это всё равно считается вайб-кодингом. В таком подходе нет ничего стыдного или плохого, и сегодня почти все программисты хотя бы частично вайб-кодят.

Теоретическую часть мы разбирали подробнее отдельной статье про вайб-кодинг, а в этой у нас практика. Посмотрим на несколько популярных платформ и попробуем сделать копию нашего сайта thecode.media. Первую версию сайта сделаем за 15 минут без установки IDE и других сложных инструментов.

Единственное правило на сегодня — сами делать ничего не будем. Ну, кроме запросов.

Почему джуну сейчас никуда без вайб-кодинга

Раньше было проще:

Получалось так: выучил язык → выучил фреймворк → начал писать.

Сейчас технологий слишком много, чтобы выучить всё и сразу начать программировать. Гораздо проще разбираться на ходу. Это значит не то, что можно устроиться на работу с нулевым знанием кода, а то, что выучить всё до первой работы программистом сейчас нереально. 

Есть и другие аргументы, почему для специалистов уровня junior вайб-кодинг сейчас практически обязателен. Например, ИИ обеспечивает разработчика хорошими примерами, на которых можно выучить большую часть теории. Реальные проекты могут устареть, иметь непонятную документацию и логику работы программы. В них может просто не хватать деталей, чтобы помочь усвоить нужные и полезные материалы.

Джун редко ценится за свою экспертность, потому что у него пока мало опыта. Важнее, как быстро человек учится, понимает новое, исправляет ошибки, задаёт вопросы. И работа с ИИ тут хорошо помогает: тренирует мышление, учит чётко формулировать задачу. 

Ключевая идея, которую сейчас поддерживают многие компании: 

Парное программирование с ИИ

Классическое парное программирование появилось раньше искусственного интеллекта. Как это выглядело: два разработчика делают одну задачу за одним компьютером. Да, сидя рядом. При этом один пишет код, а второй следит за логикой, отслеживает ошибки и думает о следующем шаге. Каждые 20–30 минут они меняются.

У такого метода было много плюсов: меньше багов, распространение знаний в команде, обучение опытными специалистами джунов.

С ИИ парное программирование выглядит немного иначе, но общий подход похож.

Человек формирует задачи, понимает цели и контекст, несёт ответственность.

Компьютер пишет код, предлагает улучшения, напоминает устойчивые паттерны, задаёт уточняющие вопросы.

Нужно ли понимать синтаксис для такой работы?

Нет, не нужно. Но если вы хотите понимать, что сделала нейросеть, то желательно. Можно не разбираться в программировании вообще, а отслеживать результаты только по тому, что видно и работает. Но главное, что начинать работать можно на обычном человеческом языке уже сейчас или вообще голосовые промпты.

Топ-3 бесплатных инструментов для первого вайб-кодинга

Чтобы сделать что-то самому, используя вайб-кодинг, нужно выбрать инструмент. Можно начать с нескольких моделей в открытом доступе и с бесплатными тарифами.

Cursor или Cursor Composer — скачиваем приложение для своей системы с сайта и устанавливаем. Работает с включённым интернетом.

Это чат с ИИ, который понимает ваш проект. Его можно попросить: «Создай сайт магазина товаров для животных, где можно посмотреть галерею товаров, написать в чат поддержки, оставить отзыв и заказ». Система всё сделает, проект можно корректировать и поправлять.

Если хотите попробовать, советуем для начала посмотреть 15-минутное видео о главных возможностях Cursor (осторожно, Ютуб!).

Ссылка на страницу документации со ссылкой для скачивания: cursor.com.

Replit Agent — облачная IDE, которую не надо скачивать, а можно просто открывать и пользоваться. Можно писать код и разворачивать целые приложения.

Ссылка на сервис: replit.com

Claude.ai, или Claude Sonnet — LLM, которая некоторыми считается лучшей для программирования на Python. Claude генерирует более понятные и лаконичные скрипты. Мы не можем подтвердить это или опровергнуть, поэтому попробуйте.

Ссылка на сервис: claude.ai.

Cursor, вайб-кодинг и промпты

Показываем на практике. Для примера установим локально на машину Cursor и попросим собрать копию нашего сайта.

Шаг 1: скачиваем Сursor.

Шаг 2: устанавливаем на компьютер, чтобы можно было открыть и увидеть главное окно.

Шаг 3: готовим промпт. Нейросети лучше всего понимают тот язык, на котором они были обучены, и для Cursor родной язык — английский. 

Применяем правила запроса: пишем точно, детально и поэтапно. Ещё сразу подумаем наперёд и снимем возможные трудности. Если Cursor попробует просто копировать наши статьи и изображения, то может столкнуться с ограничением авторских прав — не на нашем сайте, а в своей системе. Обычно это чётко прописано в правилах инженерами машинного обучения. Поэтому сделаем по-другому и попросим сделать сайт, который будет похож на thecode.media, но не будет точной копией.

Ещё для составления запроса и совета можно использовать другую нейросеть, например ChatGPT. Можно написать свой запрос и попросить его улучшить.

Короче, наш полный промпт:

Create a single-page landing (homepage only) inspired by https://thecode.media.
Constraints (important):
- Do NOT copy any texts, images, logos, icons, or proprietary assets from the site.
- Do NOT reproduce any specific article titles or identifiable content.
- Use original placeholder content written in a similar editorial tech-magazine tone (generic topics like programming, AI, security, career, product, etc.).
- Match the layout, spacing rhythm, typography hierarchy, and overall visual vibe.
- Use an approximate color palette inspired by the site (not necessarily identical). Implement colors as CSS variables (design tokens) so I can tweak them.
Deliverable:
- One responsive homepage (desktop + mobile) that looks and feels like a clean editorial tech magazine.
Sections to include (homepage):
1) Top header (logo placeholder + navigation + search/cta placeholder)
2) Featured/hero block (main featured article card)
3) Article grid (mix of large and small cards)
4) Optional: categories/tags strip + newsletter block
5) Footer (links + small text)
Tech stack:
- Prefer Tailwind CSS (or plain HTML/CSS if you think better for pixel-perfect control)
- Minimal JavaScript (only for small UI interactions, no frameworks)
- No backend
Tasks:
1) Briefly describe the page structure and breakpoints (desktop/tablet/mobile)
2) Propose reusable components (Header, FeaturedCard, ArticleCard, Tag, Footer)
3) Generate the full starter code (index.html + styles.css or Tailwind setup)
4) Explain what to edit to change colors, fonts, spacing, and content safely

Cursor уйдёт проверять наш сайт. Нужно подтвердить:

Какое-то время нужно дать нейросети подумать и всё сделать, но не очень долго:

Первый результат — файл разметки HTML и документация README.md. Чтобы запустить, открываем папку проекта и запускаем в браузере index.html. Выглядит пока сыро, но в целом структура уже похожа:

Шаг 4: попросим перевести всё на русский и добавить изображения. Cursor не умеет рисовать изображения, но может составить иллюстрации из SVG-файлов. Ещё можно настроить интеграцию с бесплатными фотостоками, но это сложнее. Если предложить выбрать «или-или», нейросеть почти наверняка выберет сделать абстрактные иллюстрации из SVG.

Итоговый промпт для следующего шага:

Translate all content into Russian
For images:
- Use abstract gradients, SVG placeholders, or generic stock placeholders
- Define exact aspect ratios for each image block
- Add comments explaining what type of image should go there

Cursor выполняет инструкции и отчитывается. Также видно, сколько строк прибавилось и убавилось в каждом файле.

Запускаем и смотрим, что изменилось:

Это уже больше похоже на исходный сайт. Сейчас видно, что не хватает самих статей и возможности открыть разделы вверху: «Статьи», «Темы», «О нас», «Контакты».

Шаг 5: составляем следующий промпт и просим расширить проект. Сразу объясняем, что нужно добавить возможность открытия статей и категорий. На всякий случай говорим, что это просто статичный сайт без бэкенда, но должна быть возможность масштабирования в будущем.

Extend the project with navigable page templates.

Goals:
- The homepage should link to article pages and section (category) pages
- Clicking an article card opens an article template
- Clicking a section/category opens a section listing template
- This is still a static site (no backend), but structured as if it could be connected to a CMS later

Pages / templates to create:
1) Home page
2) Article page template
3) Section (category) page template

Routing:
- Use simple static routing:
  - article.html (or /articles/[slug].html style)
  - section.html (or /sections/[slug].html style)
- Use placeholder slugs (e.g. article-1, ai, backend, career)

Content:
- Use generic placeholder editorial content
- Same tone and structure as a tech magazine
- Do NOT copy real article texts or titles

Customization:
- Centralize colors, fonts, spacing using CSS variables or Tailwind config
- Article and section metadata should be easy to change (title, date, tags, author, excerpt)

Tasks:
1) Propose the folder and file structure
2) Describe how navigation between pages works
3) Generate the templates (HTML + CSS)
4) Explain how to add new articles and sections later

Cursor добавляет новые файлы и подробно рассказывает об изменениях и том, как ими пользоваться. Для примера он добавил только одну статью, но нам пока хватит и этого:

Проверяем результат и видим, что кнопки категорий не работают. Говорим об этом и просим исправить. Для мелких правок вполне допустимо использовать голосовые промпты, модель поймёт вас даже с небольшими ошибками восприятия. Так Cursor транскрибировал наш голосовой запрос на русском:

Parts Static topics about us. and contacts do not open if you click on them. Can you fix it?

После этого кнопки категорий заработали:

Шаг 6: разворачиваем сайт в интернете. Cursor не может довести ваш проект до финальной ссылки в интернете, но может сделать всё, чтобы облегчить этот процесс.

Для публикации сайта хорошо подходят две платформы: Netlify и Vercel. Просим помочь, всё подготовить и объяснить, что делать дальше:

Prepare this project for deployment and give me step-by-step instructions
to publish it as a public website.

Constraints:
- Static site only (HTML/CSS/JS)
- No backend
- Free hosting

Preferred platforms:
- Netlify or Vercel

Tasks:
1) Ensure the project structure is deploy-ready
2) Add any necessary config files (if needed)
3) Explain the exact steps to deploy (from zero)
4) Tell me which files/folders to upload or connect
5) Explain how I will get the public URL

Cursor готовит папку проекта и объясняет все шаги.

Нужно только зарегистрироваться на сервисе и перетащить папку в окно загрузки:

Наша готовая ссылка: https://earnest-alpaca-17ed57.netlify.app/. Адрес можно поменять, если хотите красивое имя:

Готовые промпты для других проектов

Вот несколько готовых полезных промптов, которые можно отправить в платформы для вайб-кодинга, чтобы получить первый результат. Потом его можно оставить, доработать или вообще переделать.

Лендинг портфолио разработчика 

Показывает готовые работы, аккуратность, умение соблюдать правила хорошего кода.

Вариант 1: бэкендерский. Фокус на ясности, структуре, серьёзности. Просим сделать строго и профессионально, без лишнего дизайна.

Create a clean and minimal developer portfolio landing page.

Focus on:
- clear typography
- strong information hierarchy
- minimal colors
- emphasis on projects and skills, not decoration

Tech:
- HTML + CSS (or Tailwind)
- No animations unless necessary
- Fully responsive

Include sections:
- Intro / role
- Selected projects
- Skills & tools
- Contact links

Вариант 2: с фокусом на архитектуру и техническое письмо. Показывает умение мыслить и доносить информацию, а не просто писать код.

Design a developer portfolio landing page inspired by editorial tech magazines.

Focus on:
- article-style layout
- readable text blocks
- project descriptions as stories
- calm editorial visual style

Include:
- Featured project section
- Short technical essays or notes
- Projects presented like articles

Вариант 3: в стиле презентации продукта. Фокус на ценности специалиста.

Create a portfolio landing page that presents the developer as a product-minded engineer.

Focus on:
- explaining problems and solutions
- outcomes instead of tech stack lists
- clear calls to action

Sections:
- What problems I solve
- Case studies
- Tools I use
- Contact / collaboration

Телеграм-боты

Полезный тип проектов с большим количеством потенциальных клиентов и доступных вариантов реализации.

Бот 1: стабильно работающий шаблон с несколькими командами, которые потом можно переписать под свои задачи.

Create a simple Telegram bot that solves one practical daily problem.

Requirements:
- Python
- Clear command structure
- Error handling
- Simple logging

Examples:
- reminders
- note saving
- daily summaries

Бот 2: объясняющий и обучающий техническим темам.

Build a Telegram bot that helps users learn a technical topic step by step.

Features:
- short explanations
- examples
- quiz-style interaction
- simple state management

Topic can be programming, CS basics, or tooling.

Бот 3: интеграционный. Можно соединить с внешними API и системами:

Create a Telegram bot that integrates with an external API.

Requirements:
- async requests
- environment variables
- clear separation of logic
- graceful API error handling

Example use cases:
- GitHub activity
- weather
- news

Проекты с нейросетями

Целиком свою нейросеть делать не будем, потому что это долго, но кое-что попробуем.

Нейросеть 1 — минимальная. Подходит для ознакомления и обучения на небольших датасетах. Полезно для понимания основ.

Implement a simple neural network from scratch using Python and NumPy.

Goals:
- understand forward and backward pass
- no ML frameworks
- clear comments and explanations
- small toy dataset

Нейросеть 2 — более инженерная. Показывает структуру проекта и пайплайн работы.

Create a small end-to-end ML project:
- data loading
- preprocessing
- training
- evaluation

Use a simple model and focus on code clarity, not accuracy.

Нейросеть 3 — как часть продукта. Создаём проект со встроенной нейросетью. Это хороший пример для обучения, потому что прокачивает понимание устройства реально существующих коммерческих проектов с ИИ.

Wrap a simple trained model into a small API service.

Requirements:
- FastAPI
- prediction endpoint
- clear request/response models
- explanation of limitations

Бесплатный вайб-кодинг без Cursor 

Если не хотите устанавливать на локальную машину Cursor, можно без него. Просто зайдите на онлайн-платформы Replit или Claude, и через 15 минут у вас будет примерно такой же результат.

Самые частые ошибки при вайб-кодинге

Главная ошибка — это полностью доверять ИИ всю работу и не проверять её. Если поискать, в сети уже можно найти истории стартаперов, которые запускали бизнес целиком на вайб-кодинге без тестирования и в итоге потеряли деньги.

Простой вайб-кодинг подходит для небольших проектов, где вы ничем не рискуете. Для чего-то серьёзного использовать его тоже можно и даже нужно, но только для ускорения работы. Финальный результат должна проверять хорошая команда тестировщиков.

Лучше всего научиться хотя бы немного понимать код и после каждого промпта уделять время, чтобы разобраться, как всё работает. Так вы будете знать, как работает система, и заодно расти как специалист.

Другая распространённая ошибка — пытаться за один промпт получить всё. Правильнее мыслить короткими итерациями и шагами. Получили код — разобрались, что он делает, — работаете со следующим шагом.

Не ошибка, но тоже важно: не упускайте возможность накапливать знания. Если вы ведёте проект на вайб-кодинге, начните вести пусть небольшую, но документацию. Записывать после каждой сессии 1–2 ключевые мысли в README.md — уже хорошо.

Правильные промпты и неправильные

Дальше несколько примеров, которые показывают хорошие и плохие запросы. Обратите внимание, что необязательно использовать какой-то из хороших примеров в качестве целого промпта. Чем подробнее и точнее вы объясните задачу ИИ, тем ближе к запланированному получится результат.

Плохо: написать слишком абстрактно.

Build a backend service

Хорошо: объяснить цель.

Build a small backend service that demonstrates webhook handling
for a junior portfolio project.

Тоже хорошо: указать ограничения.

Create a simple REST API for a small internal tool,
no authentication, no database, single-user usage.

Плохо: попросить слишком много за раз.

Build a full production-ready system

Хорошо: заказывать за раз небольшие итерации.

Build a minimal working version.
Non-goals: scalability, high availability, complex security.

Плохо: не объяснить роль ИИ.

Do it correctly

Хорошо: объяснить, в роли кого выступает сервис вайб-кодинга.

Act as a senior backend engineer reviewing a junior’s approach.

Плохо: указать размытый стек технологий.

Use modern tools

Хорошо: точно сказать, что надо использовать.

Use Python 3.11 and FastAPI.
Avoid additional frameworks unless clearly justified.

Плохо: доверить всё ИИ без проверки.

Implement the logic

Хорошо: уточнить, как можно проверить всё самому.

Explain how I can manually test this functionality.