XO Studio: экраны и компоненты v1

Шаг 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 или перетаскиванием мышью). «Все →» открывает категорию. «Шаблоны» — весь каталог сеткой с поиском и категориями.

9:41
ЗакрытьXO Studioмини-приложение⋯

Главная

В тренде

Зимняя сказкаФото
ЖУРНАЛ
Обложка журналаФото
Неоновый городФото
Кинокадр нуарФото
Ретро-ательеФото

Для двоих

Для двоих
Мы в 90-хФото
Для двоих
Зимняя прогулкаФото
Для двоих
Свадьба в 70-хФото
Для двоих
Свидание в неонеФото

Оживить фото

0:05
Танец под дождёмВидео · 149
0:05
Неон оживаетВидео · 139
0:05
Оживить портретВидео · 139
0:05
СнегопадВидео · 149

Праздники

Новогодний портретФото
ЖУРНАЛ
ВыпускнойФото
День рожденияФото
8 МартаФото
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).
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 фотоТап по папке — заменить
S-08 · Не хватает (видео)У новичка 50 , видео стоит 149 : над кнопкой строка «У вас уже 50 из 149 », кнопка «Пополнить баланс» → S-11 (D-107). Подарочной плашки и моста в фото-шаблон нет (D-128).

4. Нижние листы: согласие, качество, пакеты, «Пакет куплен»

Один лист за раз, у каждого есть «×» и закрытие свайпом. Пока лист открыт, цвет нижней панели Telegram = цвет листа (setBottomBarColor). Кнопки в листах — свои.

S-09 · Лист «Фото», шаг 1: согласие + 18+ (D-032, D-093, D-094)Согласие — в том же листе «Фото», перед первым выбором файла, один раз; после «Даю согласие» лист показывает слоты (S-25). Отдельное действие — своя кнопка, не MainButton: системный выбор фото открывается только по настоящему касанию в странице. Заверение 18+ — строкой здесь, отдельного экрана нет. Только проверенные обещания.
S-25 · Лист «Фото» для шаблона: карточки-гайдыТот же лист «Референсы», но вместо свободной сетки — карточка на каждый слот персонажа из админки (их N, D-028): номер, «Фото персонажа k — кто», инструкция, пример хорошего фото и само фото (заменить / удалить / прогресс / ошибка). Сверху — общий комментарий админки. «Моё фото» встаёт в слот «вы» само. Ниже — «Недавние загрузки» лентой вбок: тап или перетаскивание кладёт фото в слот. Согласие (S-09) — первым шагом этого листа. Открывается тапом по папке «Фото» на экране шаблона.

Качество

Цена спишется после «Сгенерировать»

S-10 · Лист выбора качества (stacked list, R-5)Открывается долгим нажатием / «?» у сегментов, когда вариантам нужны пояснения; при ≥ 4 вариантах (видео: режим × длительность) — вместо сегментов. Строки раскрываются из стопки с задержкой 30 мс. Показываем всё, что умеет модель: Nano Banana Pro 1K · 39, 2K · 39 (по умолчанию), 4K · 49 (D-110).

Пакеты

Токены не сгорают

Выберите банк
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 — без искр.

5. Генерация: кнопка « Генерируем…» → «Мои работы» → лист работы → проявление

Полноэкранного экрана ожидания больше нет: после «Сгенерировать» человек попадает в «Мои работы», ожидание и результат живут в листе работы поверх списка. Яркое — только «Волна» с радужным и проявление (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
Референсылимит модели
Качество
Формат
Длительность
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.
S-27 · Лист «Референсы» для «Создать»Менеджер загрузок по образцу Higgsfield Uploads: фильтры (только те, что разрешает модель; у Nano Banana Pro видео нет — «Все / Недавние»), «Выбрано 3 из 8» — лимит images.max модели. Сетка 3 колонки: первая ячейка — пунктирная «Загрузить» с облаком; на карточке — чекбокс с номером порядка, «развернуть» и «удалить», прогресс и ошибка прямо на карточке. Это вся библиотека загрузок человека; галочкой выбирается, что идёт в эту генерацию. «Готово · 3 выбрано» — своя кнопка. Открывается тапом по папке «Референсы» (S-16).
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, превышение — красный и кнопка выключена: «Сократите промпт».

Модель

Видео

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), офлайн

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

S-22 · Сбой — в листе работы (D-138)Тап по карточке с ошибкой в «Моих работах» открывает тот же лист работы: вместо результата стадия показывает значок «повтор», «Не получилось из-за сбоя», «Простите, это сбой на нашей стороне» и статус «39 вернули на баланс» (провайдер не списал, D-092). Ниже — детали генерации, как у готовой работы. Кнопки: «Поддержка» и главная «Попробовать снова · 39» (те же фото и качество; одна автоматическая повторная попытка уже была). Для подарочной/бонусной оплаты — «Подарок не потрачен».
S-23 · Отказ модерации — в листе работы (D-138)Другой значок (щит), другой заголовок, причина от провайдера по-русски (своих фильтров нет, D-091), «Токены вернули», ссылка «Почему так бывает». Детали генерации — как у результата. Кнопки по типу работы: у работы по шаблону — главная «Выбрать другое фото» (открывает лист «Фото» этого шаблона) + «Переделать»; у работы из «Создать» — главная «Изменить промпт» (открывает «Создать» с этими данными, заголовок «Не удалось обработать промпт») + «Переделать».
9:41
ЗакрытьXO Studioмини-приложение⋯

Шаблоны

Старые деньгиФото · 39
Зимняя сказкаФото · 39
Обложка журналаФото · 39
Мы в 90-хФото
S-24 · ОфлайнПлашка сверху, без слова VPN (D-067). Каталог из кэша, незагруженные обложки — LQIP-цветом, а не серыми прямоугольниками. Связь вернулась — плашка уходит сама, без кнопки.

10. Широкий экран ≥ 900 px — боковое меню (D-102, R-7)

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 для показа характера и бюджета.