Промпты для web-дизайнера. 31 готовый пример для генерации

Веб-дизайн – профессия, где половина рабочего времени уходит не на саму работу, а на объяснение клиенту, почему логотип не нужно делать больше. Но есть кое-что, что реально экономит часы: грамотно составленные промпты для веб-дизайнера, которые превращают нейросеть в полноценного рабочего помощника.

В этой статье – 31 готовый пример запросов для нейросети, охватывающих весь цикл работы дизайнера: от брифинга и концепции до финальной проверки перед сдачей проекта.

Какие задачи здесь закрыты:

• Анализ технического задания и выявление противоречий в брифе
• Генерация концепций, структур и пользовательских сценариев
• Написание текстов-заглушек и UX-копирайтинга
• Разбор конкурентов и формирование визуального направления
• Подготовка презентаций для клиента и защита дизайн-решений
• Проверка доступности, логики навигации и адаптивности
• Автоматизация рутинных задач: чеклисты, технические задания, комментарии к макетам

Каждый промпт в статье – не абстрактный шаблон, а рабочий инструмент с переменными под конкретную задачу. Скопировал, подставил свое – получил результат.

31 промпт для веб-дизайнера: полная библиотека запросов для нейросети

1. Анализ брифа и выявление противоречий

Проблема: Клиент присылает бриф, где написано «минималистично, но с характером, современно, но с историей, и чтобы продавало». Разобраться, что из этого реально реализуемо, а что взаимоисключает друг друга – задача не тривиальная.

Решение: Промпт анализирует бриф, выявляет противоречия и формулирует уточняющие вопросы к клиенту.

Текст промпта:

*****

Ты – опытный арт-директор с десятилетним стажем работы с клиентами в веб-дизайне. Я дам тебе бриф на разработку сайта. Твоя задача – провести его структурный анализ.

Бриф клиента: [вставьте текст брифа или его ключевые пункты, например, «сайт для фитнес-студии, стиль – энергичный и спокойный одновременно, целевая аудитория – все возрасты, нужно продавать абонементы и вдохновлять»]

Выполни следующее:

1. Выдели все противоречия и несовместимые требования – конкретно, с цитатами из брифа.
2. Определи, какие требования размыты и требуют уточнения.
3. Составь список из 7–10 уточняющих вопросов к клиенту – четких, конкретных, без воды.
4. Предложи 2–3 возможные интерпретации брифа, если он допускает разное прочтение.

Формат ответа: структурированный список с заголовками по каждому пункту. Тон – профессиональный, деловой. Без общих рассуждений о важности брифинга.

*****

Почему это работает: Нейросеть видит противоречия в тексте лучше, чем уставший дизайнер после третьего кофе – потому что анализирует структуру, а не читает «по диагонали». Четкое задание с конкретными пунктами исключает размытые ответы.

2. Генерация концепций для главной страницы

Проблема: Начало проекта – самый сложный момент, когда нужно предложить не одну, а несколько концепций, чтобы клиент мог выбрать направление.

Решение: Промпт генерирует три разные концепции главной страницы с описанием визуального языка, структуры и ключевых элементов.

Текст промпта:

*****

Ты – креативный директор веб-студии с опытом разработки концепций для сайтов разных ниш. Мне нужно предложить клиенту несколько концепций главной страницы сайта.

Информация о проекте:
– Тип бизнеса: [укажите нишу, например, «юридическая фирма», «детская школа программирования», «производитель строительных материалов»]
– Целевая аудитория: [опишите аудиторию, например, «предприниматели 35–55 лет, ценят надежность и конкретику»]
– Ключевое сообщение сайта: [укажите главный посыл, например, «мы решаем сложные задачи быстро»]
– Конкуренты для ориентира: [перечислите 2–3 конкурента или их сайты, например, «сайты крупных московских юрфирм»]

Создай три разные концепции главной страницы. Для каждой концепции опиши:

1. Общее визуальное направление (цветовая палитра, типографика, характер иллюстраций).
2. Структуру первого экрана (что видит пользователь в первые 3 секунды).
3. Главный эмоциональный эффект, который должна вызывать страница.
4. Ключевые структурные блоки ниже первого экрана (5–7 блоков с коротким описанием каждого).

Концепции должны кардинально отличаться друг от друга по подходу. Формат: три отдельных блока с заголовками «Концепция 1», «Концепция 2», «Концепция 3».

*****

Почему это работает: Запрос на три кардинально разные концепции вынуждает нейросеть выйти за пределы очевидного решения – в итоге получается реальный выбор, а не три вариации одной идеи.

3. Разработка структуры сайта (карта сайта)

Проблема: Создание логичной структуры сайта – это не просто список страниц, а продуманная навигационная система, которую потом сложно переделать.

Решение: Промпт строит полную карту сайта с иерархией страниц, учитывая бизнес-цели и пользовательские сценарии.

Текст промпта:

*****

Ты – UX-архитектор с опытом проектирования информационных структур для коммерческих сайтов. Разработай карту сайта для следующего проекта.

Данные проекта:
– Тип сайта: [укажите тип, например, «корпоративный сайт», «интернет-магазин», «портфолио», «сервисный сайт»]
– Ниша бизнеса: [опишите бизнес, например, «компания по монтажу вентиляционных систем в Москве»]
– Основные бизнес-цели: [перечислите цели, например, «получить заявки на замер, показать портфолио, объяснить технологии»]
– Целевая аудитория: [опишите, например, «прорабы и владельцы коммерческой недвижимости»]
– Примерный объем сайта: [укажите, например, «до 15 страниц» или «без ограничений»]

Создай иерархическую карту сайта:

1. Главное меню (разделы первого уровня) с обоснованием каждого раздела.
2. Подразделы второго уровня для каждого раздела.
3. Страницы третьего уровня там, где они необходимы.
4. Отдельно – страницы вне основной навигации (политика конфиденциальности, страница 404 и т.д.).
5. Для каждой страницы: одно предложение о ее главной задаче.

Формат: структурированный список с отступами по уровням. Не более 25 страниц суммарно, если не указано иное.

*****

Почему это работает: Требование обосновать каждый раздел заставляет нейросеть думать о логике, а не просто перечислять стандартные страницы – «О компании, Услуги, Контакты» получают реальное наполнение.

4. Создание пользовательских сценариев (User Flow)

Проблема: Дизайнеры часто проектируют «идеальный путь» пользователя, забывая о том, как люди ведут себя на самом деле – кликают не туда, уходят не оттуда.

Решение: Промпт строит несколько реалистичных пользовательских сценариев для конкретного типа страницы или задачи.

Текст промпта:

*****

Ты – UX-исследователь с опытом анализа поведения пользователей на коммерческих сайтах. Составь пользовательские сценарии для сайта.

Контекст:
– Тип сайта и ниша: [опишите, например, «сайт стоматологической клиники»]
– Ключевое действие, которое должен совершить пользователь: [укажите, например, «записаться на прием онлайн»]
– Типы пользователей: [перечислите 2–3 типа, например, «первичный пациент, который боится стоматологов», «постоянный пациент, который хочет записать ребенка»]

Для каждого типа пользователя создай сценарий:

1. Откуда пришел пользователь (источник трафика и его начальный контекст).
2. Что ищет и какие вопросы у него в голове на каждом шаге.
3. Последовательность страниц и блоков, которые он просматривает.
4. Где может возникнуть сомнение или желание уйти – и почему.
5. Что помогает ему все-таки совершить целевое действие.

