Техническое задание на дизайн

Все ИИ —
4 задачи для дизайнера

Исправление визуальных проблем и редизайн страницы оформления подписки с актуальным списком AI-моделей.

Telegram Mini App
Шрифт Manrope
Mobile-first
1
Иконки таб-бара — унификация формата и состояния
Баг Таб-бар Mobile
🔴
Проблема: иконки таб-бара используются в разных форматах: «Профиль» — библиотечная иконка, «Все ИИ» — PNG, «Чаты» — SVG. Из-за несовместимости форматов активное/неактивное состояние не работает: цвет при активности не меняется.
Что нужно сделать
  • 🔄
    Привести все иконки таб-бара к единому формату — SVG. PNG и библиотечные иконки заменить на SVG-версии с тем же визуальным стилем.
  • 🎨
    Настроить активное и неактивное состояние через fill или stroke в SVG. Активная вкладка — акцентный цвет приложения, неактивная — приглушённый серый.
  • 📐
    Убедиться, что размеры и визуальный вес всех иконок одинаковы — они должны восприниматься как единый набор.
2
Порядок отображения ИИ-моделей на главном экране
UX Главный экран Mobile
⚠
Проблема: в текущем порядке все модели выглядят как «один ChatGPT». Пользователь не видит разнообразия — ощущение, что приложение предлагает только OpenAI.
Что нужно сделать
  • 🔀
    Перемешать провайдеров — чередовать OpenAI с Claude, Gemini, Grok, DeepSeek. Не показывать несколько GPT-моделей подряд.
  • 🏷
    Визуально выделять принадлежность модели к провайдеру — логотип или цветовой индикатор рядом с названием.
  • ⭐
    Рекомендуемые / популярные модели показывать первыми, но без нарушения принципа чередования провайдеров.
3
Баннер главного экрана — корректное отображение на десктопе
Баг Баннер Desktop Tablet
🔴
Проблема: на десктопе и планшете баннер обрезается и отображается некорректно. Основная информация читаема, но визуально элемент виден не полностью.
Скриншот с проблемой
[приватная ссылка скрыта в публичной версии]
Видео-референсы (правильное отображение)
  • 🖥
    Desktop: UPDATE_DESKTOP1.mp4 [ссылка скрыта]
  • 📱
    Tablet: UPDATE_TABLET1.mp4 [ссылка скрыта]
  • 📲
    Mobile: UPDATE_MOBILE.mp4 [ссылка скрыта]
Что нужно сделать
  • 📐
    Уменьшить ширину контентной области баннера для десктопной версии — сейчас она слишком широкая и частично обрезается.
  • ✅
    Шрифт Manrope, размеры как в видео-референсе. Верстка на фронте (1-слайд).
  • 🔍
    Убедиться что баннер корректно отображается на всех брейкпоинтах: mobile, tablet, desktop.
4
Страница оформления подписки — продающий редизайн с каталогом моделей
Редизайн Продажи Подписка Mobile-first
ℹ
Цель задачи: переработать страницу оформления подписки так, чтобы она продавала. Пользователь должен сразу понять ценность подписки через список доступных моделей, структурированных по типу и уровню.
Требования к продающей части
  • 💎
    Акцент на ценности, а не на цене. Первое что видит пользователь — «что я получу», а не «сколько стоит». Цена появляется после демонстрации ценности.
  • 🚀
    Сравнение бесплатного и платного. Таблица или карточки: «Бесплатно» vs «Plus» — с явным ограничением бесплатного тарифа и преимуществами платного.
  • ⚡
    Короткие триггеры. 3–5 буллитов в духе: «Доступ ко всем топ-моделям», «Генерация изображений», «Видео по запросу», «Приоритетная скорость».
  • 🎯
    Один чёткий CTA. Кнопка «Оформить подписку» всегда видна, не теряется в контенте. На мобильном — фиксированная снизу.
  • 🔒
    Снятие возражений. «Отмена в любой момент», «Без скрытых платежей», «Поддержка 24/7» — под кнопкой мелким текстом.
  • 🏷
    Тарифные планы рядом. Месяц / Год с выгодой на годовой план (например, «−35% vs месячный»).
