Подставь входные данные и верни только полноценное руководство по дизайну продукта в указанной структуре. Давай конкретные спецификации, токены, состояния компонентов и требования по доступности без воды.
Вы - опытный UI/UX‑дизайнер с более чем 50 годами практической работы с крупными брендами. Ваша задача - создать исчерпывающее, практичное и легко применимое руководство по дизайну для продукта, описанного ниже. Руководство должно быть понятно другим дизайнерам, разработчикам и заинтересованным сторонам и содержать конкретные спецификации (цвета с HEX, типографику с размерами и высотами строк, сетки и брейкпоинты, образцы компонентов и их состояния, примеры CSS/Design Tokens), а также чек‑лист для контроля качества и требования по доступности.
Входные данные (подставьте значения; если не указано - используйте дефолтные значения):
- Название продукта: [название] (по умолчанию: "Продукт")
- Тип продукта (обязательно): [ТИП_САЙТА_ИЛИ_ПРИЛОЖЕНИЯ] (если не задано - по умолчанию "адаптивный веб‑сайт для бизнеса/сервиса")
- Платформы: [web, iOS, Android, responsive] (по умолчанию: "web (адаптивный)")
- Целевая аудитория: [короткое описание; возраст, навыки, приоритеты] (по умолчанию: "широкая аудитория потребителей/корпоративных пользователей")
- Бренд‑личность/тон: [напр., строгий, дружелюбный, инновационный] (по умолчанию: "профессиональный и дружелюбный")
- Ключевые функции/контент: [список функций/типов контента; например: каталог товаров, личный кабинет, аналитика] (по умолчанию: "информативные страницы + формы взаимодействия")
- Требования по доступности: [WCAG AA / AAA] (по умолчанию: "WCAG AA")
- Ограничения/предпочтения (необязательно): [существующие цвета/лого/шрифты и т. п.]
Требования к содержанию руководства (обязательно включить все пункты):
1. Краткое резюме (1-2 абзаца): цель руководства, целевая аудитория продукта, ключевые приоритеты UX.
2. Фундамент бренда: тон/голос, ключевые принципы дизайна (3-6 принципов).
3. Цветовая система:
- Палитра: primary, secondary, accent, neutral (light/medium/dark) - для каждого дать HEX, пример использования (фон, текст, CTA, границы), контрастные пары.
- Минимальные требования к контрасту (указать значения и примеры).
4. Типографика:
- Основной и вспомогательный шрифты (с запасным стеком), пример стилизации.
- Стили: H1…H6, Body, Caption, Button - указать размер, line‑height, letter‑spacing, weight.
- Объяснить систему масштабирования (например, шкала 4‑8‑16) и правила использования.
5. Иконография:
- Стиль, размеры (px), плотность, пример набора, правила наполнения/контуров.
- Рекомендации по доступности и подписи иконок.
6. Сетка и макет:
- Система сетки (колонки, gutter, контейнеры) и брейкпоинты.
- Правила отступов и модульной шкалы spacing (например: 4,8,16,24…).
- Примеры шаблонов страниц (минимум 2: главная/страница продукта или дашборд).
7. Навигация:
- Шаблоны глобальной и локальной навигации, паттерны хлебных крошек, мобильная навигация и поведение при прокрутке.
8. Компоненты UI и их состояния:
- Кнопки (primary/secondary/ghost/disabled), поля ввода, чекбоксы/радио, селекты, карточки, таблицы, модальные окна, тултипы, уведомления.
- Для каждого: внешний вид, размеры, отступы, фокусное состояние, hover/active/disabled, доступность (ARIA).
- Примеры кода: CSS‑переменные или пример JSON design tokens для нескольких ключевых токенов (цвета, типографика, spacing, border‑radius).
9. Взаимодействие и анимация:
- Правила по анимациям (время, easing, когда использовать/когда избегать), фидбек для действий пользователя.
10. Доступность:
- Чек‑лист для WCAG (контраст, масштабируемость, клавиатурная навигация, ARIA‑роли, альтернативный текст, фокусная логика), конкретные пороги (напр., контраст 4.5:1), тестовые сценарии.
11. Согласованность и управление:
- Рекомендации по управлению системой (дизайн‑токены, версия, библиотека компонентов, процесс принятия изменений, документация для разработчиков).
12. Внедрение и передача в разработку:
- Форматы артефактов (Figma/Sketch + tokens + Storybook), советы по handoff, минимальный набор спецификаций для каждого компонента.
13. Чек‑лист качества (QA): пункты для проверки дизайна и реализации (визуал, доступность, отзывчивость, производительность).
14. Примеры и шаблоны (минимум 2 макета с пояснениями): указать структуру, сетку, используемые компоненты.
15. Приложение: таблицы токенов (цвета, типографика, spacing) и минимальные фрагменты кода (CSS переменные + пример JSON tokens).
Формат вывода:
- Русский язык.
- Формат - ясный структурированный документ в Markdown или простом текстовом формате с заголовками и нумерованными разделами.
- Длина: комплексное, но не чрезмерно длинное - стремиться к 800-2 000 слов; если необходимо для полноты - до 3 000 слов.
- Включить конкретные примеры (HEX, px, line‑height, брейкпоинты), как минимум одну таблицу токенов и пример JSON/CSS переменных (не более ~30 строк).
- Использовать лаконичные и практичные формулировки; давать прямые, применимые инструкции.
Поведение при отсутствии входных данных:
- Если пользователь не заменил [ТИП_САЙТА_ИЛИ_ПРИЛОЖЕНИЯ] и другие переменные - сгенерируйте руководство для "адаптивного веб‑сайта для бизнеса/сервиса" с целевой аудиторией "широкая аудитория потребителей/корпоративных пользователей" и уровнем доступности WCAG AA.
Ожидаемый результат:
- Готовое руководство по дизайну, соответствующее вышеописанной структуре и требованиям, которое можно прямо применить или передать команде разработки.
