Шаг 2.4. Стиль А «Галерея», акцент — фиолетовый #A78BFA, с радужным переливом, главная кнопка — тёмное стекло со свечением «Волны», только тёмная тема. Телефоны 390×844 и один широкий кадр 1280×800 (Telegram Desktop). Обложки — CSS-формы вместо фото. MainButton Telegram не используем нигде (D-126): все главные кнопки — свои. Документ с правилами: docs/design/design-system.md. Номера кадров (S-01, C-01…) совпадают с документом.
Комментарий можно оставить и через режим комментариев claude.ai.
Тексты — из docs/design/copy.md v1.1. Пунктир — заглушка: цена или лимит ещё не решены. Режим «Android LOW» и «Reduced motion» показывают, во что превращаются эффекты; системная настройка «уменьшить движение» включает второй режим сама.
Масштаб
Движение
Тексты
0. Иконка токена — выбрано: кольцо O (из W, D-134)
Знак токена во всём макете — кольцо O, оставленное от варианта W без морфинга в X: по кольцу непрерывно бежит радужный перелив «Волны» на фиолетовой основе (градиент вращается вокруг центра за 3 с) и белый блик (дуга 14 % окружности, круг за 2,4 с). Внутри — едва заметная фиолетовая заливка 10 %, поэтому знак читается как монета, а не как буква O. Штрих 3,4 из 24 в мелких размерах (14–24 px) и 2,8 в крупных. Стоит прямо в разметке во всех местах токена. LOW / reduced motion — статичное кольцо с градиентом.
Кольцо O (из W)
Свет бежит по кругу: вращение градиента и белый блик. Монета, а не буква.
412+Сгенерировать · 39
Показать все варианты (архив, 24 шт.)
Четырёхлучевая ✦ похожа на знак Google Gemini — предлагаю замену. A…H — монета, кристалл, капля, соты, «X», знак «XO», орбита, пламя; I…P — звезда и космос; Q…X (раунд 9) — монограммы «XO»: пересечение, одна линия, вырез, крестики-нолики, асимметрия, плитка, X ⇄ O, диафрагма. Четырёхлучевой звезды и гексаграммы среди них нет. У каждого своя тихая анимация и радужный перелив «Волны» на фиолетовой основе (SVG-градиент, без WebGL). Размеры: 64 px — крупно, 24 px — баланс в шапке, 14 px — в строке цены. «Применить везде» подменяет иконку во всём макете. LOW / reduced motion — статичный фиолетовый, анимации на паузе. Q…X нарисованы оркестратором (token-xo.html) и перенесены сюда.
Рекомендую из 24:I · Звезда — самый понятный знак «валюты и награды», читается в 14 px, не Gemini; A · Монета «XO» — бренд и «деньги» в одном знаке. Из монограмм раунда 9 — S · Вырез (сплошной диск читается в 14 px лучше всех, поворот креста запоминается), V · Плитка (сразу значок приложения и бренд) и W · X ⇄ O (один живой знак, самый запоминающийся). Сравнение с I и A: I и A — про «валюту и награду», S, V, W — про «бренд»; если ✦ должна читаться как деньги — I или A, как знак продукта — S или V; W эффектнее всех, но в статике (LOW) становится просто X. Тонкие знаки (R, T, U) в 14 px слабее сплошных.
✦
Текущая ✦
Четырёхлучевая звезда (сейчас в макете). Похожа на знак Gemini — нужна замена.
✦ 412+Сгенерировать · 39 ✦
A · Монета «XO»
Монета с гравировкой XO, раз в 3 с поворачивается ребром. Сразу читается как «деньги».
412+Сгенерировать · 39
B · Кристалл
Огранённый камень, по грани пробегает блик. «Ценность», не похоже на чужие знаки.
412+Сгенерировать · 39
C · Капля-искра
Капля энергии с искрой внутри, мягко покачивается. Тёплая, «живая».
412+Сгенерировать · 39
D · Соты
Шестиугольник с внутренней гранью, по нему бежит блик. Техничный, строгий.
412+Сгенерировать · 39
E · «X» из лучей
Два скрещённых луча — буква X бренда, медленно вращается.
412+Сгенерировать · 39
F · Знак «XO» в круге
Монограмма в кольце, кольцо с разрывами вращается. Максимально «брендовый».
412+Сгенерировать · 39
G · Орбита
Ядро и кольцо-орбита, по нему бежит точка. Про «генерацию», движение.
412+Сгенерировать · 39
H · Пламя
Лепесток-пламя с внутренним огнём, слегка мерцает. Энергия, «топливо» для генерации.
412+Сгенерировать · 39
I · Звезда
Пятиконечная звезда с мягкими скруглёнными лучами, свечение пульсирует. Самый узнаваемый знак «награды».
412+Сгенерировать · 39
J · Комета
Ядро и три хвоста, хвост мерцает. Движение, «улетает в работу».
412+Сгенерировать · 39
K · Планета
Планета с кольцом, кольцо медленно наклоняется. Космос, спокойный.
412+Сгенерировать · 39
L · Месяц и звезда
Полумесяц со звёздочкой, звёздочка мерцает. Ночь, «магия».
412+Сгенерировать · 39
M · Сверхновая
Вспышка из 8 неровных лучей, лучи «дышат» по очереди. Энергия.
412+Сгенерировать · 39
N · Галактика
Два спиральных рукава вокруг ядра, вращаются. Масштаб, «вселенная».
412+Сгенерировать · 39
O · Созвездие
Четыре точки на линиях, вспыхивают по очереди. Тонкий, «умный».
412+Сгенерировать · 39
P · Пульсар
Яркое ядро и расходящиеся кольца-волны. Про «генерацию», отклик.
412+Сгенерировать · 39
Q · Пересечение
Штрихи X и кольцо O сросшиеся, кольцо мягко дышит. Строгий логотип-знак.
412+Сгенерировать · 39
R · Одна линия
XO нарисованы одним непрерывным штрихом, линия прорисовывается и уходит. Почерк бренда.
412+Сгенерировать · 39
S · Вырез рекомендую
Диск, в котором X — пустое место; крест поворачивается на четверть. Хорошо читается в 14 px.
412+Сгенерировать · 39
T · Крестики-нолики
Тонкая решётка, X и O вспыхивают по очереди. Игриво, отсылка к названию XO.
412+Сгенерировать · 39
U · Асимметрия
Толстый и тонкий штрихи X и полукольцо O, полукольцо покачивается. Самый «дизайнерский».
412+Сгенерировать · 39
V · Иконка-плитка рекомендую
Скруглённый квадрат с вырезанным XO, по краю бежит свет. Как значок приложения, сразу бренд.
412+Сгенерировать · 39
X · Диафрагма
Кольцо с разрывом, как затвор камеры, внутри вращается X. Отсылка к фото.
412+Сгенерировать · 39
1. Запуск: прелоадер-шейдер → логотип рассыпается → главная
R-1 + R-3. Прелоадер живёт в index.html (≤ 5 кБ), длится ровно столько, сколько грузится первый экран, — в макете 1,8 с для показа. Рассыпание логотипа ≈ 850 мс; главная уже отрисована под ним и принимает касания.
S-01 · Прелоадер и логотип (D-134)Знак «XO» — X из двух штрихов слева и кольцо O справа, фиолетовый (#8B5CF6 → #A78BFA → #C084FC) со свечением, под ним очень тонкая разрядка «STUDIO». Прорисовка ≈ 600 мс (штрих X, второй штрих, кольцо по кругу; в продукте — пока грузится первый экран) → держим ≈ 300 мс → рассыпание на фиолетовые частицы слева направо ≈ 850 мс, частицы берут цвет своего пикселя знака; под ним уже работает «Главная». Фон — шейдер «Волна» (R-1, D-135), один WebGL-контекст. Показываем при каждом открытии (D-112). LOW / reduced motion: статичный фиолетовый XO, затухание 150 мс.
2. «Главная» и «Шаблоны» (D-111)
«Главная» — витрина: герой-тренд и подборки рядами, ряды листаются вбок (пальцем, колесом с Shift или перетаскиванием мышью). «Все →» открывает категорию. «Шаблоны» — весь каталог сеткой с поиском и категориями.
S-02 · «Главная» — витрина (D-111)Сверху вниз: (а) промо-баннеры каруселью вбок — 128 px, видно 1,15 карточки, scroll-snap, точки-индикаторы; задаются в админке, без таймеров и «осталось N» (D-055); (б) два входа в стиле Features 8: «Использовать шаблоны» → «Шаблоны», «Начать с нуля» → «Создать» (в макете — кликабельны); (в) ряды подборок со скроллом вбок и «Все →» (→ S-04). Герой-тренда нет — его роль у баннера. Кнопка ниже — загрузка: шейдер «Волна» вместо серых карточек (S-03, §3.17, D-127).
Вам начислено 50 Хватит на первую работу. Выберите шаблон или напишите промпт
S-29 · Первое открытие: «Вам начислено 50 » (D-128)Плашка сверху поверх «Главной», один раз: исчезает сама через 5 с (полоска времени), закрывается «×» или смахиванием вверх. Других подарочных экранов, меток «Бесплатно» и «обычно 39 » нет — новичок просто видит баланс 50 и обычные кнопки «Сгенерировать · 39 ».
9:41
ЗакрытьXO Studioмини-приложение⋯
Шаблоны
Зимняя сказкаФото
ЖУРНАЛ
Обложка журналаФото
Для двоих
Мы в 90-хФото
0:05
Танец под дождёмВидео · 149
Неоновый городФото
Ретро-ательеФото
S-03 · «Шаблоны» — весь каталогПоиск, категории-чипы, сетка 2 колонки, зазор 3 px, без боковых полей. Кнопка ниже — загрузка: в грузящихся карточках играет шейдер «Волна» (один холст на экран, D-127).
Для двоих
Для вас и того, кто рядом · 6 шаблонов
Для двоих
Мы в 90-хФото
Для двоих
Зимняя прогулкаФото
Для двоих
Свадьба в 70-хФото
Для двоих
Свидание в неонеФото
0:05
Танго под дождёмВидео · 149
Для двоих
ДетективыФото
S-04 · Категория — нижний лист поверх «Главной» (D-136)«Все →» в ряду «Главной» открывает лист: заголовок и подзаголовок категории, «×», сетка шаблонов 2 колонки прокручивается внутри листа; карточки раскрываются из стопки снизу вверх; свайп вниз, «×» или BackButton — назад к той же витрине, позиция прокрутки «Главной» сохраняется. Тап по шаблону — экран шаблона (S-05…).
3. Шаблон — открыт по ссылке поверх главной (D-087)
Экран шаблона выглядит так, будто человек открыл приложение и зашёл в шаблон: таббар из 4 вкладок виден, «‹ Назад» (BackButton) ведёт на «Главную». Кнопка «Сгенерировать / Пополнить баланс» — своя, над таббаром; MainButton Telegram не используем нигде (D-126). Тап по слоту открывает лист «Фото» (S-09 → S-25); на экране слот — компактная сводка.
9:41
‹ НазадXO Studioмини-приложение⋯
до → после
Старые деньги
Вы — героиня старых денег
0 из 1
Добавьте фотоЛицо крупно · Дневной свет · Без очков
Нажимая «Сгенерировать», вы принимаете оферту
S-05 · Пустой слот (новичок)Слот — компактная сводка с примером хорошего фото и подсказками (своих проверок лица нет, D-091). Своя кнопка над таббаром выключена: «Добавьте фото». Тап по слоту → лист «Фото»: согласие один раз (S-09), затем слоты (S-25).
9:41
‹ НазадXO Studioмини-приложение⋯
до → после
Зимняя сказка
Снежный портрет в белом
1 из 1
Моё фото✓ 1 из 1 фотоТап по папке — заменить
Каждый раз получается по-новому
Нажимая «Сгенерировать», вы принимаете оферту
S-06 · Фото загружено (вернувшийся)«Моё фото» подставлено само и всегда видно с «Сменить» (D-017). Путь — 2 касания: открыть → «Сгенерировать · 39 ».
9:41
‹ НазадXO Studioмини-приложение⋯
до → после
Старые деньги
Портрет в стиле old money
1 из 1
Моё фото✓ 1 из 1 фотоТап по папке — заменить
Нажимая «Сгенерировать», вы принимаете оферту
S-07 · Фото загружено (новичок, 50 на балансе)Обычная кнопка «Сгенерировать · 39 » — никаких «Бесплатно» и «обычно 39 » (D-128). Качество — 1K · 39 / 2K · 39 / 4K · 49 , по умолчанию 2K (D-110); при нехватке кнопка «Пополнить баланс», строка над ней «У вас уже N из M » (D-107).
9:41
‹ НазадXO Studioмини-приложение⋯
0:05до → после
Танец под дождём
Видео 5 секунд по вашему фото
1 из 1
Моё фото✓ 1 из 1 фотоТап по папке — заменить
У вас уже 50 из 149
Нажимая «Сгенерировать», вы принимаете оферту
S-08 · Не хватает (видео)У новичка 50 , видео стоит 149 : над кнопкой строка «У вас уже 50 из 149 », кнопка «Пополнить баланс» → S-11 (D-107). Подарочной плашки и моста в фото-шаблон нет (D-128).
Один лист за раз, у каждого есть «×» и закрытие свайпом. Пока лист открыт, цвет нижней панели Telegram = цвет листа (setBottomBarColor). Кнопки в листах — свои.
Фото для шаблона · один раз
Ваше фото — только для генерации
Используем фото, только чтобы сгенерировать работу по шаблону. Его обрабатывает сервис-партнёр по договору с нами
Храним 30 дней, потом удаляем. Удалить раньше можно в профиле
Фото могут видеть наши сотрудники, когда разбирают обращения
Мне есть 18 лет. На фото — я, человек, который согласен, или мой ребёнок, а я его родитель или законный представитель
Запомнить фото
Согласие на обработку фото
S-09 · Лист «Фото», шаг 1: согласие + 18+ (D-032, D-093, D-094)Согласие — в том же листе «Фото», перед первым выбором файла, один раз; после «Даю согласие» лист показывает слоты (S-25). Отдельное действие — своя кнопка, не MainButton: системный выбор фото открывается только по настоящему касанию в странице. Заверение 18+ — строкой здесь, отдельного экрана нет. Только проверенные обещания.
Фото для шаблона
2 из 4 фото
Нужны 4 фото: вы, партнёр, ребёнок и бабушка. Лица крупно, при дневном свете, без очков.
1
Фото персонажа 1 — выЧеловек слева, лицо крупно
пример
✓ «Моё фото»
2
Фото персонажа 2 — партнёрЧеловек справа, без очков
пример
Загружаем… 62 %
3
Фото персонажа 3 — ребёнокВ центре, можно на руках
пример
Перетащите из «Недавних» или
4
Фото персонажа 4 — бабушкаЛицо крупно, дневной свет
пример
Этот файл не открывается
Недавние загрузкитап — в пустой слот
S-25 · Лист «Фото» для шаблона: карточки-гайдыТот же лист «Референсы», но вместо свободной сетки — карточка на каждый слот персонажа из админки (их N, D-028): номер, «Фото персонажа k — кто», инструкция, пример хорошего фото и само фото (заменить / удалить / прогресс / ошибка). Сверху — общий комментарий админки. «Моё фото» встаёт в слот «вы» само. Ниже — «Недавние загрузки» лентой вбок: тап или перетаскивание кладёт фото в слот. Согласие (S-09) — первым шагом этого листа. Открывается тапом по папке «Фото» на экране шаблона.
Качество
Цена спишется после «Сгенерировать»
Выбор живёт только в этом шаблоне. В следующем снова будет 2K.
S-10 · Лист выбора качества (stacked list, R-5)Открывается долгим нажатием / «?» у сегментов, когда вариантам нужны пояснения; при ≥ 4 вариантах (видео: режим × длительность) — вместо сегментов. Строки раскрываются из стопки с задержкой 30 мс. Показываем всё, что умеет модель: Nano Banana Pro 1K · 39, 2K · 39 (по умолчанию), 4K · 49 (D-110).
Пакеты
Токены не сгорают
Пополнить баланс
Не хватает 110 · Ваш шаблон и фото сохранены
Выберите банк
3 шага: выберите банк → подтвердите оплату в приложении банка → вернитесь сюда и нажмите «Сгенерировать». Получатель в банке: ИП Фамилия И. О.
через СБП
Оплачивая, вы принимаете оферту
S-11 · Пакеты оплатыВручную (из баланса +) — все 4 пакета, «Рекомендуем» выбран. Из шаблона — тоже все 4 пакета, предвыбран наименьший достаточный с подписью «Хватит на этот шаблон…» (D-120). Крупно — «фото по N ₽», скидка вторым планом (D-052). Оплата — своя кнопка «Оплатить N ₽» (MainButton не используем, D-126).
Ждём оплату
Оплатили? Проверим автоматически — можно закрыть, проверка продолжится
Пакет куплен+150
+50 по промокоду · Шаблон и фото на месте
Оплата не прошла
Деньги не списаны. Можно попробовать ещё раз
S-12 · Ждём оплату → «Пакет куплен» / «Не прошла» (webhook, D-090)После «Оплатить» человек уходит в банк; лист «Ждём оплату» уже стоит, когда он вернётся: спокойное кольцо, «Открыть банк снова», «×» — проверка продолжается в фоне (итог придёт окном при следующем открытии и сообщением бота B12). Webhook подтвердил — тот же лист перетекает в «Пакет куплен · +N »: короткий всплеск -искр ≤ 1,2 с (только transform / opacity), haptic success, лист закрывается сам через 3 с. Под ним — шаблон с кнопкой «Сгенерировать · 149 ». LOW / reduced motion — без искр.
Полноэкранного экрана ожидания больше нет: после «Сгенерировать» человек попадает в «Мои работы», ожидание и результат живут в листе работы поверх списка. Яркое — только «Волна» с радужным и проявление (D-101, D-127).
Сгенерировать · 39
S-13 · «Сгенерировать» → «Мои работы» (D-119, D-127, раунд 7)Кнопка сжимается в пилюлю « Генерируем…» (380 мс), затем приложение само переходит на вкладку «Мои работы»: сверху новая карточка — фон шейдер «Волна», в левом верхнем углу тонкая подпись «Генерируем…», под карточкой «В работе». Gooey-этапы — только в листе работы (S-14); иконки токена и «≈ 30 с» на карточке нет. Можно уйти на любую вкладку — готово придёт в чат.
Старые деньги
Сегодня · 2K
Генерируем
ШаблонСтарые деньги
МодельNano Banana Pro
Качество2K
Ориентация3:4
ДатаСегодня, 14:20
Фото
Можно закрыть — пришлём работу в чат
S-14 · Лист работы: генерация → проявление (D-103, D-127, D-129, раунд 7)Стадия — «Волна» и крупный gooey-текст этапов (без иконки и полосы). Под стадией с первой секунды — те же детали, что у готовой работы: шаблон (или промпт с «Копировать»), модель, качество, ориентация, дата, фото; строка «Можно закрыть — пришлём работу в чат». Готово — проявление в листе, 1100 мс (волна гаснет 500 мс, превью гаснет, резкий слой 1.05 → 1, затемнение 55 % → 0, haptic success), появляются «Сохранить / Поделиться» и кнопки «Переделать» / «Ещё раз · 39 ». LOW / reduced motion — затухание 150 мс.
Кинокадр нуар
Создать · 1 окт
Промпт
Я героиня нуар-фильма с @Фото1: дождь, неон, плащ. Ночной город, мокрый асфальт отражает вывески, кадр на плёнку 35 мм, зерно, глубокие тени.
МодельNano Banana Pro
Качество2K
Ориентация3:4
Дата1 окт, 21:05
Референсы
Скопировано
S-15 · Лист работы: готово (работа из «Создать», D-129)Детали: промпт свёрнут в 3 строки — «Развернуть» и «Копировать» (тост «Скопировано»), модель, качество, ориентация (у видео — ещё длительность), дата, референсы миниатюрами; упоминания @Фото1 — чипами. Внизу, липко: «Переделать» — открывает «Создать» (или тот же шаблон) со всеми данными этой генерации (→ S-16), и главная «Ещё раз · 39 ». «⋯» — удалить, сообщить о проблеме. Лист прокручивается.
6. «Создать» — свой промпт (D-085, D-087)
Интерфейс собирается из возможностей выбранной модели: чего модель не умеет, того нет на экране. Обязательных параметров нет — всё предвыбрано. Переключите «Фото / Видео» прямо в телефоне.
9:41
ЗакрытьXO Studioмини-приложение⋯
Создать
Переделка работы «Кинокадр нуар» — промпт, фото, модель и качество подставлены. Измените что нужно.
Модель
Я героиня нуар-фильма с @Фото1: дождь, неон, плащ
48 / 20 000
Референсылимит модели
3 из 8
1 из 2 · Начало / Конецмодель не принимает
Качество
Формат
Длительность
Звук
S-16 · «Создать» (фото / видео)Открыт по «Переделать» из листа работы (S-15 → сюда): сверху плашка «Переделка…», все поля заполнены данными той генерации; в промпте «@Фото1» сразу чип с миниатюрой — это первый референс в папке, порядок тот же, что в генерации. Поле называется «Промпт» (D-130); «@» отмечает загруженное фото (S-26); чипов-примеров под полем нет. Счётчик «48 / 20 000» = лимит модели; иконка «развернуть» → S-26; кнопка ниже вставляет длинный текст — в режиме «Видео» (Kling 3.0, 2 500) видно превышение. Корневая вкладка: таббар виден, кнопка — своя, над таббаром. Референсы — папка (по образцу Interactive Folder Gallery): сзади веером миниатюры загруженного, на передней стенке подпись, под папкой «3 из 8» = images.max модели; тап → лист «Референсы» (S-27). Модель с видео-референсами получает вторую папку «Видео» (S-28); у Kling 3.0 видео нет — папка «Видео» неактивна, фото-папка «Начало / Конец». Цена видео на кнопке пересчитывается при смене режима, длительности и звука (Kling 3.0 720p 5 с — 139 ; правило C / 0,45, D-110). Строка «Модель» с названием модели (D-109), выбор в листе S-17.
Референсы
Nano Banana Pro · до 8 фото
Выбрано 3 из 8Фото · 12 загрузок
Загрузить
1
2
3
Загружаем… 48 %
Файл не открывается
S-27 · Лист «Референсы» для «Создать»Менеджер загрузок по образцу Higgsfield Uploads: фильтры (только те, что разрешает модель; у Nano Banana Pro видео нет — «Все / Недавние»), «Выбрано 3 из 8» — лимит images.max модели. Сетка 3 колонки: первая ячейка — пунктирная «Загрузить» с облаком; на карточке — чекбокс с номером порядка, «развернуть» и «удалить», прогресс и ошибка прямо на карточке. Это вся библиотека загрузок человека; галочкой выбирается, что идёт в эту генерацию. «Готово · 3 выбрано» — своя кнопка. Открывается тапом по папке «Референсы» (S-16).
Референсы
Seedance 2 · до 5 фото и 1 видео
Фото 2 из 5 · Видео 1 из 1Цена +22 % с видео
Загрузить
1
2
30:04
0:07Лимит модели — 1 видео
S-28 · Тот же лист для модели с видео-референсамиМодель разрешает видео (videos.max > 0) — появляется фильтр «Видео» и вторая папка «Видео» в «Создать». У видео — play и длительность. Лимит видео достигнут: остальные видео неактивны с подсказкой «Лимит модели — 1 видео». Цена на кнопке «Сгенерировать» пересчитывается, если добавлено видео (PC-3).
Промпт
Nano Banana Pro · до 20 000 символов
Я героиня нуар-фильма с @Фото1: дождь, неон, плащ. Ночной город, мокрый асфальт отражает вывески. На заднем плане — партнёр в шляпе, как @Фото2, свет фар. Плёнка 35 мм, зерно, глубокие тени. Одежда — как на @
Отметить фото · из референсов
@Фото1@Фото2@Фото3
214 / 20 000
S-26 · Редактор промпта с «@» (D-121, D-130)Человек набрал «@» — над клавиатурой (здесь — под полем) всплывает лента загруженных референсов «@Фото1, @Фото2…»; выбранное вставляется в текст чипом-токеном с миниатюрой. Иконка «развернуть» появляется у счётчика, как только в поле есть текст. Лимит — prompt.max_length выбранной модели из каталога Polza: Nano Banana Pro / Nano Banana 2 / GPT Image 2.5 / Seedance 2 — 20 000, Seedream 5 Pro и Flux.2 — 5 000, Kling 3.0 — 2 500, Veo 3.1 — 60 000. Ближе 90 % — счётчик label-2, превышение — красный и кнопка выключена: «Сократите промпт».
Модель
Видео
Поиск появится, когда моделей станет больше 8.
S-17 · Лист «Модель» (R-5, D-109)Карточка модели: название, одна строка «для чего», цена «от N ». После выбора экран перестраивается; несовместимые параметры сбрасываются с тостом «Настройки обновлены под модель».
7. «Мои работы» — Список / Карточки / Стопка (R-4)
Переключатель внутри телефона живой: элементы перелетают на новые места (FLIP, 380 мс, без отскока). В «Стопке» тап по верхней карточке отправляет её назад. Выбранный режим запоминается.
9:41
ЗакрытьXO Studioмини-приложение⋯
Мои работы
Генерируем…
Старые деньгиВ работе
Обложка журналаНе получилось · 39 Возвращено
Зимняя сказкаСегодня, 14:20
Мы в 90-хВчера
▶ 0:05
Танец под дождёмВидео · Вчера
1:24
Ночной городМузыка · Сегодня, 09:12
0:32
Голос диктораГолос · Вчера
▶ 0:05
Оживший портретВидео · 2 окт
Удалится через 3 дн.
Ретро-ателье3 окт
Неоновый город2 окт
Кинокадр нуар1 окт · из «Создать»
Здесь пока нет работ этого типа
Создайте первую — выберите шаблон или напишите свой промпт
Нажмите на карточку — следующая
Работы хранятся 30 дней. Копии, которые бот прислал в чат, остаются у вас
S-18 · Мои работы: типы и 3 режимаСверху — чипы типа работы «Все / Фото / Видео / Музыка / Голос / 3D», ряд листается вбок; набор типов приходит из реестра типов генерации в админке: в MVP только «Все / Фото / Видео», новые типы появляются без перестройки интерфейса. Фильтр живой: выберите «Фото» или «Видео» — другие карточки скрываются; у типа без работ (3D) — «Здесь пока нет работ этого типа» и кнопка «Создать». Ниже — режимы Список / Карточки / Стопка. Выбор типа и режима запоминается. «В работе» — «Волна» на фоне карточки и тонкая подпись «Генерируем…» в левом верхнем углу; этапы с gooey-переходом — только в листе работы (S-14). Ошибка — карточкой с зачёркнутой ценой и «Возвращено» (D-092); «Удалится через N дн.» — за 5 дней до срока (D-038).
9:41
ЗакрытьXO Studioмини-приложение⋯
Мои работы
Здесь будут ваши работы
Выберите шаблон и добавьте фото — работа появится здесь и в чате с ботом
Популярные шаблоны
Старые деньги
Зимняя сказка
Мы в 90-х
S-19 · Пустые «Мои работы»Пустой экран не пустой: веер «будущих» карточек со , одна фраза, одна кнопка и 3 популярных шаблона — человек сразу может начать. Своя кнопка (корневой экран, таббар виден).
8. Профиль (D-112)
Открывается по аватару в шапке любой корневой вкладки (на широком экране — пунктом меню). Вложенный экран: BackButton; MainButton нет — пополнение кнопкой в блоке баланса.
9:41
‹ НазадXO Studioмини-приложение⋯
Анна@anna · в XO с 6 окт
Баланс 412из них подарочные — 50 Токены не сгорают
S-20 · ПрофильБаланс крупно с кнопкой «Пополнить» (все 4 пакета, S-11) (подарочные — отдельной строкой, их деньгами не возвращаем), «Моё фото» со «Сменить» (лист: новое фото / удалить), история, промокод, поддержка, документы, «Удалить мои данные» — красным, с системным подтверждением.
9:41
‹ НазадXO Studioмини-приложение⋯
История
Сегодня
Пакет «Выгодный» · +430 СБП · Чек399 ₽
Промокод ANNA · +50 к первой оплате
6 окт
Подарок · +50 при первом входе
Списания (вкладка «Списания»)
«Старые деньги» · −39 2K · сегодня, 14:20
Возврат за сбой · +39 «Обложка журнала»
Создать · Kling 3.0 · −139 720p · 5 с
S-21 · История оплат и списанийСегменты «Оплаты / Списания» (в макете для показа видны обе группы), по дням. Зачисления и возвраты — «+N » акцентом, списания — основным цветом. У оплаты — ссылка на чек (запасной путь к чеку, D-083).
9. Ошибки: сбой ≠ модерация — в листе работы (D-030, D-092, D-138), офлайн
Ошибка показывается там, где возникла, говорит, что делать, и сообщает о деньгах. Красный — только у значка и коротких меток, не у фона и не у кнопок.
Обложка журнала
Сегодня · 2K
Не получилось из-за сбоя
Простите, это сбой на нашей стороне
39 вернули на баланс
ШаблонОбложка журнала
МодельNano Banana Pro
Качество2K
Ориентация3:4
ДатаСегодня, 14:32
Фото
S-22 · Сбой — в листе работы (D-138)Тап по карточке с ошибкой в «Моих работах» открывает тот же лист работы: вместо результата стадия показывает значок «повтор», «Не получилось из-за сбоя», «Простите, это сбой на нашей стороне» и статус «39 вернули на баланс» (провайдер не списал, D-092). Ниже — детали генерации, как у готовой работы. Кнопки: «Поддержка» и главная «Попробовать снова · 39» (те же фото и качество; одна автоматическая повторная попытка уже была). Для подарочной/бонусной оплаты — «Подарок не потрачен».
Обложка журнала
Сегодня · 2K
Не удалось обработать фото
Причина от сервиса по-русски. Попробуйте другое фото
Токены вернули
ШаблонОбложка журнала
МодельNano Banana Pro
Качество2K
Ориентация3:4
ДатаСегодня, 14:32
Фото
S-23 · Отказ модерации — в листе работы (D-138)Другой значок (щит), другой заголовок, причина от провайдера по-русски (своих фильтров нет, D-091), «Токены вернули», ссылка «Почему так бывает». Детали генерации — как у результата. Кнопки по типу работы: у работы по шаблону — главная «Выбрать другое фото» (открывает лист «Фото» этого шаблона) + «Переделать»; у работы из «Создать» — главная «Изменить промпт» (открывает «Создать» с этими данными, заголовок «Не удалось обработать промпт») + «Переделать».
9:41
ЗакрытьXO Studioмини-приложение⋯
Шаблоны
Нет связи. Проверьте интернет
Старые деньгиФото · 39
Зимняя сказкаФото · 39
Обложка журналаФото · 39
Мы в 90-хФото
S-24 · ОфлайнПлашка сверху, без слова VPN (D-067). Каталог из кэша, незагруженные обложки — LQIP-цветом, а не серыми прямоугольниками. Связь вернулась — плашка уходит сама, без кнопки.
Telegram Desktop / Web. Вместо таббара — боковое меню 232 px, сворачивается в полосу иконок 72 px (кнопка внизу меню). Контент на месте, колонка не шире 1180 px. Шаблон на широком экране — две колонки: обложка слева, слот и качество справа.
XO Studio — Telegram✕
Шаблоны
Тренд недели
Старые деньгиФото · 39
Зимняя сказкаФото · 39
ЖУРНАЛ
Обложка журналаФото · 39
Для двоих
Мы в 90-хФото
0:05
Танец под дождёмВидео · 149
Неоновый городФото · 39
Ретро-ательеФото · 39
Кинокадр нуарФото · 39
W-01 · Telegram Desktop, 1280×800Сетка 5 колонок (auto-fill от 200 px), тренд — 2×2. Наведение: подсветка пунктов меню только при hover:hover. Главные кнопки — свои, как на телефоне.
11. Компоненты и состояния (масштаб 1:1)
C-01 · Главная кнопка (своя, D-126)
по умолчанию — тёмное стекло rgba(28,24,40,.82), текст #F5F5F7 (≈ 15:1), обводка-перелив conic-gradient «Волны» вращается 4 с, свечение снизунажата — scale .97, поверхность светлее, свечение ярчевыключена — без свечения и обводки, surface-1, текст #6E6E76 говорит, чего не хватаетзагрузка — спиннер ≤ 300 мсзагрузка — showProgress(), ≤ 300 мс, затем « Генерируем…»
C-02 · Вторичная кнопка
по умолчанию · нажата (surface-2)выключена · загрузкатекстовая кнопка — label-2, область 44 px
C-03 · Баланс
свечение — статичное, только у ; цифры tabular-nums; нажать вторую — анимация зачисления (600 мс)
C-04 · Карточка шаблона
Зимняя сказкаФото
Зимняя сказкаФото · 39
загружена · LQIP (цвет и форма обложки до загрузки; без серых плашек и без мерцания)
C-05 · Слот фото — состояния
пустозагружается (живой прогресс; при обрыве — «Связь прервалась. Пробуем ещё раз…»)✓ загружено — haptic lightошибка файла — на слоте, рамка danger 55 %
C-06 · Парные слоты (D-028)
подписи из админки; «Моё фото» — только в слот «вы»; кнопка: «Добавьте 2 фото» → «Добавьте ещё 1 фото» (template.cta.disabled.*)
C-07 · Выбор качества
фото: все варианты модели, по умолчанию 2K (D-110); до 3 вариантов — сегменты на экраневидео-шаблон (Seedance, D-051); 3 варианта — сегменты, цена без ради ширины; ≥ 4 — лист S-10
C-08 · Чипы
категория (вкл — белый) · пример промпта (контур) · параметр. Высота 34, область нажатия 44
C-09 · Тосты и плашки
Пакет куплен · +150+50 по промокоду
окно-уведомление сверху, 3 с, «×»
Настройки обновлены под Kling 3.0
тост-информация снизу над кнопкой, 2,5 с, без действий
Нет связи. Проверьте интернет
плашка состояния — пока состояние длится
C-10 · Радужный (D-125, D-127)
412
CSS: градиент «Волны» (фиолетовый → розовый → янтарь → голубой) через background-clip:text, перелив — сдвиг background-position за 4 с, «дыхание» крупного — scale 0,94 → 1,06 за 2,2 с; свечение — text-shadow. Без WebGL. LOW / reduced motion — статичный фиолетовый #A78BFA
Генерируем… 0:12
кнопка во время генерации — то же стекло, слева
C-11 · Таббар-пилюля
заливка surface-1 96 %, без blur; выбранная — подложка surface-2 и иконка с заливкой; без акцента
C-12 · Статус и пустое
39 вернули на балансстатусы о деньгах — с акцентом; без — нейтральные
Все решения и номера — в docs/design/design-system.md. Макет для обсуждения, не код продукта: шейдеры и частицы здесь — упрощённые копии эффектов R-1…R-3 для показа характера и бюджета.