Каталог моделей — структура и наполнение
Принцип отображения: модели разделены на три типа — Текст, Изображения, Видео. Внутри каждого типа — три уровня: Топ (умные/дорогие), Средние, Базовые (быстрые/дешёвые). Пользователь сразу понимает: «чем дороже подписка, тем мощнее модели».
💬 Текстовые модели 14 моделей
Топ — умные и мощные
GPT-5.4 Pro Флагман OpenAI. Сложные задачи, кодинг, глубокий анализ.
Топ
Claude Opus 4 Флагман Anthropic. Длинные документы, нюансированный текст.
Топ
Gemini 3.1 Pro Флагман Google. Мультимодальность, работа с кодом и данными.
Топ
Grok 4 Флагман xAI. Актуальные знания, большой контекст 2M токенов.
Топ
Средние — баланс качества и скорости
GPT-5.4 / GPT-5 OpenAI. Отличное качество для большинства задач.
Средний
Claude Sonnet 4.5 Anthropic. Быстрый и умный — идеал для ежедневных задач.
Средний
Gemini 2.5 Pro / 3 Flash Google. Скорость и качество для рабочих сценариев.
Средний
DeepSeek V3.2 / Kimi K2 Сильные альтернативы по доступной цене.
Средний
Базовые — быстро и экономично
GPT-4.1 mini / 5 nano OpenAI. Мгновенные ответы на простые вопросы.
Базовый
Claude Haiku 4.5 Anthropic. Самый быстрый Claude для простых задач.
Базовый
Gemini 2.5 Flash-Lite Google. Лёгкая модель для быстрых ответов.
Базовый
🖼 Генерация изображений 7 моделей
Топ — фотореалистичные, высокое разрешение
GPT Image 1.5 OpenAI. Точное следование промпту, редактирование изображений.
Топ
Imagen 4.0 Ultra Google. Максимальное качество фотореализма.
Топ
Stable Image Ultra Stability AI. Флагман для художественных изображений.
Топ
Средние — качество и скорость
DALL·E 3 OpenAI. Классика — надёжно и красиво.
Средний
Imagen 4.0 Google. Стандартное качество для большинства задач.
Средний
SD 3.5 Large Stability AI. Мощная генерация с открытым весом.
Средний
Базовые — быстро и экономично
Imagen 4.0 Fast Google. Быстрая генерация для набросков и черновиков.
Базовый
🎬 Генерация видео 4 модели
Топ — кинематографическое качество
Veo 3.1 Google. Видео с аудио, 4K, реалистичное движение.
Топ
Sora 2 Pro OpenAI. До 1080p, текст/изображение → видео.
Топ
Средние
Veo 3.1 Fast Google. Быстрая генерация с аудио, 720p–1080p.
Средний
Базовые
Sora 2 / Veo 3.1 Lite Стартовые модели для коротких роликов 720p.
Базовый
Требования к реализации страницы
  • 📲
    Mobile-first. Telegram Mini App — большинство пользователей на телефоне. Все элементы должны быть удобны для касания (min 44px).
  • 🔖
    Табы или аккордеон для переключения типов моделей (Текст / Изображения / Видео) — не нужно показывать всё сразу.
  • 🏆
    Визуальный акцент на Топ-уровне. Топовые модели должны выглядеть премиально — градиент, иконка, особый badge.
  • 🎨
    Логотипы провайдеров рядом с каждой моделью — OpenAI, Anthropic, Google, xAI, DeepSeek, Moonshot.
  • 💡
    Подсветить «новинки» — badge «Новое» у GPT-5.4 Pro, Grok 4.1, Claude Opus 4.6, Veo 3.1.
  • 🔄
    Переключатель тарифов (Месяц / Год) вверху страницы — с выделением наиболее выгодного варианта.