Offline · полный дизайн-пакет

# VSE AI — полный дизайн

Это локальная копия брендбука `vse-ai-brandbook.pages.dev`. Внутри: все 24 экрана апп, обе темы (dark / light), оба языка (RU / EN), brand-mark и лоадеры, баннеры (PLUS + Release Notes), mockups, design-параметры, ТЗ, иконки. Открой любую страницу двойным кликом — auth-guard убран, всё работает локально без интернета (только Google Fonts при первой загрузке).

Mini-пакет только для баннеров Если нужны только баннеры (PLUS + Release Notes) с готовыми CSS-токенами и React-компонентами — отдельный архив здесь, без всего остального.
↓ vse-ai-banners.zip (1.9 MB)
App Screens · все 24 экрана × 2 темы × 2 языка
Dark · RU
Тёмная тема, русская локаль (основная)
app-screens.html
Light · RU
Светлая тема, русская локаль
app-screens-light.html
Dark · EN
Dark theme, English locale
app-screens-dark-en.html
Light · EN
Light theme, English locale
app-screens-light-en.html
Где смотреть генерацию image / video: внутри любой из 4 страниц выше — пролистай до категории «04 AI MODELS» (каталог моделей с табами Текст / Код / Изображения / Видео + детальные карточки моделей) и категории «10 GENERATION PARAMS» (модалки параметров для image и video — reference, пропорции, качество, длительность 4–30s, кадры, audio toggle, расчёт стоимости в токенах). Сама генерация в продукте идёт внутри chat-flow (категория «02 CORE»), bubble-сообщения с image/video result рендерятся прямо в chat-окне — отдельных страниц «генерация» нет ни в коде апп, ни в брендбуке.
Прямые ссылки в категории внутри app-screens
04 AI Models · RU dark
Каталог моделей: табы Текст/Код/Изображения/Видео + model picker
#models
10 Generation params · RU dark
Модалки image-params и video-params (5 пропорций, качество, длительность, audio)
#params
02 Core flow · RU dark
Chat composer откуда вызывается генерация (icon-toggle для image/video)
#core
08 Banners PLUS · RU dark
3 strip-mp4 баннера (393×180 / 768×261 / 1200×260)
#banners
08b Release Notes · RU dark
3 HTML-баннера «Что нового» (RU + EN отдельные)
#release-notes-banners
09 Loaders · RU dark
12 вариантов лого ∞ + Liquid Loader
#loaders
Brand · знак ∞ + Liquid Loader
Loaders & Brand mark
12 вариантов лого + Liquid Loader (3 размера × 3 темпа)
loaders.html
Brandbook
Источник правды по brand identity
brandbook.html
Design system · параметры
Params · Dark RU
Tokens, components, scales
params.html
Params · Light RU
Те же tokens, светлая тема
params-light.html
Params · EN
Tokens, components (EN)
params-en.html
Params · Light EN
Light theme · EN
params-light-en.html
Mockups · продающий редизайн
Providers + Plus + Promo · canon v2
Список провайдеров, страница провайдера, Plus-баннер (3 варианта фона), Promo-баннер. JSON-handoff внизу.
mockups-providers.html · NEW
Affiliate-маркетинг
Visual roadmap affiliate-программы
affiliate.html
Mockups index
Все мокапы галереей (PLUS-подписка)
mockups.html
Mockup · Dark RU
Подписочная страница, каталог моделей
mockup.html
Mockup · Light RU
То же, светлая тема
mockup-light.html
Mockup · Dark EN
Subscriptions, models (EN)
mockup-en.html
Mockup · Light EN
Light theme, EN
mockup-light-en.html
Frontend handoff · готовый код
Handoff page
Tokens + copy-snippets + React-обёртки + manifest
frontend-handoff.html
System map
Карта зависимостей, breakpoints
system.html
ТЗ / Spec
Техническое задание дизайна
tz.html
Banner assets · raw файлы
PLUS · Mobile mp4
393×180 strip, 89 KB
↓ banner-mobile-393x180.mp4
PLUS · Tablet mp4
768×261 strip, 495 KB
↓ banner-tablet-768x261.mp4
PLUS · Desktop mp4
1200×260 strip, 1.3 MB
↓ banner-desktop-1200x260.mp4
Release · Mobile RU
Что нового, 393×180
banners/release-notes-mobile.html
Release · Tablet RU
Что нового, 768×261
banners/release-notes-tablet.html
Release · Desktop RU
Что нового, 1200×260
banners/release-notes-desktop.html
Release · Mobile EN
What's new, 393×180
banners/release-notes-mobile-en.html
Release · Tablet EN
What's new, 768×261
banners/release-notes-tablet-en.html
Release · Desktop EN
What's new, 1200×260
banners/release-notes-desktop-en.html
Providers banners · drop-in для фронта
providers-banners/ (папка)
CSS + 2 standalone HTML + 2 React-компонента + 3 PNG-фона. Plus full-screen × 3 варианта + Promo home × 4 варианта — отдельно, без мокапа.
drop-in пакет
Plus full-screen · 3 варианта
Модалка-апсейл на весь экран. Variants A/B/C с разными hooks. iPhone-frame preview 393×700.
providers-banners/plus-fullscreen.html
Promo home · 4 варианта
Узкая 52px-strip полоска под TG chrome. A/B/C cyan + D gold-trigger. Клик → открыть Plus.
providers-banners/promo-banner.html
banners.css
Изолированный CSS (только .plus-* + .promo-* классы + нужные tokens). 6 KB, drop-in.
providers-banners/banners.css
PlusBanner.tsx
React-компонент Plus, props читают providers.json. Поддержка onClose / onCtaClick.
providers-banners/PlusBanner.tsx
PromoBanner.tsx
React-компонент Promo, tone="cyan"/"gold". Один клик → открытие Plus.
providers-banners/PromoBanner.tsx
README.md (как использовать)
HTML и React usage, JSON-структура, A/B-тестирование, dependency graph.
providers-banners/README.md
Asset folders
assets/
21 SVG-иконка для UI + providers.json + plus-bg/ (3 cyan-фона)
SVG icons + data
↓ providers.json
Список провайдеров + тексты Plus/Promo баннеров (canon source)
data · 7.4 KB · v1.0.0
loaders-assets/
12 логотипов (SVG + PNG) + LiquidLoader.tsx + manifest.json
brand mark assets
↓ loaders-assets.zip
Архив всех brand-mark ассетов
отдельный subarchive