// 01 ONBOARDING · 4 screens

Onboarding

User's first encounter with the app. Hero with preview gallery, first AI pick, usage example, bonus popup.

Welcome /welcome

Greeting after first launch. 8-image collage (generation previews) + Indicator (1/3) + CTA «Start tutorial».

9:41

Welcome!

VSE_Ai — best AI aggregator
for Telegram

Skip

Source: pages/welcomePage/welcomePage.tsx

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

SelectAI /select-ai

First AI pick — 4 circular previews (3 dimmed + 1 active center), big headline, Indicator (2/3), CTA «Next».

9:41

Chat GPT

MidJourney

DALL·E 3

DeepSeek

Get started

Выбираешь AI

All your AI agents are now in
в одном app — VSE_Ai

Skip

Source: pages/selectAiPage/selectAiPage.tsx

Drift fix: in app heading «Eva-AI» ← this is off-brand, should be «VSE_Ai». Исправлено in mockup.

ExampleChat /example-chat

Chat-with-model demo — shows what conversation looks like. Message bubbles, copy/refresh icons. Indicator (3/3) → goto Gift.

9:41

What can you do?

Chat GPT

Here are some things I can help with:

1. Q&A: I cover a wide range of topics.
2. Translation: between languages.
3. Reminders & to-dos: I help organize your day…

Cool!

You're using

All your AI agents are now in
в одном app — VSE_Ai

Skip

Source: pages/exampleChatPage/exampleChatPage.tsx

Drift fix: in app heading «Eva-AI» — replaced with «VSE_Ai» in mockup.

Gift (Welcome bonus) /gift

Final onboarding step — 50-token bonus with required Privacy + Terms consent. CTA enabled only when both checkboxes are on.

9:41

Welcome!

VSE_Ai — best AI aggregator
for Telegram

Get 50 free tokens

To start using the app,
please confirm your consent

Я согласен с Privacy Policy

Я согласен с Terms of Service

Source: pages/giftPage/giftPage.tsx

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

States: 2 checkboxes OFF / 1 ON / both ON (active CTA).

// 02 CORE · 4 screens

Core flow

Home screen with composer + assistants + tab-bar, active chat with model, chat list, history. What users see 80% of the time.

Home /

Home screen. Header with model, h1 «Hi, %username%», composer, assistants scroll-carousel, bottom glass tab-bar.

9:41

            // promo-banner area
          

Hi, MULan!

How can I help you?

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

Gemini 2.0 Flash

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

Assistants

All

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

Pet training,
command teaching

Businessman

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

И…

Profile

VSE_Ai

Chats

Source: pages/mainPage/mainPage.tsx + features/home/ui/introductionHome.tsx + features/chat/chatModel/ui/MainInput.tsx

Drift fix: tab-bar now matches canon (308×67, blur 36, squircle pill 61×61). In-app it was blur-xl + white@20% border + drop-shadow white glow → off-canon.

ChatModel (active) /chat-model

Active chat with model — header shows model, conversation (user/assistant bubbles), bottom composer. Messages scroll within.

9:41

Explain quantum entanglement in simple words

Gemini 2.5 Pro

Imagine two coins in sealed boxes — one with you, one with a friend on another planet. The boxes are sealed; you don't know which is in yours.

When you open yours and see «heads» — you instantly know your friend has «tails». Not because a signal traveled faster than light, but because the state was linked from creation.

That's entanglement — two particles act as one system regardless of distance.

How is this used in tech?

Gemini 2.5 Pro

Source: pages/chatModelPage/chatModelPage.tsx + features/chat/chatModel/ui/AIMessage,UserMessage,ChatInput

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

States: empty (показывает IntroductionModel) / typing (3 cyan dots) / refresh / image attached.

ChatModel — Attach menu state · plus tapped

When user taps «+» in composer — a glass bottom-sheet expands with options. Replaces the single paperclip with a full menu in our canon style (iOS-inspired, not ChatGPT). Camera / Photos / Files as icon-grid on top, toggles and rows below.

9:41

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

Camera

Photos

Files

Voice

Generation params

Авто

Assistant style

Default

Web search

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

Structure: 4 icon-grid actions сверху (Camera / Photos / Files / Voice) → list rows с переходами и тогглами (Params / Style / Web search).

Replaces нынешнюю одиночную «скрепку» в композере. Web search toggle — toggle ON = модель цитирует web-источники.

AllChatList /all-chats-list

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

9:41

Search chats

All 12

Text 7

Images 3

Видео 2

Аудио 0

Закреп.

Today

Quantum entanglement

How is this used in tech?

12:34

Startup idea

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

10:21

Yesterday

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

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

19:08

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

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

14:55

Profile

VSE_Ai

Chats

Source: pages/allChatListPage/allChatListPage.tsx + features/chat/allChatList/ui/

Drift fix: CTA «New chat» in app — `bg-gradient-to-t from-gray-900 via-gray-900/80` (off-canon). Заменил на cyan brand button с smooth gradient fade-out.

ChatHistory /chat-history

Past session archive — swipe by day. Each day = chat group with preview.

9:41

29 Apr

28 Apr

27 Apr

26 Apr

25 Apr

29 April · 6 chats

12:34 Quantum entanglement

10:21 Startup idea

09:15 Quarterly sales analysis

Source: pages/chatHistoryPage/chatHistoryPage.tsx

Date pagination — horizontal scroll, active day = cyan pill, others = glass pill.

// 03 ACCOUNT · 3 screens

Account & subscription

User profile, general settings, PLUS subscription page. Key monetization area.

Profile /profile

User account: name, email, subscription status (PLUS/FREE), payment history, payment methods.

9:41

Display name:

Mikhail Petrov

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

