Molecules — 16 компонентов

SectionHeader 9 мест · center / left / with-step-pill
center (default)

15 минут

Три шага

Без брифа на 40 вопросов

left-aligned (index.html:328)

15 минут

Три шага

Без брифа на 40 вопросов

center-with-step-pill (index.html:775)
Шаг 1 из 5 · Анализ готов

Performante AI разобрался кто твои клиенты

По профилю @blossom_beauty

Структура
Eyebrow + h2 text-3xl sm:text-4xl font-bold tracking-tight + p text-ink-500 mt-3 max-w-xl mx-auto
Варианты
center (default) · left · center-with-step-pill · left-large (h2 text-5xl font-black)
Использования
index.html:244 · 328 · 496 · 612 · 704 · 775 · 950 · 1070 · 1227
Зависимости
Eyebrow atom
SectionWrapper 12+ мест · purely structural
light bg-white (index.html:242)
section.bg-white
div.max-w-5xl.mx-auto.px-4.sm:px-6.py-16.sm:py-20
SectionHeader + content
dark bg-ink-900 (index.html:404)
section.bg-ink-900
div.max-w-5xl.mx-auto.px-4.sm:px-6.py-16.sm:py-24
content area (dark)
Tokens
<section class="bg-{color}"><div class="max-w-5xl mx-auto px-4 sm:px-6 py-16 sm:py-20">
Варианты
light (bg-white) · muted (bg-ink-50) · dark (bg-ink-900 text-white) · darkest (bg-ink-950 text-white)
Конфликт DS #5
py-16 sm:py-20 (большинство) vs py-16 sm:py-24 (HowItWorks, Chat Feature, Analysis). Предлагается: spacing.section.standard = py-16 sm:py-20, spacing.section.spacious = py-16 sm:py-24
Конфликт DS — max-w
Основной контент = max-w-5xl, но Section 3 (Creatives) и Section 4 (Pricing) используют max-w-6xl. Нужно зафиксировать правило.
Card 15+ мест · top-2 по частоте
3 варианта

Card

bg-white

rounded-3xl

Card

bg-ink-50

rounded-3xl

Card

bg-ink-900

rounded-3xl p-6

with-shadow compact (index.html:790)

bg-white shadow-sm rounded-2xl

compact — используется в Analysis grid section 2

Tokens default
bg-white rounded-3xl p-6 sm:p-8
Варианты
default (bg-white) · muted (bg-ink-50) · dark (bg-ink-900 text-white) · gradient-dark (from-ink-900 to-ink-800) · with-shadow (shadow-sm)
Конфликт DS #2
В v19 смешаны rounded-3xl (секция 4+) и rounded-2xl (секция 2, compact). DS не задаёт чёткую границу. Предлагается: cards на top-level = rounded-3xl; nested cards, dense grids = rounded-2xl.
InstaInput 1 место · single-use (Hero only)
Hero input (index.html:118–146)

Бесплатно. Без регистрации и карты.

Структура
flex flex-col sm:flex-row gap-2 sm:gap-3 p-2 bg-white shadow-sm rounded-2xl + Input (с instagram icon) + ButtonPrimary (rounded-xl)
Варианты
Один — специфичен для Hero. Single-use, не переиспользуется.
Зависимости
Input atom · ButtonPrimary atom · Lucide instagram icon
Использования
index.html:118
AnalysisCard 4 места · Section 2
default (index.html:810)

Ниша

Anti-age beauty

~150K активных в Москве

mint icon variant (index.html:824)

Кто покупает

Женщины 28-45

Москва + СПб, доход выше среднего

Структура
bg-white shadow-sm rounded-2xl p-6 + flex items-start gap-3 + IconBox + div (eyebrow label + value h + sub p)
Варианты
default · wide (sm:col-span-2) · competitors (с nested competitor list)
Зависимости
IconBox atom · Eyebrow atom
Использования
index.html:810 · 824 · 837 · 854
TariffCard 3 места · Pricing section

Старт

9 990 ₸

в месяц

≈ один заказ из Instagram

  • 1 активная кампания
  • 3 креатива в месяц
  • Базовая аналитика
  • Без модулей
популярный

Pro

39 200 ₸

в месяц

≈ один отказ нелояльного клиента

  • 3 активных кампании
  • Безлимит креативов
  • Все модули экосистемы
  • Приоритетная поддержка
