Прототип в браузере за день, а не макет в Figma за неделю

Неделя в Figma. Показываю разработчикам. «Это нельзя реализовать». Корзина.

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

Проблема статичных макетов в Figma

Figma врёт. Красиво врёт, но врёт.

• Анимация в макете — это стрелочка и подпись «плавно». В браузере — 200 миллисекунд, которые чувствуешь.
• Форма в макете — идеальные данные. В браузере — «Иванов Иван Иванович» не влезает в поле.
• Загрузка в макете — мгновенная. В браузере — три секунды, пока юзер смотрит в пустоту.

Ты показываешь статичную картинку и говоришь: «Представьте, что тут плавный переход». Все кивают. А в проде — совсем другие ощущения.

Что такое вайбкодинг

Вайбкодинг — код не для прода, а для проверки ощущений. Без архитектуры. Без тестов. Работает в браузере — достаточно.

Термин придумал Andrej Karpathy: ты описываешь результат словами, AI генерирует код. Твоя задача — чувствовать и направлять, а не писать синтаксис.

Пример: редизайн онбординга

Старый процесс:

Неделя 1    ──▶    Figma-макеты  ──▶  Согласование  ──▶  Правки
Неделя 2    ──▶    Передача      ──▶  «Сложно» (Упрощение)

Результат:  Компромисс, который никого не радует

Вайбкодинг:

День 1      ──▶    Прототип в браузере (14:00)  ──▶ Slack-ссылка
                   Фидбек от PM (15:00)

День 2      ──▶    «Добавь анимацию»  ──▶  «Давай так и сделаем»

Результат:  Все видят живой результат за часы

Почему вайбкодинг работает для дизайнеров

1. Ты чувствуешь интерфейс, а не представляешь

В Figma ты думаешь, что 300ms — хороший timing. В браузере ты чувствуешь, что нужно 150ms. Эту разницу нельзя понять из макета.

2. Разговор с разработчиками меняется

Раньше:

Дизайнер: «Вот макет»
Разработчик: «Это сложно реализовать»
Неделя споров

С вайбкодингом:

Дизайнер: «Вот прототип, потыкай»
Разработчик: тыкает «А, вот что ты имел в виду! Код перепишу, но идею понял»
Дизайнер: «Релиз когда?»
Разработчик: «Пятница»

Работающий прототип — общий язык. Макет — твоя фантазия.

3. Итерации за минуты

В Figma: открыть файл → найти компонент → изменить → посмотреть.
В коде с AI: «Сделай отступ меньше» → готово.

Страхи дизайнера перед кодом

«Я напишу плохой код»

Отлично. Так и задумано.

Твой код — не для прода. Он для того, чтобы разработчик увидел, а не угадывал. Кривой код с правильной идеей ценнее красивого макета с непонятной.

«Это займёт больше времени, чем Figma»

С Claude Code — нет. Ты описываешь что хочешь, AI генерирует. Быстрее, чем расставлять constraints.

«Разработчики будут смеяться»

Они будут благодарны. Работающая идея лучше PDF с картинками.

Как начать вайбкодинг с Claude Code

1. Следующую идею — в терминал, не в Figma

Открой Claude Code и опиши:

«Карточка товара для интернет-магазина. Фото, название, цена, кнопка „В корзину“. Стиль как у Uniqlo — чистый, белый, воздух между элементами. При наведении — лёгкая тень, карточка чуть приподнимается.»

Через минуту — рабочий HTML. Не нравится? «Сделай кнопку крупнее». Итерация за секунды.

2. Описывай ощущения, не пиксели

Claude понимает дизайнерский язык:

«Хочу чтобы карточки появлялись плавно при скролле, как на Apple. Немного снизу вверх, с fade-in.»

«Сделай hover более выраженным — пусть карточка приподнимается и тень становится глубже.»

Ты описываешь как должно ощущаться — AI пишет код.

3. Итерируй голосом

Ты:       Сделай страницу онбординга — три шага, прогресс-бар сверху
Claude:   *генерирует*

Ты:       Шаги должны переключаться с анимацией слайда
Claude:   *добавляет*

Ты:       Прогресс-бар скучный, сделай как в Stripe — с градиентом
Claude:   *переделывает*

Результат: 10 минут — прототип для команды

10 минут — прототип для команды.

4. Покажи раньше, чем комфортно

Прототип на 30% готовности полезнее макета на 100%.

Практика: карточка товара за 10 минут

Без вайбкодинга:

1. Ресёрч конкурентов (день)
2. Три варианта в Figma (два дня)
3. Презентация команде (встреча)
4. Правки (день)
5. Передача в разработку

С вайбкодингом:

1. «Сделай три варианта карточки товара» — 10 минут
2. Скинул ссылки в Slack: «Потыкайте, какой лучше ощущается»
3. Команда выбрала, допилил детали — 30 минут
4. Разработчик взял код как референс

День вместо недели. И все видели живой результат.

Вывод

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

Вайбкодинг с Claude Code — не про код. Это про скорость итераций. Показать идею сегодня, получить фидбек, завтра показать лучше.

Завтра утром: открой терминал вместо Figma. Опиши Claude ту фичу, которую откладывал. Через 10 минут — ссылка в Slack. Через час — фидбек.

Через неделю расскажешь, что из этого вышло.