Кейс · 2026 Продуктовый дизайн UI/UX · дизайн-система · фронтенд

Кадрус

ИИ-студия видеопродакшена в одном файле. Как мы спроектировали интерфейс, в котором сериал, реклама и клип проходят путь от замысла до монтажа — без хаоса из промптов и вкладок.

Клиент
Экосистема Стартапус
Роль
Дизайн + фронтенд
Платформа
Веб · PWA
SH04 принят
00:21–00:27 · подвал-мастерская
Kling 2.1 · оживление
генерируется · 1,40 Монетус
Решалус предлагает промпт
правьте прямо в реплике
kadrus.startapus.ru / videos / S01E01 / edit
Режим «Монтаж» в Кадрусе: превью серии, медиатека кадров и таймлайн с дорожками
01 — Задача

ИИ умеет генерировать. Снимать кино — нет.

Стартапус запускал Кадрус — новый сервис экосистемы для ИИ-видеопродакшена. Модели уже выдают красивые кадры, но на длинной дистанции всё разваливается: у героя меняется лицо, свет скачет от сцены к сцене, а связь между сценарием и конкретным кадром живёт в голове у одного человека.

Нужен был не ещё один «генератор по промпту», а рабочее место студии, где у каждого кадра есть происхождение.Бриф клиента, своими словами
01

Герои «плывут»

Один и тот же персонаж в разных кадрах выглядит по-разному — описание пишется заново в каждом промпте.

02

Нет связи замысла и кадра

Библия проекта, сценарий и генерации лежат в разных местах. Непонятно, откуда взялся кадр и почему он такой.

03

Генерация — чёрный ящик

Варианты, модели, стоимость и статусы кадров никто не видит целиком — ни режиссёр, ни продюсер.

02 — Решение

Один файл ролика.
Пять режимов.

Мы собрали продакшен в одну сквозную цепочку. Всё, что описано выше по течению, наследуется ниже: герой из «Героев» и свет из «Места» сами приходят в промпт кадра на «Доске».

Режим 01 — Замысел

Серия начинается с текста, а не с промпта

Логлайн, библия проекта, сценарий сезона и заявки сцен. Всё, что описано здесь, наследуется вниз по цепочке и доходит до промпта каждого кадра.

  • Библия проекта → сценарий сезона → эта серия
  • Паспорт ролика: формат кадра, стиль, хронометраж
  • Серия видит всё, что описано выше, и добавляет частные случаи
kadrus.startapus.ru / videos / S01E01 / idea
Режим «Замысел»: паспорт ролика и описание серии
Режим 02 — Герои

Герой описан один раз — и узнаётся в каждом кадре

Лист персонажа, правило отображения на двух языках и факты для RAG. Кадрус сам подмешивает их в промпт каждого кадра, где герой в кадре. На примере пилота сериала «Решалус: Детство».

  • Лист персонажа: три вида, мимика, реквизит
  • Правило отображения RU → EN уходит прямо в модель
  • Факты для RAG попадают в сценарии и промпты
kadrus.startapus.ru / videos / S01E01 / cast
Режим «Герои»: лист персонажа Решалуса и правило отображения
Решалус — лист персонажа, три вида
Решалуспротагонист — робот-помощник, 60 см
Оксана
Оксанасооснователь Стартапуса
Тёма
Артемий (Тёма)старший сын, 14
Настя
Настясредняя дочь, блогер
Аня
Анямладшая дочь, 6
Дмитрий — лист персонажа
Дмитрийизобретатель, создатель Решалуса
Мани — белый лабрадор
Манибелый лабрадор

Правило отображения · EN → в модель

