UI/UX-дизайн и фронтенд
Дизайн-системы, адаптивные макеты, аудит доступности и бюджеты производительности.
Обзор
Дизайн-системы, библиотеки компонентов, лендинги и интерактивные интерфейсы выигрывают от структурированной итерации с контролем визуального качества и производительности. Datarim применяет к фронтенду ту же строгость, что и к бэкенд-разработке: определить требования, включая бюджет производительности и стандарты доступности, спланировать покомпонентный подход, строить mobile-first и проверять в разных браузерах и устройствах.
Пример: адаптивный лендинг для SaaS-продукта
Команде нужно спроектировать и создать адаптивный лендинг для SaaS-продукта. Страница должна включать секции hero, features, pricing и CTA с соответствием WCAG 2.1 и бюджетом производительности менее 3 секунд LCP.
Прохождение пайплайна
| Этап | Что происходит |
|---|---|
| /dr-init | Определение рамок: лендинг с hero, features, pricing, CTA. Сложность: L3 |
| /dr-prd | Требования: целевая аудитория, брендбук, адаптивные брейкпоинты, доступность (WCAG 2.1), бюджет производительности (<3с LCP) |
| /dr-plan | Декомпозиция компонентов: hero-секция, сетка фич, карточки тарифов, карусель отзывов, подвал. Подход mobile-first |
| /dr-design | Панель Consilium: Архитектор + Разработчик + Писатель оценивают архитектуру компонентов, CSS-стратегию (Tailwind vs кастом), подход к анимации |
| /dr-do | Сборка компонентов по одному. HTML/CSS/JS с адаптивным тестированием на каждом шаге |
| /dr-qa | Кроссбраузерное тестирование, аудит доступности, метрики производительности, визуальная регрессия |
| /dr-archive (Step 0.5) | Вывод: подход с библиотекой компонентов сэкономил 40% времени по сравнению со сборкой с нуля |
Ключевые преимущества
- Бюджеты производительности — LCP, CLS и другие Core Web Vitals определяются в PRD и проверяются на этапе QA
- Доступность с самого начала — требования WCAG фиксируются в требованиях, а не добавляются постфактум
- Покомпонентная итерация — каждый компонент создаётся, тестируется и проверяется отдельно до интеграции
- Согласованность дизайна и разработки — панель Consilium объединяет Архитектора, Разработчика и Писателя для совместных решений по CSS и анимации
Задействованные агенты
Какие агенты наиболее активны в этом сценарии:
- Developer — реализация компонентов с адаптивным тестированием
- Architect — архитектура компонентов и выбор CSS-стратегии
- Writer — тексты заголовков, CTA и описаний функций
- Reviewer — кроссбраузерное тестирование, аудит доступности, визуальная регрессия
Маршрутизация по сложности
Как уровни сложности применяются к UI/UX и фронтенду:
- L1 — Исправить несоответствие цвета или обновить текст кнопки по всему сайту
- L2 — Создать новую секцию или компонент с адаптивными брейкпоинтами и доступностью
- L3 — Спроектировать и собрать полный лендинг с несколькими секциями, анимациями и целями по производительности
- L4 — Создать полную дизайн-систему с библиотекой компонентов, документацией и мультипродуктовой темизацией