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

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

• Понимать, как vibe coding к 2026 году превратился из экспериментов в чате в инженерную дисциплину Design Engineer
• Избегать главной ловушки новичков — однотипного «фиолетового нейрослопа» со стандартными карточками shadcn/ui
• Составлять файл DESIGN.md (текстовый паспорт дизайн-системы из 6 обязательных блоков) и подключать его в v0, Lovable, Bolt.new, Google Stitch и Cursor
• Различать три уровня сложности задач и выбирать инструмент по архитектурному слою (Pick the tool by the layer, not the hype)

Что такое vibe coding в 2026 году

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

«Вы не пишете код строчка за строчкой. Вы описываете цель, смотрите живой результат, направляете агента и уточняете поведение. Это не традиционное программирование — это vibe coding».

За полтора года термин стал «Словом года» по версии словаря Collins и полностью перестроил работу продуктовых команд. Раньше дизайнер рисовал статичные прямоугольники в Figma, передавал макет фронтенд-разработчику и неделями ждал вёрстки, теряя по дороге половину задуманной микроанимации. В 2026 году специалист на стыке визуального вкуса и AI-инструментов (Design Engineer) сам собирает живой кликабельный продукт в браузере за один вечер.

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

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

Почему у 90% новичков получается одинаковый «фиолетовый нейрослоп»

Откройте десять случайных сайтов, сгенерированных новичками в Lovable, Bolt.new или v0 по промпту «Сделай современный SaaS-лендинг». Девять из десяти будут выглядеть как близнецы: кислотный сине-фиолетовый градиент (indigo-600 → purple-500), жирные размытые тени, огромные скругления rounded-2xl на каждой карточке и стандартные серые рамки библиотеки shadcn/ui.

Авторы практических руководств 2026 года On-Brand prototyping: styling AI apps like a pro и How to give your AI coding agent a real design system объясняют, почему так происходит и почему попытки исправить дизайн сообщениями в чате только ухудшают проект:

1. Без жёстких рамок модель скатывается к среднему по больнице. Когда в промпте написано абстрактное «сделай минималистично и премиально», языковая модель выбирает самые частотные классы Tailwind CSS из своей обучающей выборки — тот самый шаблонный фиолетовый градиент и дефолтный shadcn/ui.
2. Скриншоты не содержат дизайн-токенов. Даже если вы прикрепите в чат картинку красивого макета из Dribbble, ИИ видит только пиксели. Он начинает угадывать HEX-коды, размеры шрифтов и отступы на глаз. На первой странице он угадает 16px, а на второй поставит 24px.
3. Правки стилей в чате ломают соседние экраны. Когда вы пишете во фрейме чата «сделай эту кнопку темнее, а карточку компактнее», агент вешает точечные костыли (inline-стили и дублирующиеся классы) прямо на конкретный блок. Через пять таких итераций верстка рассыпается: на странице профиля кнопки остаются старыми, а на главной съезжает сетка.

Стандарт DESIGN.md — текстовый паспорт дизайн-системы для ИИ

В 2026 году индустрия решила проблему нейрослопа с помощью открытого стандарта DESIGN.md (github.com/dimabraven/design-md, duply.ai). Это обычный текстовый файл в формате Markdown, который кладётся в корень проекта или вставляется в самое первое сообщение для v0, Lovable, Bolt.new, Google Stitch или Cursor.

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

