// 01 ONBOARDING · 4 экрана

Онбординг

Первый знакомство пользователя с апп. Hero с галереей превью, выбор первой нейросети, пример использования, бонус-попап.

Welcome /welcome

Приветствие после первого входа. Коллаж 8 изображений (preview генераций) + Indicator (1/3) + CTA «Пройти обучение».

9:41

Добро пожаловать!

Все ИИ — лучший агрегатор
нейросетей в Telegram

Пропустить

Источник: pages/welcomePage/welcomePage.tsx

8 превью загружаются через useAiImageModels(). В макете заглушки градиентами — фронт подставит real images.

SelectAI /select-ai

Выбор первой нейросети — 4 круглых превью (3 dimmed + 1 активный по центру), большой заголовок, Indicator (2/3), CTA «Дальше».

9:41

Chat GPT

MidJourney

DALL·E 3

DeepSeek

Начать просто

Выбираешь AI

Теперь все твои AI агенты находятся
в одном приложении — Все ИИ

Пропустить

Источник: pages/selectAiPage/selectAiPage.tsx

Drift fix: в апп heading «Eva-AI» ← это off-brand, должно быть «Все ИИ». Исправлено в макете.

ExampleChat /example-chat

Демо чата с моделью — показ как выглядит общение. Пузырьки сообщений, copy/refresh иконки. Indicator (3/3) → переход на Gift.

9:41

А что ты умеешь?

Chat GPT

Вот некоторые из вещей, с которыми я могу помочь:

1. Ответы на вопросы: Даю информацию по широкому кругу тем.
2. Переводы: Перевожу текст между разными языками.
3. Напоминания и списки задач: Помогу организовать дела…

Круто!

Пользуешься

Теперь все твои AI агенты находятся
в одном приложении — Все ИИ

Пропустить

Источник: pages/exampleChatPage/exampleChatPage.tsx

Drift fix: в апп heading «Eva-AI» — заменён на «Все ИИ» в макете.

Gift (Welcome bonus) /gift

Финальный шаг онбординга — бонус 50 токенов с обязательным согласием на Privacy + Terms. CTA активна только когда оба чекбокса включены.

9:41

Добро пожаловать!

Все ИИ — лучший агрегатор
нейросетей в Telegram

Дарим 50 токенов

Чтобы начать использование приложения,
пожалуйста, подтвердите своё согласие

Я согласен с Политикой конфиденциальности

Я согласен с Пользовательским соглашением

Источник: pages/giftPage/giftPage.tsx

Drift fix: в апп подарок-картинка — статичный PNG. В макете заменил на cyan-glow SVG в brand-стиле (cyan accent + sparkles). Финальная иконка — на согласовании с тобой.

Состояния: 2 чекбокса OFF / 1 ON / оба ON (активная CTA).

// 02 CORE · 4 экрана

Основной flow

Главный экран с composer + ассистентами + tab-bar, активный чат с моделью, список чатов, история. Это то что юзер видит 80% времени.

Home /

Главный экран. Header с моделью, h1 «Привет, %username%», composer, scroll-карусель ассистентов, glass tab-bar снизу.

9:41

            // promo-banner area
          

Привет, MULan!

Чем я могу тебе помочь?

Выбери ИИ и задай свой вопрос

Gemini 2.0 Flash

Готов к вашим вопросам

Ассистенты

Все

Дрессировщик
животных

Воспитание питомцев,
обучение командам

Бизнесмен

Подскажет стратегии,
проверит идею, поможет
с планом

И…

Профиль

ВСЕ ИИ

Чаты

Источник: pages/mainPage/mainPage.tsx + features/home/ui/introductionHome.tsx + features/chat/chatModel/ui/MainInput.tsx

Drift fix: tab-bar теперь точно по canon (308×67, blur 36, squircle pill 61×61). В апп раньше был blur-xl + white@20% border + drop-shadow white glow → off-canon.

ChatModel (active) /chat-model

Активный чат с моделью — header с моделью, переписка (user/assistant bubbles), composer внизу. Сами сообщения скроллятся.

9:41

Объясни квантовую запутанность простыми словами

Gemini 2.5 Pro

