Стэк:
FigmaClaude CodeGitClaude FlareStorybook
Проект
Построил с нуля социальную сеть для инвесторов «БАЗАР»,
Развернул полноценную дизайн систему на 3 платформы Core & Bussines слои компонентов и токенов для изоляции и переиспользования Core Componnents
Собрал дружелюбную и мощную команду из T-обраных специалистов, выстроил процессы от Discovery до Prodaction
2 Layers Design System
Core Layer
Ядро дизайн системы с примитивами которые не знают ничего про бизнесс логику
Bussines Layer
Бизнес слой под конкретный проект может иметь свои компоненты и токены и иметь в себе Core компоненты для наследования правил. Бизнес компоненты имеют в себе бизнесс контекст и логику и могут быть с предустановленными фиксированными значениями, своими вариантами под контекст
Text
Core
$badge/bg/default
↓
Text
Компания
Bussines
$bazarsocial/user/flag–expert
Ai Ready Components
Компоненты созданы и описаны так чтобы их поняли и разработчики и Claude, передаем ссылку на компонент и Claude с первого промпта собирает 80% компонентов, 20% иногда требуют отладки, пояснений, но это только начало
По базарим?
Ai Discovery Workflow
Понимание и гипотезы
Ai читает требования из Confluence Анализирует требования, описывает гипотезы через контекст проекта и базы знаний
Вычитываем, проверяем, корректируем и дополняем своими гипотезами
Глубокое исследование
Передаем текущее состояние интерфейса
Проводит глубокий ресерчь по бэнчмаркам, анализирует решения которые приняли и отклонили, описывает причины, ищет и анализирует потребность, собирает лучшие практики и рекомендации NNGroup & WCAG & HIG, сравнивает с текущей реализацией
Проверяем, корректируем и направляем
Сбор рефов
Составляет запросы на поиск референсов на Mobin, подбирает более подходящие продукты, обрабатывает изображения, подтверждает или опровергает гипотезы, выделяет паттерны
Собираем по запросам рефы
Обрабатывает изображения, подтверждает или опровергает гипотезы, выделяет паттерны
Варианты решений
Описывает варианты решений с их плюсами и минусами, предлагает варианты для тестирования и компромисы
Корректируем и выбираем направление
User Flow & Lo Fid Prototype
Составляет User Flow учитывая все краевые состояния и создает Lo Fid прототип со всеми состояниями
Прогоняем и корректируем сценарии
Hi Fid Prototype On Design System
Готовое исследование с прототипом переносится в Bazar Prototype который строит прототип на основе DS в сторибуке, проектирует поведение всех компонентов и создает полностью функционирующий прототип
Полноценное тестирование на реальном устройстве всех сценариев с разными мок данными от разных пользователей
Design Vibe-coded
Storybook & PWA Prototypes
Попробовать прототип в живую
Смотреть лучше с телефона поставив как PWA приложение через «Поделиться» → «Добавить на экран домой»
Организационка
Live WiKi on Claude Ai
Решение:
Создали базу знаний которая управляется оркестрацией из Claude Cowork
Импакт:
Теперь база знаний всегда живет и быстро актуализируется
Решения и договоренности теперь не теряются и не остаются на словах все сразу пушится в вики и дальше оркестрируются в чек-листы и другие артефакты
Автоматическое создание и обновление чек-листов в Jira
T-образные специалисты
Собрал сбалансированную команду из Т-образных специалистов который обладает глубокой экспертизой в одной ключевой сфере и смежные навыки. Имеют продуктовое, аналитическое, техническое и системное мышление
Еще работы
Кейсы
1
Новые возможности, мой опыт создания продакшн приложения на iOS Swift UI
Это не миф, а реальность и полноценный контролируемый процесс почти без багов, выдумываний, деградаций, каких либо проблем или галюцинаций.
И одновременно новый опыт проектирования для дизайнеров
2
Vibe-coded prototypes
Новый подход меняющий процесс проектирования и открывающий много возможностей
3
Дизайн система «БАЗАР»
Как создавали и как меняли процесс под Ai
4
White Label Fin Tech Design System
Как разворачивали DS под White Label
5
Ai Discovery Workflow
Перевод базовых исследований «БАЗАР» в Ai
6
Ai Indi Workflow
Как строил свой воркфлоу для инди проектов и создавал первые продукты.
Эксперимент показал реальные готовые к продакшену приложения и переосмысление дизайн процессов