// 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) + «Start tutorial» CTA.

9:41

Welcome!

VSE Ai — best AI aggregator
for Telegram

Skip

Source: pages/welcomePage/welcomePage.tsx

8 previews loaded via useAiImageModels(). In mockup placeholders are gradients — frontend will substitute real images.

SelectAI /select-ai

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

9:41

Chat GPT

MidJourney

DALL·E 3

DeepSeek

Get started

You choose AI

All your AI agents are now in
one app — VSE Ai

Skip

Source: pages/selectAiPage/selectAiPage.tsx

Drift fix: in-app heading «Eva-AI» — off-brand, should be «VSE Ai». Fixed 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-do lists: I help organize your day…

Cool!

You're using

All your AI agents are now in
one 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

I agree to Privacy Policy

I agree to Terms of Service

Source: pages/giftPage/giftPage.tsx

Drift fix: in-app gift image is a static PNG. In mockup replaced with cyan-glow SVG in brand style (cyan accent + sparkles). Final icon TBD with you.

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?

Choose AI and ask your question

Gemini 2.0 Flash

Ready for your questions

Assistants

All

Animal
Trainer

Pet training,
command teaching

Businessman

Strategy advice,
idea check,
planning help

Id…

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 messages in-app use different styles (bg-blue/30 in exampleChat, bg-darkGray in chatModel). Unified to cyan-tinted glass bubble (right-aligned, asymmetric radius).

States: empty (shows 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

Brief dimmed conversation preview — focus on attach menu below...

Camera

Photos

Files

Voice

Generation params

Auto

Assistant style

Default

Web search

State: attach menu open. Close — tap «Cancel» or the dimmed area above.

Structure: 4 icon-grid actions on top (Camera / Photos / Files / Voice) → list rows with toggles and links (Params / Style / Web search).

Replaces the single paperclip in the composer. Web search toggle ON = model cites web sources.

AllChatList /all-chats-list

List of all chats: search input on top, chats by date with last-message preview, fixed «New chat» CTA at bottom.

9:41

Search chats

All 12

Text 7

Images 3

Video 2

Audio 0

Pinned

Today

Quantum entanglement

How is this used in tech?

12:34

Startup idea

Break this idea down with Lean Canvas framework

10:21

Yesterday

Logo for label

Generate 4 minimal-style variants

19:08

Document translation

Translate attached PDF to English

14:55

Profile

VSE Ai

Chats

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

Drift fix: «New chat» CTA in-app — `bg-gradient-to-t from-gray-900 via-gray-900/80` (off-canon). Replaced with 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

Email:

mikhail@example.com

PLUS Subscription

Subscription active until May 28, 2026

Payment history

Payment methods

Profile

VSE Ai

Chats

Source: pages/profilePage/profilePage.tsx

Conditional branches: PLUS / FREE / no subscription. Mockup shows PLUS — for FREE it would be «Upgrade to PLUS» instead of «PLUS Subscription».

Settings /settings

Main settings menu: PLUS banner on top, account, chat history, token balance, FAQ, legal links.

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), no user → EmptyBanner. Mockup shows FREE upsell.

Drift fix: in-app Settings has a special bg gradient (purple/blue/teal in Layout.tsx) — off-canon. Removed in mockup, background unified.

Subscriptions PLUS /subscriptions

PLUS subscription page — sales-driven redesign (Task 4 of Spec): 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 lines, sales-driven redesign with model catalog, tier-gradients, USD/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

Model detail page — header with logo/name, capabilities slider, description + tagline.

9:41

Gemini 2.5 Pro

Google · Top model

Text

Code

Images

PDF

About the model

Gemini 2.5 Pro — Google's flagship multimodal model. Up to 2M context tokens, natively handles text, images, audio, and video. Leader in reasoning and code analysis.

Context

2M tokens

Cost

15 tokens / request

Access

PLUS

Profile

VSE Ai

Chats

Source: pages/infoModelPage/infoModelPage.tsx + features/infoModel/

PLUS-only models must have cyan PLUS-badge. FREE-accessible show cost in tokens.

NewChatModel — model picker /new-chat-model

Provider-grouped accordion. One row per provider (GPT / Claude / Gemini / Grok / DeepSeek / Kimi), expand → version list with radio. Colored letter-avatars per provider. «New» badge on fresh top models.

9:41

AI Models

Text

Images

Video

Audio

G

GPT i

OpenAI · GPT-5

GPT-5

OpenAI flagship · complex analysis

GPT-5.4 Pro New

Top reasoning · coding

GPT-4o

Excellent quality for most tasks

GPT-4o Mini

Fast and smart · free

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 · Universal

K

Kimi i

Moonshot · K2

