Промпт со скриншотом работает точнее любого текстового описания: нейросеть видит композицию, цвета и отступы, а не собирает интерфейс из усредненного шаблона. Чтобы получить нужный UI без десяти переделок, к скрину добавляют три вещи. Опорную картинку через символ @ или Ctrl+V, референс-ссылку на чужой экран или фрейм Figma и текстовое описание состояний loading, error и empty. Ниже разберем каждый способ по шагам и покажем формулировки, готовые к копированию.
Визуальный промпт = скриншот + референс-ссылка + описание состояний UI. Скрин задает вид, ссылка на Figma через Dev Mode MCP отдает структуру и токены, а состояния loading, error и empty закрывают то, чего на одной картинке не видно. Такой набор сокращает число итераций и убирает переделки. В статье: механика @, работа с референсами, таблица состояний и разбор ошибок.
Почему нейросети мало текстового описания интерфейса?
Текст описывает намерение, скриншот показывает результат. Картинка задает точную композицию, палитру и типографику, которые словами передать почти нереально без десятка уточнений.
Опиши словами «карточка товара с кнопкой», и получишь одну из тысячи усредненных карточек. Дай скриншот, и нейросеть увидит конкретное: отступ 16 пикселей, тень под кнопкой, шрифт заголовка. Разница в числе итераций огромная. По практике команды VibeCoderz, детальный промпт со скрином закрывает экран за одну-две правки вместо восьми.
Но у скриншота есть слепая зона. Он показывает застывший кадр, а поведение остается за кадром. Что происходит при наведении, как ведет себя кнопка в неактивном состоянии, что видит человек, пока грузятся данные. В гайде по Figma MCP разработчики прямо советуют добавлять к визуалу описание того, как элемент должен вести себя, выравниваться и реагировать (Figma, mcp-server-guide). Картинка плюс слова о поведении. Только так модель собирает живой интерфейс, а не статичный макет.
Как прикрепить скриншот к промпту через @ в Cursor?
Три рабочих способа: вставить картинку через Ctrl+V прямо в чат, перетащить PNG в окно или сослаться на файл в проекте через символ @ и его имя.
В Cursor версии 3.1 картинка прикрепляется к промпту напрямую. Скопировал скрин в буфер, кликнул в поле ввода, нажал Ctrl+V. Второй путь - перетащить PNG из папки. Символ @ работает иначе: он ссылается на то, что уже лежит в проекте. Пишешь @ и имя файла, и нейросеть подтягивает его как контекст (docs.cursor.com).
Здесь есть нюанс, о который спотыкаются новички. В режиме Agent прикрепленная картинка иногда не долетает до модели, если бросить ее только в поле чата. Надежнее сохранить скрин в проект, а потом сослаться через @имя-файла. То же касается Claude Code: он читает вложения, но структурированный путь через @ дает стабильнее результат, чем drag-and-drop.
Лайфхак из разбора роликов по design-to-code: перед скрином подчисти лишнее. Обрежь картинку до нужного блока, обведи проблемный элемент маркером. Модель фокусируется на том, что ты выделил, а не на всем окне сразу.
Как дать нейросети референс-ссылку на нужный интерфейс?
Референс-ссылка передает больше, чем скриншот. Ссылка на фрейм Figma через Dev Mode MCP отдает нейросети структуру макета: имена компонентов, отступы, токены цветов и шрифты.
Скриншот - это пиксели, из которых модель угадывает размеры. Ссылка на Figma-фрейм через официальный Dev Mode MCP - это данные. Сервер стримит в контекст нейросети слои, переменные и стили напрямую из файла (figma.com/blog). Из структуры код выходит точнее, потому что модель не додумывает, а читает реальные значения.
Механика простая. Копируешь ссылку на фрейм в Figma и вставляешь ее в чат Cursor с подключенным MCP. Дальше два правила из практики. Первое: держи в Figma авто-макеты и переменные, они работают как флексбокс и помогают модели понять раскладку. Второе: явно проси тянуть alias- и brand-коллекции, а не хардкодить hex. Если в коде вместо ссылки на токен всплыл голый цвет вроде #1A1A1A, значит нейросеть не разобрала дизайн-систему, и промпт надо доработать.
Dev Mode MCP официально работает с Cursor, Windsurf, Claude Code и Copilot. По состоянию на июль 2026 сервер бесплатен на время беты для тарифов с Dev-местом.
Как описать состояния экрана loading, error и empty?
Состояние - это то, чего нет на статичном скрине. Опиши словами, что видит человек при загрузке, при ошибке и когда данных ноль. Иначе нейросеть нарисует только основной экран.
Самая частая дыра в собранных нейросетью интерфейсах - отсутствие состояний. Модель получает один скриншот заполненного экрана и считает задачу закрытой. А продукт живет в трех других режимах: пока грузятся данные, когда пришла ошибка и когда список пуст. Опиши каждый прямо в промпте, и переделывать на проде не придется.
Вот карта состояний, которую стоит прогонять по каждому экрану.
| Состояние | Что показать пользователю | Формулировка в промпте |
|---|---|---|
| Загрузка (loading) | скелетоны блоков или спиннер, а не белый экран | «Пока грузится лента, показывай скелетоны карточек» |
| Пусто (empty) | иллюстрация, пояснение и кнопка действия | «Если постов нет - иконка и кнопка "Создать первый пост"» |
| Ошибка (error) | текст проблемы плюс кнопка повтора | «При ошибке сети - "Не удалось загрузить" и кнопка "Повторить"» |
| Неактивно (disabled) | приглушенный элемент, который нельзя нажать | «Кнопка "Оплатить" серая, пока форма не заполнена» |
| Успех (filled) | нормальный экран с данными | приложить скриншот основного состояния |
Проговори эти пять строк по каждому ключевому экрану. На форме оплаты, в ленте, в профиле. Пять минут текста экономят половину правок после сборки.
Как собрать визуальный промпт пошагово?
Порядок такой: опорный визуал, затем стек и структура, затем все состояния, потом итерации по одному элементу и фиксация стиля через JSON дизайн-системы.
Разберем последовательность, которую команда VibeCoderz гоняет на новых проектах. Каждый шаг убирает конкретный класс переделок.
Шаг 1. Прикрепи опорный визуал и назови стек
Кидаешь скриншот референса через Ctrl+V или ссылку на Figma-фрейм. Сразу указываешь фреймворк и подход к верстке: React, Tailwind, флексы или грид. Без опоры модель соберет средний шаблон, а без стека начнет тянуть случайные библиотеки. Одна фраза «React, Tailwind, темная тема, тянуть токены из файла» уже задает рамку.
Шаг 2. Опиши состояния и итерируй по одному
Перечисляешь loading, error и empty для каждого экрана по таблице выше. Дальше правишь результат порциями. Сделал скрин проблемного места, обвел элемент, описал словами что не так, отправил одну правку. Инструменты хуже справляются, когда просишь поменять сразу пять вещей. На третьей итерации все обычно встает на место.
Максим: «Ребят, это работает: чем точнее показываешь нейросети, что хочешь на выходе, тем меньше итераций. Веб-версию GoBanana я собрал за 3 часа, 6-8 часов на весь продукт, который принес 12 млн. Экономия не в скорости печати, а в том, что не переделываешь по десять раз».
Какие модели лучше всего читают скриншоты интерфейса?
Все флагманы 2026 года читают картинки, но по-разному тянут сложные макеты. Для многокомпонентного UI бери Opus 4.7, для ежедневной сборки - Sonnet 4.6, для десятков экранов разом - Gemini 3.1 Pro.
Мультимодальность стала стандартом, разница в глубине понимания. Opus 4.7 точнее разбирает вложенную структуру и попадает в детали сложного экрана. Sonnet 4.6 дает лучший баланс цены и качества для потока однотипных карточек. Gemini 3.1 Pro держит контекст 1M токенов, поэтому в него можно закинуть всю дизайн-систему сразу и не резать ее на куски.
| Модель | Сила по визуалу | Цена (in/out за 1M) | Когда брать для UI |
|---|---|---|---|
| Claude Opus 4.7 | сложные вложенные макеты | $5 / $25 | многокомпонентный экран, точность в деталях |
| Claude Sonnet 4.6 | универсальный баланс | $3 / $15 | ежедневная сборка типовых экранов |
| Gemini 3.1 Pro | много скринов разом, 1M контекст | $2 / $12 | большая дизайн-система, десятки экранов |
| GPT-5.4 | UI плюс логика вместе | $2.5 / $15 | экран и его поведение в одном заходе |
Цены и версии приведены по состоянию на июль 2026, у Anthropic все модели читают изображения нативно (docs.claude.com). Полный список инструментов и моделей лежит в каталоге AI-инструментов на портале.
Какие ошибки убивают точность визуального промпта?
Три главные: менять сразу много всего одним промптом, кидать голый скрин без описания поведения и не готовить Figma-файл к чтению нейросетью.
Первая ошибка - пакетные правки. Просишь поменять цвет, шрифт, отступы и добавить анимацию в одном сообщении. Модель хватается за что-то одно, остальное теряет. Дроби на отдельные итерации.
Вторая - расчет на то, что скриншот скажет все сам. Не скажет. На картинке не видно, что кнопка при клике должна показывать спиннер, а поле при ошибке краснеть. Эти вещи договаривают текстом рядом со скрином.
Третья касается работы через Figma. Если в макете нет авто-макетов и переменных, нейросеть не поймет раскладку и насыпет случайных отступов. Готовь файл заранее: компоненты для повторяющихся элементов, переменные для всех чисел, авто-лейаут для контейнеров. Тогда код с первого раза ложится в дизайн-систему, а не мимо нее.
Честная оговорка: даже идеальный промпт не отменяет ревью. Первый результат правят почти всегда. Визуальный контекст не убирает итерации, он их сокращает и делает предсказуемыми.
FAQ
Как прикрепить скриншот к промпту в Cursor? Скопируй картинку в буфер и нажми Ctrl+V прямо в поле чата, либо перетащи PNG в окно. Файл, который уже лежит в проекте, подтягивается через символ @ и его имя. В режиме Agent картинку надежнее сначала бросить в проект, а потом сослаться на нее через @.
Чем референс-ссылка лучше обычного скриншота? Скрин отдает только пиксели, из которых модель угадывает размеры. Ссылка на фрейм Figma через Dev Mode MCP передает структуру: имена компонентов, отступы, токены цветов и шрифты. Из данных код получается точнее, чем из картинки на глаз.
Как описать состояние загрузки в промпте? Скажи прямо, что видит человек, пока данных нет. Например: пока грузится лента, показывай скелетоны карточек, а не пустой белый экран. Без такого указания нейросеть рисует только основной экран и забывает про loading.
Почему нейросеть игнорирует часть скриншота? Обычно просят изменить сразу пять вещей одним промптом. Модель берет одну, остальное теряет. Дроби правки по одной за итерацию и указывай на конкретный элемент словами, а не только картинкой.
Какая модель лучше читает скриншоты интерфейса? Для сложного многокомпонентного макета - Claude Opus 4.7. Для ежедневной сборки экранов хватает Sonnet 4.6. Если скринов десятки и нужна вся дизайн-система разом, бери Gemini 3.1 Pro с контекстом 1M токенов.
Нужно ли знать код, чтобы давать визуальный промпт? Нет, скриншот, референс и описание состояний работают на обычном русском. Но понимание того, что такое компонент и состояние экрана, режет число итераций в разы. Инструменты вроде v0 и Lovable собирают UI по картинке даже без единой строчки кода.
Скриншот или Figma-ссылка - что выбрать? Скриншот быстрее для разовой правки или чужого референса из интернета. Figma-ссылка через MCP точнее, когда у тебя есть свой макет и важна попиксельная сборка с токенами. На практике их комбинируют: ссылка для структуры, скрин для быстрых уточнений.
Глоссарий
Визуальный промпт - запрос к нейросети, где вместе с текстом идет картинка: скриншот, скетч или ссылка на макет.
Референс-ссылка - ссылка на чужой интерфейс или на фрейм Figma, которую нейросеть использует как образец.
Состояние UI (state) - режим экрана: загрузка, ошибка, пустой список, заполненный экран, неактивный элемент.
Скелетон (skeleton) - серые заглушки блоков, которые показывают пользователю, пока грузятся реальные данные.
MCP (Model Context Protocol) - стандарт, по которому внешние сервисы отдают нейросети структурированный контекст. Figma Dev Mode MCP так передает данные макета.
Дизайн-токен - переменная стиля: цвет, отступ, размер шрифта. Вместо голого hex код ссылается на именованный токен.
Авто-макет (Auto Layout) - функция Figma, которая раскладывает элементы как флексбокс в вебе и помогает нейросети понять структуру.
С чего начать прямо сейчас
Собери один экран по этой схеме и сравни с тем, как делал раньше. Возьми скриншот референса, добавь стек, пропиши три состояния, итерируй по одному элементу. Разбор конкретных IDE под такую работу лежит в каталоге инструментов VibeCoderz, а если делаешь интерфейсы под конкретную нишу, загляни в каталог AI-агентов.
Хочешь разложить свой продукт по полочкам и понять, где визуальный промпт сэкономит вам недели, запишитесь на консультацию к Максиму: t.me/maxnagovitsyn.
Материал команды VibeCoderz. Обновлено: июль 2026.