Представь две монеты в коробках — одна у тебя, другая у друга на другой планете. Коробки запечатаны, ты не знаешь, какая в твоей.

Когда ты открываешь свою и видишь «орёл» — мгновенно понимаешь, что у друга «решка». Не потому что сигнал прошёл быстрее света, а потому что состояние было связано с момента создания.

Это и есть запутанность — две частицы ведут себя как единая система, даже если разнесены на любое расстояние.

А как это используют в технике?

Gemini 2.5 Pro

Источник: pages/chatModelPage/chatModelPage.tsx + features/chat/chatModel/ui/AIMessage,UserMessage,ChatInput

Drift fix: User-сообщения в апп используют разные стили (bg-blue/30 в exampleChat, bg-darkGray в chatModel). Унифицировал на cyan-tinted glass bubble (right-aligned, asymmetric радиус).

Состояния: empty (показывает IntroductionModel) / typing (3 cyan dots) / refresh / image attached.

ChatModel — Attach menu state · plus tapped

Когда юзер тапает «+» в composer'е — раскрывается glass bottom-sheet с опциями. Заменяет одну скрепку на полноценное меню в нашем canon стиле (вдохновлено iOS, не ChatGPT). Camera / Photos / Files как icon-grid сверху, ниже — toggles и переходы.

9:41

Краткий preview переписки приглушённый — фокус на attach menu снизу...

Камера

Фото

Файл

Голос

Параметры генерации

Авто

Стиль ассистента

Обычный

Веб-поиск

Состояние: attach menu открыт. Закрытие — tap на «Отмена» или на затемнённую область сверху.

Структура: 4 icon-grid actions сверху (Камера / Фото / Файл / Голос) → list rows с переходами и тогглами (Параметры / Стиль / Веб-поиск).

Заменяет нынешнюю одиночную «скрепку» в композере. Веб-поиск toggle — toggle ON = модель цитирует web-источники.

AllChatList /all-chats-list

Список всех чатов: search input сверху, чаты по дате с превью последнего сообщения, fixed CTA «Новый чат» снизу.

9:41

Поиск по чатам

Все 12

Текст 7

Картинки 3

Видео 2

Аудио 0

Закреп.

Сегодня

Квантовая запутанность

А как это используют в технике?

12:34

Идея для стартапа

Разбери эту идею по фреймворку Lean Canvas

10:21

Вчера

Логотип для лейбла

Сгенерируй 4 варианта в стиле minimal

19:08

Перевод документа

Переведи приложенный PDF на английский

14:55

Профиль

ВСЕ ИИ

Чаты

Источник: pages/allChatListPage/allChatListPage.tsx + features/chat/allChatList/ui/

Drift fix: CTA «Новый чат» в апп — `bg-gradient-to-t from-gray-900 via-gray-900/80` (off-canon). Заменил на cyan brand button с smooth gradient fade-out.

ChatHistory /chat-history

Архив прошлых сессий — свайп по дням. Каждый день = группа чатов с превью.

9:41

29 апр

28 апр

27 апр

26 апр

25 апр

29 апреля · 6 чатов

12:34 Квантовая запутанность

10:21 Идея для стартапа

09:15 Анализ продаж за квартал

Источник: pages/chatHistoryPage/chatHistoryPage.tsx

Date pagination — горизонтальный scroll, активный день = cyan pill, остальные = glass pill.

// 03 ACCOUNT · 3 экрана

Аккаунт и подписка

Профиль пользователя, общие настройки, страница подписки PLUS. Ключевая monetization-зона.

Profile /profile

Учётка пользователя: имя, email, статус подписки (PLUS/FREE), история платежей, способы оплаты.

9:41

Отображаемое имя:

Михаил Петров

Электронная почта:

mikhail@example.com

Подписка PLUS

Подписка активна до 28 мая 2026

История платежей

Способы оплаты

Профиль

ВСЕ ИИ

Чаты

Источник: pages/profilePage/profilePage.tsx

Условные ветки: PLUS / FREE / нет подписки. В макете показан PLUS — для FREE будет «Перейти на PLUS» вместо «Подписка PLUS».

Settings /settings