Структура
card + eyebrow tariff name + price block (current + strikethrough) + sub-tagline + features-list (check/x icons)
Варианты
default (bg-white) · highlighted (bg-ink-900, sm:-translate-y-3, «популярный» badge) · selected (ring-2)
Зависимости
Card · Chip (badge «популярный»)
Использования
index.html:1418 (Старт) · 1441 (Pro) · 1465 (Agency)
FAQItem 5 мест · FAQ section
свёрнутый (index.html:710)
14 дней — гарантия возврата подписки. AI оптимизирует кампанию каждый день, не оставляет «слитой» — но если результата нет, возвращаем деньги без вопросов.
Tokens trigger
w-full text-left px-5 py-4 flex items-center justify-between gap-3
Tokens answer
px-5 pb-4 text-sm text-ink-600 leading-relaxed
Alpine pattern
x-data="{ open: 0 }" на wrapper, @click="open = open === N ? 0 : N" на trigger
Использования
index.html:710 · 718 · 727 · 736 · 745
CompetitorRow 3 в одном блоке · index.html:857
3 строки в списке (index.html:857–879)
G

@glowlab_official

142k подписчиков

L

@luminskin.ru

89k подписчиков

S

@silkserum_lab

203k подписчиков

Структура
flex items-center gap-3 p-3 bg-ink-50 rounded-xl + avatar-circle (gradient, letter) + div (handle truncate + sub)
Варианты
Один. Icon color меняется: rose, purple, amber gradient.
Зависимости
AvatarInitial molecule
Использования
index.html:857 · 864 · 872 — всегда в наборе 3 штуки
AvatarInitial 8+ мест · конфликт DS #8 #9
5 размеров xs→xl с gradient presets
А
xs · size-8
Д
sm · size-9
О
md · size-10
Т
lg · size-12
М
xl · size-14
rounded-2xl
Tokens base
size-N rounded-full bg-gradient-to-br from-{X} to-{Y} flex items-center justify-center text-white font-bold text-xs
Варианты
xs (size-8) · sm (size-9) · md (size-10) · lg (size-12) · xl (size-14 rounded-2xl для Business Card)
Конфликт DS #8
AvatarInitial не описан в design-system.md (раздел Iconography только про Lucide). Нужно добавить при первом извлечении.
Конфликт DS #9
Gradient from/to не токенизированы. Presets v19: rose-400→pink-500, purple-400→fuchsia-500, emerald-400→teal-500, amber-400→orange-500, sky-400→indigo-500. Зафиксировать как avatar-gradient-1..5.
Использования
index.html:792 · 857–863 · dashboard.html:130 · 573 · 604 · 616 · 644 · 685
ModuleCard 6 мест · EcosystemQuiz section
required always-on + default selectable (index.html:1086–1120)

AI-таргетолог FB/IG

базовый

AI генерит креативы, настраивает таргетинг. Это всегда включено.

WhatsApp бот-ответчик

Ловит лидов 24/7. Первый ответ за 30 секунд.

Структура
module-card relative rounded-2xl p-5 bg-white shadow-sm cursor-pointer transition + flex + IconBox + div + checkbox circle
Варианты
default (selectable) · required (bg-ink-100, cursor-not-allowed, check-circle-2) · selected (ring-2 ring-ink-900 inset via CSS class)
Зависимости
IconBox atom
Использования
index.html:1086 (required) · 1103 · 1122 · 1142 · 1162 · 1182
EcosystemProductCard 6 мест · Ecosystem catalog landing
базовый

Performante AI

Главный продукт. AI ведёт рекламу в Instagram и TikTok сам.

от

9 990 ₸/мес

включён

Performante Бот

Ловит лидов 24/7 в WhatsApp и Telegram. Первый ответ за секунды.

от

2 990 ₸/мес

в Pro+
Структура
bg-{color} rounded-3xl p-6 flex flex-col + IconBox (size-12) + name + description + price-block (от / цена / включён)
Варианты
dark (bg-ink-900, featured) · light (bg-ink-50) · free («бесплатно» вместо цены)
Зависимости
IconBox atom
Использования
index.html:504 · 522 · 539 · 555 · 571 · 587
StatCard 6 мест · конфликт DS #12
landing-dark (index.html:621)

↓ Цена заявки (CPL)

−42%

в среднем по нише Beauty

FB без AI 380 ₸
Performante 220 ₸
dashboard-compact (dashboard.html:352)

Заявок

31

новых: 28

Доход

47 800 ₸