Source: CANON from brandbook-public/mockup.html (T2 v7) — provider-grouped accordion.

Drift fix: my previous version (tier-organized with NEW/PLUS/FREE badges) is CANCELED. Restored to canonical provider-accordion.

Colored avatars: openai (#1A6E48), anthr (#B25A2B), google (#2C5DB5), xai (#2A2A2A), deepseek (#5B43C8), kimi (#4A7B5C).

Assistant /assistant

Assistants grid 2 cols (mobile). Each — image card 190px with title and star (favorite). FREE-locked = opacity 0.4.

9:41

Search assistant

Businessman

Strategy, negotiation, presentations

Investor

Market analysis, startup valuation

Marketer

Content, advertising, analytics

Psychologist

Emotions, support, motivation

Lawyer

Contracts, disputes, claims

Chef

Recipes, menu, diet

Profile

VSE Ai

Chats

Source: pages/assisitantPage/assistantPage.tsx

Active favorite = cyan filled star. FREE-locked assistants (if user.subscription === 'free' and not in FREE_ALLOWED) = opacity 0.4 + lock icon, click redirects to /subscriptions.

// 05 MONETIZATION · 4 screens

Monetization

Buy tokens (USD / Telegram Stars), referral program, payment history, saved cards.

Token /token

5 token packs (USD or Stars). Currency tab toggle. Dynamic CPU. Sticky «Pay» CTA at bottom.

9:41

Buy tokens

Tokens are available immediately after top-up. They don't expire or get locked when subscription ends.

USD

Telegram Stars

2,500 tokens

≈ $0.0022 / token

499 $

5,800 tokens

≈ $0.0019 / token

−14%

999 $

10,000 tokens

≈ $0.0017 / token

1 499 $

20,000 tokens

≈ $0.0014 / token

2 499 $

50,000 tokens

≈ $0.0011 / token · −50%

4 999 $

Source: pages/tokenPage/tokenPage.tsx + entities/tokens/TopUpList

Selected bundle = cyan border + cyan glow + cyan price hint. Sticky white CTA at bottom with dynamic total.

Referral /referral

Referral program: 100 tokens per friend. 3-step cyan timeline, stats, copy/share link, share button.

9:41

Invite friends

Get 100 tokens
per friend

You invite friends with the link

Friends sign up in the app

You earn 100 tokens per friend

Friends invited: 12

Tokens earned: 1 200

Invite link

t.me/VSEIIBOT?start=ref_a4f9

Source: pages/referralPage/referralPage.tsx

Drift fix: in-app uses `bg-darkGray` cards and `text-cyan-400` (Tailwind preset). Unified to canon glass-cards and `--accent-cyan`.

Payments (history) /payments

Payment history: sticky «Sort» header with dropdown, expandable transaction cards with status, description, method, date.

9:41

Sort

Newest first

PLUS · Year

29 Apr 2026 · 12:34

2 299 $

SUCCESS

Visa **4242

5,800 tokens

22 Apr 2026 · 15:47

999 $

SUCCESS

10,000 tokens

15 Apr 2026 · 09:21

1 499 $

DECLINED

Source: pages/paymentsPage/paymentsPage.tsx + features/payments/cardList/ui/transactionCard.tsx

Empty state: glass card 8 × 12 px padding with CreditCard icon and «No payments» text. Status colors: completed=green, failed=red, pending=warn.

Cards /cards

Saved cards — list with brand logo, last4, delete button. Empty state centered.

9:41

Saved cards

VISA

Visa

**4242

Mastercard

**5588

Add card

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

In live app — empty state: «No cards» / «Add a card to make purchases» centered.

// 06 GROWTH · 4 screens

Affiliate & growth

Affiliate program for bloggers (with invited-friends gallery), application form, ad overlays (reward per view), affiliate entry point.

Partner (entry) /partner

Affiliate entry point — simple redirect to /partner-blog (for bloggers).

9:41

Affiliate program

Connect the app to your audience and earn from every subscription.

Your status

Not connected

Apply and get 30% revenue share from every invited PLUS user.

For bloggers

YouTube · TikTok · Telegram

Apply

Form · 5 minutes

Program terms

30% revenue · pay-out monthly

Source: pages/partnerPage/partnerPage.tsx

Drift fix v2: previous version had a giant chevron (class without sizes) and big 44×44 colored icon boxes. Replaced with canonical list-card pattern (as Settings/Profile) — unified visual language across the entire app.

Hero-stats card on top — cyan glow in our canon style, positions «connect» as the goal.

PartnerBlog /partner-blog

Affiliate referral — 3-step cyan timeline, invited-friends photo gallery, referral link.

9:41

Affiliate program

You invite a friend with the link

Your friend signs up

You earn tokens

You've already invited 4 friends

Maria

Mat…

Alex

Zaytsev

Anton

Ivanov

Ivan

Shchur

Your link

t.me/VSEIIBOT?start=blog_a4f9

Source: pages/partnerBlogerPage/referralBlogerPage.tsx

Avatars from Unsplash in-app — here replaced with gradient-circles + cyan border. Real photos will be loaded by frontend.

Apply (form) /apply

Affiliate-program form — Name, Telegram, YouTube, Instagram, TikTok, VK, other fields. Submit with success state.

9:41

Fill the form

Name

YouTube

Instagram

TikTok

Source: pages/applyPage/applyPage.tsx

Drift fix: in-app inputs use `text-black bg-white` (on dark background!) and `focus:ring-blue-500` — legacy garbage. Replaced with canon glass inputs + cyan focus.

Ads (reward overlay) /ads

Reward overlay after watching an ad — Diamond icon, «+15 tokens», «Watch more» CTA. Below — card of advertised app.

9:41

Hooray! You got
+15 tokens!

Total Battle: Strategy Games

Kingdom Wars: Kings & Castles

Source: pages/adsPage/adsPage.tsx

Overlay appears 2s after load. Before overlay — live ad-video on the reward content spot (LazyImage `Ads`).

// 07 STATIC · 4 screens

Static & info

FAQ with accordion, legal texts (Privacy / Terms), news. The simplest screens — but in unified canon.

Questions (FAQ) /questions

FAQ — Radix Accordion with expansion. ChevronRight rotates 90° on open.

9:41

Frequently asked questions

What are tokens and how many do I need?

Tokens are the app's internal currency. 1 model request costs 1–25 tokens depending on model and complexity. Buy packs in the «Balance» tab.

What's the difference between PLUS and FREE?

How to cancel subscription?

Which models are available?

Where to find chat history?

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

Open state: chevron rotates 90°, heading turns white (vs grey when closed).

Privacy /privacy

Privacy Policy — long scrollable text document. h2/h3 headings, paragraphs.

9:41

Privacy Policy

Updated 22.04.2026

1. General provisions

This Privacy Policy governs the processing of personal data of «VSE Ai» Telegram Mini App users (hereinafter — «Service»). By using the Service, you agree to the terms of this Policy.

2. What data we collect

We process the following data categories:

Telegram identifier (telegram_user_id)
Username and avatar (passed by Telegram)
AI-model request history
Payment operations (via secured provider)

3. Processing purposes

Data is processed to provide AI generation services, manage subscriptions and token balances, and prevent fraud.

4. Retention and deletion

Chat history is retained 90 days. Payment data — for the period required by law. Upon request, the user may delete their account via support.

Source: pages/privacyPage/privacyPage.tsx

Text content — H2 headings cyan, body white@60%. Actual text loaded from shared/data/.

Conditions (Terms) /conditions

Terms of Service — same structure as Privacy, different content.

9:41

Terms of Service

Updated 22.04.2026

1. Subject of agreement

This Agreement defines the rules for using the «VSE Ai» Telegram Mini App. By registering and using the Service, you accept the terms of this Agreement in full.

2. PLUS Subscription

PLUS subscription is purchased for 1 month or 1 year with auto-renewal. Cancel is available anytime via the «Profile» section — after cancellation, access remains until the end of the paid period.

3. Refunds

Refunds are available within 14 days of payment, provided the service was not actually used (no requests to paid models were made).

4. Restrictions

The service cannot be used to generate prohibited content (CSAM, terrorism, discrimination, copyright infringement).

Source: pages/userConditionsPage/userConditionPage.tsx

Structure mirrors Privacy — unified layout for legal documents.

News /news

News and updates — card feed. Page is currently empty in app — added mockup with «how it should look» design.

9:41

What's new

NEW

GPT-5.4 Pro now available in PLUS

OpenAI's flagship model with 1M context tokens and improved reasoning.

29 Apr

Veo 3.1 — video generation up to 30 seconds

New long-clip mode with native audio.

25 Apr

Referral program: 100 tokens per friend

Invite friends and earn tokens for each signup.

20 Apr

Source: pages/newslPage/newsPage.tsx

Page is EMPTY in live app — only `p-4 h-screen` div without content. Filled out structure analogous to other feed screens.

// For frontend · drop-in archives

Download design as package

Two archives: full design (everything in the brandbook — 4 screen versions, mockups, params, loaders, banners, icons, spec) or banners only (mini-package with CSS tokens and React components for quick drop-in).

↓ Full design (5.5 MB) ↓ Banners only (1.9 MB) Handoff page →

82 files · both themes · both languages · auth-free

// 08 BANNERS · 3 formats

PLUS Banners

Animated strip banners for all breakpoints — premium liquid-glass with dynamic glow. Sizes match the release-notes series exactly (393×180 / 768×261 / 1200×260) — a unified raster grid for all in-app banners. PLUS banner on /settings, hero on /subscriptions, landing marketing.

Mobile 393 × 180 · ~2.18:1

Mini App in Telegram (mobile viewport). PLUS banner on /settings, /profile (applied via <PlusBanner />).

Download: ↓ 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.

Download: ↓ MP4 768×261 · ↓ Hero 16:9 (archive 1920×1080)

Desktop 1200 × 260 · ~4.6:1

Desktop breakpoint (width ≥ 1024px). Full desktop strip, content max-width 1120px (Task 3 of Spec).

Download: ↓ MP4 1200×260 · ↓ Hero 16:9 (archive 1920×1080)

// 08b RELEASE NOTES · 3 formats

Release Notes Banners

Second banner series — for new version announcements ("What's new"). Narrow horizontal strips matching app breakpoints. Same liquid-glass language as PLUS, but without particle-glow and without the ∞ logo — a calm "info / update" mood, not "promo". Animation: slow drift of color blobs under glass + breathing cyan accent line.

Mobile 393 × 180 · ~2.18:1

Mini App in Telegram, mobile viewport. Vertical stack: chip → title → 4 bullets in 2×2 grid.

Download / open: ↓ HTML 393×180 · open in new tab ↗

Tablet 768 × 261 · ~2.94:1

Tablet breakpoint. Horizontal layout: chip + 42px title on the left, features 2×2 on the right.

Download / open: ↓ HTML 768×261 · open in new tab ↗

Desktop 1200 × 260 · ~4.6:1

Desktop breakpoint. Same layout as tablet but wider, with 56px title. Hero release announcement on /home or /news.

Download / open: ↓ HTML 1200×260 · open in new tab ↗

// 09 BRAND SYMBOL & LOADERS · 12 logos + Liquid Loader

Brand mark ∞ and loaders

Master path: unified Cassini ∞ form (c/a=0.99, target_height=50). 12 logo variants via single SVG <symbol> + ::use. Liquid Loader (3 sizes × 3 tempos) for loading states. Full collection and animations on /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

Brand-mark animations

Idle (breathing) · Listening (liquid waves) · Speaking (voice bars) · Thinking (cyan halo pulse) · Alert (fast bright pulse) · Sleeping (scaleY collapse). Used for loading-states and future voice-assistant face-system.

Open loaders.html ↗

// 10 GENERATION PARAMS · 2 modals

Generation params

Liquid glass parameter modals for image / video AI models. Include reference-image, aspect ratios (5 options), quality/resolution, duration (4–30 sec video), start/end frames, audio toggle, dynamic cost calculation in tokens. Opened from chat composer via icon-toggle.

Images · Params

· Reference-image upload (text-to-img / img-to-img)
· 5 aspect ratios: 1:1 / 4:3 / 16:9 / 2:3 / 9:16
· Quality: Low (30) / Standard (90) / High (185 tokens)
· Stepper quantity: up to 4 images
· Dynamic cost calculation
· White CTA «Apply» pill

Video · Params

· 2 frame slots: start + end
· Duration 4–30 sec via slider
· Resolution: 480p / 720p / 1080p / 4K
· 5 aspect ratios (including 21:9 cinematic)
· Audio toggle (+30% cost)
· Cost: base 110 × dur/5 × resolution × audio-mult

Open fullscreen ↗ Download params.html

Source: features/audio/ui/videoPopup.tsx (video parameters) + features/chat/chatModel/ui/MainInput.tsx (invocation).

In live app opens as bottom-sheet or modal on icon-toggle click in composer.

Onboarding

Welcome!

You choose AI

You're using

Welcome!

Get 50 free tokens

Core flow

Hi, MULan!

How can I help you?

Assistants

AnimalTrainer

Businessman

Account & subscription

Models & assistants

About the model

AI Models

Monetization

Buy tokens

Invite friends

Get 100 tokensper friend

Saved cards

Affiliate & growth

Affiliate program

Affiliate program

Fill the form

Static & info

Frequently asked questions

Privacy Policy

1. General provisions

2. What data we collect

3. Processing purposes

4. Retention and deletion

Terms of Service

1. Subject of agreement

2. PLUS Subscription

3. Refunds

4. Restrictions

What's new

PLUS Banners

Release Notes Banners

Brand mark ∞ and loaders

Brand-mark animations

Generation params

Images · Params

Video · Params

Animal
Trainer

Get 100 tokens
per friend