Продуктовые дизайнеры и фронтендеры всё чаще используют LLM не для генерации картинок, а для рутины: структура экрана, токены дизайн-системы, UX-тексты, аудит макета и спецификация для разработчика. По данным опроса Stack Overflow 2024, 76% разработчиков уже используют или планируют использовать AI-инструменты в работе. А исследование GitHub (2022) показало, что Copilot ускоряет написание кода на 55%. Но чтобы получить пользу от ChatGPT в дизайне, нужны точные промты — иначе модель выдаёт общие фразы. В этой подборке — 15 проверенных промтов с примерами и ожидаемым результатом. Все промты можно копировать и адаптировать под свой проект.
1. Генерация структуры экрана по описанию задачи
Задача: быстро получить каркас страницы (wireframe) без Figma.
Промт:
Ты — UX-дизайнер. Спроектируй структуру экрана для [тип страницы] с целью [цель пользователя]. Опиши блоки сверху вниз, укажи для каждого: назначение, ключевые элементы, возможные состояния (загрузка, ошибка, пусто). Формат — список с отступами. Не используй общих слов.
Пример: для страницы «Оформление заказа» в интернет-магазине. ChatGPT выдаст блоки: хлебные крошки, форма адреса, выбор доставки, промокод, итоговая сумма, кнопка оплаты. Укажет, что при ошибке валидации показывать текст под полем.
2. Генерация токенов дизайн-системы
Задача: создать палитру, типографику, отступы в виде JSON для импорта в Figma Tokens.
Промт:
Сгенерируй JSON с токенами дизайн-системы для [продукт]. Включи: цвета (primary, secondary, success, error, warning, neutral), типографику (размеры, веса, line-height), отступы (4px, 8px, 16px, 24px, 32px, 48px), радиусы (4px, 8px, 16px). Формат — вложенный объект, совместимый с Figma Tokens (W3C Design Tokens).
Пример: для финтех-приложения. ChatGPT вернёт JSON, который можно сохранить как tokens.json и импортировать через плагин Tokens Studio. Это ускоряет создание темы в разы.
3. Переписывание UX-текстов (микрокопирайтинг)
Задача: сделать интерфейсные тексты понятными и дружелюбными.
Промт:
Перепиши следующие тексты интерфейса для [продукт] в тоне [дружелюбный/формальный/нейтральный]. Сохрани смысл, но сделай короче и яснее. Для каждого варианта укажи, почему он лучше. Исходные тексты: [вставить список].
Пример: кнопка «Отправить» → «Отправить заявку» (конкретнее). Ошибка «Ошибка 404» → «Страница не найдена. Проверьте адрес или вернитесь на главную». ChatGPT предложит 2–3 варианта с обоснованием.
4. UX-аудит макета по скриншоту
Задача: получить обратную связь по юзабилити без UX-исследователя.
Промт:
Ты — UX-эксперт. Проанализируй скриншот [описание или ссылка]. Найди 5 проблем по эвристикам Нильсена (видимость состояния, соответствие реальному миру, контроль пользователя, консистентность, предотвращение ошибок). Для каждой: что не так, почему это проблема, как исправить. Формат — таблица.
Пример: макет карточки товара. ChatGPT может указать: кнопка «Купить» не выделена цветом, нет обратной связи при добавлении в корзину, мелкий шрифт цены.
5. Спецификация для разработчика (handoff)
Задача: превратить макет в понятное ТЗ для фронтендера.
Промт:
Составь спецификацию для разработчика по макету [описание экрана]. Укажи: размеры, отступы, цвета (hex), шрифты, состояния кнопок, поведение при наведении и фокусе, адаптивность (breakpoints). Формат — Markdown-таблица.
Пример: для формы логина. ChatGPT выдаст таблицу с полями: email (width: 100%, padding: 12px, border: 1px solid #ccc), кнопка (background: #007bff, hover: #0056b3).
6. Генерация текстов для пустых состояний
Задача: заполнить empty states полезными сообщениями.
Промт:
Придумай текст для пустого состояния экрана [название] в продукте [тип]. Сообщение должно объяснять, почему пусто, и предлагать действие. Длина — до 120 символов. Предложи 3 варианта.
Пример: для списка задач: «Пока нет задач. Создайте первую, чтобы начать планировать день».
7. Проверка контраста и доступности (WCAG)
Задача: убедиться, что цвета соответствуют стандарту.
Промт:
Проверь контрастность пар цветов: текст [hex] на фоне [hex]. Соответствует ли уровень AA по WCAG 2.1? Если нет, предложи альтернативу. Ответь таблицей: пара, коэффициент контраста, вердикт.
Пример: #777777 на #FFFFFF даёт контраст 4.48:1 — не проходит для обычного текста (нужно 4.5:1). ChatGPT предложит затемнить до #767676.
8. Генерация иконок и иллюстраций (описание для дизайнера)
Задача: создать ТЗ на иконки, если нет дизайнера.
Промт:
Опиши 5 иконок для раздела [название] в стиле [минимализм/line/flat]. Для каждой: название, что изображает, метафора, размер (24x24), цвет. Учти, что иконки должны быть понятны без подписи.
Пример: для раздела «Безопасность»: щит, замок, глаз, ключ, галочка.
9. Создание компонентной библиотеки (описание)
Задача: спроектировать набор компонентов для дизайн-системы.
Промт:
Составь список UI-компонентов для [продукт] с учётом атомарного дизайна. Раздели на атомы, молекулы, организмы. Для каждого компонента укажи: название, состояния (default, hover, active, disabled), варианты. Формат — список.
Пример: атомы: кнопка, поле ввода, чекбокс; молекулы: форма поиска, карточка; организмы: шапка, футер.
10. Написание текста для онбординга
Задача: создать приветственные экраны.
Промт:
Напиши текст для 3 экранов онбординга в приложении [тип]. Цель — познакомить с ключевыми функциями. Для каждого экрана: заголовок (до 5 слов), подзаголовок (до 15 слов), кнопка. Тон — дружелюбный.
Пример: для фитнес-приложения: «Добро пожаловать!», «Отслеживайте тренировки и прогресс», кнопка «Начать».
11. Анализ пользовательских отзывов для улучшения UX
Задача: выявить болевые точки из обратной связи.
Промт:
Проанализируй отзывы пользователей [текст]. Выдели 5 основных проблем UX, сгруппируй по темам, предложи решения. Формат — таблица: проблема, частота упоминаний, решение.
Пример: если в отзывах часто пишут «не могу найти кнопку», проблема — навигация.
12. Генерация альтернативных текстов для A/B-тестов
Задача: протестировать разные формулировки CTA.
Промт:
Предложи 5 вариантов текста для кнопки [действие] с разными акцентами: выгода, срочность, простота, доверие, любопытство. Для каждого укажи, на какую аудиторию он ориентирован.
Пример: для кнопки «Записаться на курс»: «Начать учиться», «Забронировать место», «Узнать программу».
13. Создание UX-микрокопии для уведомлений
Задача: написать тексты пуш-уведомлений и алертов.
Промт:
Напиши 5 текстов для уведомлений в приложении [тип]. Каждое должно быть до 100 символов, содержать призыв к действию и не раздражать. Укажи тип: успех, ошибка, предупреждение, информация.
Пример: «Ваш заказ готов к выдаче. Заберите сегодня до 20:00».
14. Проектирование пользовательского пути (user journey map)
Задача: описать шаги пользователя и эмоции.
Промт:
Составь user journey map для сценария [описание]. Разбей на этапы: осознание, рассмотрение, покупка, использование, поддержка. Для каждого этапа укажи действия пользователя, мысли, эмоции, болевые точки. Формат — таблица.
Пример: для покупки авиабилета. ChatGPT покажет, что на этапе оплаты пользователи нервничают из-за скрытых комиссий.
15. Генерация документации для дизайн-системы
Задача: описать правила использования компонентов.
Промт:
Напиши документацию для компонента [название]. Включи: анатомию, состояния, правила использования, запреты, примеры кода (HTML/CSS). Стиль — краткий и понятный.
Пример: для кнопки. ChatGPT опишет, что нельзя использовать две primary-кнопки рядом, и даст CSS для состояний.
Эти промты помогают сэкономить часы рутины и сосредоточиться на творчестве. Начните с 2–3 самых болезненных задач — например, handoff и UX-тексты — и постепенно добавляйте остальные. Помните: LLM не заменяет дизайнера, но становится вторым пилотом, который берёт на себя черновую работу. А если хотите глубже прокачать навыки работы с AI в дизайне и разработке — изучите наши курсы по промпт-инжинирингу и UX/UI.
Комментарии