AI CJM Web System · 33 stable components

Компоненты, из которых собирается весь сайт

Каждый компонент показан как живой образец с anatomy, mobile-поведением, состояниями и ссылкой на machine-readable контракт.

01

headline

Канонический компонент «headline» с документированными anatomy, states и responsive rules.

Контракт YAML

AI-система, которая меняет работу

Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
02

section-heading

Канонический компонент «section-heading» с документированными anatomy, states и responsive rules.

Контракт YAML
03 / Метод

От задачи к рабочему сценарию

Смотреть этапы →
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
03

site-header

Канонический компонент «site-header» с документированными anatomy, states и responsive rules.

Контракт YAML
AI CJMОбсудить задачу
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
04

primary-nav

Канонический компонент «primary-nav» с документированными anatomy, states и responsive rules.

Контракт YAML
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
05

button

Канонический компонент «button» с документированными anatomy, states и responsive rules.

Контракт YAML
Подобрать программу →Смотреть кейсы
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
06

text-link

Канонический компонент «text-link» с документированными anatomy, states и responsive rules.

Контракт YAML

Основание доступно в полной истории кейса →

Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
07

hero

Канонический компонент «hero» с документированными anatomy, states и responsive rules.

Контракт YAML

Корпоративные программы по AI

От рабочей задачи к изменению в процессе

Диагностируем роли, контур и данные. На выходе — работающий сценарий.

Обсудить задачу
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
08

proof

Канонический компонент «proof» с документированными anatomy, states и responsive rules.

Контракт YAML
«Команда вышла с собственными сценариями, которые можно продолжить после обучения».
Руководитель программы · подтверждено кейсом
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
09

metric

Канонический компонент «metric» с документированными anatomy, states и responsive rules.

Контракт YAML
9,7/10CSI программыВТБ · 2025
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
10

logo-marquee

Показывает подтверждённые клиентские логотипы с явной остановкой движения и статичным fallback.

Контракт YAML
Сбер · ВТБ · FESCO
Desktop
Лента движется только при разрешённом motion и имеет явную pause/resume кнопку.
Mobile
Полный уникальный набор остаётся доступен в линейном горизонтальном fallback.
State
aria-pressed сообщает paused state; дубли скрыты от accessibility tree.
10

tabs

Канонический компонент «tabs» с документированными anatomy, states и responsive rules.

Контракт YAML
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
11

filter-bar

Канонический компонент «filter-bar» с документированными anatomy, states и responsive rules.

Контракт YAML
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
12

card

Канонический компонент «card» с документированными anatomy, states и responsive rules.

Контракт YAML
Рабочий артефакт

Навигатор по документам

Собирает позиции, показывает источники и готовит итоговую записку.

Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
13

process

Канонический компонент «process» с документированными anatomy, states и responsive rules.

Контракт YAML
  1. 01Диагностика
  2. 02Практика
  3. 03Изменение в работе
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
14

diagram

Канонический компонент «diagram» с документированными anatomy, states и responsive rules.

Контракт YAML
Задача→Контур→Сценарий→Результат
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
15

people

Канонический компонент «people» с документированными anatomy, states и responsive rules.

Контракт YAML
Программный директорМихаил ЛарькинОснователь AI CJM
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
16

testimonial

Канонический компонент «testimonial» с документированными anatomy, states и responsive rules.

Контракт YAML
«Практика была собрана на реальных задачах команды».
Владелец программы · клиентский кейс
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
17

form-control

Канонический компонент «form-control» с документированными anatomy, states и responsive rules.

Контракт YAML
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
18

lead-form

Канонический компонент «lead-form» с документированными anatomy, states и responsive rules.

Контракт YAML
Ответим в течение рабочего дня.
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
19

faq

Канонический компонент «faq» с документированными anatomy, states и responsive rules.

Контракт YAML
Можно работать на внутренних данных?

Да, после согласования корпоративного контура с ИТ и ИБ.

Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
20

site-footer

Канонический компонент «site-footer» с документированными anatomy, states и responsive rules.

Контракт YAML
AI CJM

Корпоративные AI-программы и практика.

Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
21

article-content

Канонический компонент «article-content» с документированными anatomy, states и responsive rules.

Контракт YAML

Кейс

Как программа перешла в рабочий процесс

Сначала команда сформулировала задачу, затем согласовала данные и собрала проверяемый сценарий.

Что изменилось

  • Появился владелец сценария
  • Зафиксированы критерии качества
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
22

legal-content

Канонический компонент «legal-content» с документированными anatomy, states и responsive rules.

Контракт YAML

Политика обработки данных

Версия: 12 августа 2026

Документ использует нумерованные разделы, определения и контакт оператора.

Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
23

breadcrumbs

Показывает место detail-страницы в архитектуре и даёт короткий путь назад.

Контракт YAML
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
24

case-card

Представляет один проверенный клиентский кейс до перехода в полную историю.

Контракт YAML
OzonКонференции

AI на сцене крупнейших конференций Ozon

Две сцены и прикладные сценарии для профессиональной аудитории.

2 сценыОткрыть кейс →
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
25

person-card

Показывает реального эксперта, его роль, специализацию и путь к профилю.

Контракт YAML
Корпоративные программыМихаил ЛарькинAI-стратегия · обучение · внедрение
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
26

program-card

Объясняет формат программы через аудиторию, рабочий процесс и результат.

Контракт YAML
Для функциональной команды

Практикум на рабочих задачах

4–6 встреч · разрешённые системы · собственные данные

На выходе: проверенный сценарий и план запуска
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
27

event-card

Представляет выступление, вебинар или событие с понятным форматом и следующим действием.

Контракт YAML

AI Day для руководителей

Диагностика задач, разбор корпоративного контура и карта первых сценариев.

Запросить выступление →
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
28

result-status

Сообщает результат фильтрации, загрузки или пользовательского действия без потери контекста.

Контракт YAML

Показано 12 из 33 кейсов

Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
29

pagination

Продолжает каталог предсказуемо и сообщает объём оставшегося контента.

Контракт YAML

12 из 33

Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
30

media-frame

Показывает визуальное доказательство с понятным типом, crop и подписью.

Контракт YAML
AI CJM / рабочая схема
Контур согласования сценария · источник: программа клиента
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
31

source-note

Связывает утверждение с человеком, документом, периодом или evidence locator.

Контракт YAML
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.
32

contact-panel

Завершает смысловой маршрут страницы ясным следующим шагом и рабочим способом связи.

Контракт YAML

Следующий шаг

Разберём задачу и подберём формат

На первой встрече фиксируем аудиторию, процесс, данные и ожидаемый результат.

Открыть рабочую форму
Desktop
Полная anatomy и исходный информационный приоритет.
Mobile
Один DOM-порядок, без потери evidence и основного действия.
State
Focus видим; интерактивность соответствует нативной семантике.