Идея простая: у вас одно ТЗ, но вы хотите три разных визуальных решения — чтобы выбрать лучшее, показать клиенту варианты или смешать сильные стороны. Ниже — как сформулировать запрос к ИИ так, чтобы получить именно три чётких направления, а не три похожие версии одного и того же.

1) Из чего состоит хорошее ТЗ для ИИ
Пишите простыми фразами и конкретикой:
– Цель сайта: что должно произойти после просмотра (заявка, покупка, подписка).
– Аудитория: кто люди, возраст/контекст/устройство.
–Контент: логотип есть/нет, фото/иллюстрации, ключевые тексты/оффер.
– Страницы/экраны: какие блоки обязательны (шапка, герой, преимущества, отзывы, FAQ, футер).
– Технические рамки: сетка (12 колонок), сначала мобильные устройства, контраст ≥ WCAG AA, шрифты кириллица, «без перегруза анимациями».
– Стили, которые нравятся/не нравятся: 2–3 примера направлений и 2–3 табу.
– Совсем кратко: Цель + Аудитория + Блоки + Ограничения + Что точно не делать.

2) Как попросить ИИ про три направления (чтобы он понял)
Секрет — жёсткое разнесение вариантов. Прямо требуйте: «Сделай 3 направления, каждое — с названием, идеей, палитрой, типографикой, сеткой, ключевыми модулями и рисками».

Шаблон запроса
___
Задача: придумать 3 направления дизайна для [тип сайта] по ТЗ ниже.
Формат ответа по каждому направлению:
1) Название и идея (1–2 предложения).
2) Палитра (5 тонов с HEX: основной, акцент, фон, нейтрал-1, нейтрал-2).
3) Типографика (1–2 пары шрифтов с кириллицей, роли: H1/H2/текст/кнопки).
4) Сетка и ритм (12 колонок/8pt, отступы, сетка карточек).
5) Ключевые модули (самый верхний, первый экран страницы (Herro), оффер, преимущества, отзыв, CTA, FAQ и т. д.) — кратко: чем отличаются.
6) Анимации/микроинтеракции (сдержанно, зачем и где).
7) Тональность контента (деловой/дружелюбный/экологичный и т. п.).
8) Риски и когда НЕ подходит.
9) Превью-вайрфрейм в тексте: список блоков по порядку (mobile → desktop).

Общие ограничения: сначала мобильные устройства, контраст ≥ AA, читаемость, без перегруза эффектами.
ТЗ: [вставьте своё ТЗ].
Сделай варианты максимально непохожими друг на друга.
___

3) Пример: одно ТЗ → три разных направления
ТЗ (кратко): Лендинг онлайн-курса по веб-дизайну для новичков. Цель — запись на поток. Аудитория 20–45, в основном мобильные. Нужны: самый верхний, первый экран страницы (Herro) с оффером, блок «Как проходит обучение», программа, отзывы, тарифы, FAQ, форма заявки.

Что просим у ИИ: по шаблону выше.
Какие направления получить хотим:

«Чистый Минимализм»
Идея: воздух, крупная типографика, акцент на оффере и CTA.
Палитра: #0B132B, #5BC0EB, #FAFAFA, #E6E6E6, #FFB703.
Типографика: Inter/Manrope.
Сетка: 12 колонок, крупные поля, карточки 2×2 на desktop, одна колонка на mobile.
Где работает: универсально, быстро грузится.
Риск: «слишком спокойно» для молодых аудиторий.

«Необрутализм для внимания»
Идея: контрастные плашки, жирные кнопки, заметные формы.
Палитра: #111111, #FFD60A, #FFFFFF, #FF6B6B, #6C757D.
Типографика: Sora/Inter.
Сетка: чёткая, карточки-плашки, крупные CTA.
Где работает: активные промо, короткие решения.
Риск: переусердствовать с контрастом → утомляет.

«Organic & Friendly»
Идея: мягкие формы, природные оттенки, доверительные отзывы.
Палитра: #1B4332, #95D5B2, #F6FFF8, #FFD7A3, #2D6A4F.
Типографика: Nunito/Source Serif.
Сетка: карточки с радиусами, акцент на фото студентов.
Где работает: обучение, забота, психологическая безопасность.
Риск: потерять «технологичность», если мало контраста.

4) Как попросить визуальные подсказки (палитры, шрифты, компоненты)
Добавьте уточнение:
___
Для каждого направления:
— Предложи 2 альтернативных палитры (HEX) на случай тёмной/светлой темы.
— Дай fallback-шрифты (если нет веб-шрифтов).
— Опиши состояния кнопок: default/hover/disabled.
— Укажи 3 иконки и иллюстративный стиль (строчные/заливка/линейные).
___

5) Как попросить вайрфрейм текстом
Чтобы дальше быстро собрать в Figma:
___
Сгенерируй текстовый вайрфрейм (mobile → desktop):
1. Hero (самый верхний, первый экран страницы): заголовок ≤ 8 слов, подзаголовок ≤ 20, кнопка «Записаться».
2. Блок «Как проходит»: 3 карточки (иконка+заголовок+12–18 слов).
3. Программа: аккордеон из 6 модулей (название + 1 строка).
4. Отзывы: 3 карточки, портрет 64×64, цитата ≤ 25 слов.
5. Тарифы: 3 карточки, цена, 5 пунктов, CTA.
6. FAQ: 6 вопросов.
7. Футер: логотип, меню, соцсети.
Выведи контент, без воды, без lorem ipsum.
___

6) Как сравнить и выбрать: быстрый чек-лист
– Цель выполняется? Кнопка/форма заметны, путь понятный.
– Мобильная версия сильная? Ничего не «прыгает», текста достаточно, кнопки крупные.
– Читаемость: контраст, межстрочные, длина строки.
– Фокус: один главный акцент на экран.
Отстройка: направления реально разные, а не «перекрашенные клоны».
Сделайте мини-таблицу оценки (по 10 баллов): Читаемость / Фокус / УТП / Мобильность / Эмоция.

7) Частые ошибки и как их избежать
Три похожих варианта.
→ В запросе обязуйте ИИ назвать идею и риски каждого стиля — это заставляет делать их разными.
Слишком абстрактно.
→ Давайте цифры: «заголовок ≤ 8 слов», «3 карточки», «контраст ≥ AA».
Красиво, но неудобно.
→ Сразу просите mobile-first (сначала мобильные устройства) и текстовый вайр.
Плохой текст-рыба.
→ Просите «без lorem ipsum», короткие фразы, понятный оффер.

8) Финальный шаблон «всё-в-одном»
Скопируйте и подставьте своё ТЗ:
___
Сделай 3 принципиально разных направления дизайна по ТЗ ниже.
Для каждого варианта верни блоки 1–9 (как в разделе «Формат ответа»).
Общие ограничения: mobile-first, контраст ≥ AA, кириллица, 12-колоночная сетка, без перегруза анимациями.
Добавь: 2 альтернативные палитры, fallback-шрифты, состояния кнопок, текстовый вайр (mobile → desktop) без lorem ipsum.
ТЗ: [вставьте своё].
Сделай ответы компактными, но конкретными (HEX, названия шрифтов, количество элементов).
Добавь: 2 альтернативные палитры, fallback-шрифты, состояния кнопок, текстовый вайр (mobile → desktop) без lorem ipsum.
ТЗ: [вставьте своё].
Сделай ответы компактными, но конкретными (HEX, названия шрифтов, количество элементов).
___

Напишите в комметариях, понравился ли вам пост? Если есть вопросы – задавайте, с радостью отвечу.