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 языка

Тёмная тема, русская локаль (основная)

app-screens.html

Светлая тема, русская локаль

app-screens-light.html

Dark theme, English locale

app-screens-dark-en.html

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

10 Generation params · RU dark

Модалки image-params и video-params (5 пропорций, качество, длительность, audio)

02 Core flow · RU dark

Chat composer откуда вызывается генерация (icon-toggle для image/video)

08 Banners PLUS · RU dark

3 strip-mp4 баннера (393×180 / 768×261 / 1200×260)

08b Release Notes · RU dark

3 HTML-баннера «Что нового» (RU + EN отдельные)

#release-notes-banners

Brand

Источник правды по brand identity

Design system · параметры

Params · Dark RU

Tokens, components, scales

Params · Light RU

Те же tokens, светлая тема

params-light.html

Tokens, components (EN)

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-программы

Все мокапы галереей (PLUS-подписка)

Mockup · Dark RU

Подписочная страница, каталог моделей

Mockup · Light RU

То же, светлая тема

mockup-light.html

Mockup · Dark EN

Subscriptions, models (EN)

Mockup · Light EN

Light theme, EN

mockup-light-en.html

Frontend handoff · готовый код

Tokens + copy-snippets + React-обёртки + manifest

frontend-handoff.html

Карта зависимостей, breakpoints

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

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

Изолированный CSS (только .plus-* + .promo-* классы + нужные tokens). 6 KB, drop-in.

providers-banners/banners.css

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

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