Performante Funnel · Component Library

Каталог компонентов v1

mobile-tested 2026-05-30

Inventory из v19. 42 повторяющихся блока сгруппированы по atomic design с живой визуализацией каждого. Источник — funnel/iterations/v19/index.html + dashboard.html.

42
компонента в каталоге
5
top-priority на первую очередь
9
конфликтов на решение до extraction
7
single-use исключены из library

Три уровня — открой раздел чтобы увидеть live previews

Каждый компонент отрисован реальным HTML+Tailwind+Lucide на белом, dark или muted фоне — с настоящим контентом из v19, не lorem ipsum. Конфликты с design-system.md подсвечены amber.

Уровень 1
Atoms
10 компонентов · 35 KB
ButtonPrimary, ButtonMint, ButtonSecondary, Eyebrow, StatusPill, Chip, Input, ProgressDots, LogoMark, IconBox
Открыть atoms →
Уровень 2
Molecules
16 компонентов · 57 KB
SectionHeader, Card, TariffCard, FAQItem, ModuleCard, EcosystemProductCard, StatCard, QuoteCard, AvatarInitial, LeadRow, MenuListItem, SegmentedControl и т.д.
Открыть molecules →
Уровень 3
Organisms
15 уникальных · 57 KB
Navbar, Hero, PricingSection, OnboardingSteps, AIFeedBlock, CreativeGrid, MobileBottomNav и др. 5 single-use без preview
Открыть organisms →

Top-5 — первая очередь извлечения

Сортировка по частоте использования + кросс-файловой переносимости. С этих компонентов начинаем Phase 3 EXTRACTION после resolve конфликтов ниже.

#1
ButtonPrimary
6 мест в index
+ 2 в dashboard
#2
Card
15+ мест
базовый блок
#3
IconBox
12+ мест
dependency для molecules
#4
SectionWrapper
12+ мест
каждая секция landing
#5
StatusPill
7 мест
уже описан в DS

Конфликты — нужно решение до extraction

9 расхождений между design-system.md v1 и реальной реализацией в v19. По 4 ключевым принял дефолты. Остальные 5 — открытые.

#1
Eyebrow vs StepBadge маскированы под одно имя
Landing-eyebrow — простой текст. Quiz step-pill — обёртка с bg+shadow+rounded. Это разные компоненты. Default → разделить.
#2
Card radius rounded-2xl vs rounded-3xl смешаны
В v19 без чёткого правила. Default → rounded-3xl для cards на bg-white/bg-ink-50; rounded-2xl для nested cards в плотных grid'ах.
#3
Input focus: DS говорит focus:bg-white, v19 использует focus:bg-ink-100
Конфликт на тёмном vs светлом фоне. Default → focus:bg-white когда input на bg-ink-50; ring-2 ring-ink-900 когда input на белом.
#4
QuoteCard: DS = число+цитата, v19 = чистая цитата
Замаскированы под одно имя. Default → разделить на QuoteCard (чистая) + StatQuoteCard (число+цитата).
#5
max-w непоследовательность
Большинство секций max-w-5xl, но Section 3 (Creatives) и Section 4 (Pricing) используют max-w-6xl. Открыт — основной = 5xl, wide grid = 6xl?
#6
Chip vs StatusPill именование
В коде они вариант одного паттерна. После library — разделить: StatusPill (с animate-pulse dot, live), Chip (статичный label без dot).
#7
SectionWrapper padding непоследовательность
py-16 sm:py-20 (стандарт) vs py-16 sm:py-24 (Bento, Chat Feature, Analysis). Предлагается 2 токена: spacing.section.standard / spacious.
#8
AvatarInitial используется, но не описан в DS
8+ мест. Раздел Iconography в DS только про Lucide. Добавить компонент при первом извлечении.
#9
Avatar gradient from-to не токенизированы
Каждый аватар имеет уникальный from/to. Зафиксировать 4-5 preset-пар в DS как avatar-gradient-N.

Single-use exclusions — остаются inline

По правилу D29 trade-off: компонент попадает в library только при ≥2 местах использования. Эти 7 блоков пока inline в v19, при следующем использовании — перепроверим.

FlowDiagramсложная схема Insta → AI → Клиенты, уникальна для explainer-секции
HowItWorksBentobento-layout «3 шага», 1 место
ChatFeatureSectiondark-split killer-feature, специфичен
ChatHelperfloating чат-виджет, 1 место
CancelRetentionFlow5-step modal flow в dashboard, специфичен
InstaInputцентральный элемент Hero, 1 место
HeroIllustrationCardдекоративный mockup в Hero, 1 место