×5.7

Структура landing
bg-ink-900 text-white rounded-3xl p-6 sm:p-8 relative overflow-hidden + eyebrow + big number + sub + comparison rows
Структура dashboard
bg-white rounded-xl p-3 sm:p-4 + label + number + delta sub
Конфликт DS #12
DS описывает StatNumber как text-4xl sm:text-5xl font-black. На dashboard используется text-xl sm:text-2xl — это compact variant. Нужно формализовать оба в DS.
Использования
index.html:621 · 639 · 657 · dashboard.html:352–372
QuoteCard 3 места · конфликт DS #4
3 карточки в ряд (index.html:684–695)

«47 записей за 11 дней. До этого три месяца тыкала "продвинуть пост" — ноль.»

Анна · студия маникюра · Москва, Хамовники

«Пишу боту: увеличь на пятницу. Через час кампания подняла бюджет.»

Дмитрий · кафе с доставкой · Краснодар

Tokens
bg-white rounded-2xl p-5 + text-base text-ink-700 leading-relaxed (quote) + text-sm text-ink-400 mt-3 (attribution)
Варианты
Один. Quote-only, без числа.
Конфликт DS #4
design-system.md описывает QuoteCard как комбинированный (число + цитата). В v19 реализованы чистые quote-only карточки. Нужно разделить: QuoteCard (только цитата) и StatQuoteCard (число + цитата как в DS).
Использования
index.html:684 · 688 · 692
AIFeedItem 3 в одном блоке · dashboard.html:321
3 строки в AIFeedBlock (dashboard.html:321–335)

AI за сутки

+200 ₸/день — заявки дешевеют

07:14

Стоп креатива «Гайд» — слабая отдача

вчера

12 заявок — средняя 280 ₸

сегодня

Структура строки
flex items-center gap-2.5 + icon (size-4, colored) + flex-1 text-sm (bold part + ink-400 part) + timestamp text-[10px] text-ink-400 shrink-0
Цвета иконок
mint-400 — позитивные события (trending-up, users) · amber-400 — предупреждения (pause)
Варианты
Один. Icon color меняется по типу события.
Использования
dashboard.html:321 · 326 · 331 — всегда внутри AIFeedBlock organism
LeadRow 3 места · Leads tab dashboard
wait — с phone CTA (dashboard.html:571)
М

Марина К.

4 ч

«Хочу попробовать для 35+»

+7 (915) 123-45-67 · креатив #1

work — mint status, без CTA (dashboard.html:604)
А

Анна Б.

в работе · записана на 25.05

Структура
bg-white rounded-xl p-3 flex items-start gap-2.5 + AvatarInitial + div (name + message + meta) + action-button
Варианты
wait (с phone CTA, amber timestamp) · work (без CTA, mint status) · done (opacity-70)
Зависимости
AvatarInitial molecule
Использования
dashboard.html:571 (Марина К.) · 585 (Ольга В.) · 604 (Анна Б.)
MenuListItem 5 мест · Menu tab dashboard
full variant с sub-line (dashboard.html:692)
compact без sub (dashboard.html:451)
Tokens full
w-full text-left bg-white rounded-2xl p-5 flex items-center gap-3 + icon (size-5) + div (title font-semibold text-base + sub text-sm text-ink-500) + chevron (size-5 text-ink-400)
Tokens compact
w-full text-left bg-white rounded-xl p-3 flex items-center gap-2.5 + icon (size-4) + p (text-sm font-medium) + chevron (size-4)
Варианты
full (p-5, rounded-2xl, с sub и chevron) · compact (p-3, rounded-xl, text-sm, без sub)
Использования
dashboard.html:692 · 697 · 702 · 707 · 451
SegmentedControl 3 места · frequency toggle / auth tabs
frequency toggle — 3 месяца active (index.html:1248)
auth method selector — Телефон active (index.html:1562)
compact leads filter (dashboard.html:563)
Tokens wrapper
inline-flex bg-ink-100 p-1 rounded-2xl
Tokens button active
bg-white text-ink-900 shadow-sm
Tokens button inactive
text-ink-500
Tokens inner button
px-4 sm:px-5 py-2.5 rounded-xl text-sm font-semibold transition
Варианты
default (3 options, rounded-2xl) · compact (text-xs, py-2 rounded-lg, flex-1 — leads tab)
Использования
index.html:1248 (frequency) · 1562 (auth) · dashboard.html:563 (leads filter)