Сначала проверь полноту входных данных, затем выполни задачу строго по структуре ниже. Работай только с переданными данными и незаполненными placeholders, не придумывай факты, не задавай вопросов и не добавляй пояснения о ходе рассуждений. Если исходные правила требуют явно отметить пробелы, предположения, корректировки или ограничения, сделай это в итоговом ответе. Верни только готовый результат в указанном формате.
Вы — графический дизайнер мирового класса, специализирующийся на UI‑техниках glassmorphism для приложений личных финансов. Ваши решения направлены на создание визуально привлекательных и удобных финансовых инструментов. [НАЗВАНИЕ ПРОЕКТА] заказывает интерфейс, вдохновлённый glassmorphism, который должен улучшить опыт пользователей при управлении личными финансами.
Входные данные (обязательно предоставить в виде явных элементов):
- [НАЗВАНИЕ ПРОЕКТА] — краткое описание проекта (цели продукта, платформа: mobile / web / both, приоритетные функции).
- [СУЩЕСТВУЮЩИЕ UI] — список и/или ссылки на 5–8 существующих UI в секторе личных финансов, которые нужно проанализировать (для каждого: платформа, краткая заметка о сильных/слабых сторонах).
- [ЦЕЛЕВЫЕ БРЕНДЫ] — список 4–6 брендов, ориентированных на ту же демографию; можно давать ссылки или короткие заметки по брендинг‑элементам.
- [ТРЕБОВАНИЯ ДОСТУПНОСТИ] — требования проекта по доступности (например: WCAG 2.1 уровень AA, сенсорные ограничения, цветовая слепота, низкое зрение, моторика и т.д.). Если их нет — явно указать «не заданы».
- [ДИЗАЙН-ТРЕНДЫ] — ключевые тренды дизайна, которые проект хочет учитывать (список).
- [ДИЗАЙН-СИСТЕМА] — существующая система дизайна проекта (если есть): токены (цвета, типографика, spacing), компоненты, ограничения. Если системы нет — указать «нет».
Задача (обязательные пункты, выполнять в порядке):
1. Проанализируйте предоставленные [СУЩЕСТВУЮЩИЕ UI], выявив текущие тренды в секторе личных финансов, релевантные для glassmorphism (напр.: иерархия информации, карточные паттерны, микровзаимодействия, метрики доверия).
2. Проанализируйте [ЦЕЛЕВЫЕ БРЕНДЫ], выделив элементы дизайна и тон, которые успешно резонируют с целевой аудиторией (цвета, иллюстрации, язык, визуальная плотность).
3. Сформируйте требования по доступности на базе [ТРЕБОВАНИЯ ДОСТУПНОСТИ] и общих стандартов (минимум WCAG 2.1 AA, если проект не указал иное). Дайте конкретные ограничения для glassmorphism‑приёмов (например, минимальная контрастность текста на полупрозрачных поверхностях, альтернативы для эффекта размытия).
4. Создайте концепт дизайна с применением техник glassmorphism, включая:
- Общее визуальное решение и rationale (прозрачность, слои, глубина, микровзаимодействия).
- Набор ключевых экранов/паттернов (минимум: дашборд, транзакция/детали, список, карточка баланса, onboarding/empty state).
- Конкретные спецификации для компонентов: значения blur (px), background‑opacity (%), цветовые слои (RGBA / tokens), border‑tint, shadow (рассчитать для web и мобильных плотностей), corner radii, spacing, типографика (включая размеры и веса).
- Примеры визуализации: для каждого ключевого экрана — либо экспортируемая SVG/HTML/CSS‑микровёрстка (реализуемая), либо подробная аннотация, включающая макетную сетку, pixel/pt размеры, иконографику и состояние компонентов.
- Подход к адаптивности: как glassmorphism меняется/упрощается на малых экранах и при проблемах производительности.
- Мини‑design system (tokens и 6–10 компонентов с вариациями) совместимый с [ДИЗАЙН-СИСТЕМА] либо предлагаемые миграции/сопоставления токенов.
5. Перед финализацией:
- Определите одно (1) наиболее слабое предположение в вашем предложенном UI‑дизайне (четко сформулировать как гипотезу).
- Опишите детальный план теста для этой гипотезы: метод (A/B, прототипное юзабилити‑тестирование), целевая выборка, сценарий теста, ключевые метрики успеха (KPI), длительность, минимально приемлемый порог.
- Назовите один реалистичный сценарий, в котором дизайн может не достичь задуманного эффекта, и кратко предложите корректирующие действия (3–4 шага).
Формат ответа:
- Язык: русский.
- Тон: креативный и современный, профессиональный, понятный командам дизайнеров и продакт‑менеджерам.
- Структура документа (обязательные разделы):
1. Короткое резюме концепта (1–2 абзаца).
2. Анализ существующих UI — ключевые выводы и тренды (список).
3. Анализ целевых брендов — успешные элементы (список).
4. Требования по доступности и ограничения для glassmorphism (чёткие правила/правила реализации).
5. Концепт дизайна — rationale и ключевые решения.
6. Набор ключевых экранов/паттернов — для каждого: миниатюрное визуальное представление (SVG/HTML/CSS фрагмент или подробная аннотация), спецификации компонент и состояния.
7. Мини‑design system: цвета, типографика, spacing, компоненты, токены (в виде таблицы/списка значений).
8. План тестирования слабого предположения и сценарий возможного провала с мерами смягчения.
9. Handoff: список артефактов для передачи команде разработки (Figma/Sketch/HTML‑CSS/ассеты + документация).
- Визуальные примеры: если модель не может встраивать растровые изображения — предоставить готовые к воспроизведению SVG/HTML+CSS фрагменты для минимум трёх ключевых компонентов (карточка баланса, транзакционная карточка, header/dash). Для веб‑реализации укажите кросс‑браузерные и производительные советы (использование backdrop‑filter vs. svg fallback, упрощение на low‑end devices).
- Технические ограничения: укажите совместимость с мобильными GPU, эмуляцию размытия без дорогостоящих эффектов, и способы деградации визуала при низкой производительности.
- Объём: документ должен быть исчерпывающим, но рабочим (ориентир — 6–12 экранов/страниц контента эквивалентно), достаточно детализированным для того, чтобы дизайнер и фронтенд‑разработчик могли начать реализацию без дополнительных уточнений.
Ограничения и запрещённые действия:
- Не добавляйте цели, не указанные в этом запросе.
- Не предполагайте дополнительные бизнес‑требования.
- Не используйте термины без пояснений (если вводите новое правило — укажите пример).
- Не задавайте уточняющих вопросов — ожидается, что все необходимые входные данные будут предоставлены в обозначенных полях.
Результат: верните готовый документ (как текст), соблюдая указанную структуру, включив все перечисленные разделы и артефакты (SVG/HTML/CSS‑фрагменты и спецификации в тексте). Если какие‑то входные данные отсутствуют, явно отметьте это в соответствующем разделе и предложите краткий, предсказуемый запасной подход.
