Prompt дизайн интерфейса это набор техник, которые переводят визуальное намерение в текст так, чтобы AI-модель поняла именно то, что вы хотели, а не сгенерировала случайный вариант. Работает в связке с любым генератором: Lovable, Bolt, v0. Ниже три рабочие техники с примерами плохих и хороших промптов для лендинга, дашборда и формы.
Три техники решают проблему пустого промпта «сделай красиво»: reference sites (назвать похожие продукты), mood board словами (прилагательные с конкретикой) и дизайн-система в тексте (цвета, отступы, шрифты). В статье пять пар плохой/хороший промпт под разные типы интерфейса и таблица цен на Lovable, Bolt и v0 на август 2026.
Почему промпт «сделай покрасивее» не работает?
Модель не видит вашу картинку в голове. Без контекста и ограничений она достраивает интерфейс по самому частому паттерну в обучающих данных, а это редко совпадает с тем, что вы себе представляли.
Разработчики UX-промптов советуют начинать не с задачи, а с контекста: кто пользователь, зачем ему интерфейс, что он должен почувствовать. Без этого шага модель угадывает, и угадывает плохо в 8 случаях из 10.
Вайбкодер без дизайнерского опыта обычно пишет «сделай дашборд для аналитики» и получает нечто среднее между Excel и case study с Dribbble. Проблема не в модели, а в том, что запрос описывает функцию, а не ощущение и не референс. Разница огромная: функция это что кнопка делает, а стиль это как она выглядит и почему выглядит именно так.
Короче, если промпт можно было бы сказать клиенту вместо «сделай вау», а клиент бы переспросил «что конкретно», значит промпт слишком общий. Три техники ниже закрывают этот разрыв: reference sites дают модели готовый визуальный якорь, mood board словами переводит ощущения в конкретику, а дизайн-система фиксирует цифры так, чтобы интерфейс не расползался между экранами.
Что такое reference sites и как их вставить в промпт?
Reference sites это два-три реальных продукта, чей стиль близок к желаемому. Модель знает паттерны популярных сайтов лучше, чем абстрактные термины вроде «современный минимализм».
Назвать конкретный продукт работает точнее описания стиля словами. Формулировка «в духе Linear, но теплее по цветам» переносит плотность интерфейса, скругления и типографику Linear и одновременно меняет одну переменную, палитру. Абстрактное «минимализм» такой точности не дает.
Модель обучена на огромном количестве кода и скриншотов реальных продуктов, поэтому названия работают как готовый визуальный якорь. Если сказать «как Stripe», AI подтянет характерную сетку, воздух между блоками, сдержанную типографику. Это быстрее, чем описывать те же признаки своими словами, и почти всегда точнее.
Пара для лендинга:
- Плохо: «Сделай красивый лендинг для стартапа».
- Хорошо: «Лендинг в стиле Linear, но теплее по цветам: темный фон #0F0F0F, акцент #6366F1, шрифт Inter, много воздуха между секциями, скругления 8px, без теней на карточках».
Пара для формы:
- Плохо: «Сделай форму регистрации покрасивее».
- Хорошо: «Форма регистрации в духе Notion: поля с подписью сверху, минимум рамок, серая заливка при фокусе вместо синей обводки, кнопка на всю ширину внизу».
Как описать mood board словами без визуальной доски?
Вместо доски с картинками составьте список из 5–7 прилагательных, где каждое расшифровано конкретикой. Слово без пояснения модель интерпретирует по-своему и почти всегда не так, как вы задумывали.
Прилагательное «теплый» само по себе ничего не значит для генератора кода. А вот «теплый, приглушенные оранжевые и бежевые тона, не яркий оранж» дает конкретную палитру. Так же с «структурированный»: без пояснения это ничто, а с пояснением «четкая сетка, минимум декоративных элементов» это техническое задание.
Прием работает, потому что переводит эмоциональный язык дизайнера на язык токенов, который понимает модель: цвет, отступ, толщина линии. Каждое прилагательное в списке нужно раскрыть одной фразой на 5-8 слов, не больше, иначе снова получится абстракция.
Пара для дашборда:
- Плохо: «Дашборд должен выглядеть профессионально и современно».
- Хорошо: «Дашборд строгий: белый фон, один акцентный синий #2563EB только для активных элементов, серые линии графиков, без градиентов и теней, много белого пространства между карточками метрик».
Специалисты по UX-промптингу рекомендуют дополнительно ставить AI роль перед описанием, например «ты старший UX-дизайнер, который делает дашборд для маркетинг-менеджеров, отслеживающих конверсии». Роль плюс расшифрованный mood board вместе дают модели контекст, кто пользователь и как должен выглядеть результат, а не только список прилагательных.
Как зашить дизайн систему в промпт, чтобы интерфейс не расползался?
Явно укажите шкалу отступов, 3-4 hex-кода и по одному шрифту для заголовков и текста. Без этих цифр модель на каждой новой итерации генерирует случайные значения, и экраны визуально перестают быть одним продуктом.
Дизайн-система в тексте это не абзац прозы, а короткий список параметров: сетка отступов кратно 4px или 8px, палитра из 3-4 конкретных hex-кодов, один шрифт для заголовков, один для текста. Модель подставляет эти значения в каждый новый экран, вместо того чтобы каждый раз изобретать заново.
Без зафиксированных цифр разница между второй и пятой итерацией становится заметна невооруженным глазом: то скругления 4px, то 16px, то вдруг появляется третий шрифт. Пользователь такое считывает как несобранный, дешевый продукт, даже если логика работает идеально.
Вторая пара для лендинга:
- Плохо: «Добавь секцию с отзывами, тоже красиво».
- Хорошо: «Секция отзывов на той же сетке: карточки со скруглением 8px как в остальном интерфейсе, отступ между карточками 24px, тот же акцент #6366F1 для звезд рейтинга, шрифт Inter без изменений».
Вторая пара для дашборда:
- Плохо: «Сделай так же, но добавь фильтры».
- Хорошо: «Панель фильтров на той же сетке 8px, высота полей 40px как у существующих кнопок, тот же серый #E5E7EB для обводки, без новых цветов и без нового шрифта».
Максим: «Веб-версию GoBanana собрали за 3 часа после выхода модели. 6-8 часов суммарно на продукт, который принес 12 миллионов рублей. Быстро получилось именно потому, что заранее описали стиль и палитру текстом, а не подбирали на глаз каждый экран».
Lovable Bolt или v0 что выбрать под дизайн промпты?
v0 сильнее в чистых UI-компонентах на shadcn/ui, Lovable удобнее для полного продукта с базой данных, Bolt быстрее для одноразовых прототипов в браузере. Все три принимают одну и ту же логику reference sites и дизайн-системы в тексте.
| Инструмент | Сильная сторона в дизайне | Backend из коробки | Free тариф |
|---|---|---|---|
| v0 | Чистые компоненты shadcn/ui, импорт из Figma | Нет, только фронтенд | $5 в кредитах на месяц |
| Lovable | Визуальный редактор поверх сгенерированного макета | Supabase автоматически | 5 кредитов в день, до 150 в месяц |
| Bolt | Мгновенный запуск в браузере через WebContainers | Гибкий выбор фреймворка | 1M токенов в месяц |
Для лендинга или набора карточек v0 обычно дает более аккуратный результат с первой попытки, потому что модель заточена под shadcn/ui и токены Tailwind. Для продукта с формой регистрации, базой пользователей и оплатой удобнее Lovable: дизайн-промпт применяется сразу ко всему приложению, а визуальный редактор позволяет точечно поправить отступ мышкой, не переписывая весь промпт заново.
Bolt хорош, когда нужно быстро проверить гипотезу на разных фреймворках, React, Vue или Svelte, и выбросить прототип, если не зашло. Логика reference sites и mood board работает во всех трех одинаково, разница только в том, что именно инструмент делает с готовым описанием дальше.
Как чинить интерфейс, если AI выдал не то?
Не переписывайте промпт с нуля. Уточните одну деталь за раз и попросите модель объяснить, почему она выбрала именно этот вариант, это ускоряет сходимость к нужному результату в 2-3 раза.
Итеративный промптинг работает лучше одного идеального запроса. UX-специалисты советуют после первого результата задавать уточняющие вопросы точечно: «почему кнопка синяя, а не в акцентном цвете из палитры» вместо «переделай все». Модель объясняет логику решения, и по ответу видно, забыла она про дизайн-систему или интерпретировала ее иначе.
На практике это выглядит так: сначала фиксируете reference site и палитру, получаете первый вариант, затем правите по одному элементу за прогон, проверяя каждый перед следующим шагом. На третьей итерации обычно все встает на место, потому что модель уже держит в контексте предыдущие уточнения и не откатывается к случайным значениям.
Если результат стабильно уходит не туда, вернитесь на шаг назад и проверьте, не потерялась ли дизайн-система в длинном чате. Иногда проще начать новый диалог с тем же коротким списком параметров, чем распутывать десять сообщений с противоречивыми правками.
Цены на Lovable Bolt и v0 в 2026 году
По состоянию на август 2026 у Lovable четыре тарифа: бесплатный, Pro за $25 в месяц, Business за $50 в месяц и корпоративный по запросу, при этом кредиты списываются за каждое действие модели поверх подписки. У Bolt похожая структура: бесплатный тариф на 1 млн токенов в месяц, Pro и Teams на $30 за участника, а также тарифы Max для тяжелых проектов, где стоимость может доходить до 50-200 долларов в месяц в зависимости от объема токенов. У v0 пять тарифов от бесплатного до корпоративного, а Premium за $20 в месяц считается оптимальным для большинства одиночных разработчиков.
Цены и лимиты меняются часто, все три сервиса пересматривали тарифы минимум раз в 2026 году. Перед подпиской стоит свериться с официальной страницей цен каждого инструмента, а не ориентироваться только на цифры из статей.
Глоссарий
| Термин | Что значит |
|---|---|
| Reference site | Реальный продукт, чей визуальный стиль называют в промпте как ориентир |
| Mood board | Список прилагательных с расшифровкой, заменяющий визуальную доску настроения |
| Дизайн-система в промпте | Зафиксированные текстом отступы, палитра и шрифты для всех экранов продукта |
| shadcn/ui | Библиотека готовых React-компонентов, на которой строит верстку v0 |
| WebContainer | Технология запуска Node.js прямо в браузере, на которой работает Bolt |
| Дизайн-токен | Именованное значение стиля, например цвет или отступ, которое переиспользуется во всем интерфейсе |
Частые вопросы
Нужно ли знать дизайн, чтобы писать промпты для интерфейса?
Нет, базовые термины вроде отступа, палитры и шрифта осваиваются за один вечер. Reference sites вообще снимают необходимость описывать стиль своими словами, достаточно назвать похожий продукт.
Сколько прилагательных нужно для mood board словами?
Обычно хватает 5-7 прилагательных, каждое с короткой расшифровкой в 5-8 слов. Больше 7 модель начинает путать приоритеты и смешивать противоречивые характеристики.
Что делать, если AI игнорирует дизайн систему из промпта?
Проверьте, не потерялась ли она в длинном диалоге, и повторите список параметров коротко перед следующим запросом. Часто помогает начать новый чат с тем же описанием вместо продолжения старого.
Можно ли использовать один и тот же промпт для Lovable v0 и Bolt?
Логика reference sites и дизайн-системы переносится без изменений, синтаксис отличается по мелочи. В Lovable стоит держать логику в чате, а стиль и макет править через визуальный редактор.
Как понять, что референс подобран верно?
Если первый сгенерированный экран уже похож на то, что вы представляли, референс сработал. Если результат в целом мимо, попробуйте более узкий продукт вместо общего «в стиле минимализма».
Стоит ли указывать hex-коды или можно назвать цвет словом?
Лучше указывать конкретный hex-код хотя бы для акцентного цвета. Слово «синий» модель интерпретирует широко, а конкретный код фиксирует один и тот же оттенок на всех экранах.
Работает ли эта техника для мобильных интерфейсов?
Да, принцип тот же: reference site, расшифрованные прилагательные, зафиксированная сетка отступов. Разница только в том, что для мобильных стоит сразу указать минимальный размер тапа для кнопок.
Если хочется разобрать конкретный интерфейс вместе, загляните в каталог AI-инструментов на VibeCoderz или запишитесь на консультацию к Максиму.
Обновлено: август 2026.