Формат: отдельный блок для каждого типа пользователя. Тон – аналитический, без лишних слов. Сценарии должны быть реалистичными, а не идеальными.

*****

Почему это работает: Требование описать точки сомнения и риска ухода переводит нейросеть из режима «идеального пути» в режим реального анализа поведения – именно это и нужно для проектирования.

5. Написание UX-текстов для интерфейса

Проблема: «Здесь будет текст» – классическая заглушка, которая остается в макете до финального дедлайна, а потом клиент присылает текст, который не влезает ни в какой блок.

Решение: Промпт создает готовые UX-тексты для ключевых элементов интерфейса – заголовки, подзаголовки, кнопки, подсказки, сообщения об ошибках.

Текст промпта:

*****

Ты – UX-копирайтер, специализирующийся на интерфейсных текстах для коммерческих сайтов. Напиши тексты для следующих элементов интерфейса.

Контекст проекта:
– Тип сайта: [укажите, например, «сервис онлайн-записи к врачу»]
– Тон коммуникации: [укажите, например, «дружелюбный и заботливый, без медицинского официоза»]
– Целевая аудитория: [опишите, например, «люди 25–50 лет, ценят простоту и скорость»]

Напиши тексты для следующих элементов (по 3 варианта для каждого):

1. Заголовок первого экрана (до 8 слов).
2. Подзаголовок первого экрана (1–2 предложения, до 20 слов).
3. Текст кнопки главного призыва к действию (2–4 слова).
4. Заголовок формы записи.
5. Сообщение об успешной отправке формы.
6. Сообщение об ошибке при заполнении формы.
7. Текст для пустого состояния (когда нет доступных слотов).

Требования: тексты должны быть конкретными, без канцелярита, без клише вроде «мы рады приветствовать». Каждый вариант – отдельная строка с нумерацией.

*****

Почему это работает: Три варианта каждого текста дают возможность выбора, а конкретные ограничения по длине сразу делают тексты пригодными для реальных блоков макета.

6. Анализ сайтов конкурентов

Проблема: «Посмотри на конкурентов» – задача, которая без структуры превращается в бесконечный серфинг по чужим сайтам без конкретных выводов.

Решение: Промпт структурирует анализ конкурентов по ключевым параметрам и формирует выводы для проектирования.

Текст промпта:

*****

Ты – стратег по цифровым продуктам с опытом конкурентного анализа в веб-дизайне. Помоги структурировать анализ сайтов конкурентов.

Данные для анализа:
– Ниша проекта: [укажите нишу, например, «онлайн-школа иностранных языков для взрослых»]
– Список сайтов для анализа: [перечислите URL или названия сайтов, например, «сайт А, сайт Б, сайт В»]
– Главный вопрос, на который нужен ответ: [укажите, например, «как конкуренты убеждают записаться на пробный урок»]

Для каждого сайта проведи анализ по следующим параметрам:

1. Первый экран: что видит пользователь, какое главное сообщение, есть ли призыв к действию.
2. Структура главной страницы: какие блоки используются и в каком порядке.
3. Визуальный стиль: цвета, типографика, характер изображений.
4. Доверие: какие элементы формируют доверие (отзывы, цифры, гарантии, сертификаты).
5. Слабые места: что сделано плохо или неудобно.

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

Формат: таблица для сравнения + текстовые выводы в конце.

*****

Почему это работает: Фиксированные параметры анализа исключают субъективность и «смотрел, понравилось/не понравилось» – вместо этого получается структурированное сравнение с конкретными выводами.

7. Формирование визуального направления (мудборд)

Проблема: Описать клиенту визуальное направление словами – почти невозможно. «Современный минимализм» для дизайнера и для клиента – это два разных мира.

Решение: Промпт создает детальное текстовое описание визуального направления, которое можно использовать как основу для мудборда и презентации клиенту.

Текст промпта:

*****

Ты – арт-директор с опытом формирования визуальных концепций для цифровых продуктов. Создай детальное описание визуального направления для проекта.

Параметры проекта:
– Ниша и тип сайта: [укажите, например, «сайт архитектурного бюро, специализирующегося на частных домах»]
– Ключевые ценности бренда: [перечислите 3–5 ценностей, например, «качество, индивидуальный подход, долговечность»]
– Что категорически не подходит: [укажите ограничения, например, «никакого агрессивного минимализма, никаких стоковых фото с улыбающимися людьми»]
– Референсы (если есть): [опишите, например, «нравится стиль японских архитектурных студий – сдержанность, натуральные материалы»]

Опиши визуальное направление по следующим параметрам:

1. Цветовая палитра: основной цвет, дополнительный, акцентный – с описанием ощущения каждого.
2. Типографика: характер шрифтов (без названий конкретных шрифтов), их сочетание.
3. Характер изображений: что изображено, как снято, какое настроение передает.
4. Графические элементы: текстуры, линии, формы, паттерны – если уместны.
5. Общее эмоциональное ощущение от сайта (3–5 прилагательных).
6. Чего категорически избегать в визуале.

Формат: структурированный текст с заголовками. Описания должны быть конкретными, образными и применимыми на практике.

*****

Почему это работает: Конкретные параметры описания – от палитры до запретов – создают визуальное направление, которое можно передать иллюстратору, фотографу или использовать самостоятельно, без двусмысленностей.

8. Написание технического задания для разработчика

Проблема: Разработчик получает макет и список пожеланий вместо нормального технического задания – и потом начинается долгий обмен голосовыми сообщениями в мессенджере.

Решение: Промпт создает структурированное техническое задание на верстку конкретной страницы или компонента.

Текст промпта:

*****

Ты – технический менеджер веб-проектов с опытом составления заданий для фронтенд-разработчиков. Составь техническое задание на верстку страницы.

Данные для задания:
– Страница или компонент: [укажите, например, «главная страница корпоративного сайта» или «блок с карточками услуг»]
– Ключевые функциональные требования: [перечислите, например, «слайдер с отзывами, форма обратной связи с валидацией, анимация при скролле»]
– Адаптивность: [укажите точки перелома, например, «десктоп от 1280px, планшет 768–1279px, мобильный до 767px»]
– Особые требования: [укажите, например, «скорость загрузки страницы не ниже 90 баллов в PageSpeed, поддержка браузеров Chrome, Safari, Firefox последних двух версий»]

Составь техническое задание, включающее:

1. Описание каждого блока страницы с требованиями к поведению.
2. Требования к адаптивности для каждого блока.
3. Интерактивные состояния элементов (наведение, нажатие, активное состояние, ошибка).
4. Требования к производительности и совместимости.
5. Требования к коду (семантика, доступность, структура файлов).
6. Список вопросов к дизайнеру, если в макете есть неоднозначные моменты.

Формат: нумерованный список с подпунктами. Язык – технический, точный, без двусмысленностей.

*****

Почему это работает: Пункт про вопросы к дизайнеру – ключевой: нейросеть выявляет неоднозначности в описании, которые в реальной работе вылезают уже на этапе верстки.

9. Подготовка презентации концепции для клиента

Проблема: Показать макет – это одно. Объяснить, почему именно такие решения приняты, так чтобы клиент понял и согласился, – совсем другое.

Решение: Промпт создает структуру и тезисы для презентации дизайн-концепции, адаптированные под нетехническую аудиторию.

Текст промпта:

*****

Ты – ведущий дизайнер с опытом презентации проектов клиентам без дизайнерского образования. Помоги подготовить презентацию концепции.

