AI Studio — AI Photo & Video Generator
Кейс: дизайн мобильного приложения (iOS) — тестовое задание
Роль: продуктовый дизайн — от исследования до hi-fi и дизайн-системы.
Метод: Использовала Claude как AI-ко-пилот для ускорения исследования и первых итераций. Финальные UX-решения, структура продукта, дизайн-система и полировка интерфейса выполнены вручную.
Контекст
Современные AI-приложения конкурируют не качеством генерации, а скоростью, вдохновением и простотой первого результата. Поэтому главная задача проекта сократить путь пользователя от открытия приложения до первой успешной генерации. Ключевые требования брифа:
лента шаблонов-эффектов с карточками в соотношении 9:16 и разделением по типу контента, гендеру и тематическим подборкам;
экран генерации видео по промпту с выбором разрешения 720p / 1080p;
стоимость генерации в токенах, видимая прямо на кнопке Generate;
Paywall с тарифами Weekly / Yearly и постоянный индикатор Pro-статуса.
Монетизация: токены + подписка. Срок по заданию — 2–4 дн
Метод: 3 контрольные точки генерации
Я сознательно не пыталась получить результат одной большой расплывчатой генерацией. Разделила процесс на два слоя — «думать» и «делать»:
Слой 1 — чат Claude. Собрала исследовательские артефакты (конкурентный анализ, JTBD, User Flow, CJM), на их основе построила low-fi прототипы и несколько вариантов визуального направления.
Слой 2 — Claude Design. С готовыми артефактами и отобранными референсами провела две итерации hi-fi, где вторая опиралась на вручную выверенный результат первой.
Между шагами я перепроверяла результат и вносила правки. Так модель всегда достраивала уже принятые решения, а не угадывала их с нуля.
Слой 1. Чат Claude — исследование и структура
Исследование: четыре ключевых конкурента (Remini, Pixverse, Higgsfield, Reface), плюс User Flow, JTBD и CJM.
Ключевые гипотезы:
большинство приложений используют inspiration-first feed;
стоимость генерации всегда видна заранее;
Paywall появляется в контексте действия;
шаблоны уменьшают страх пустого промпта
при выборе одного шаблона возможность быстрого переключения на другие шаблоны
указаны этапы генерации для снятия неопределенности при ожидании
Основной JTBD: «Когда я хочу быстро создать эффектное AI-видео, я хочу выбрать готовый сценарий или написать промпт, чтобы получить результат без сложных настроек за прозрачную цену.
User Flow зафиксировал happy path и ключевые ветки (вход в Paywall, генерация по промпту) — он стал каркасом для следующего шага.
Low-fi-прототипы
На основе исследования Claude сгенерировал первичный low-fi прототип. Я сохранила его и доработала руками, зашив внутрь инсайты и гипотезы после анализа:
вынесла гендер Male/Female из ряда тематических чипов в фильтр — это другая ось («для кого», а не «настроение подборки»);
убрала дублирование между чипами и секциями фида;
выстроила сквозную токен-логику — цена видна на каждом действии, чтобы сразу понимать, какие шаблоны доступны.
Визуальные направления
Сгенерировала несколько вариантов визуального языка с готовыми палитрами и компонентами и выбрала Studio Noir — тёмную кинематографичную базу с призматическим акцентом, который живёт только на ключевых моментах (Generate, Pro, генерация). Темная тема позволяет лучше выделять AI-контент, усиливает ощущение премиальности и визуально делает изображения главным акцентом интерфейса.
На выходе из первого слоя — не картинки, а проверенная структура и утверждённый визуальный язык.
Слой 2. Claude Design — 2 итерации hi-fi
С этими артефактами и отобранными референсами я перешла в Claude Design.
Итерация 1. Сгенерировала hi-fi макеты поверх выверенного low-fi и выбранного направления — структура уже была решена, оставалось нарастить визуальный слой.
Итерация 2. Прогнала макеты повторно с правками: выровняла типографику и акценты, свела токен-логику к единым числам, добавила состояния (Rendering, Result).
Затем перенесла всё в Figma, отполировала руками и вручную собрала дизайн-систему.
Ссылка на проект AI Studio — AI Photo & Video Generator
Открыть файл в Figma
Роль Claude
Чат работал как аналитик и генератор структуры: исследование, low-fi, варианты визуального языка. Claude Design — как визуальный движок: две итерации hi-fi поверх утверждённой основы. Решения, правки и дизайн-систему делала самостоятельно.
Такая «лестница» — исследование → скорректированный low-fi → выбранный визуальный язык → hi-fi — не давала модели фантазировать: она всегда работала поверх уже утверждённого. Результат: меньше циклов переделок и весь путь от брифа до дизайн-системы уложился в срок задания.
Заключение
Сила не в самой генерации, а в том, как дизайнер ею управляет. Claude раскрывается, когда человек задаёт рамки, критически читает выдачу и доводит её руками — а инструменты разведены по задачам: чат думает, Claude Design производит.
Именно такой AI-native процесс дизайна с Claude — от ресёрча до дизайн-системы, с человеком-автором в центре — мне интересно развивать дальше как специализацию.