Промпт для веб-дизайна
Продумайте сайт через задачу посетителя и бизнес-цель. Промпт выдаёт путь пользователя, содержание первого экрана, структуру страниц и требования к мобильной версии для передачи дизайнеру.
Обновлено: 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>
Нужно 100 таких промптов под разные данные? Загрузите таблицу в Promptada.
Создать аккаунт Для пакетной работы с текстами.Ответы остаются на этой странице и исчезают при перезагрузке. В ссылке — только выбранная задача.
Нужно много вариантов этого промпта?
Внесите объекты, носители, цвета и стили в таблицу. Promptada соберёт пакет текстовых заданий для дизайн-концепций и генераторов изображений.
Создать аккаунтКак пользоваться
- Заполните [тип сайта], [нишу], [аудиторию], [цель], [главное действие], [контент], [стиль] и [ограничения].
- Отправьте данные в GPT-6.1 Sol или Gemini 3.8 Flash и попросите объяснить назначение каждого блока.
- Проверьте путь на прототипе, замените выдуманные детали подтверждёнными и согласуйте ТЗ с дизайнером.
Для каких нейросетей
| Нейросеть | Версия | Насколько подходит | Примечание |
|---|---|---|---|
| GPT | 6.1 Sol | Хорошо | Текстовое ТЗ; исполнение отдельно. |
| Gemini | 3.8 Flash | Хорошо | Разбор вводных и вариантов. |
Пример результата
Вводные: сайт небольшого сервиса ремонта велосипедов, цель - запись на диагностику, пользователь не знает причину поломки.
Путь: понять, с какими проблемами работает сервис - узнать порядок диагностики - выбрать способ записи - отправить контакт и описание проблемы.
Первый экран: “Поможем разобраться с неисправностью велосипеда”; короткое описание диагностики; кнопка “Записаться”. Далее: примеры симптомов, порядок работы, подтверждённые условия, адрес и форма.
Страницы: главная, услуги, контакты, подтверждение записи. На телефоне форма остаётся короткой: контакт и описание; стоимость не выдумывается, если её нет в исходных данных.
Как улучшить результат
- Опишите, с каким вопросом приходит посетитель.
- Укажите, какие сведения можно публиковать.
- Сформулируйте действие первого экрана.
- Исключите блоки без задачи.
- Попросите мобильный путь отдельно от десктопного.
Варианты промпта
Для SaaS
Продумай сайт сервиса [сервис] для [аудитория]. Путь от проблемы к пробному использованию, структура страниц и состояния регистрации, без выдуманных показателей.
Для специалиста
Составь дизайн-ТЗ сайта [специалист]. Главное действие [действие], реальные услуги [услуги], доказательства [материалы], короткая мобильная форма.
Частые ошибки
- Начинать с декоративного стиля без пользовательской задачи.
- Добавлять отзывы, которых нет во вводных.
- Создавать страницы без понятного перехода к цели.
Вопросы и ответы
Как продумать веб-дизайн?
Задайте аудиторию, цель и доступный контент. Модель предложит структуру и ТЗ, которые затем нужно превратить в макет и проверить.
Как связать путь пользователя с целью?
Опишите вопрос посетителя и путь к ответу, затем целевое действие. Каждый блок должен помогать пройти этот путь.
Какие экраны нужны?
Обычно нужны входная страница, описание предложения, контакт или форма и подтверждение. Точный набор зависит от задачи и сложности продукта.