Контекст:
– Проект: [опишите, например, «редизайн сайта производителя промышленного оборудования»]
– Ключевые дизайн-решения, которые нужно объяснить: [перечислите, например, «темная цветовая схема, минимум текста на первом экране, видеофон вместо фото»]
– Аудитория презентации: [опишите, например, «генеральный директор и маркетолог компании, оба без опыта работы с дизайном»]
– Возможные возражения: [укажите, например, «клиент хотел яркие цвета и много текста»]

Подготовь структуру и тезисы презентации:

1. Вступление: как напомнить о целях проекта и критериях успеха (2–3 предложения).
2. Для каждого ключевого решения: обоснование через пользу для бизнеса, а не через эстетику.
3. Как показать связь дизайн-решений с целевой аудиторией клиента.
4. Как ответить на каждое из возможных возражений – конкретные фразы.
5. Как завершить презентацию и перейти к следующему шагу.

Тон: уверенный, деловой, без дизайнерского жаргона. Все объясняется через бизнес-выгоду, а не через красоту.

*****

Почему это работает: Перевод дизайнерских решений на язык бизнес-выгоды – это то, что отличает дизайнера, которого слушают, от дизайнера, которому говорят «сделайте логотип побольше».

10. Разработка системы компонентов и стилей

Проблема: Без продуманной системы компонентов сайт из 20 страниц превращается в лоскутное одеяло, где каждая кнопка выглядит по-своему.

Решение: Промпт помогает спроектировать базовую систему компонентов для проекта с описанием каждого элемента.

Текст промпта:

*****

Ты – системный дизайнер с опытом создания дизайн-систем для веб-проектов разного масштаба. Помоги спроектировать базовую систему компонентов.

Параметры проекта:
– Тип сайта и масштаб: [укажите, например, «корпоративный сайт с 12 страницами» или «интернет-магазин с каталогом»]
– Технологический стек (если известен): [укажите, например, «верстка на HTML/CSS, без фреймворка» или «React»]
– Уровень сложности: [укажите, например, «базовая система без сложных анимаций»]

Разработай систему компонентов, включающую:

1. Базовые стили: типографическая шкала (размеры заголовков H1–H6, основной текст, подписи), цветовые переменные, отступы.
2. Атомарные компоненты: кнопки (все состояния), поля ввода, иконки, теги, бейджи.
3. Молекулярные компоненты: карточки, формы, навигационные элементы, хлебные крошки.
4. Организмы: шапка, подвал, блок с карточками, форма обратной связи.
5. Для каждого компонента: перечисли все состояния (обычное, наведение, нажатие, недоступное, ошибка).

Формат: структурированный список с группировкой по уровням. Укажи, какие компоненты являются приоритетными для разработки в первую очередь.

*****

Почему это работает: Четкая группировка по уровням атомарности (атомы, молекулы, организмы) задает логику, которую понимают и дизайнеры, и разработчики – это сразу снижает количество вопросов на этапе реализации.

11. Проверка доступности дизайна (инклюзивность)

Проблема: Доступность сайта – это не только про незрячих пользователей. Это про всех, кто использует сайт в сложных условиях: на солнце, с дрожащими руками, на медленном интернете.

Решение: Промпт проводит аудит дизайна на соответствие базовым требованиям доступности и выдает конкретный список правок.

Текст промпта:

*****

Ты – специалист по доступности цифровых продуктов с практическим опытом аудита веб-интерфейсов. Проведи аудит дизайна на доступность.