Главное меню настроек: PLUS-баннер сверху, учётка, история чатов, баланс токенов, FAQ, юридическая ссылочка.

9:41

Учётная запись

FREE

История чатов

Баланс

277

Купить токены

Пригласить друга

Тёмная

Светлая

RU Русский

ENG English

FAQ

Политика конфиденциальности Пользовательское соглашение

@ Все ИИ | Нейросети, 2026

Профиль

ВСЕ ИИ

Чаты

Источник: pages/settingsPage/settingsPage.tsx

PLUS-баннер изменяется по статусу: plus → PlusBanner (отмена/up-status), free → FreeBanner (upsell), нет user → EmptyBanner. В макете показан FREE upsell.

Drift fix: в апп Settings имеет специальный bg gradient (purple/blue/teal в Layout.tsx) — не canon. В макете убрал, фон унифицирован.

Subscriptions PLUS /subscriptions

Страница подписки PLUS — продающий редизайн (Задача 4 ТЗ): toggle Year/Month, Free vs PLUS, каталог моделей по tier'ам, sticky CTA.

Источник: pages/subscriptionsPage/subscriptionsPage.tsx + features/settings/subscriptions/

Реализация: уже готова в mockup.html (1393 строки, продающий редизайн с каталогом моделей, tier-gradients, currency toggle Rub/Stars).

Открыть в полный экран: mockup.html ↗

// 04 AI MODELS · 3 экрана

Модели и ассистенты

Каталог ИИ-моделей с детальной инфой, выбор новой модели для чата, grid ассистентов (Бизнесмен / Инвестор / Маркетолог и т.д.).

InfoModel /info-model

Детальная страница модели — заголовок с лого/именем, slider возможностей, описание + tagline.

9:41

Gemini 2.5 Pro

Google · Топ модель

Текст

Код

Изображения

PDF

О модели

Gemini 2.5 Pro — флагманская мультимодальная модель Google. Поддерживает контекст до 2M токенов, нативно понимает текст, изображения, аудио и видео. Лидер в задачах рассуждения и анализа кода.

Контекст

2M токенов

Стоимость

15 токенов / запрос

Доступ

PLUS

Профиль

ВСЕ ИИ

Чаты

Источник: pages/infoModelPage/infoModelPage.tsx + features/infoModel/

PLUS-only models должны иметь cyan PLUS-badge. FREE-доступные показывают cost в токенах.

NewChatModel — выбор модели /new-chat-model

Provider-grouped accordion. Один row на провайдера (GPT / Claude / Gemini / Grok / DeepSeek / Kimi), expand → список версий с radio. Цветные letter-avatars для каждого provider'а. Бэдж «Новое» на свежих топ-моделях.

9:41

ИИ модели

Текст

Картинки

Видео

Аудио

G

GPT i

OpenAI · GPT-5

GPT-5

Флагман OpenAI · сложный анализ

GPT-5.4 Pro Новое

Топовый reasoning · кодинг

GPT-4o

Отличное качество для большинства задач

GPT-4o Mini

Быстрый и умный · бесплатно

C

Claude i

Anthropic · Sonnet 4.5

G

Gemini i

Google · 2.5 Pro

X

Grok i

xAI · Grok 4

D

DeepSeek i

V3.1 · Универсал

K

Kimi i

Moonshot · K2

Источник: CANON из brandbook-public/mockup.html (T2 v7) — provider-grouped accordion.

Drift fix: предыдущая моя версия (tier-organized с NEW/PLUS/FREE бэджами) ОТМЕНЕНА. Возвращён каноничный provider-accordion.

