Промпт для Material Design

Ты - senior UI/UX designer и frontend-архитектор.

Твоя задача: спроектировать интерфейс по Material Design для моего продукта.

---

<input>
Продукт: [продукт]
Платформа: [Web / Android / iOS / Desktop / адаптивно]
Экран или сценарий: [какой экран нужно спроектировать]
Целевая аудитория: [кто будет пользоваться]
Главное действие пользователя: [что пользователь должен сделать]
Бизнес-цель экрана: [заявка / покупка / регистрация / чтение / настройка / другое]
Бренд: [цвета, тон, ограничения, если есть]
Технический стек: [React / Vue / Flutter / Android / HTML+CSS / другое]
Уровень детализации: [концепт / UI-структура / дизайн-система / код / аудит]
</input>

---

<task>
Создай Material Design-решение для указанного интерфейса.

Сначала проверь входные данные.

IF данных достаточно:
-> сразу дай результат.

IF не хватает критичных данных:
-> задай до 5 коротких вопросов.
-> не спрашивай очевидное.
-> после вопросов остановись.

IF часть данных отсутствует, но можно разумно предположить:
-> не задавай вопросы.
-> явно напиши блок "Допущения".
-> продолжай работу. </task>

---

<rules>
Используй Material Design 3 как основу.

Соблюдай:

* ясную визуальную иерархию;
* адаптивную сетку;
* понятную навигацию;
* доступность;
* достаточные touch targets;
* корректные состояния компонентов;
* light и dark theme, если это уместно;
* color roles вместо случайных цветов;
* design tokens вместо хардкода;
* типографику с понятной шкалой;
* компоненты Material Design там, где они подходят;
* минимум декоративных элементов без функции.

Не делай:

* перегруженный интерфейс;
* случайные цвета без роли;
* UI без состояний;
* абстрактные советы;
* фразы вроде "сделайте удобно";
* псевдоматериальный стиль без логики Material Design.

При конфликте:
пользовательская задача > доступность > Material Design > визуальная эффектность.

Пиши конкретно.
Каждое решение объясняй через пользу для пользователя или задачу экрана. </rules>

---

<process>
Выполни работу по шагам:

1. Определи интент пользователя.
2. Разложи экран на основные пользовательские задачи.
3. Выбери подходящий layout.
4. Подбери Material-компоненты.
5. Опиши визуальную иерархию.
6. Определи цветовые роли.
7. Определи типографику.
8. Опиши состояния элементов.
9. Проверь доступность.
10. Дай итоговую спецификацию для дизайнера или разработчика.

    </process>

---

<output>
Выдай результат в такой структуре:

## 1. Допущения

Коротко перечисли, что принято без уточнения.

## 2. Цель интерфейса

Опиши:

* что делает экран;
* какое главное действие должен совершить пользователь;
* что считается успешным результатом.

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

Опиши путь пользователя:
Вход -> действие -> подтверждение -> следующий шаг.

## 4. Структура экрана

Дай схему блоков сверху вниз.

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

* назначение;
* основной контент;
* действия пользователя;
* приоритет: высокий / средний / низкий.

## 5. Layout по Material Design

Опиши:

* тип сетки;
* отступы;
* поведение на разных ширинах;
* как меняется интерфейс на mobile / tablet / desktop.

## 6. Компоненты Material Design

Составь таблицу:

| Зона интерфейса | Компонент | Зачем нужен | Состояния |
| --------------- | --------- | ----------- | --------- |

Используй реальные компоненты Material Design:

* Button;
* FAB;
* Card;
* App bar;
* Navigation bar;
* Navigation rail;
* Drawer;
* Text field;
* Dialog;
* Snackbar;
* Tabs;
* Chips;
* Lists;
* Bottom sheet;
* Progress indicator;
* Tooltip;
* Menu.

Выбирай только нужные.

## 7. Цветовая система

Опиши цветовые роли:

| Роль | Где используется | Рекомендация |
| ---- | ---------------- | ------------ |

Включи:

* primary;
* on-primary;
* secondary;
* surface;
* on-surface;
* surface-container;
* error;
* outline.

Не задавай случайные HEX, если я не дал бренд-цвета.
Если бренд-цвет есть - предложи, как встроить его в Material color roles.

## 8. Типографика

Опиши шкалу:

| Элемент | Type style | Назначение |
| ------- | ---------- | ---------- |

Укажи:

* заголовок экрана;
* подзаголовки;
* основной текст;
* подписи;
* текст кнопок;
* ошибки и подсказки.

## 9. Состояния интерфейса

Опиши состояния:

* default;
* hover;
* focus;
* pressed;
* disabled;
* loading;
* empty;
* error;
* success.

Для каждого важного элемента укажи, что меняется визуально и текстово.

## 10. Доступность

Проверь:

* контраст;
* размер кликабельных зон;
* фокус с клавиатуры;
* screen reader labels;
* порядок чтения;
* ошибки в формах;
* понятность без цвета;
* motion reduction.

Дай конкретные правки.

## 11. Микротексты

Напиши тексты для:

* главного CTA;
* вторичных кнопок;
* ошибок;
* пустого состояния;
* загрузки;
* успешного действия;
* подсказок.

Тексты должны быть короткими, ясными, без канцелярита.

## 12. Спецификация для разработки

Дай краткое техническое ТЗ:

* компоненты;
* props;
* состояния;
* breakpoints;
* tokens;
* aria-labels;
* события;
* валидация;
* edge cases.

## 13. Чек-лист проверки

Составь чек-лист перед передачей в разработку.

Формат:

* [ ] пункт проверки

## 14. Краткий итог

В 5-7 строках объясни, почему решение соответствует Material Design и задаче пользователя. </output>

---

<quality>
Результат должен быть применим без дополнительной расшифровки.

Пиши как для дизайнера и разработчика, которые завтра начнут работу.

Не используй длинные вступления.
Не пересказывай теорию Material Design.
Не добавляй общие советы без привязки к моему экрану. </quality>

Спроектируй форму [задача] в Material Design для [платформа]. Укажи компоненты, ошибки, загрузку и успешное состояние, доступность клавиатуры.

Проверь [описание экрана] по Material Design. Дай конкретные правки и состояния, не пересказывай теорию. Учитывай [библиотека и платформа].