1. Цветовые токены с точными HEX и ролями (primary, surface, border, muted).
2. Типографическая шкала (гарнитуры, начертания, размеры в px/rem, межстрочный интервал и роль каждого уровня).
3. Правила отступов и скруглений (базовый шаг сетки, внутренние отступы контейнеров, радиусы углов).
4. Состояния компонентов (hover, disabled, empty, error для кнопок, полей ввода, карточек и таблиц).
5. Принципы сетки и плотности (ширина контейнера, число колонок, воздушность или плотность интерфейса, брейкпоинты).
6. Таблица ограничений «Можно / Нельзя» (Do / Don't), прямо запрещающая типичные клише генераторов.

Готовый русскоязычный шаблон DESIGN.md (скопируйте в свой проект)

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

# DESIGN.md — Паспорт дизайн-системы проекта

Инструкция для AI-агента: строго используй только указанные ниже токены, размеры и правила.
Запрещено придумывать собственные HEX-цвета, произвольные скругления и стандартные фиолетовые градиенты.

## 1. Цветовые токены и роли (Color Tokens)
- `background` (основной фон страницы): `#F8F7F4` (тёплый бумажный оттенок, не чисто белый)
- `surface` (фон карточек, модальных окон и боковых панелей): `#FFFFFF`
- `surface-elevated` (выделенные плашки и ховер-строки): `#F1EFEA`
- `text-primary` (основной текст и заголовки): `#141413`
- `text-muted` (вторичный текст, подписи, плейсхолдеры): `#6B6963`
- `primary` (главная акцентная кнопка и активные элементы): `#1E4D3B` (глубокий хвойный)
- `primary-foreground` (текст на акцентной кнопке): `#FFFFFF`
- `border` (тонкие разделители и рамки карточек): `#E4E1DA`
- `danger` (ошибки валидации и удаление): `#C93B2B` (фон ошибки: `#FDF2F1`)

## 2. Типографическая шкала (Typography Scale)
- Основной шрифт интерфейса (`font-sans`): `Inter` или системный гротеск, без засечек.
- Моноширинный шрифт для цифр, цен и кода (`font-mono`): `JetBrains Mono` (`tabular-nums`).
- **H1 (Заголовок экрана):** `32px` (`2rem`), `font-weight: 600`, `line-height: 1.2`, трекинг `-0.02em`.
- **H2 (Заголовок секции):** `22px` (`1.375rem`), `font-weight: 600`, `line-height: 1.3`.
- **H3 (Заголовок карточки):** `16px` (`1rem`), `font-weight: 600`, `line-height: 1.4`.
- **Body (Основной текст):** `15px` (`0.9375rem`), `font-weight: 400`, `line-height: 1.6`, цвет `text-primary`.
- **Caption / Label (Подписи и бейджи):** `12px` (`0.75rem`), `font-weight: 500`, `line-height: 1.4`, цвет `text-muted`.

## 3. Правила отступов и скруглений (Spacing & Radius)
- Базовый шаг сетки: `4px`. Допустимые значения отступов: `4, 8, 12, 16, 24, 32, 48, 64px`.
- Внутренний отступ карточки (`card padding`): `24px` на десктопе, `16px` на мобильных.
- Расстояние между карточками в сетке (`grid gap`): `16px` или `24px`.
- Скругление кнопок и полей ввода (`radius-sm`): `6px`.
- Скругление карточек и модальных окон (`radius-md`): `10px`.
- Тени: не использовать тяжёлые `shadow-lg` и `shadow-xl`. Границы блоков отделять рамкой `1px solid #E4E1DA`.

## 4. Состояния компонентов (Component States)
- **Кнопки (`Button`):** высота `40px`, горизонтальный паддинг `16px`.
  - `hover`: затемнение фона `primary` на 8% (`#173B2D`), плавный переход `150ms ease`.
  - `disabled`: прозрачность `opacity: 0.45`, курсор `not-allowed`, без ховер-эффекта.
- **Поля ввода (`Input`):** высота `40px`, фон `#FFFFFF`, рамка `1px solid #E4E1DA`.
  - `focus`: рамка `#1E4D3B`, кольцо фокуса `2px` с прозрачностью 15%.
  - `error`: рамка `#C93B2B`, под полем короткая подпись `12px` цвета `#C93B2B` с объяснением, как исправить.
- **Пустые состояния (`Empty State`):** если в таблице или списке нет данных, никогда не оставляй пустой белый блок. Выводи рамку `1px dashed #E4E1DA`, заголовок причины («Пока нет созданных проектов») и одну кнопку целевого действия.

## 5. Принципы сетки и плотности (Layout & Density)
- Максимальная ширина контента: `1200px`, выравнивание по центру, боковые поля `24px`.
- Сетка дашборда: 12 колонок на десктопе (`>= 1024px`), 2 колонки на планшете, 1 колонка на мобильном (`< 640px`).
- На одном экране не более **одной** главной акцентной кнопки заливки `primary`; все второстепенные действия оформляются как `outline` или текстовые кнопки.
- Все числовые колонки в таблицах (цены, даты, проценты) выравниваются по правому краю с включённым `tabular-nums`.

## 6. Таблица «Можно / Нельзя» (Do / Don't)
| Можно (Do) | Нельзя (Don't) |
|---|---|
| Использовать только HEX-коды из раздела 1 | Использовать стандартные сине-фиолетовые градиенты (`indigo/purple/violet`) |
| Разделять блоки чистыми рамками `1px solid #E4E1DA` и воздухом | Навешивать размытые цветные тени (`shadow-2xl`, `drop-shadow`) и неоновое свечение |
| Выводить реальные русскоязычные микротексты и числа | Оставлять рыбу `Lorem ipsum` или англоязычные заглушки в интерфейсе |
| Проектировать все 4 состояния (`default`, `hover`, `empty`, `error`) | Делать более 3 уровней вложенности карточек (карточка внутри карточки) |

Как передать DESIGN.md в инструменты вайб-кодинга

Пошаговый алгоритм подключения дизайн-системы в зависимости от выбранного сервиса (duply.ai):

1. В Lovable и Bolt.new (при старте проекта). Вставьте текст DESIGN.md в самое первое сообщение (или загрузите файл в настройки Project Knowledge / Guidelines) со словами: «Используй этот DESIGN.md как единственный источник правды для стилей. Применяй только указанные токены цветов и отступов, соблюдай таблицу Можно/Нельзя. Собери по этим правилам экран [описание экрана]».

2. В Vercel v0 (для генерации UI-компонентов). Приложите DESIGN.md к промпту секции. v0 автоматически переведёт ваши HEX-коды в CSS-переменные Tailwind (—primary, —background, —border), и все стандартные компоненты shadcn/ui мгновенно перекрасятся в ваш фирменный стиль.

3. В Google Stitch (режим Vibe Design). В мартовском обновлении 2026 года (Abduzeedo: Google Stitch and the Rise of Vibe Design) Stitch умеет сам извлекать DESIGN.md из любого существующего сайта по ссылке и экспортировать его по протоколу MCP напрямую в среду разработки.

4. В Cursor и Claude Code (при доработке репозитория). Сохраните файл DESIGN.md в корневую папку проекта. На каждой новой задаче ссылайтесь на него через символ @DESIGN.md и удерживайте дисциплину: если агент сгенерировал чужой цвет, не пишите «сделай серее» — напишите «Ты нарушил @DESIGN.md, замени цвет фона на токен surface-elevated».

Три уровня сложности и выбор инструмента по слою задачи

В индустриальном плейбуке Vibe Coding for Designers: A 2026 Playbook (brainy.ink, апрель 2026) сформулировано главное правило архитектора: «Выбирайте инструмент по слою задачи, а не по хайпу в соцсетях» (Pick the tool by the layer, not the hype).

Команды терпят неудачу, когда пытаются заставить один генератор делать всё: v0 не предназначен для проектирования баз данных, а Bolt.new — не среда для долгосрочной поддержки крупного продакшена.

Правило выбора инструмента по слою (Playbook 2026)

• Слой 1: Маркетинговый UI и отдельные React-секции → v0 (Vercel). Когда нужно за 3 минуты собрать идеальную таблицу тарифов, карточку товара, сложную форму или hero-блок на Tailwind и shadcn/ui, чтобы вставить код в проект.
• Слой 2: Быстрый интерактивный прототип в браузере к пятнице → Bolt.new. Когда нужно показать клиенту или инвестору живой сценарий из нескольких экранов с рабочей логикой прямо в браузерном контейнере (WebContainer) без настройки серверов. Как только прототип перерастает песочницу, код выгружают в репозиторий.
• Слой 3: Полноценный MVP с базой данных, авторизацией и ролями без программиста → Lovable. Лучший выбор для дизайнера или фаундера, которому нужно запустить первую рабочую версию продукта (v1) с реальными пользователями. Lovable автоматически поднимает бэкенд на Supabase, настраивает вход по почте, таблицы данных (CRUD) и права доступа (role-based access).
• Слой 4: Кастомный визуальный лендинг со сложной анимацией → Framer / Webflow. Когда проект — это имиджевый промо-сайт, портфолио или контент-платформа с CMS и плавной скролл-анимацией, где не нужна сложная серверная бизнес-логика.
• Слой 5: Развитие и поддержка существующего продукта → Cursor. Когда MVP уже запущен и нужно аккуратно править отдельные файлы в рабочем коде, не ломая архитектуру.