Цветные avatars: openai (#1A6E48), anthr (#B25A2B), google (#2C5DB5), xai (#2A2A2A), deepseek (#5B43C8), kimi (#4A7B5C).

Assistant /assistant

Grid ассистентов 2 cols (mobile). Каждый — image card 190px с title и star (favorite). FREE-locked = opacity 0.4.

9:41

Поиск ассистента

Бизнесмен

Стратегия, переговоры, презентации

Инвестор

Анализ рынков, оценка стартапов

Маркетолог

Контент, реклама, аналитика

Психолог

Эмоции, поддержка, мотивация

Юрист

Договоры, споры, претензии

Шеф-повар

Рецепты, меню, диета

Профиль

ВСЕ ИИ

Чаты

Источник: pages/assisitantPage/assistantPage.tsx

Active favorite = cyan filled star. FREE-locked ассистенты (если user.subscription === 'free' и не в FREE_ALLOWED) = opacity 0.4 + lock icon, клик переводит на /subscriptions.

// 05 MONETIZATION · 4 экрана

Монетизация

Покупка токенов (RUB / Telegram Stars), реферальная программа, история платежей, привязанные карты.

Token /token

5 пакетов токенов (RUB или Stars). Tab toggle валют. Динамический CPU. Sticky CTA «Оплатить» снизу.

9:41

Покупка токенов

После пополнения баланса токены доступны сразу. Не сгорают и не блокируются при прекращении подписки.

Рубли

Telegram Stars

2 500 токенов

≈ 0.20 ₽ / токен

499 ₽

5 800 токенов

≈ 0.17 ₽ / токен

−14%

999 ₽

10 000 токенов

≈ 0.15 ₽ / токен

1 499 ₽

20 000 токенов

≈ 0.12 ₽ / токен

2 499 ₽

50 000 токенов

≈ 0.10 ₽ / токен · −50%

4 999 ₽

Источник: pages/tokenPage/tokenPage.tsx + entities/tokens/TopUpList

Selected bundle = cyan border + cyan glow + cyan price hint. Sticky white CTA снизу с динамической суммой.

Referral /referral

Реферальная программа: 100 токенов за каждого друга. 3 шага с cyan timeline, статистика, ссылка с copy/share, share button.

9:41

Пригласите друзей

Получите 100 токенов
за каждого

Приглашаете друзей по ссылке

Друзья регистрируются в приложении

Получаете 100 токенов за каждого

Друзей приглашено: 12

Начислено токенов: 1 200

Пригласительная ссылка

t.me/VSEIIBOT?start=ref_a4f9

Источник: pages/referralPage/referralPage.tsx

Drift fix: в апп используются `bg-darkGray` cards и `text-cyan-400` (Tailwind preset). Унифицировал на canon glass-cards и `--accent-cyan`.

Payments (history) /payments

История платежей: sticky header «Сортировка» с dropdown, expandable transaction cards со статусом, описанием, методом, датой.

9:41

Сортировка

Сначала новые

PLUS · Год

29 апр 2026 · 12:34

2 299 ₽

УСПЕШНО

Visa **4242

5 800 токенов

22 апр 2026 · 15:47

999 ₽

УСПЕШНО

10 000 токенов

15 апр 2026 · 09:21

1 499 ₽

ОТКЛОНЕНО

Источник: pages/paymentsPage/paymentsPage.tsx + features/payments/cardList/ui/transactionCard.tsx

Empty state: glass card 8 × 12 px padding с CreditCard icon и текстом «Нет платежей». Status colors: completed=green, failed=red, pending=warn.

Cards /cards

Привязанные карты — список с brand-логотипом, last4, кнопкой удаления. Empty state по центру.

9:41

Привязанные карты

VISA

Visa

**4242

Mastercard

**5588

Добавить карту

Источник: pages/cardPage/cardPage.tsx + features/carrd/cardList/

В live апп — empty state: «Нет карт» / «Добавьте карту для совершения покупок» по центру.

// 06 GROWTH · 4 экрана

Партнёрка и рост

Партнёрская программа для блогеров (с галереей приглашённых), форма заявки, рекламные оверлеи (награда за просмотр), entry point партнёрки.

Partner (entry) /partner

Точка входа в партнёрку — простой переход к /partner-blog (для блогеров).

9:41

Партнёрская программа

Подключи апп к своей аудитории и зарабатывай с каждой подписки.

Ваш статус

Не подключено

Подайте заявку и получите 30% revenue share с каждого приглашённого PLUS-юзера.

Для блогеров

YouTube · TikTok · Telegram

Подать заявку

Анкета · 5 минут

Условия программы

30% revenue · pay-out monthly

Источник: pages/partnerPage/partnerPage.tsx

Drift fix v2: предыдущий вариант имел гигантский chevron (class без размеров) и большие 44×44 цветные icon-боксы. Заменил на canonical list-card pattern (как Settings/Profile) — единый visual language во всём приложении.

Hero-stats card сверху — cyan glow в нашем canon стиле, позиционирует цель «подключиться».

PartnerBlog /partner-blog

Партнёрская реферальная — 3 шага cyan timeline, галерея приглашённых друзей с фото, реферальная ссылка.

9:41

Партнёрская программа

Приглашаете друга по ссылке

Ваш друг регистрируется

Вы получаете токены

Вы уже пригласили 4 друга

Мария

Подобр…

Алексей

Зайцев

Антон

Иванов

Иван

Щур

Ваша ссылка

t.me/VSEIIBOT?start=blog_a4f9

Источник: pages/partnerBlogerPage/referralBlogerPage.tsx

Avatars из Unsplash в апп — здесь заменены на gradient-circles с cyan border. Реальные фото подгрузятся фронтом.

Apply (form) /apply

Анкета для партнёрской программы — поля Имя, Telegram, YouTube, Instagram, TikTok, ВК, другое. Submit с success state.

9:41

Заполните анкету

Имя

YouTube

Instagram

TikTok

Источник: pages/applyPage/applyPage.tsx

Drift fix: в апп input'ы используют `text-black bg-white` (на тёмном фоне!) и `focus:ring-blue-500` — слепое наследие. Заменил на canon glass inputs с cyan focus.

Ads (reward overlay) /ads

Reward overlay после просмотра рекламы — Diamond icon, «+15 токенов», CTA «Смотреть ещё». Внизу — карточка рекламируемого приложения.

9:41

Ура! Вы получили
+15 токенов!

Total Battle: Strategy Games

Kingdom Wars: Kings & Castles

Источник: pages/adsPage/adsPage.tsx

Overlay появляется через 2s после загрузки. До overlay — на месте reward content live ad-видео (LazyImage `Ads`).

// 07 STATIC · 4 экрана

Статика и информация

FAQ с accordion, юридические тексты (Privacy / Terms), новости. Самые тривиальные экраны — но в едином canon.

Questions (FAQ) /questions

Часто задаваемые вопросы — Radix Accordion с раскрытием. ChevronRight rotates 90° на open.

9:41

Часто задаваемые вопросы

Что такое токены и сколько их нужно?

Токены — это внутренняя валюта апп. 1 запрос к модели тратит от 1 до 25 токенов в зависимости от модели и сложности. Купить пакет можно во вкладке «Баланс».

Чем PLUS отличается от FREE?

Как отменить подписку?

Какие модели доступны?

Где найти историю чатов?

Источник: pages/questionsPage/questionsPage.tsx (Radix Accordion + shared/data/questionsData)

Open state: chevron поворачивается на 90°, заголовок становится белым (vs grey закрытых).

Privacy /privacy

Политика конфиденциальности — длинный текстовый документ со скроллом. Заголовки h2/h3, параграфы.

9:41

Политика конфиденциальности

Обновлено 22.04.2026

1. Общие положения

Настоящая Политика конфиденциальности регулирует обработку персональных данных пользователей Telegram Mini App «Все ИИ» (далее — «Сервис»). Используя Сервис, Вы соглашаетесь с условиями данной Политики.

2. Какие данные мы собираем

Мы обрабатываем следующие категории данных:

Идентификатор Telegram (telegram_user_id)
Имя пользователя и аватар (передаются Telegram)
История запросов к ИИ-моделям
Платёжные операции (через защищённого провайдера)

3. Цели обработки

Данные обрабатываются для предоставления услуг ИИ-генерации, ведения учёта подписок и баланса токенов, защиты от мошенничества.

4. Хранение и удаление

История чатов хранится 90 дней. Данные платежей — в течение срока, установленного законодательством. По запросу пользователь может удалить свой аккаунт через поддержку.

Источник: pages/privacyPage/privacyPage.tsx

Контент текстовой — H2 заголовки cyan, тело white@60%. Реальный текст подгружается из shared/data/.

Conditions (Terms) /conditions

Пользовательское соглашение — ту же структуру что Privacy, но другой контент.

9:41

Пользовательское соглашение

Обновлено 22.04.2026

1. Предмет соглашения

Настоящее Соглашение определяет порядок использования Telegram Mini App «Все ИИ». Регистрируясь и используя Сервис, Вы принимаете условия Соглашения в полном объёме.

2. Подписка PLUS

PLUS подписка оформляется на 1 месяц или 1 год с автоматическим продлением. Отмена доступна в любой момент через раздел «Профиль» — после отмены доступ сохранится до конца оплаченного периода.

3. Возврат средств

Возврат средств возможен в течение 14 дней с момента оплаты при условии, что услуга не была фактически использована (не было совершено запросов к платным моделям).

4. Ограничения

Сервис нельзя использовать для генерации запрещённого контента (CSAM, терроризм, дискриминация, нарушение авторских прав).

Источник: pages/userConditionsPage/userConditionPage.tsx

Структура повторяет Privacy — единый layout для legal documents.

News /news

Новости и обновления — feed с карточками. Сейчас в апп страница пустая — добавил мокап с дизайном «как должно быть».

9:41

Что нового

NEW

GPT-5.4 Pro теперь доступен в PLUS

Флагманская модель OpenAI с контекстом 1M токенов и улучшенным reasoning'ом.

29 апр

Veo 3.1 — генерация видео до 30 секунд

Новый режим длинных клипов с native-аудио.

25 апр

Реферальная программа: 100 токенов за друга

Приглашайте друзей и получайте токены за регистрацию.

20 апр

Источник: pages/newslPage/newsPage.tsx

В live апп страница ПУСТАЯ — только `p-4 h-screen` div без контента. Дополнил структурой по аналогии с другими feed-экранами.

// Для фронта · drop-in архивы

Скачать дизайн пакетом

Два архива на выбор: полный дизайн (всё что есть в брендбуке — 4 версии экранов, mockups, params, loaders, баннеры, иконки, ТЗ) или только баннеры (mini-пакет с CSS-токенами и React-компонентами для быстрого drop-in).

↓ Полный дизайн (5.5 MB) ↓ Только баннеры (1.9 MB) Handoff page →

82 файла · все темы · оба языка · auth-free

// 08 BANNERS · 3 формата

Банеры PLUS

Анимированные strip-баннеры для всех breakpoints — premium liquid-glass с динамическим свечением. Размеры строго совпадают с release-notes-серией (393×180 / 768×261 / 1200×260) — единая raster-сетка под все банеры в апп. PLUS-баннер на /settings, hero на /subscriptions, лендинг-маркетинг.

Mobile 393 × 180 · ~2.18:1

Mini App в Telegram (mobile viewport). PLUS-баннер на /settings, /profile (apply через <PlusBanner />).

Скачать: ↓ MP4 393×180 · ↓ Hero 9:16 (archive 1080×1920)

Tablet 768 × 261 · ~2.94:1

Tablet breakpoint (640px ≤ width < 1024px). Auto-play, gradient liquid + cyan glow.

Скачать: ↓ MP4 768×261 · ↓ Hero 16:9 (archive 1920×1080)

Desktop 1200 × 260 · ~4.6:1

Desktop breakpoint (width ≥ 1024px). Full desktop strip, max-width контента 1120px (Задача 3 ТЗ).

Скачать: ↓ MP4 1200×260 · ↓ Hero 16:9 (archive 1920×1080)

// 08b RELEASE NOTES · 3 формата

Банеры релизных нот

Вторая серия баннеров — под анонс новой версии («Что нового»). Узкие горизонтальные strip'ы под breakpoint'ы апп. Тот же liquid-glass язык, что у PLUS-серии, но без particle-glow и без лого ∞ — характер «info / обновление», не «promo». Анимация — медленный дрейф цветных blob'ов под стеклом + дышащая cyan accent-line.

Mobile 393 × 180 · ~2.18:1

Mini App в Telegram, mobile viewport. Vertical stack: chip → заголовок → 4 буллета 2×2.

Скачать / открыть: ↓ HTML 393×180 · открыть в новой вкладке ↗

Tablet 768 × 261 · ~2.94:1

Tablet breakpoint. Горизонтальная компоновка: chip + заголовок 42px слева, фичи 2×2 справа.

Скачать / открыть: ↓ HTML 768×261 · открыть в новой вкладке ↗

Desktop 1200 × 260 · ~4.6:1

Desktop breakpoint. Та же компоновка что у tablet, но шире и заголовок 56px. На /home или /news как hero-анонс релиза.

Скачать / открыть: ↓ HTML 1200×260 · открыть в новой вкладке ↗

// 09 BRAND SYMBOL & LOADERS · 12 логотипов + Liquid Loader

Бренд-знак ∞ и лоадеры

Master path: единая Cassini-форма ∞ (c/a=0.99, target_height=50). 12 logo-вариантов через одну SVG <symbol> + ::use. Liquid Loader (3 размера × 3 темпа) для loading states. Полная коллекция и анимации — на /loaders.

01 · White solid

primary

02 · Outline

secondary

03 · Cyan accent

brand

04 · Liquid glass

premium

05 · Silver gradient

accent

06 · Glow

hero/splash

07 · Cyan gradient

marketing

08 · Inverted

light bg

09 · Bichromatic

duotone

10 · Neon

night

11 · Wireframe

technical

12 · Dotted

decorative

LIQUID LOADER · 6 STATES

Анимации брендового знака

Idle (breathing) · Listening (liquid waves) · Speaking (voice bars) · Thinking (cyan halo pulse) · Alert (быстрый bright pulse) · Sleeping (scaleY collapse). Используются для loading-states и future voice-assistant face-system.

Открыть loaders.html ↗

// 10 GENERATION PARAMS · 2 modal'а

Параметры генерации

Liquid glass модалы параметров для image / video нейросетей. Включают reference-image, пропорции (5 вариантов), качество/разрешение, длительность (4–30 сек видео), кадры начала/конца, аудио-toggle, динамический расчёт стоимости в токенах. Открываются из chat composer'а через icon-toggle.

Изображения · Параметры

· Загрузка референс-изображения (text-to-img / img-to-img)
· 5 пропорций: 1:1 / 4:3 / 16:9 / 2:3 / 9:16
· Качество: Низкое (30) / Стандартное (90) / Высокое (185 токенов)
· Stepper количество: до 4 изображений
· Динамический расчёт стоимости
· White CTA «Применить» pill

Видео · Параметры

· 2 кадра-слота: начальный + конечный
· Длительность 4–30 сек через slider
· Разрешение: 480p / 720p / 1080p / 4K
· 5 пропорций (включая 21:9 cinematic)
· Аудио-тогл (+30% к стоимости)
· Стоимость: base 110 × dur/5 × resolution × audio-mult

Открыть в полный экран ↗ Скачать params.html

Источник: features/audio/ui/videoPopup.tsx (видео-параметры) + features/chat/chatModel/ui/MainInput.tsx (вызов).

В live апп открывается как bottom-sheet или modal по клику на icon-toggle в composer'е.

Онбординг

Добро пожаловать!

Выбираешь AI

Пользуешься

Добро пожаловать!

Дарим 50 токенов

Основной flow

Привет, MULan!

Чем я могу тебе помочь?

Ассистенты

Дрессировщикживотных

Бизнесмен

Аккаунт и подписка

Модели и ассистенты

О модели

ИИ модели

Монетизация

Покупка токенов

Пригласите друзей

Получите 100 токеновза каждого

Привязанные карты

Партнёрка и рост

Партнёрская программа

Партнёрская программа

Заполните анкету

Статика и информация

Часто задаваемые вопросы

Политика конфиденциальности

1. Общие положения

2. Какие данные мы собираем

3. Цели обработки

4. Хранение и удаление

Пользовательское соглашение

1. Предмет соглашения

2. Подписка PLUS

3. Возврат средств

4. Ограничения

Что нового

Банеры PLUS

Банеры релизных нот

Бренд-знак ∞ и лоадеры

Анимации брендового знака

Параметры генерации

Изображения · Параметры

Видео · Параметры

Дрессировщик
животных

Получите 100 токенов
за каждого