RESHALUS, a 60 cm tall child-proportioned robot: big head, small body, matte cream-white shell (#F2F0EA), a glossy black visor band across the lower third of the face. HE HAS NO MOUTH AT ALL. His only facial expression is two yellow pixel rectangles (#F5C518) on the visor

Факты для RAG · попадают в сценарии и промпты

Рост 60 см — камера в его сценах стоит на 40–70 см.
Рта нет: мимика только двумя жёлтыми пикселями на визоре.
Глаза — практический источник света в кадре.
Антенна с шариком отыгрывает как хвост: состояние важнее реплики.
Режим 03 — Место

Свет — это данные, а не удача

У локации есть ракурсы и условия съёмки: время дня, сезон, погода. Промпт места собирается из места, ракурса и условий и одинаково применяется ко всем кадрам ракурса.

  • Ракурсы: кадры доски привязаны к точкам съёмки
  • Время дня, сезон и погода — параметры, а не абзац текста
  • Готовый блок промпта уходит в генерацию
kadrus.startapus.ru / videos / S01E01 / places
Режим «Место»: подвал-мастерская Дмитрия и условия съёмки

Переключите время суток

Одна и та же локация и один ракурс — меняются только условия съёмки. В продукте это работает так же: условия применяются ко всем кадрам ракурса сразу.

Дом семьи днём Дом семьи ночью
ПРОМПТ МЕСТАДом семьи Лукьян — экстерьер. {{todPrompt}}
{{todLabel}}
Режим 04 — Доска

Бесконечный холст, где видно всё

Серия раскладывается на сцены, сцены — на кадры. Пока картинки ещё нет, кадр не пустует: 3D-манекен на three.js ставит мизансцену по крупности, оптике и движению камеры.

  • Сцены с таймкодами и полосой статусов
  • Фильтры: без кадра, на ревью, принятые
  • Очередь генерации и её цена в Монетусах
kadrus.startapus.ru / videos / S01E01 / board
Режим «Доска»: холст сториборда со сценами и кадрами
Доска · Решалус: Детство / Просто так
Холст сториборда: сцены «Дом снаружи» и «Подвал-мастерская» с карточками кадров
1
Сцена: таймкод, хронометраж и полоса статусов всех её кадров
2
3D-манекен вместо пустоты: крупный план, 50 мм, наезд
3
Первый → последний кадр: слоты для оживления в видео
4
Перетащите кадр сюда — он станет последним в сцене
5
Статус и длительность кадра читаются с одного взгляда
  1. 1Сцена: таймкод, хронометраж и полоса статусов всех её кадров
  2. 23D-манекен вместо пустоты: крупный план, 50 мм, наезд
  3. 3Первый → последний кадр: слоты для оживления в видео
  4. 4Перетащите кадр сюда — он станет последним в сцене
  5. 5Статус и длительность кадра читаются с одного взгляда

Карточка кадра: слева — что хочу, справа — что вернула сеть

Варианты генерации лежат рядом с заданием: модель, seed и цена в Монетусах. Выбранный вариант одним нажатием становится кадром серии.

SH04 · принят
Карточка кадра SH04: задание, варианты генерации Midjourney и Kling, промпт от Решалуса

Варианты рядом, а не в истории чата

Каждая генерация — строка с моделью, seed и ценой. Выбранный вариант одним нажатием становится кадром.

Три режима кадра

Готовое видео, генерация по описанию или движение между первым и последним кадром.

Решалус пишет промпт

Ассистент собирает промпт из героя, места и условий съёмки. Правите текст прямо в реплике — или просто скажите, что поменять.

M

Цена в Монетусах

Стоимость каждого варианта и всей очереди видна до запуска — продюсер не узнаёт о бюджете постфактум.

черновик в очереди генерируется на ревью принят
Режим 05 — Монтаж

Таймлайн, который знает статус каждого кадра

Медиатека, дорожки кадров, реплик и звука, превью фильма. Цвет клипа на дорожке — это статус кадра, поэтому сразу видно, что уже принято, а что ещё генерируется.

  • Дорожки V1 · A1 · A2, сцены над таймлайном
  • Цвет клипа = статус кадра
  • Выгрузка фильма целиком и EDL/XML для монтажёра
kadrus.startapus.ru / videos / S01E01 / edit
Режим «Монтаж»: превью серии и таймлайн с дорожками
03 — Стиль

Десять стилей — один проект

Стиль задаётся в библии проекта и уходит во все кадры. Хотите тизер в акварели или пиксель-арт для соцсетей — меняется одна настройка, а не сотня промптов.

{{s.label}}{{s.label}}
04 — Дизайн-система

Своё лицо внутри общей экосистемы

Кадрус построен на @reshalus/ui — единой дизайн-системе продуктов Стартапус (shadcn/ui, стиль radix-nova). Мы добавили к ней акцент продукта, рабочие поверхности для холста и медиа, карту статусов кадра и бренд-знак.

УмусММонетусРешалусКадрус

Цвет · тёмная тема

Background#0a0d11

Card#151a21

Product#f5c518

Media#05070a

Running#5ec8f2

Review#e8b23a

OK#3ec98a

Brick#c0512f

Шрифты

АаInter Variable
интерфейс, заголовки, текст
SH04JetBrains Mono
таймкоды, промпты, HUD

00:21–00:27 · 6 с · 16:9 · 50 мм

Знак Кадруса

LED-кадр 7×7

Пиксельная рамка видоискателя на плашке визора Решалуса. Пиксели залиты градиентом продукта — от малинового к янтарному. Из того же знака генерируются фавикон и иконки PWA.

#e11d48 → #f59e0b · плашка #1c1c1a

Маскот · состояния визора

ждёт
думает
печатает
рад
спит

Ассистент Решалус живёт в шапке редактора. У него нет рта — только два пикселя на визоре. Этого хватает, чтобы показать, что он думает, пишет или ждёт.

01

Один источник цвета

Все цвета — токены в одном файле темы. В компонентах ни одного hex.

02

Две темы на одних именах

Светлая и тёмная. Компонент не знает, какая тема включена.

03

Данные ≠ оформление

Цвет сюжетной линии или свотч палитры — это данные проекта, а не стиль.

04

Один акцент на экран

Жёлтый — только главное действие и выбранный элемент. Не больше двух пятен.

05 — Адаптив

Продакшен в кармане

Холст, карточки героев и очередь генерации работают на телефоне: принять кадр, поправить промпт или проверить статус можно со съёмочной площадки. Плюс PWA — Кадрус ставится на экран как приложение.

Доска на телефоне
Герои на телефоне
06 — Как мы работали

Люди решают. ИИ ускоряет.

Над Кадрусом работала команда Стартапуса: дизайнеры и разработчики, вооружённые ИИ-инструментами. Решения — за людьми, рутину берут машины. Поэтому мы не рисовали картинки «для согласования»: команда сразу собирала живой прототип и переносила его в код без потерь — токен в токен.

Шаг 1

Живой прототип

Дизайнеры собрали все экраны — от файлов до монтажа — в кликабельный прототип на реальных данных пилота.

Шаг 2

Токены вместо хардкода

Цвета прототипа заменены токенами @reshalus/ui, добавлены поверхности холста и статусы.

Шаг 3

Компоненты

Сначала shadcn/ui, затем доменные компоненты Кадруса: статусы, кадр в формате, 3D-сцена, аватар.

Шаг 4

Фронтенд и API

React-приложение и мок-API на Rust: один бинарник отдаёт API, медиа и сайт.

Шаг 5

SEO и PWA

Пререндер мета-тегов, OG-снимки каждой страницы, sitemap, иконки из знака, ru/en.

React 19 · Vite · TypeScriptTailwind v4 · shadcn/ui@xyflow/react · холстthree.js · 3D-мизансценаTanStack Query · ZustandRust · Axum · Tokioi18next · ru / enPlaywright · OG-снимки
5

режимов ролика в одном файле

12

фич-экранов: от файлов до очереди генерации

2×2

темы и языка на одних токенах

28

кадров пилотной серии на холсте — 9 сцен

Стартапус — студия продуктового дизайна

Сделаем ваш продукт таким же кинематографичным

От исследования и прототипа до дизайн-системы и работающего фронтенда — одной командой.