UI за 30 минут: как не-дизайнер делает интерфейсы в 2026 году

Раньше я заказывал дизайн у специальных людей. Они требовали детальное ТЗ, рисовали его 3 недели, возвращались с правками. В 2026 году всё изменилось.

Покажу на живом примере. Допустим хотим UI для голосового агента. Сейчас у нас стандартный компонент ElevenLabs — серый интерфейс с невзрачным кружком. Работает, но выглядит как MVP из 2019 года. Хочется сделать его красивее.

🔍 Шаг 1: Референсы за 5 минут

Открываю Mobbin — библиотеку из 100 000+ скриншотов реальных приложений. Даша, спасибо за наводку. Вбиваю в поиск conversation call and chat.

Нахожу примеры интерфейсов чатов и голосовых ассистентов. Скачиваю 1-2 референса, которые цепляют визуально.

💡 Главный инсайт: референсы важнее промптов. AI-инструменты в дизайне UI уже отлично понимают картинки, но плохо — абстрактные описания вроде «сделай красиво». То есть либо скриншоты, либо описываете констрейты текстом.

🤖 Шаг 2: Описание текущего состояния

Прежде чем просить новый дизайн, нужно зафиксировать что есть. Открываю Claude Code и прошу:

Я хочу попросить обновление дизайна у разработчиков на React. 

Нужна спецификация: какие элементы есть, что они содержат, чтобы сохранить логику фронтенда.



Можешь описать что сейчас в интерфейсе? 

Ответ положи в UI.md

Получаю структурированный текст: список компонентов, их состояния, свойства. Это критически важно — новый дизайн должен сохранить всю функциональность.

⚡ Шаг 3: Параллельный запуск AI-агентов для дизайна

Открываю сразу три инструмента:
🔸 Lovable
🔸 Google Antigravity с Gemini Pro
🔸 Figma Make

В каждый загружаю референсы + описание компонентов + промпт:

Есть задача обновить UI компонент ведения диалога, 

который уже существует на сервере. 



Требования:

- Тёмная тема

- Красивые шрифты

- Блок с диалогами справа на всю высоту для десктопа

- Индикатор голосового ассистента с волнами звука, 

  с динамикой

- На мобильных: Chat First, индикатор голоса небольшой 

  где-то вверху страницы



Текущий набор компонентов:

{{СОДЕРЖИМОЕ README}}



Референсы дизайна приложил. Не обращай внимания 

что один чёрный, другой белый — верь моим указаниям.

⏱️ Шаг 4: Ждём 2-3 минуты

Результаты очень разные. Конкретно сейчас так:

Lovable — победитель. Сгенерировал красивый интерфейс с анимированными волнами.

Figma Make — неплохо, но Lovable показался интереснее.

Google Antigravity с Gemini Pro — сгенерировал что-то странное. В других проектах он показывал отличные результаты.

💡 Вывод: полезно запускать сразу несколько инструментов параллельно. Результаты непредсказуемы, качество зависит от типа задачи. Один из них точно попадёт.

🚀 Шаг 5: Перенос в проект

Выгружаю результат Lovable в GitHub (там есть кнопка), клонирую локально. Открываю новую сессию Claude Code:

/add-dir {{Путь к lovable-export}}


Перенеси компоненты из lovable-export в основной проект.

Сохрани существующую логику, замени только визуальную часть.

Claude Code сам разберётся какие файлы куда переносить и как адаптировать импорты.

✅ Готово

30 минут от идеи до работающего интерфейса. Без дизайнера, без ТЗ на 10 страниц, без трёх недель ожидания.

💰 Смета эксперимента

🔸 Mobbin — $15/мес (опционально, можно искать референсы в Dribbble бесплатно)
🔸 Lovable — $20/мес (но может хватить и бесплатного тарифа)
🔸 Google Antigravity — $20/мес
🔸 Claude Code — $200/мес (Claude Max, но хватит и версии за $20)

Если у вас уже есть Claude — дополнительные расходы $55. Только подумайте, даже с комиссией помогаторов с Авито — это около 5-6 тысяч рублей. А сколько вы платите дизайнеру?

🧠 Мысли по итогам

1️⃣ Скриншоты лучше тысячи слов.

2️⃣ Фиксируйте текущее состояние до старта.

3️⃣ Запускайте параллельно. Результаты непредсказуемые, это казино.

5️⃣ Интеграция в порект отдельно. С бекендом только Антигравити хоршо справится.

А вы уже пробовали вайб-кодить интерфейсы? Какие инструменты зашли? Делитесь в комментариях — интересно сравнить опыт.

----

Поляков считает — AI, код и кейсы