Описание дизайна для проверки:
– Цветовая схема: [опишите, например, «основной фон белый, текст темно-серый #333333, акцентный цвет светло-голубой #87CEEB»]
– Размеры элементов: [опишите, например, «кнопки высотой 36px, основной текст 14px»]
– Интерактивные элементы: [перечислите, например, «кнопки, поля ввода, выпадающие меню, слайдер»]
– Контент: [опишите, например, «есть видео без субтитров, иконки без текстовых подписей»]

Проверь по следующим критериям и выдай конкретные замечания:

1. Контрастность текста и фона (укажи, где не соответствует уровню AA стандарта WCAG 2.1).
2. Размеры интерактивных зон (минимум 44x44px для сенсорных экранов).
3. Навигация с клавиатуры (видимый фокус на всех элементах).
4. Альтернативные тексты для визуального контента.
5. Читабельность текста (размер, межстрочный интервал, длина строки).
6. Работа сайта без JavaScript и при медленном соединении.

Формат: список замечаний с приоритетом (критично / важно / рекомендуется) и конкретными предложениями по исправлению.

*****

Почему это работает: Приоритизация замечаний (критично / важно / рекомендуется) позволяет не тратить время на исправление незначительных деталей, когда есть критические проблемы с контрастностью.

12. Генерация идей для анимации и микровзаимодействий

Проблема: Анимация без концепции – это случайные эффекты, которые раздражают пользователя. Анимация с концепцией – это то, что делает сайт запоминающимся.

Решение: Промпт генерирует идеи для анимации и микровзаимодействий, связанные с характером бренда и задачами интерфейса.

Текст промпта:

*****

Ты – motion-дизайнер с опытом создания анимационных концепций для веб-интерфейсов. Предложи идеи анимации для проекта.

Контекст:
– Тип сайта и ниша: [укажите, например, «сайт финтех-стартапа, предлагающего инвестиционные продукты»]
– Характер бренда: [опишите, например, «современный, технологичный, внушающий доверие, но не скучный»]
– Технические ограничения: [укажите, например, «без тяжелых библиотек, только CSS-анимации и легкий JavaScript»]
– Приоритетные страницы: [перечислите, например, «главная страница, страница продукта, страница регистрации»]

Предложи идеи анимации для следующих элементов:

1. Появление блоков при скролле (3 варианта с описанием эффекта и ощущения).
2. Анимация кнопок (наведение, нажатие, состояние загрузки).
3. Переходы между страницами.
4. Анимация числовых показателей и графиков (если есть).
5. Анимация формы: появление, успешная отправка, ошибка.
6. Уникальный анимационный элемент, который станет «фишкой» сайта.

Для каждой идеи опиши: что анимируется, как именно (направление, скорость, характер движения), какое ощущение создает. Формат: структурированный список.

*****

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

13. Разработка адаптивной сетки и системы отступов

Проблема: Адаптивность – это не «просто уменьши все для мобильного». Это продуманная система, которая закладывается в начале, а не переделывается в конце.

Решение: Промпт помогает спроектировать систему сеток и отступов для всех точек перелома.

Текст промпта:

*****

Ты – опытный веб-дизайнер, специализирующийся на адаптивных интерфейсах. Помоги спроектировать систему сеток и отступов для проекта.

Параметры проекта:
– Тип сайта: [укажите, например, «корпоративный сайт с большим количеством текстового контента»]
– Точки перелома: [укажите, например, «мобильный до 767px, планшет 768–1279px, десктоп 1280–1919px, широкий экран от 1920px»]
– Максимальная ширина контента: [укажите, например, «1200px»]
– Особые требования: [укажите, например, «на мобильном некоторые блоки должны идти в другом порядке»]

Разработай систему по следующим параметрам:

1. Для каждой точки перелома: количество колонок, ширина колонки, ширина отступа между колонками, внешние поля.
2. Базовый шаг системы отступов (например, 4px или 8px) и полная шкала значений.
3. Как меняется типографическая шкала на разных устройствах.
4. Рекомендации по изменению компоновки блоков для мобильного (какие блоки меняют порядок, что скрывается, что трансформируется).
5. Критические точки, где дизайн требует особого внимания при адаптации.

Формат: таблица для сравнения точек перелома + текстовые рекомендации по каждому пункту.

*****

Почему это работает: Базовый шаг системы отступов – ключевой параметр, который многие задают интуитивно. Его явное определение в начале проекта экономит часы при работе с компонентами.

14. Создание контент-плана для страниц сайта

Проблема: Дизайнер создает макет, а потом выясняется, что у клиента нет текстов, фото и вообще «мы думали, вы все напишете».

Решение: Промпт создает детальный контент-план с описанием необходимых материалов для каждой страницы.

Текст промпта:

*****

Ты – контент-стратег с опытом подготовки контент-планов для веб-проектов. Создай контент-план для сайта.

Данные проекта:
– Структура сайта: [перечислите страницы, например, «главная, о компании, услуги (3 подстраницы), портфолио, блог, контакты»]
– Ниша бизнеса: [укажите, например, «агентство по организации мероприятий»]
– Ответственный за контент: [укажите, например, «клиент предоставляет все сам» или «часть пишет копирайтер»]

Для каждой страницы создай контент-план, включающий:

1. Список всех текстовых блоков с требованиями к объему (в символах или словах).
2. Список необходимых изображений с описанием (тип, размер, содержание).
3. Другие медиаматериалы (видео, документы, сертификаты, логотипы).
4. Данные и цифры, которые нужно собрать у клиента.
5. Срок предоставления контента (оставь как переменную [укажите срок]).

Дополнительно: составь письмо клиенту с запросом контента – вежливое, конкретное, с четкими инструкциями.

Формат: таблица для каждой страницы + шаблон письма в конце.

*****

Почему это работает: Письмо клиенту с конкретными инструкциями – это то, что переводит абстрактный запрос «пришлите контент» в конкретный список с форматами и объемами, который клиент понимает и может выполнить.

15. Написание комментариев к макету для разработчика

Проблема: Разработчик смотрит на макет и видит одно. Дизайнер имел в виду другое. Это классика, которая повторяется на каждом проекте.

Решение: Промпт создает структурированные комментарии к макету, объясняющие нестандартные решения и поведение элементов.

Текст промпта:

*****

Ты – опытный дизайнер, который умеет четко и технически точно описывать свои решения для разработчиков. Помоги написать комментарии к макету.

Описание макета:
– Страница или компонент: [опишите, например, «блок с карточками команды на странице ‘О компании'»]
– Нестандартные или неочевидные решения: [перечислите, например, «карточки имеют разную высоту в зависимости от длины описания, при наведении появляется оверлей с ссылками на соцсети»]
– Поведение на разных устройствах: [опишите, например, «на десктопе 3 колонки, на планшете 2, на мобильном 1»]
– Особые состояния: [укажите, например, «если фото сотрудника не загрузилось – показывать аватар с инициалами»]

Напиши комментарии к макету:

1. Общее описание компонента и его задача.
2. Описание каждого элемента с точными параметрами (отступы, размеры, цвета в HEX).
3. Поведение при интерактиве (наведение, нажатие, фокус).
4. Адаптивное поведение для каждой точки перелома.
5. Обработка граничных случаев (длинный текст, отсутствующее изображение, пустое состояние).

Формат: нумерованный список, технический язык, без неоднозначностей. Каждый пункт – одно четкое утверждение.

*****

Почему это работает: Граничные случаи – это то, о чем дизайнеры забывают чаще всего. Принудительное описание «что если нет фото» или «что если текст слишком длинный» закрывает большинство вопросов разработчика заранее.

16. Формулировка ответа на правки клиента

Проблема: Клиент просит «сделать логотип побольше» или «добавить больше красного». Согласиться – значит испортить дизайн. Отказать напрямую – значит потерять клиента.

Решение: Промпт помогает сформулировать профессиональный ответ на правки клиента, объясняющий последствия изменений и предлагающий альтернативы.

Текст промпта:

*****

Ты – старший дизайнер с опытом работы с клиентами и навыком дипломатичного отстаивания профессиональных решений. Помоги сформулировать ответ на правки.

Ситуация:
– Правка клиента: [процитируйте или опишите правку, например, «хотим, чтобы кнопка ‘Заказать’ была красной и мигала, чтобы ее точно заметили»]
– Почему это проблема с точки зрения дизайна: [объясните, например, «мигающие элементы раздражают пользователей, снижают доверие и противоречат стандартам доступности»]
– Что готовы предложить как альтернативу: [укажите, например, «увеличить кнопку, добавить анимацию при скролле до нее, изменить цвет на более контрастный»]

Напиши ответ клиенту:

1. Признай его запрос и покажи, что понял его цель (привлечь внимание к кнопке).
2. Объясни, почему предложенное решение может навредить результату – без снисходительности, через факты.
3. Предложи 2–3 альтернативных решения, которые достигают той же цели.
4. Предложи следующий шаг (согласовать альтернативу или обсудить на звонке).

Тон: уважительный, уверенный, партнерский. Без фраз «вы не правы» и «так нельзя делать». Объем ответа – не более 200 слов.

*****

Почему это работает: Структура «понял цель → объяснил риск → предложил альтернативу → следующий шаг» переводит разговор из плоскости «правильно/неправильно» в плоскость «как достичь вашей цели лучше».

17. Разработка страницы 404

Проблема: Страница 404 – это точка, где пользователь уже раздражен. Большинство сайтов делают ее стандартной и бесполезной, упуская шанс удержать посетителя.

Решение: Промпт создает концепцию страницы 404, которая соответствует характеру бренда и помогает пользователю найти нужное.

Текст промпта:

*****

Ты – UX-дизайнер с опытом проектирования нестандартных страниц ошибок для коммерческих сайтов. Разработай концепцию страницы 404.

Параметры проекта:
– Ниша и характер бренда: [опишите, например, «интернет-магазин товаров для туризма, бренд дружелюбный и с юмором»]
– Тон коммуникации бренда: [укажите, например, «легкий, с самоиронией, но без клоунады»]
– Ключевые разделы сайта, куда стоит направить пользователя: [перечислите, например, «каталог, популярные товары, поиск по сайту»]

Разработай концепцию страницы 404:

1. Главное сообщение (заголовок и подзаголовок) – 3 варианта.
2. Визуальный элемент (что изображено, какое настроение создает).
3. Текст объяснения ситуации – краткий, в тоне бренда.
4. Навигационные элементы: что предложить пользователю (ссылки, поиск, кнопки).
5. Дополнительный элемент, который разряжает напряжение (если уместен для бренда).

Для каждого пункта дай 2–3 варианта. Формат: структурированный список с вариантами. Тексты – готовые к использованию.

*****

Почему это работает: Требование предложить варианты навигационных элементов превращает страницу ошибки из тупика в перекресток – пользователь не уходит, а находит другой путь к нужному контенту.

18. Создание онбординга для нового пользователя

Проблема: Пользователь регистрируется в сервисе и сразу видит пустой интерфейс без подсказок. Половина уходит, не разобравшись. Это не их вина – это провал онбординга.

Решение: Промпт проектирует последовательность онбординга с конкретными шагами и текстами для каждого экрана.

Текст промпта:

*****

Ты – продуктовый дизайнер с опытом проектирования онбординга для веб-сервисов и приложений. Разработай онбординг для нового пользователя.

Контекст:
– Тип сервиса: [опишите, например, «сервис для управления проектами малого бизнеса»]
– Ключевое действие, которое пользователь должен совершить в первый сеанс: [укажите, например, «создать первый проект и пригласить коллегу»]
– Типичные сложности новых пользователей: [перечислите, например, «не понимают разницу между проектом и задачей, не знают, с чего начать»]
– Ограничения: [укажите, например, «онбординг не должен быть дольше 3 минут, не должен блокировать интерфейс»]

Разработай последовательность онбординга:

1. Приветственный экран: заголовок, подзаголовок, кнопка начала.
2. Последовательность из 4–6 шагов с описанием каждого (что показываем, что объясняем, какое действие предлагаем).
3. Тексты подсказок для каждого шага (готовые к использованию).
4. Что происходит, если пользователь пропускает онбординг.
5. Как вернуться к онбордингу позже.

Формат: последовательный список шагов с текстами. Все тексты – на русском, в тоне сервиса [укажите тон, например, «дружелюбный и краткий»].

*****

Почему это работает: Вопрос «что происходит, если пользователь пропускает онбординг» – это именно тот момент, о котором думают в последнюю очередь, хотя значительная часть пользователей делает именно это.

19. Аудит навигации и информационной архитектуры

Проблема: Навигация, которая кажется логичной дизайнеру, часто непонятна пользователю – просто потому что дизайнер знает содержимое сайта наизусть.

Решение: Промпт проводит аудит навигации с позиции нового пользователя и выявляет проблемные места.

Текст промпта:

*****

Ты – UX-аудитор с опытом анализа информационной архитектуры коммерческих сайтов. Проведи аудит навигации.

Описание навигации:
– Структура главного меню: [перечислите пункты меню, например, «Главная, О нас, Решения, Ресурсы, Партнеры, Связаться»]
– Подменю (если есть): [опишите структуру подменю для каждого раздела]
– Дополнительные навигационные элементы: [укажите, например, «хлебные крошки, боковая навигация в разделе ‘Решения’, поиск по сайту»]
– Целевая аудитория: [опишите, например, «IT-директора и руководители отделов в компаниях 100+ человек»]
– Ключевые задачи пользователей: [перечислите, например, «найти конкретное решение для своей отрасли, скачать презентацию, связаться с менеджером»]

Проведи аудит по следующим критериям:

1. Ясность: понятны ли названия пунктов меню без знания содержимого сайта?
2. Полнота: все ли ключевые задачи пользователей решаются через навигацию?
3. Избыточность: есть ли дублирующиеся или лишние элементы?
4. Глубина: не слишком ли глубокая иерархия для нужного контента?
5. Мобильная адаптация: как навигация будет работать на смартфоне?

Формат: список проблем с приоритетом + конкретные рекомендации по каждой проблеме.

*****

Почему это работает: Критерий «понятны ли названия без знания содержимого сайта» – это именно та точка зрения, которую дизайнер теряет после нескольких недель работы с проектом.

20. Разработка концепции лендинга для одного продукта

Проблема: Лендинг – это не просто «одностраничный сайт». Это последовательность аргументов, которая ведет пользователя от сомнения к действию. Без этой логики лендинг не работает.

Решение: Промпт создает полную структуру лендинга с описанием каждого блока и его задачи в цепочке убеждения.

Текст промпта:

*****

Ты – стратег по конверсии с опытом разработки структур продающих лендингов. Разработай структуру лендинга для продукта.

Данные о продукте:
– Продукт или услуга: [опишите, например, «онлайн-курс по финансовой грамотности для фрилансеров»]
– Целевая аудитория: [опишите, например, «фрилансеры 25–40 лет, которые хорошо зарабатывают, но не понимают, куда уходят деньги»]
– Главное возражение аудитории: [укажите, например, «у меня нет времени на обучение» и «я уже смотрел видео на эту тему – не помогло»]
– Цена и формат: [укажите, например, «19 900 рублей, 6 недель, онлайн, с куратором»]
– Желаемое действие: [укажите, например, «оставить заявку на бесплатный вводный урок»]

Разработай структуру лендинга:

1. Для каждого блока укажи: название блока, его задачу в цепочке убеждения, ключевое сообщение, рекомендуемые визуальные элементы.
2. Порядок блоков должен следовать логике: привлечение внимания → формирование доверия → снятие возражений → призыв к действию.
3. Укажи, где и как снимается каждое из возражений.
4. Предложи 3 варианта заголовка первого экрана.

Формат: нумерованный список блоков с описанием каждого. Итого 8–12 блоков.

*****

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

21. Проверка макета перед передачей разработчику

Проблема: Макет, который кажется готовым, часто содержит десятки мелких недоработок – несовпадающие отступы, непродуманные состояния, отсутствующие мобильные версии отдельных блоков.

Решение: Промпт создает персональный список проверки для конкретного проекта перед передачей макета в разработку.

Текст промпта:

*****

Ты – ведущий дизайнер с опытом финальной проверки макетов перед передачей в разработку. Создай список проверки для моего проекта.

Параметры проекта:
– Тип сайта: [укажите, например, «интернет-магазин одежды»]
– Инструмент дизайна: [укажите, например, «Figma»]
– Количество страниц в макете: [укажите, например, «14 страниц»]
– Точки перелома: [укажите, например, «мобильный, планшет, десктоп»]
– Особые элементы: [перечислите нестандартные элементы, например, «кастомный слайдер, фильтр товаров, личный кабинет»]

Создай список проверки, разбитый по категориям:

1. Полнота макета (все страницы, все состояния, все точки перелома).
2. Консистентность (единые отступы, цвета, шрифты, иконки).
3. Интерактивные состояния (наведение, нажатие, фокус, ошибка, загрузка).
4. Граничные случаи (длинный текст, отсутствующий контент, пустые состояния).
5. Подготовка к передаче (именование слоев, экспорт ассетов, комментарии).
6. Специфические проверки для нестандартных элементов проекта.

Формат: список проверки с чекбоксами (используй символ □). Каждый пункт – конкретное действие, не абстрактное требование.

*****

Почему это работает: Конкретные чекбоксы вместо абстрактных требований превращают проверку из «посмотрел, кажется нормально» в реальный процесс с фиксацией каждого пункта.

22. Написание описания проекта для портфолио

Проблема: Дизайнеры умеют делать красивые проекты, но описывать их так, чтобы это было убедительно для потенциального клиента или работодателя, – отдельный навык.

Решение: Промпт создает профессиональное описание проекта для портфолио с фокусом на задачу, решение и результат.

Текст промпта:

*****

Ты – карьерный консультант для дизайнеров с опытом составления описаний проектов для портфолио. Напиши описание проекта.

Данные о проекте:
– Клиент и ниша: [опишите, например, «небольшая сеть кофеен в Санкт-Петербурге»]
– Задача: [опишите исходную задачу, например, «разработать сайт для онлайн-заказа кофе с собой и продажи кофейных подписок»]
– Что было сделано: [перечислите ключевые этапы работы, например, «исследование аудитории, проектирование пользовательских сценариев, разработка дизайн-системы, создание макетов для десктопа и мобильного»]
– Результат: [укажите измеримые результаты, например, «конверсия в заказ выросла на 34% по сравнению со старым сайтом» или «запустили сайт за 6 недель»]
– Аудитория портфолио: [укажите, например, «потенциальные клиенты-предприниматели» или «HR-специалисты в дизайн-студии»]

Напиши описание проекта в двух форматах:

1. Короткое описание (50–80 слов) для превью в портфолио.
2. Полное описание (200–300 слов) для страницы кейса: задача → исследование → решение → результат.

Требования: конкретика вместо общих слов, акцент на мышлении дизайнера, а не только на визуале. Без клише вроде «создал уникальный дизайн».

*****

Почему это работает: Два формата сразу – короткий и полный – закрывают разные потребности: для галереи портфолио и для детального кейса, и не нужно переписывать одно в другое вручную.

23. Генерация идей для раздела «О компании»

Проблема: Раздел «О компании» – это страница, которую все делают, но мало кто делает хорошо. Обычно там: «Мы – команда профессионалов с многолетним опытом». Читать это невозможно.

Решение: Промпт создает нестандартные концепции страницы «О компании», которые действительно рассказывают историю и формируют доверие.

Текст промпта:

*****

Ты – контент-стратег и дизайнер с опытом создания нешаблонных страниц «О компании» для коммерческих сайтов. Предложи концепции для этой страницы.

Данные о компании:
– Ниша и тип бизнеса: [опишите, например, «семейная пекарня с 15-летней историей, три точки в Казани»]
– Ключевые факты, которые важны для клиентов: [перечислите, например, «используем только местное сырье, рецепты передаются в семье три поколения, все сотрудники – местные жители»]
– Чего категорически не хотят: [укажите, например, «никакого официоза, никаких стоковых фото»]
– Целевая аудитория: [опишите, например, «жители района, молодые семьи, ценящие натуральные продукты»]

Предложи три разные концепции страницы:

1. Структура страницы (какие блоки и в каком порядке).
2. Главная идея и эмоциональный фокус концепции.
3. Типы контента (текст, фото, видео, цифры, цитаты).
4. Заголовок страницы (не «О нас» и не «О компании») – 3 варианта.
5. Первый абзац текста – готовый к использованию.

Концепции должны кардинально отличаться по подходу и эмоции.

*****

Почему это работает: Запрет на «О нас» как заголовок и требование готового первого абзаца сразу выводит нейросеть из шаблонного мышления и дает материал, который можно использовать без переработки.

24. Разработка системы иконок для проекта

Проблема: Иконки из разных наборов, смешанные в одном интерфейсе, создают визуальный шум, который пользователь не осознает, но чувствует как «что-то не так».

Решение: Промпт помогает сформировать требования к системе иконок и создать список необходимых иконок для проекта.

Текст промпта:

*****

Ты – системный дизайнер с опытом разработки иконографии для веб-проектов. Помоги сформировать систему иконок для проекта.

Параметры проекта:
– Тип сайта и ниша: [опишите, например, «сервис для управления финансами малого бизнеса»]
– Визуальный стиль: [опишите, например, «современный, чистый, профессиональный, без игривости»]
– Размеры иконок в интерфейсе: [укажите, например, «16px, 24px, 32px»]
– Где используются иконки: [перечислите, например, «навигация, кнопки, списки преимуществ, уведомления»]

Создай следующее:

1. Требования к стилю иконок (толщина линий, скругления, заливка vs. контур, детализация).
2. Полный список необходимых иконок с группировкой по разделам сайта.
3. Рекомендации по выбору готового набора иконок (опиши характеристики подходящего набора, не называй конкретные продукты западных компаний).
4. Правила использования иконок в интерфейсе (когда использовать с подписью, когда без, минимальные отступы).
5. Список иконок, которые нужно нарисовать кастомно, если они специфичны для ниши.

Формат: структурированный список с группировкой. Список иконок – с кратким описанием каждой.

*****

Почему это работает: Выделение иконок, которые нужно рисовать кастомно, – это экономия времени: сразу понятно, что можно взять из готового набора, а что придется создавать с нуля.

25. Создание технического задания на разработку дизайн-системы

Проблема: Дизайн-система без технического задания – это набор красивых компонентов, которые разработчик реализует по-своему, потому что не понял принципов.

Решение: Промпт создает структурированное техническое задание на разработку дизайн-системы с описанием всех требований.

Текст промпта:

*****

Ты – технический директор продуктовой команды с опытом внедрения дизайн-систем. Составь техническое задание на разработку дизайн-системы.

Параметры проекта:
– Тип продукта: [опишите, например, «веб-приложение для управления складом»]
– Размер команды разработки: [укажите, например, «3 фронтенд-разработчика»]
– Технологический стек: [укажите, например, «React, TypeScript, CSS-модули»]
– Масштаб системы: [укажите, например, «50+ компонентов, 10+ страниц»]
– Сроки: [укажите, например, «первая версия за 2 месяца»]

Составь техническое задание, включающее:

1. Цели и принципы дизайн-системы.
2. Структура системы: токены, атомарные компоненты, составные компоненты, шаблоны.
3. Требования к документации каждого компонента.
4. Требования к именованию, версионированию и поддержке.
5. Процесс обновления системы (как вносить изменения, кто согласовывает).
6. Критерии готовности первой версии.
7. Список компонентов первого приоритета.

Формат: структурированный документ с заголовками и нумерованными пунктами. Язык – технический, точный.

*****

Почему это работает: Процесс обновления системы – это то, о чем думают в последнюю очередь при создании дизайн-системы, хотя именно отсутствие этого процесса превращает систему в устаревший архив через полгода.

26. Разработка концепции email-рассылки в едином стиле с сайтом

Проблема: Сайт выглядит идеально, а письма рассылки – как будто из другой компании. Это разрушает единое восприятие бренда.

Решение: Промпт создает концепцию дизайна email-шаблонов, согласованную с визуальным стилем сайта.

Текст промпта:

*****

Ты – дизайнер email-коммуникаций с опытом создания согласованных брендовых шаблонов. Разработай концепцию email-шаблонов для проекта.

Данные о проекте:
– Ниша и тип бизнеса: [опишите, например, «онлайн-школа профессиональной переподготовки»]
– Визуальный стиль сайта: [опишите, например, «строгий, профессиональный, темно-синяя палитра с белым, шрифт с засечками для заголовков»]
– Типы писем: [перечислите, например, «приветственное письмо, напоминание об уроке, сертификат о прохождении, акционное предложение»]
– Ограничения email-дизайна: [укажите, например, «максимальная ширина 600px, поддержка темной темы, работа в Яндекс.Почте и Mail.ru»]

Разработай концепцию:

1. Базовая структура письма (шапка, тело, подвал) с описанием каждой зоны.
2. Адаптация цветовой палитры сайта для email (что работает в письмах, что нет).
3. Типографика в письмах (системные шрифты как запасной вариант).
4. Для каждого типа письма: уникальные элементы и структура.
5. Требования к адаптивности (как письмо выглядит на смартфоне).
6. Что категорически нельзя делать в email-дизайне для данной ниши.

Формат: структурированный документ с описанием каждого элемента.

*****

Почему это работает: Уточнение конкретных почтовых клиентов (Яндекс.Почта, Mail.ru) сразу адаптирует рекомендации под российскую реальность – потому что поведение этих клиентов отличается от западных аналогов.

27. Написание брифа для фотографа или иллюстратора

Проблема: «Нам нужны красивые фотографии в стиле бренда» – это не бриф, это пожелание. Фотограф снимет то, что считает красивым, и это будет совсем не то.

Решение: Промпт создает детальный бриф для фотографа или иллюстратора с конкретными требованиями к стилю, содержанию и техническим параметрам.

Текст промпта:

*****

Ты – арт-директор с опытом постановки задач фотографам и иллюстраторам для веб-проектов. Составь бриф для творческого специалиста.

Данные проекта:
– Тип специалиста: [укажите, например, «фотограф» или «иллюстратор»]
– Ниша проекта: [опишите, например, «сайт сети фитнес-студий премиум-класса»]
– Что нужно снять или нарисовать: [перечислите, например, «портреты тренеров, интерьеры залов, тренировочный процесс»]
– Визуальное направление: [опишите, например, «темный фон, контрастное освещение, атмосфера силы и элегантности»]
– Технические требования: [укажите, например, «горизонтальные кадры для баннеров 1440x600px, вертикальные для карточек 400x600px, минимальное разрешение 300dpi»]

Составь бриф:

1. Общая концепция и настроение (описание эмоции, которую должны вызывать материалы).
2. Что категорически нельзя (позы, ракурсы, стиль обработки, которые не подходят).
3. Конкретный список сцен/объектов с описанием каждого.
4. Технические требования к файлам.
5. Референсы: опиши 3 примера в словах (стиль, настроение, характер).
6. Организационные детали: [укажите срок, количество итоговых материалов, формат сдачи].

Формат: структурированный документ, готовый к отправке специалисту.

*****

Почему это работает: Блок «что категорически нельзя» часто важнее, чем описание того, что нужно – он исключает самые распространенные ошибки интерпретации и сохраняет время на переснятие.

28. Разработка концепции пустых состояний интерфейса

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

Решение: Промпт создает концепцию пустых состояний для ключевых экранов веб-приложения.

Текст промпта:

*****

Ты – продуктовый дизайнер с опытом проектирования нулевых и пустых состояний для веб-приложений. Разработай концепцию пустых состояний.

Контекст:
– Тип приложения: [опишите, например, «сервис для ведения клиентской базы малого бизнеса»]
– Экраны с пустыми состояниями: [перечислите, например, «список клиентов, история сделок, раздел аналитики, входящие сообщения»]
– Тон коммуникации: [укажите, например, «дружелюбный, мотивирующий, без менторства»]
– Целевое действие пользователя: [укажите, например, «добавить первого клиента, импортировать базу»]

Для каждого экрана разработай пустое состояние:

1. Иллюстрация или иконка: что изображено, какое настроение (без конкретных инструментов).
2. Заголовок: 2–3 варианта (краткий, емкий, не «Здесь пока ничего нет»).
3. Поясняющий текст: 1–2 предложения, объясняющие что делать.
4. Призыв к действию: текст кнопки или ссылки.
5. Дополнительный элемент (если уместен): подсказка, видео-инструкция, ссылка на помощь.

Формат: отдельный блок для каждого экрана. Все тексты – готовые к использованию.

*****

Почему это работает: Требование предложить несколько вариантов заголовка с запретом на шаблонное «Здесь пока ничего нет» сразу выводит нейросеть на уровень реального UX-копирайтинга, а не заглушек.

29. Создание руководства по стилю для клиента

Проблема: После сдачи сайта клиент начинает добавлять контент: меняет шрифты, выбирает случайные цвета, добавляет картинки не того размера. Через полгода сайт выглядит иначе.

Решение: Промпт создает понятное руководство по стилю для клиента, написанное не для дизайнера, а для обычного человека.

Текст промпта:

*****

Ты – дизайнер с опытом создания брендбуков и руководств по стилю для клиентов без дизайнерского образования. Создай руководство по стилю для клиента.

Параметры проекта:
– Тип сайта: [укажите, например, «корпоративный сайт строительной компании»]
– Цветовая палитра: [перечислите цвета с кодами, например, «основной #1A2B4C, дополнительный #F5F0E8, акцентный #E8A020»]
– Шрифты: [укажите, например, «заголовки – Playfair Display, основной текст – Inter»]
– Кто будет добавлять контент: [опишите, например, «маркетолог компании без опыта работы с дизайном»]

Создай руководство, написанное простым языком:

1. Цвета: когда и где использовать каждый цвет, что нельзя делать с цветами.
2. Шрифты: какой шрифт для чего, размеры для разных типов текста.
3. Изображения: требования к фото (стиль, размер, формат), что нельзя использовать.
4. Логотип: правила размещения, минимальный размер, отступы, запрещенные варианты.
5. Типичные ошибки с примерами: «Так нельзя – вот почему – вот как правильно».

Формат: понятный документ с заголовками. Язык – как объяснение другу, а не технический регламент. Каждое правило – одно четкое предложение.

*****

Почему это работает: Раздел «типичные ошибки с примерами» – это то, что реально читают, в отличие от правил в вакууме. Человек узнает свою потенциальную ошибку и понимает, почему ее не нужно делать.

30. Разработка концепции раздела блога на сайте

Проблема: Блог на сайте – это либо мощный инструмент для привлечения трафика, либо кладбище из трех статей 2019 года. Разница – в продуманной концепции с самого начала.

Решение: Промпт создает полную концепцию раздела блога: структуру, типы контента, дизайн карточек и страницы статьи.

Текст промпта:

*****

Ты – контент-стратег и UX-дизайнер с опытом разработки разделов блога для коммерческих сайтов. Разработай концепцию раздела блога.

Данные проекта:
– Ниша и тип бизнеса: [опишите, например, «компания по автоматизации бизнес-процессов для среднего бизнеса»]
– Цели блога: [перечислите, например, «привлечение органического трафика, демонстрация экспертизы, подогрев потенциальных клиентов»]
– Целевая аудитория читателей: [опишите, например, «руководители компаний и IT-директора, читают между встречами»]
– Планируемая частота публикаций: [укажите, например, «2 статьи в месяц»]

Разработай концепцию раздела блога:

1. Структура главной страницы блога (какие блоки, фильтры, типы карточек).
2. Дизайн карточки статьи: какие элементы обязательны, какие опциональны.
3. Структура страницы отдельной статьи: все элементы от заголовка до «читайте также».
4. Категории и теги: рекомендуемая система классификации для данной ниши.
5. Элементы для удержания читателя и конвертации в лид.
6. Требования к изображениям для статей.

Дополнительно: предложи 5 идей для первых статей, которые будут привлекать целевую аудиторию.

Формат: структурированный документ с заголовками.

*****

Почему это работает: Элементы конвертации читателя в потенциального клиента – это то, что отличает блог как маркетинговый инструмент от блога как хобби. Их проектирование с самого начала встраивает бизнес-логику в структуру.

31. Финальный аудит сайта перед запуском

Проблема: Запуск сайта с необнаруженными ошибками – это не просто неловкость. Это испорченное первое впечатление, которое часть пользователей запомнит навсегда.

Решение: Промпт создает полный список финальной проверки сайта перед публикацией, охватывающий все аспекты от функциональности до аналитики.

Текст промпта:

*****

Ты – технический менеджер веб-проектов с опытом запуска сайтов разного масштаба. Создай список финальной проверки перед запуском сайта.

Параметры проекта:
– Тип сайта: [укажите, например, «корпоративный сайт с формой обратной связи и интеграцией с CRM»]
– Технологии: [укажите, например, «WordPress, форма на PHP, интеграция с amoCRM»]
– Особые функции: [перечислите, например, «онлайн-чат, счетчик посетителей, форма расчета стоимости»]
– Аналитика: [укажите, например, «Яндекс.Метрика, пиксель ВКонтакте»]

Создай список финальной проверки по категориям:

1. Функциональность: все формы, кнопки, ссылки, интеграции.
2. Контент: все тексты, изображения, метаданные страниц.
3. Производительность: скорость загрузки, оптимизация изображений.
4. Кроссбраузерность: проверка в основных браузерах и на устройствах.
5. Аналитика и отслеживание: настройка счетчиков, целей, событий.
6. Безопасность: SSL, защита форм от спама, резервные копии.
7. Поисковая оптимизация: базовые технические требования.

Формат: список проверки с чекбоксами (□). Каждый пункт – конкретное действие с указанием, как проверить. Приоритет критичных пунктов – пометить как [КРИТИЧНО].

*****

Почему это работает: Пометка [КРИТИЧНО] для ключевых пунктов позволяет в условиях сжатых сроков перед запуском сосредоточиться на том, что действительно нельзя пропустить, а не тратить одинаковое время на все подряд.

Типичные ошибки при использовании запросов для нейросети в работе веб-дизайнера

1. Давать нейросети задачу без контекста проекта. Запрос «придумай структуру сайта» без описания ниши, аудитории и целей дает универсальный результат, который подходит всем – а значит, не подходит никому конкретно.
2. Использовать результат нейросети без критической проверки. Нейросеть уверенно пишет то, что звучит правдоподобно, но иногда ошибается в деталях – особенно в технических требованиях, нормах доступности и специфике конкретной отрасли.
3. Задавать слишком широкий вопрос вместо узкой задачи. «Помоги с дизайном» – это не задача. «Придумай три концепции первого экрана для сайта стоматологической клиники с акцентом на снятие страха у пациентов» – это задача, с которой нейросеть справится.
4. Не указывать ограничения и запреты в промпте. Без четкого «чего нельзя» нейросеть часто выдает шаблонные решения – стоковые образы, клишированные тексты, очевидные структуры. Ограничения – это не необязательная опция, а ключевой параметр качественного результата.
5. Принимать первый вариант ответа как окончательный. Первый ответ нейросети – это черновик, а не финальный результат. Уточняющий запрос с конкретными правками («сделай заголовки короче», «убери канцелярит», «добавь конкретные цифры») улучшает результат в разы.
6. Игнорировать переменные в промпте и оставлять их незаполненными. Промпт с незаполненными переменными – это как техническое задание с пустыми полями. Нейросеть заполнит их сама, и результат будет максимально далек от реального проекта.
7. Ожидать, что нейросеть заменит этап исследования. Нейросеть не знает конкретного клиента, его аудиторию и рыночную ситуацию. Она работает с тем, что ей дают – и качество результата напрямую зависит от качества входных данных, которые предоставляет дизайнер.
8. Использовать один и тот же промпт для разных типов проектов без адаптации. Промпт для лендинга стартапа и промпт для корпоративного сайта производственной компании – это разные инструменты. Копирование без адаптации контекста дает предсказуемо слабый результат.
9. Не сохранять удачные промпты и начинать каждый раз с нуля. Если промпт дал отличный результат – это ценный шаблон, который можно адаптировать для следующего проекта. Каждый раз изобретать заново – это потеря времени, которое в дизайне всегда в дефиците.

Сравнение слабых и сильных запросов для нейросети: примеры из практики веб-дизайнера

Задача	Слабый запрос	Сильный запрос	Почему разница критична
Структура сайта	Придумай структуру сайта для строительной компании	Разработай карту сайта для компании по монтажу промышленных полов в Екатеринбурге. Цель: заявки от прорабов и владельцев заводов. До 18 страниц. Обоснуй каждый раздел.	Слабый запрос даст стандартный набор «Главная, О нас, Услуги, Контакты». Сильный – структуру, заточенную под конкретную аудиторию и цели
Текст для кнопки	Придумай текст для кнопки на сайте	Напиши 5 вариантов текста кнопки для формы записи на пробный урок в онлайн-школе. Тон – дружелюбный, без давления. Длина – 2–4 слова. Без слова «бесплатно».	Без ограничений нейросеть напишет «Записаться» или «Оставить заявку». С ограничениями – предложит неожиданные и точные варианты
Анализ конкурентов	Расскажи про конкурентов в нише доставки еды	Проанализируй три сайта доставки суши в Новосибирске по параметрам: первый экран, призыв к действию, элементы доверия, слабые места. Сформулируй возможности для дифференциации.	Общий вопрос даст общеизвестные факты. Структурированный запрос – конкретные выводы для проектирования
Концепция страницы	Придумай концепцию главной страницы для фитнес-клуба	Создай три кардинально разные концепции главной страницы фитнес-клуба премиум-класса. Аудитория: мужчины 30–45 лет. Главное возражение: «дорого». Для каждой – структура, цвета, эмоция, заголовок.	Слабый запрос даст одну усредненную концепцию. Сильный – три реально разных варианта для выбора с клиентом
Ответ на правку клиента	Помоги ответить клиенту, который хочет мигающие элементы	Составь ответ клиенту, который просит добавить мигающую кнопку. Тон – уважительный, без снисходительности. Объясни риски через пользу для бизнеса. Предложи 2 альтернативы. До 150 слов.	Слабый запрос даст общий ответ с объяснением «это некрасиво». Сильный – дипломатичный текст, готовый к отправке клиенту
Список проверки макета	Что нужно проверить перед сдачей макета?	Создай список проверки перед передачей макета интернет-магазина одежды разработчику. Figma, 16 страниц, три точки перелома. Особые элементы: фильтр товаров, личный кабинет. Формат: чекбоксы с конкретными действиями.	Общий вопрос даст универсальный список из интернета. Конкретный запрос – персональный список под проект с учетом нестандартных элементов
Описание для портфолио	Напиши описание проекта для портфолио	Напиши описание кейса редизайна сайта сети аптек. Задача – рост конверсии. Что сделал: исследование, прототипирование, тестирование. Результат – конверсия выросла на 28%. Два формата: 70 слов для превью и 250 слов для страницы кейса. Без клише.	Без данных нейросеть напишет шаблонное «разработал уникальный дизайн». С данными – убедительное описание с конкретными результатами

Неочевидные советы по работе с промптами для веб-дизайнера

1. Давайте нейросети роль, а не просто задачу – это меняет уровень ответа принципиально. «Ты – арт-директор с 10-летним опытом» дает другой результат, чем «помоги с дизайном»: нейросеть начинает отвечать с позиции опыта, а не с позиции поиска информации.
2. Используйте прием «три варианта» для любого творческого запроса. Когда нейросеть генерирует один вариант – она выдает наиболее вероятный. Когда три – вынуждена искать разные подходы, и среди них почти всегда есть нестандартное решение.
3. Добавляйте в промпт описание того, чего точно не должно быть в результате. Ограничения и запреты («без стоковых образов», «без слова ‘уникальный'», «без канцелярита») работают эффективнее, чем позитивные пожелания – они отсекают самые предсказуемые варианты.
4. Сохраняйте контекст проекта отдельным блоком и копируйте его в начало каждого нового промпта. Нейросеть не помнит предыдущие разговоры в новой сессии – без контекста каждый новый запрос начинается с нуля, и результаты теряют связность.
5. Просите нейросеть задать уточняющие вопросы перед выполнением задачи, а не после. Фраза «перед тем как начать, задай 3–5 уточняющих вопроса» помогает выявить то, что не было учтено в промпте, и получить более точный результат с первой попытки.
6. Используйте нейросеть для проверки собственных решений, а не только для генерации. Запрос «я принял такое дизайн-решение – найди в нем слабые места и возможные проблемы» дает более ценный результат, чем просто «придумай что-нибудь», потому что задействует аналитический режим.
7. Разбивайте сложные задачи на последовательные промпты вместо одного длинного запроса. Один большой промпт с десятью задачами дает поверхностные ответы на каждую. Серия коротких промптов, где следующий строится на результате предыдущего, дает глубокие и связные результаты – именно так работают профессиональные инструкции для нейросети в веб-дизайне.