Детальный вайрфрейм пользовательского потока продукта

  • text-to-text

(от codex-master )

  • text-to-text

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

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

Вы - высококвалифицированный UI/UX‑дизайнер с опытом работы с крупными брендами. Ваша задача - создать детализированный вайрфрейм для конкретного пользовательского потока (пользовательский поток) на заданном типе продукта (сайт или приложение). Перед запуском выполните следующие требования и выдайте результат в строго структурированном формате (см. «Формат вывода»).

Входные данные (обязательно включить или явно указать значение «по умолчанию»):
- user_flow: краткое название и последовательность шагов (напр., "Регистрация → Подбор продукта → Оформление заказа").
- product_type: тип продукта (выбрать: "мобильное приложение", "адаптивный веб‑сайт", "одностраничный сайт", "десктоп‑приложение").
- target_audience: ключевые характеристики пользователей (возраст, опыт, цели).
- primary_platforms и breakpoints: целевые устройства и ширины (напр., mobile 360-425, tablet 768, desktop 1024+).
- brand_guidelines: цветовая палитра, типографика, тон коммуникации; если отсутствует - укажите "default: современный минимализм" (светлая тема).
- business_goals: основные метрики/цели (напр., увеличение конверсий регистрации, уменьшение оттока).
- technical_constraints (опционально): ограничения (напр., шрифты, локализация, CMS, ограничения скорости загрузки).
- max_screens (опционально): макс. число экранов в вайрфрейме; по умолчанию 8.

Обязательные элементы вайрфрейма (для каждой страницы/экрана потока):
- Screen ID и название.
- Цель экрана (1-2 предложения, что пользователь должен сделать).
- Схематический макет: блоковая схема (ASCII/box‑layout или условное описательное представление) с указанием зон: header, nav, main, sidebar, footer.
- Перечень элементов с детальной спецификацией для каждого:
  - element_id, тип (кнопка, ссылка, изображение, карточка, поле ввода, чекбокс, селект и т.д.),
  - расположение (зона/позиция: top-left/top-right/center/row/column),
  - пример размеров (px или % для заданных breakpoints),
  - уровень приоритета/визуального веса (primary/secondary/tertiary),
  - текст/микрокопия (точная формулировка CTA, placeholder, ошибки),
  - состояния (default/hover/focus/disabled/active).
- Взаимодействия и переходы: для каждого интерактивного элемента - событие (tap/click), результат (переход на Screen ID, открытие модального окна, валидация), анимация (коротко: fade/slide/none) и ожидаемая продолжительность.
- Доступность: aria‑label (где необходимо), требования к контрасту (минимум AA), крупность интерактивных зон, клавиатурная доступность, читабельность микрокопии.
- Адаптивность: изменения расположения/размеров для указанных breakpoints (ключевые отличия).
- Спецификация ассетов: изображения (размеры, соотношение сторон), иконки (контур/filled), требования к форматам и именованию для экспорта.
- UX‑обоснование: короткое объяснение дизайнерского выбора (1-3 предложения) и какие KPI/поведение пользователей это поддерживает.
- Риски и предположения: что располагалось на основе допущений (если brand_guidelines неполные).
- Handoff‑заметки: разметка стилей (цвета с HEX, типографика - веса и размеры для заголовков/тела, отступы: базовая сетка), рекомендации для прототипирования и разработчиков.

Требования к стилю и трендам:
- Учитывайте современные тренды (минимализм, доступность, микровзаимодействия, продуманные переходы) и согласуйте их с brand_guidelines.
- Предлагайте конкретные CTA‑формулировки и приоритеты для повышения вовлечения.
- Не добавляйте визуальный дизайн (цветовые макеты/иллюстрации) сверх указанных спецификаций, если brand_guidelines не включают их.

Ограничения:
- Не выходите за рамки указанного user_flow и max_screens.
- Не включайте необоснованные пользовательские сценарии.
- Не требуйте дополнительных данных от заказчика; если данных недостаточно - явно пометьте предположение в разделе "Риски и предположения".

Формат вывода (обязательно):
Выдайте результат в виде JSON-объекта с точно следующей структурой:
{
  "metadata": {
    "user_flow": "...",
    "product_type": "...",
    "target_audience": "...",
    "breakpoints": [...],
    "brand_guidelines": "...",
    "business_goals": "..."
  },
  "screens": [
    {
      "id": "screen_1",
      "name": "...",
      "goal": "...",
      "layout_schema": "ASCII/box layout string or descriptive grid",
      "elements": [
        {
          "element_id": "btn_primary_1",
          "type": "button",
          "zone": "header/center/row1",
          "size": {"desktop":"120x40px","mobile":"100x36px"},
          "priority":"primary",
          "text":"...",
          "states":["default","hover","disabled"],
          "interaction":{"event":"click","action":"go_to:screen_2","animation":"fade 150ms"},
          "accessibility":{"aria":"...","contrast_ratio":"..."}
        }
        ...
      ],
      "interactions_summary": [...],
      "accessibility_notes":"...",
      "responsive_notes":"...",
      "assets":[...],
      "ux_rationale":"...",
      "risks_assumptions":"..."
    }
    ...
  ],
  "design_tokens": {
    "colors": {"primary":"#...","accent":"#..."},
    "typography": {"h1":"24px/700","body":"16px/400"},
    "spacing": {"base":"8px"}
  },
  "handoff_instructions":"..."
}

Дополнительно:
- Для каждого экрана приложите одну‑две строки «UX KPI», которые должны улучшиться (напр., "увеличение CTR на CTA на 10%").
- Четко пометьте все места, где вы сделали допущения из‑за неполных входных данных.

Попробуйте этот промпт

ChatGPT, Claude, GigaChat, Алиса ИИ, По нейросетям, Типы промптов, Яндекс GPT