Промпты для нейросетей
Промпты для дизайнеров и верстальщиков
Структура экранов, UX-тексты, дизайн-система и вёрстка — опишите задачу и получите разбор по делу
Начать пользоваться
Применение промптов
Как применять
Когда и как могут пригодиться промпты дизайнеру интерфейсов и верстальщику
Структура экранов
Блоки и состояния
Состав экрана под задачу пользователя, включая загрузку, пустой список, ошибку и отсутствие прав — то, о чём забывают до вёрстки.
Навигация
Информационная архитектура
Структура разделов и названия пунктов словами пользователей, с проверкой, за сколько кликов достигается цель.
UX-тексты
Кнопки и ошибки
Надписи, подсказки и сообщения об ошибках, которые объясняют, что произошло и что делать, без «упс» и «неизвестная ошибка».
Визуальный стиль
Палитра и шрифты
Цвета с кодами и проверкой контраста, пары шрифтов с размерами и интервалами — с объяснением каждого решения.
Исследования
Интервью и тесты
Сценарии интервью с вопросами о реальном опыте, а не о намерениях, и чек-лист того, что фиксировать при наблюдении.
Юзабилити-разбор
Где спотыкается пользователь
Экспертная оценка экрана по эвристикам с указанием критичности каждой находки и вариантом исправления.
Доступность
WCAG и контраст
Проверка по критериям уровня AA: контраст, зоны нажатия, работа с клавиатуры, порядок фокуса и поведение скринридера.
Вёрстка
HTML и CSS
Семантическая разметка и адаптивные сетки на Grid и Flexbox с состояниями наведения, фокуса и длинного текста.
Дизайн-система
Токены и компоненты
Токены цвета, типографики и отступов плюс описания базовых компонентов с правилом, когда их применять, а когда нет.
Примеры промптов
Готовые промпты
Используйте эти промпты, чтобы получить предметный разбор с первого раза
Структура экрана
Ты — продуктовый дизайнер. Экран: [что это за экран], задача пользователя: [что он хочет сделать], контекст: [откуда и в какой момент он сюда попадает]. Опиши структуру: какие блоки, в каком порядке, что должно быть видно без прокрутки. Отдельно распиши состояния: загрузка, пустой список, ошибка, успешное действие, нет прав. Для каждого блока скажи, какой вопрос пользователя он закрывает. Не добавляй элементы, которые не помогают решить его задачу.
Информационная архитектура
Ты — специалист по информационной архитектуре. Продукт: [что это], что есть сейчас: [разделы и контент], пользователи: [кто и зачем приходит]. Собери структуру навигации: верхний уровень, вложенность, названия пунктов. Названия пиши словами пользователей, а не внутренними терминами компании. Покажи три частых сценария и путь до цели в кликах. Отметь разделы, которые стоит объединить, переименовать или убрать, и объясни почему.
UX-тексты интерфейса
Ты — UX-редактор. Продукт: [что это], экран или элемент: [что именно], тональность: [какая]. Напиши тексты: заголовок, подписи полей, надписи на кнопках, подсказки, сообщения об ошибках и пустых состояниях. Кнопка должна называть действие, а не «ОК» и «Отправить». В сообщении об ошибке объясни, что произошло и что делать дальше, без «упс» и без обвинения пользователя. Каждый текст — коротко, но понятно с первого прочтения.
Сценарий прототипа
Ты — дизайнер, готовящий интерактивный прототип. Сценарий: [что должен пройти пользователь], экраны: [список]. Распиши по шагам: с какого экрана начинаем, какие элементы кликабельны, куда они ведут, что происходит при ошибке и как вернуться назад. Для каждого перехода предложи тип анимации и длительность. Отметь, какие состояния обязательно отрисовать для теста, а какие можно заглушить.
Мобильная адаптация
Ты — дизайнер мобильных интерфейсов. Десктопный экран: [описание блоков]. Предложи, как перестроить его под узкий экран: что свернуть, что убрать, что вынести на отдельный экран. Учитывай размер зоны нажатия, досягаемость большим пальцем и безопасные отступы от системных панелей. Скажи, где горизонтальная прокрутка уместна, а где её быть не должно, и что делать с таблицами и длинными формами.
Палитра и типографика
Ты — визуальный дизайнер. Продукт: [что это], аудитория: [кто], нужное впечатление: [три прилагательных]. Предложи палитру: основной, дополнительный и акцентный цвета, нейтральная шкала, цвета состояний — с кодами HEX. Проверь контраст текста и элементов управления по WCAG и приведи получившиеся коэффициенты. Затем подбери пару шрифтов с размерами и межстрочными интервалами для заголовков и основного текста. Объясни каждое решение.
Сценарий UX-интервью
Ты — UX-исследователь. Продукт: [что это], гипотеза: [что проверяем], участники: [кто они]. Составь сценарий интервью на [сколько] минут: разогрев, вопросы о реальном опыте, задание на прохождение сценария, завершение. Формулируй вопросы о прошлом поведении, а не о будущих намерениях, и не подсказывай ответ в самом вопросе. Отдельно дай чек-лист того, что фиксировать при наблюдении, и признаки, по которым видно, что человек говорит из вежливости.
Юзабилити-разбор экрана
Ты — UX-специалист, проводящий экспертную оценку. Экран: [подробное описание блоков и элементов], задача пользователя: [что он делает]. Найди проблемы по эвристикам Нильсена: видимость статуса системы, соответствие привычному, свобода действий, предотвращение ошибок, узнавание вместо запоминания, помощь при сбоях. По каждой находке укажи элемент, суть проблемы, критичность и вариант исправления. Начни с того, что мешает сильнее всего.
ТЗ на иконки
Ты — арт-директор. Продукт: [что это], стиль: [какой], набор нужен для: [список функций или разделов]. Составь техническое задание на иконки: сетка, толщина линий, скругления, внутренние отступы, форматы и размеры экспорта. Для каждой иконки опиши, что изображено и почему этот образ считывается именно так. Отдельно отметь смыслы, которые иконкой не передать, — там нужна подпись.
Дашборд и данные
Ты — дизайнер интерфейсов для работы с данными. Кто смотрит: [роль], какое решение принимает по этим данным: [какое], доступные метрики: [список]. Предложи состав дашборда: что выносим наверх, какой тип графика подходит каждой метрике и почему. Добавь состояния: данных нет, данных мало, значения аномальные. Не используй круговые диаграммы для сравнения близких величин и не добавляй показатели только ради заполнения экрана.
Микроанимации интерфейса
Ты — дизайнер интерфейсных анимаций. Что анимируем: [элемент или переход], платформа: [веб или мобильное приложение]. Опиши анимацию: что меняется, длительность в миллисекундах, кривая ускорения, задержки. Объясни, какую задачу решает движение — показывает связь между экранами, подтверждает нажатие, объясняет, откуда взялся элемент. Анимация не должна задерживать пользователя, и предусмотри вариант для тех, кто отключил анимации в настройках системы.
Проверка доступности
Ты — специалист по цифровой доступности. Вот интерфейс: [описание экрана и элементов] или разметка: [код]. Проверь его по WCAG уровня AA: контраст текста и элементов управления, размеры зон нажатия, работа с клавиатуры и порядок фокуса, подписи полей и сообщения об ошибках, альтернативный текст, поведение со скринридером. По каждой проблеме укажи критерий, что именно не так и как исправить. Начни с того, что полностью блокирует работу.
Адаптивная вёрстка
Ты — верстальщик. Блок: [описание или макет словами], поведение на разных экранах: [что должно меняться]. Напиши HTML и CSS на Grid или Flexbox по принципу mobile-first. Используй относительные единицы и современные возможности CSS вместо частокола жёстких брейкпоинтов там, где это уместно. Объясни, почему выбрал именно такое решение, и предупреди, где возможны отличия между браузерами.
Вёрстка макета
Ты — верстальщик. Макет: [описание секций, размеров, отступов, шрифтов и цветов]. Свёрстай семантическим HTML с правильной иерархией заголовков, стили собери на CSS-переменных. Учти состояния наведения, фокуса и нажатия, поведение при длинном тексте, отсутствующей картинке и пустом блоке. Прокомментируй неочевидные места. Не подключай библиотеки, если задача решается обычным CSS.
Дизайн-система
Ты — дизайнер, собирающий дизайн-систему. Продукт: [что это], что уже есть: [текущие стили и компоненты]. Собери основу: токены цвета, типографики, отступов, скруглений и теней с понятными названиями, которые не привязаны к конкретному оттенку. Затем опиши базовые компоненты — кнопка, поле ввода, карточка, модальное окно — с вариантами и состояниями каждого. Для каждого компонента напиши правило, когда его применять, а когда брать другой.
FAQ
Ответы на частые вопросы
Что такое промпт и зачем он нужен дизайнеру?
Как использовать промпты?
Что писать вместо текста в квадратных скобках?
Может ли нейросеть нарисовать макет?
Как показать нейросети свой макет?
Заменит ли ИИ дизайнера и верстальщика?
Начните прямо сейчас
Нейросети 24/7
Зарегистрируйтесь бесплатно и начните использовать возможности искусственного интеллекта прямо сейчас
Попробовать бесплатно