Генерация изображений и дизайн

Промпт для веб-дизайна

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

Обновлено: 2026-10-09

Промпт

<role>
Ты - senior web designer + UX/UI архитектор.
</role>

<context>
Мне нужен дизайн сайта, который решает бизнес-задачу, а не просто красиво выглядит.

Проект:
[тип сайта: лендинг / корпоративный сайт / интернет-магазин / SaaS / личный бренд / другое]

Ниша:
[ниша]

Целевая аудитория:
[кто будет пользоваться сайтом]

Цель сайта:
[заявки / продажи / запись / подписки / доверие / презентация продукта / другое]

Стиль бренда:
[строгий / минималистичный / премиальный / технологичный / дружелюбный / яркий / другое]

Ограничения:
[цвета, шрифты, CMS, сетка, мобильная версия, доступность, сроки, что нельзя использовать]

Материалы:
[текст, логотип, референсы, ссылки, структура, если есть] </context>

<task>
Разработай концепцию веб-дизайна для этого проекта.
Не рисуй изображение. Дай текстовое ТЗ, по которому дизайнер или нейросеть для генерации макетов сможет собрать экран.
</task>

<rules>
Главное: польза > красота > оригинальность.

Думай как UX-дизайнер:

* сначала задача пользователя
* затем путь к целевому действию
* затем структура экранов
* затем визуальный стиль

Не используй общие фразы вроде "современный дизайн", "удобный интерфейс", "привлекательный сайт" без конкретики.

Каждое дизайнерское решение объясняй через задачу:
решение -> зачем нужно -> как влияет на пользователя.

Учитывай:

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

  </rules>

<output>
Дай результат в структуре:

## 1. Краткая идея дизайна

1-3 предложения: какой образ должен создать сайт и почему.

## 2. Пользовательский сценарий

Опиши путь пользователя:
первый контакт -> понимание предложения -> доверие -> действие.

## 3. Структура страницы / сайта

Для каждого блока укажи:

* название блока
* цель блока
* что в нем должно быть
* какой CTA использовать

## 4. Первый экран

Опиши:

* заголовок
* подзаголовок
* главный CTA
* вторичный CTA
* визуальный акцент
* что должно быть видно без скролла

## 5. Визуальный стиль

Опиши:

* настроение
* цветовую логику
* типографику
* сетку
* отступы
* форму карточек и кнопок
* иллюстрации / фото / 3D / иконки

## 6. UX-решения

Дай список конкретных решений:
решение -> зачем нужно.

## 7. Мобильная версия

Опиши, что изменить на мобильных:

* порядок блоков
* меню
* кнопки
* карточки
* формы
* изображения

## 8. Компоненты интерфейса

Перечисли нужные компоненты:
header, hero, карточки, формы, FAQ, отзывы, футер и другие.

## 9. Ошибки дизайна

Список того, чего нельзя делать в этом проекте.

## 10. Финальное ТЗ для макета

Собери короткое техническое задание для дизайнера:

* формат
* количество экранов
* брейкпоинты
* сетка
* состояния кнопок
* состояния форм
* требования к адаптиву
* требования к передаче в разработку

  </output>

<quality_check>
Перед ответом проверь:

* нет ли общих фраз без пользы
* понятен ли первый экран
* ведет ли структура к целевому действию
* можно ли по описанию собрать макет
* учтена ли мобильная версия
  </quality_check>
Ваши данные → готовый запрос

Соберите свой промпт

Ответьте на вопросы. Промпт собирается бесплатно прямо здесь. Незаполненные места можно дополнить позже.

Открыть в конструкторе →

Можно пропустить: в промпте останется место для ваших данных.

Можно пропустить: в промпте останется место для ваших данных.

Можно пропустить: в промпте останется место для ваших данных.

Можно пропустить: в промпте останется место для ваших данных.

Можно пропустить: в промпте останется место для ваших данных.

Можно пропустить: в промпте останется место для ваших данных.

Можно пропустить: в промпте останется место для ваших данных.

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

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

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

Живой предпросмотр

Подставленное выделено зелёным, незаполненное — пунктиром.

<role>
Ты - senior web designer + UX/UI архитектор.
</role>

<context>
Мне нужен дизайн сайта, который решает бизнес-задачу, а не просто красиво выглядит.

Проект:
[тип сайта: лендинг / корпоративный сайт / интернет-магазин / SaaS / личный бренд / другое]

Ниша:
[ниша]

Целевая аудитория:
[кто будет пользоваться сайтом]

Цель сайта:
[заявки / продажи / запись / подписки / доверие / презентация продукта / другое]

Стиль бренда:
[строгий / минималистичный / премиальный / технологичный / дружелюбный / яркий / другое]

Ограничения:
[цвета, шрифты, CMS, сетка, мобильная версия, доступность, сроки, что нельзя использовать]

