Компактный хендофф: дерево компонентов, сетка, токены, взаимодействия, состояния, доступность и маппинг на React и Tailwind.
Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.
Значения сразу появятся в превью, коде и при копировании.
Ты — senior продуктовый дизайнер и фронтенд-архитектор. Подготовь полный хендофф интерфейса, готовый к реализации ИИ-агентами и фронтенд-разработчиками. Пиши структурно, точно и системно. Интерфейс: [описание или скриншоты экрана/фичи] Стек: [например: React + Tailwind] Существующая дизайн-система: [есть / нет, ссылка] Разделы: 1. Обзор: назначение UI и основной пользовательский сценарий. 2. Архитектура компонентов: полное дерево, связи родитель — потомок, переиспользуемые компоненты. 3. Раскладка: сетка (колонки, шкала отступов), поведение от мобильного до десктопа. 4. Токены: цвета по семантическим ролям, шкала типографики, отступы, радиусы, elevation. 5. Взаимодействия: hover и active, переходы (длительность, easing), микровзаимодействия. 6. Логика состояний: загрузка, пусто, ошибка, крайние случаи. 7. Доступность: контраст, клавиатура, ARIA где нужно. 8. Маппинг на фронтенд: структура React/Tailwind, имена компонентов, props и варианты. Формат ответа: - Обзор - Дерево компонентов - Токены - Правила взаимодействия - Состояния - Доступность - Маппинг на фронтенд - Заметки по реализации
```text Ты — senior продуктовый дизайнер и фронтенд-архитектор. Подготовь полный хендофф интерфейса, готовый к реализации ИИ-агентами и фронтенд-разработчиками. Пиши структурно, точно и системно. Интерфейс: [описание или скриншоты экрана/фичи] Стек: [например: React + Tailwind] Существующая дизайн-система: [есть / нет, ссылка] Разделы: 1. Обзор: назначение UI и основной пользовательский сценарий. 2. Архитектура компонентов: полное дерево, связи родитель — потомок, переиспользуемые компоненты. 3. Раскладка: сетка (колонки, шкала отступов), поведение от мобильного до десктопа. 4. Токены: цвета по семантическим ролям, шкала типографики, отступы, радиусы, elevation. 5. Взаимодействия: hover и active, переходы (длительность, easing), микровзаимодействия. 6. Логика состояний: загрузка, пусто, ошибка, крайние случаи. 7. Доступность: контраст, клавиатура, ARIA где нужно. 8. Маппинг на фронтенд: структура React/Tailwind, имена компонентов, props и варианты. Формат ответа: - Обзор - Дерево компонентов - Токены - Правила взаимодействия - Состояния - Доступность - Маппинг на фронтенд - Заметки по реализации ```
{
"messages": [
{
"role": "user",
"content": "Ты — senior продуктовый дизайнер и фронтенд-архитектор. Подготовь полный хендофф интерфейса, готовый к реализации ИИ-агентами и фронтенд-разработчиками. Пиши структурно, точно и системно.\n\nИнтерфейс: [описание или скриншоты экрана/фичи]\nСтек: [например: React + Tailwind]\nСуществующая дизайн-система: [есть / нет, ссылка]\n\nРазделы:\n1. Обзор: назначение UI и основной пользовательский сценарий.\n2. Архитектура компонентов: полное дерево, связи родитель — потомок, переиспользуемые компоненты.\n3. Раскладка: сетка (колонки, шкала отступов), поведение от мобильного до десктопа.\n4. Токены: цвета по семантическим ролям, шкала типографики, отступы, радиусы, elevation.\n5. Взаимодействия: hover и active, переходы (длительность, easing), микровзаимодействия.\n6. Логика состояний: загрузка, пусто, ошибка, крайние случаи.\n7. Доступность: контраст, клавиатура, ARIA где нужно.\n8. Маппинг на фронтенд: структура React/Tailwind, имена компонентов, props и варианты.\n\nФормат ответа:\n- Обзор\n- Дерево компонентов\n- Токены\n- Правила взаимодействия\n- Состояния\n- Доступность\n- Маппинг на фронтенд\n- Заметки по реализации"
}
]
}