Урок 1: Vibe coding и дизайнер нового типа

Чему вы научитесь

• Понимать, что такое vibe coding и как он эволюционировал
• Видеть, как AI стирает границу между дизайном и разработкой
• Знать роль design engineer и почему она востребована
• Различать три уровня vibe coding: прототип, продакшен, ограничения

Что такое vibe coding

В феврале 2025 года Андрей Карпати — бывший директор AI в Tesla, один из основателей OpenAI — описал новый способ создания программ:

“Вы не пишете код. Вы описываете, что хотите. AI реализует. Вы смотрите результат и корректируете направление. Это не программирование — это vibe coding.”

Суть: вместо написания кода строчка за строчкой — разговор с AI на обычном языке. Объясняете, что нужно. AI генерирует работающий код. Проверяете результат, уточняете.

За полтора года vibe coding прошёл путь от катчфрейза до «Слова года» по версии Collins English Dictionary (2026). Это уже не хайп, а метод с формализованными workflow, зрелыми инструментами и production-ready результатами.

Для практики используем arckep.ru — все основные модели, без VPN, оплата рублями. Вы можете использовать любые другие сервисы.

Три уровня vibe coding

Ключевая ошибка — думать, что vibe coding либо «игрушка для прототипов», либо «замена программистов». Истина посередине. Есть три чётких уровня.

Уровень 1: Прототип (работает отлично)

Описываете идею — получаете работающую страницу за 5 минут. Лендинг, карточка товара, дашборд, портфолио. Результат можно показать клиенту, протестировать с пользователями, опубликовать.

Инструменты: Bolt, Lovable, v0.

Пример диалога с AI:

Вы: "Сделай лендинг для кофейни. Минималистичный стиль,
     тёмный фон, крупная фотография кофе сверху,
     меню из 6 позиций карточками, форма бронирования внизу."

AI: [генерирует работающую страницу с HTML, CSS, React]

Вы: "Карточки меню сделай в 3 колонки на десктопе,
     добавь цены, кнопку заказа на каждой."

AI: [обновляет страницу]

SaaS-дашборд — результат vibe coding (Nano Banana 2 через arckep.ru)

Уровень 2: Продакшен (работает с нюансами)

Полноценные веб-приложения: авторизация, база данных, API-интеграции. Работает, но требует понимания результата. Дизайнеру нужно хотя бы базовое знание HTML/CSS, чтобы проверять, что AI сгенерировал, и корректировать ошибки.

Инструменты: Cursor, Bolt Pro, Lovable Pro.

Уровень 3: Сложные системы (пока не работает)

Платёжные системы, мультитенантные SaaS, real-time приложения. Здесь vibe coding — помощник, но не замена инженера. AI генерирует отдельные компоненты, а архитектуру проектирует человек.

Грань дизайнер/разработчик стирается

До 2024 года работа над веб-проектом выглядела так:

Дизайнер               Разработчик
-----------            -------------
Figma макет     -->    HTML/CSS/JS
Прототип        -->    Фронтенд
Анимации        -->    JavaScript
Адаптивность    -->    Media queries

Каждая передача — потеря качества и времени. Разработчик интерпретирует макет по-своему. Дизайнер не может проверить код. Итерации длятся днями.

В 2026 году инструменты замыкают цикл:

Дизайнер + AI
-----------
Описание        -->    Lovable / Bolt  -->    Работающий сайт
Figma макет     -->    Figma Make      -->    React-код
Промпт          -->    v0              -->    Компонент UI

Один человек делает то, что раньше требовало двоих. Не потому что стал лучше программировать, а потому что AI взял на себя перевод «дизайн — код».

Design engineer — новая роль

Design engineer — специалист на стыке дизайна и разработки. Не чистый дизайнер, не чистый разработчик. Человек, который думает визуально, но создаёт работающие интерфейсы.

Что делает design engineer

• Создаёт не макеты, а работающие страницы
• Использует AI для генерации и доработки кода
• Понимает технические ограничения (но не пишет бэкенд)
• Итерирует быстро: идея — прототип — тест — правка

Почему эта роль растёт

Компании ищут людей, которые закрывают фронтенд-цикл целиком. Design engineer экономит коммуникацию между дизайнером и разработчиком. Vercel, Linear, Stripe нанимают design engineers как отдельную роль. Стартапы предпочитают одного design engineer двум специалистам.

Ключевые инструменты

Cursor — AI-IDE для design engineer

Cursor — форк VS Code с встроенным AI. Понимает весь проект: файлы, зависимости, структуру. Дизайнер описывает изменение — Cursor вносит правки с учётом контекста.

Чем отличается от Bolt/Lovable: Cursor работает с существующим проектом. Bolt и Lovable создают с нуля. Cursor — для доработки и поддержки.

Цена: от $20/мес.

Lovable — для тех, кто не хочет видеть код

Lovable генерирует веб-приложения из промпта. Встроенный визуальный редактор — можно доработать результат без кода. Самый дружелюбный к дизайнерам инструмент.

Цена: бесплатный тариф. Pro от $25/мес.

Bolt — для быстрых прототипов

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

Цена: бесплатный тариф. Pro от $20/мес.

v0 — для компонентов UI

v0 от Vercel генерирует React-компоненты из текстового описания. Идеален для отдельных элементов: карточки, формы, навигация, дашборды.

Цена: бесплатный тариф.

Как начать путь design engineer

Если вы дизайнер и хотите двигаться в эту сторону:

1. Попробуйте один инструмент — Lovable или Bolt (бесплатные тарифы, работают из браузера). Потратьте 30 минут на генерацию страницы.

2. Изучите основы HTML/CSS — не для написания кода, а для понимания результата AI. 1-2 недели. Бесплатно: htmlacademy.ru или freeCodeCamp.

3. Создайте 3-5 проектов — переведите свои макеты в работающие страницы через AI. Каждый проект — новый навык.

4. Освойте Cursor — когда простых промптов станет мало и захочется точнее контролировать результат.

Итоги

Vibe coding — не хайп, а зрелый метод с формализованными workflow. Инструменты 2026 года позволяют дизайнеру создавать работающие интерфейсы без программирования. Роль design engineer растёт, и вход открыт через Lovable, Bolt и v0. В следующем уроке разберём полную карту инструментов веб-дизайнера.