Материалы:
[текст, логотип, референсы, ссылки, структура, если есть] </context>

<task>
Разработай концепцию веб-дизайна для этого проекта.
Не рисуй изображение. Дай текстовое ТЗ, по которому дизайнер или нейросеть для генерации макетов сможет собрать экран.
</task>

<rules>
Главное: польза > красота > оригинальность.

Думай как UX-дизайнер:

* сначала задача пользователя
* затем путь к целевому действию
* затем структура экранов
* затем визуальный стиль

Не используй общие фразы вроде "современный дизайн", "удобный интерфейс", "привлекательный сайт" без конкретики.

Каждое дизайнерское решение объясняй через задачу:
решение -> зачем нужно -> как влияет на пользователя.

Учитывай:

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

  </rules>

<output>
Дай результат в структуре:

## 1. Краткая идея дизайна

1-3 предложения: какой образ должен создать сайт и почему.

## 2. Пользовательский сценарий

Опиши путь пользователя:
первый контакт -> понимание предложения -> доверие -> действие.

## 3. Структура страницы / сайта

Для каждого блока укажи:

* название блока
* цель блока
* что в нем должно быть
* какой CTA использовать

## 4. Первый экран

Опиши:

* заголовок
* подзаголовок
* главный CTA
* вторичный CTA
* визуальный акцент
* что должно быть видно без скролла

## 5. Визуальный стиль

Опиши:

* настроение
* цветовую логику
* типографику
* сетку
* отступы
* форму карточек и кнопок
* иллюстрации / фото / 3D / иконки

## 6. UX-решения

Дай список конкретных решений:
решение -> зачем нужно.

## 7. Мобильная версия

Опиши, что изменить на мобильных:

* порядок блоков
* меню
* кнопки
* карточки
* формы
* изображения

## 8. Компоненты интерфейса

Перечисли нужные компоненты:
header, hero, карточки, формы, FAQ, отзывы, футер и другие.

## 9. Ошибки дизайна

Список того, чего нельзя делать в этом проекте.

## 10. Финальное ТЗ для макета

Собери короткое техническое задание для дизайнера:

* формат
* количество экранов
* брейкпоинты
* сетка
* состояния кнопок
* состояния форм
* требования к адаптиву
* требования к передаче в разработку

  </output>

<quality_check>
Перед ответом проверь:

* нет ли общих фраз без пользы
* понятен ли первый экран
* ведет ли структура к целевому действию
* можно ли по описанию собрать макет
* учтена ли мобильная версия
  </quality_check>

Ответы остаются на этой странице и исчезают при перезагрузке. В ссылке — только выбранная задача.

Шаблон + ваши данные

Нужно много вариантов этого промпта?

Внесите объекты, носители, цвета и стили в таблицу. Promptada соберёт пакет текстовых заданий для дизайн-концепций и генераторов изображений.

Создать аккаунт

Как пользоваться

  1. Заполните [тип сайта], [нишу], [аудиторию], [цель], [главное действие], [контент], [стиль] и [ограничения].
  2. Отправьте данные в GPT-6.1 Sol или Gemini 3.8 Flash и попросите объяснить назначение каждого блока.
  3. Проверьте путь на прототипе, замените выдуманные детали подтверждёнными и согласуйте ТЗ с дизайнером.

Для каких нейросетей

Нейросеть Версия Насколько подходит Примечание
GPT 6.1 Sol Хорошо Текстовое ТЗ; исполнение отдельно.
Gemini 3.8 Flash Хорошо Разбор вводных и вариантов.

Пример результата

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

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

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

Страницы: главная, услуги, контакты, подтверждение записи. На телефоне форма остаётся короткой: контакт и описание; стоимость не выдумывается, если её нет в исходных данных.

Как улучшить результат

  • Опишите, с каким вопросом приходит посетитель.
  • Укажите, какие сведения можно публиковать.
  • Сформулируйте действие первого экрана.
  • Исключите блоки без задачи.
  • Попросите мобильный путь отдельно от десктопного.

Варианты промпта

Для SaaS

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

Для специалиста

Составь дизайн-ТЗ сайта [специалист]. Главное действие [действие], реальные услуги [услуги], доказательства [материалы], короткая мобильная форма.

Частые ошибки

  • Начинать с декоративного стиля без пользовательской задачи.
  • Добавлять отзывы, которых нет во вводных.
  • Создавать страницы без понятного перехода к цели.

Вопросы и ответы

Как продумать веб-дизайн?

Задайте аудиторию, цель и доступный контент. Модель предложит структуру и ТЗ, которые затем нужно превратить в макет и проверить.

Как связать путь пользователя с целью?

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

Какие экраны нужны?

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

От одного промпта к потоку

Один бриф - серия текстовых промптов

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

Создать аккаунт