mikhail@example.com

PLUS Subscription

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

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

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

Profile

VSE_Ai

Chats

Source: pages/profilePage/profilePage.tsx

Conditional branches: PLUS / FREE / нет подписки. In mockup показан PLUS — для FREE будет «Upgrade to PLUS» вместо «PLUS Subscription».

Settings /settings

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

9:41

Account

FREE

Chat history

Balance

277

Buy tokens

Invite a friend

Dark

Light

RU Russian

ENG English

FAQ

Privacy Policy Terms of Service

@ VSE_Ai | Neural Networks, 2026

Profile

VSE_Ai

Chats

Source: pages/settingsPage/settingsPage.tsx

PLUS banner changes by status: plus → PlusBanner (cancel/up-status), free → FreeBanner (upsell), нет user → EmptyBanner. In mockup показан FREE upsell.

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

Subscriptions PLUS /subscriptions

PLUS subscription page — sales-driven redesign (Task 4 of brief): Year/Month toggle, Free vs PLUS, model catalog by tier, sticky CTA.

Source: pages/subscriptionsPage/subscriptionsPage.tsx + features/settings/subscriptions/

Implementation: ready in mockup.html (1393 строки, sales-driven redesign with model catalog, tier-gradients, Rub/Stars currency toggle).

Open fullscreen: mockup.html ↗

// 04 AI MODELS · 3 screens

Models & assistants

AI model catalog with detailed info, model picker for chat, assistants grid (Businessman / Investor / Marketer etc.).

InfoModel /info-model

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

9:41

Gemini 2.5 Pro

Google · Топ модель

Text

Код

Изображения

PDF

О модели

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

Контекст

2M токенов

Стоимость

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

Доступ

PLUS

Profile

VSE_Ai

Chats

Source: 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

ИИ модели

Text

Images

Видео

Аудио

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

Source: 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

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

Businessman

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

Investor

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

Marketer

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

Психолог

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

Юрист

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

Шеф-повар

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

Profile

VSE_Ai

Chats

Source: 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 screens

Монетизация

Покупка токенов (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 ₽

Source: 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

Source: pages/referralPage/referralPage.tsx

Drift fix: in app используются `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 Apr 2026 · 12:34

2 299 ₽

УСПЕШНО

Visa **4242

5 800 токенов

22 Apr 2026 · 15:47

999 ₽

УСПЕШНО

10 000 токенов

15 Apr 2026 · 09:21

1 499 ₽

ОТКЛОНЕНО

Source: 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

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

Source: pages/cardPage/cardPage.tsx + features/carrd/cardList/

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

// 06 GROWTH · 4 screens

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

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

Partner (entry) /partner

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

9:41

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

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

Ваш статус

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

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

Для блогеров

YouTube · TikTok · Telegram

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

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

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

30% revenue · pay-out monthly

Source: 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

Source: pages/partnerBlogerPage/referralBlogerPage.tsx

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

Apply (form) /apply

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

9:41

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

Имя

YouTube

Instagram

TikTok

Source: pages/applyPage/applyPage.tsx

Drift fix: in app 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

Source: pages/adsPage/adsPage.tsx

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

// 07 STATIC · 4 screens

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

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

Questions (FAQ) /questions

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

9:41

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

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

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

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

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

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

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

Source: pages/questionsPage/questionsPage.tsx (Radix Accordion + shared/data/questionsData)

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

Privacy /privacy

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

9:41

Privacy Policy

Обновлено 22.04.2026

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

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

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

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

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

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

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

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

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

Source: pages/privacyPage/privacyPage.tsx

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

Conditions (Terms) /conditions

Terms of Service — ту же структуру что Privacy, но другой контент.

9:41

Terms of Service

Обновлено 22.04.2026

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

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

2. PLUS Subscription

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

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

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

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

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

Source: pages/userConditionsPage/userConditionPage.tsx

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

News /news

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

9:41

Что нового

NEW

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

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

29 Apr

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

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

25 Apr

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

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

20 Apr

Source: pages/newslPage/newsPage.tsx

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

// 08 BANNERS · 3 ролика

Банеры PLUS

Анимированные банеры для всех breakpoints — premium liquid-glass с динамическим свечением. Готовы для использования внутри апп (PLUS-баннер на /settings и hero на /subscriptions) и для лендинг-маркетинга.

Mobile 9:16 · 1080×1920

Используется в Mini App в Telegram (mobile viewport). Hero-баннер на странице PLUS-апсейла + push-нотификация preview.

Используется как: PLUS-баннер на /settings, /profile (apply через ``).

Tablet 16:9 · 1920×1080

Tablet/desktop landing — auto-play с gradient liquid и cyan glow. Может использоваться как hero на /subscriptions desktop view.

Breakpoint: 640px ≤ width < 1024px (tablet).

Desktop 16:9 · 1920×1080

Full desktop hero. Идентичный по содержанию tablet-варианту, но с большим viewport — text размер увеличен, padding шире.

Breakpoint: width ≥ 1024px (desktop). max-width контента 1120px (Задача 3 ТЗ).

// 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'а

Generation params

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

Изображения · Params

· Загрузка референс-изображения (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

Видео · Params

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

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

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

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

Onboarding

Welcome!

Выбираешь AI

You're using

Welcome!

Get 50 free tokens

Core flow

Hi, MULan!

How can I help you?

Assistants

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

Businessman

Account & subscription

Models & assistants

О модели

ИИ модели

Монетизация

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

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

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

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

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

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

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

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

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

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

Privacy Policy

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

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

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

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

Terms of Service

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

2. PLUS Subscription

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

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

Что нового

Банеры PLUS

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

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

Generation params

Изображения · Params

Видео · Params

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

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