Стэк:
FigmaClaude CodeGitClaude FlareStorybook
Проект
Построил с нуля социальную сеть для инвесторов «БАЗАР»,
Развернул полноценную дизайн систему на 3 платформы Core & Business слои компонентов и токенов для изоляции и переиспользования Core Components
Собрал дружелюбную и мощную команду из T-образных специалистов, выстроил процессы от Discovery до Production
2 Layers Design System
Core Layer
Ядро дизайн системы с примитивами которые не знают ничего про бизнес логику
Business Layer
Бизнес слой под конкретный проект может иметь свои компоненты и токены и иметь в себе Core компоненты для наследования правил. Бизнес компоненты имеют в себе бизнес контекст и логику и могут быть с предустановленными фиксированными значениями, своими вариантами под контекст
Ai Ready Components
Компоненты созданы и описаны так чтобы их поняли и разработчики и Claude, передаем ссылку на компонент и Claude с первого промпта собирает 80% компонентов, 20% иногда требуют отладки, пояснений, но это только начало
Импакт:
-90%
Платформы максимально синхронизированные на уровне DS получают на 90% меньше правок во время дизайн ревью
2нед
iOS развернул DS в коде
Развитие:
- Полное управление DS через агентов, контроль систематизации, создание компонентов, вариантов и описаний.
- Ожидание: ускорение Х5 время на поддержку и развитие DS, консистентность и соответствие конвенциям
- Этап: тестируем агентов
- Перенос iOS специфичных компонентов и шрифтов в общую DS и управление переключением на модах.
- Ожидание: уменьшение времени на адаптацию под платформы -60%
- Этап: ожидает рефакторинга DS
- Полная синхронизация DS со всеми платформами через маппинг состояния компонентов и их покрытия
- Ожидание: повышение качества и консистентности продукта, снижение до 95% правок при дизайн ревью, ускорение разработки
- Этап: рефакторинг токенов и компонентов
- И многое другое
Ai Discovery Workflow
Понимание и гипотезы
Ai читает требования из Confluence Анализирует требования, описывает гипотезы через контекст проекта и базы знаний
Вычитываем, проверяем, корректируем и дополняем своими гипотезами
Глубокое исследование
Передаем текущее состояние интерфейса
Проводит глубокий ресёрч по бэнчмаркам, анализирует решения которые приняли и отклонили, описывает причины, ищет и анализирует потребность, собирает лучшие практики и рекомендации NNGroup & WCAG & HIG, сравнивает с текущей реализацией
Проверяем, корректируем и направляем
Сбор рефов
Составляет запросы на поиск референсов на Mobbin, подбирает более подходящие продукты, обрабатывает изображения, подтверждает или опровергает гипотезы, выделяет паттерны
Собираем по запросам рефы
Обрабатывает изображения, подтверждает или опровергает гипотезы, выделяет паттерны
Варианты решений
Описывает варианты решений с их плюсами и минусами, предлагает варианты для тестирования и компромиссы
Корректируем и выбираем направление
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 приложение через «Поделиться» → «Добавить на экран домой»
Импакт:
x5
в 5 раза быстрее получаем готовое исследование, гипотезы и lofid прототип
Качество
Проверяем гипотезы до начала дизайна, больше данных, проверки NNGroup & WCAG 1м запросом. Тесты на реальных прототипах
Развитие:
- Полное изменение процессов дизайна Vibe Code 90% Figma 10%
- Ожидание: ускорение, повышение качества и вовлеченности
- Этап: тестируем
- Построение макетов на Code компонентах
- Ожидание: ждем релиза Figma чтобы понять
- Этап: ожидаем релиза Figma
- Тесты и автопроверки
- Ожидание: уменьшение Time To Market в 1,5 раза
- Этап: планирование и оценка влияния
- И многое другое
Live WiKi on Claude Ai
Создали базу знаний которая управляется оркестрацией из Claude Cowork
Решение:
Теперь база знаний всегда живет и быстро актуализируется.
Решения и договоренности теперь не теряются и не остаются на словах, все сразу пушится в вики и оркестрируется по сущностям (чек-листы, процессы, инициативы, ADR…)
К wiki можно обращаться, что-то узнавать, планировать и она всегда подсветит текущее состояние или предотвратит решения которые ранее были отклонены, подсветит проблемы.
Импакт:
Ожидаем
- Снижение вопросов и уточнений во время решения задач, чек-листы + вики в Claude закрывают большую часть вопросов и помогают
- Большую стандартизацию и снижение отхождений от конвенций
- Быстрый онбординг в фичу, проект, команду — можно как изучать самому вики, так и разговаривать с Claude задавая вопросы
Развитие:
- Автоматическое создание чек-листов в тикетах Jira
- Источник контекста для Ai автоматизаций
Еще работы
Кейсы
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
Как строил свой воркфлоу для инди проектов и создавал первые продукты.
Эксперимент показал реальные готовые к продакшену приложения и переосмысление дизайн процессов
