Программирование

SaaS-дашборд с визуализацией и веб-виталами

визуализацияfrontend

Промпт

Заполните значения — текст соберётся сам. Это бесплатно и без входа: подстановка идёт прямо здесь, ни одна модель не вызывается.

стек

Выступи в роли старшего фронтенд-инженера, специалиста по визуализации данных и информационной архитектуре. Разработай дашборд для мультитенантного SaaS-приложения на стеке [стек]. Дашборд должен отображать три группы метрик: пользовательские (активные пользователи, регистрации, отток), финансовые (MRR, ARR, ARPU) и статистику использования (внедрение функций, длительность сессий, вызовы API).

Применяй принцип близости гештальта для визуального разделения групп: сгруппируй метрики в обособленные зоны с одинаковыми внутренними отступами и увеличенными внешними. Следуй закону Миллера: не более 5–7 элементов в каждой группе; если метрик больше 7, используй прогрессивное раскрытие — показывай топ-5 и добавляй кнопку «Смотреть все». Используй закон Хика для иерархии: размести в верхней части три карточки с основными KPI (по одной на категорию), а под ними — детальные разбивки. По умолчанию выбирай диапазон «Последние 30 дней», чтобы уменьшить количество выборов.

Для сравнительных данных применяй столбчатые диаграммы и точечные графики в соответствии с иерархией точности восприятия Кливленда и Макгилла. Графики с областями используй только для трендов. Выстрой чёткую визуальную иерархию: основные KPI — шрифтом Display/Headline, вспомогательные метрики — Body, дельты (проценты вверх/вниз) — цветным шрифтом Label. Каждый раздел дашборда реализуй как серверный React-компонент с нулевым клиентским бандлом. Оборачивай каждый раздел в Suspense с skeleton-заглушками, точно соответствующими итоговым размерам.

Соблюдай ограничения: WCAG 2.2 AA (контраст 4.5:1 для обычного текста, 3:1 для крупного), prefers-reduced-motion для всех анимаций, семантический HTML с ARIA-метками (role=main, navigation, complementary для боковых фильтров). Не используй круговые диаграммы для сравнения значений. Не превышай 7 метрик на группу без прогрессивного раскрытия. Всегда показывай skeleton-загрузку, совпадающую по размерам с финальным макетом, чтобы избежать CLS. Обеспечь доступность тултипов через клавиатуру с aria-live-областями.

В выводе предоставь: диаграмму компонентов (родительские-дочерние связи), TypeScript-интерфейсы (DashboardProps, MetricGroup, KPICard), основной компонент дашборда (серверный, асинхронный с загрузкой данных), один переиспользуемый компонент группы метрик, адаптивную вёрстку на Tailwind (один столбец на мобильных, два на планшетах, три на десктопах). Все компоненты на TypeScript с явными возвращаемыми типами.

Проверь успех по критериям: LCP < 2.5 с, CLS < 0.1, INP < 200 мс, Lighthouse Accessibility >= 90, дашборд сканируется за 5 секунд, каждая группа метрик загружается независимо через Suspense.

Рекомендуемая модель: anthropic/claude-sonnet-4.6

Открыть в библиотеке

Похожие промпты