Дизайн-система Cellaré

Скилл для Claude

Соберите любой макет на дизайн-системе Cellaré

Установите скилл — и Claude будет рисовать экраны, флоу, лендинги и отдельные компоненты в языке Cellaré: теми же цветами, шрифтами, компонентами и кодом, что в прототипе. На выходе — готовый HTML, который можно открыть в браузере.

Скачать скилл .zip · 820 КБ

Скачайте архив. Распаковывать не нужно.
Загрузите в Claude: Customize → Skills → + → Upload a skill и выберите архив. В настройках должно быть включено выполнение кода (Code execution).
Попросите макет — в любом чате, скилл подключится сам.

В Claude Code: распакуйте архив в ~/.claude/skills/

Обзор

Cellaré — прототип винного мемуара: приложение, где коллекция бутылок превращается в дневник воспоминаний. Не склад и не магазин, а личная история: где открыли, с кем, что почувствовали. Язык интерфейса — тёмная винная ночь, тёплое золото и стекло, сквозь которое просвечивает цвет вина.

13сцен в автопроигрывании

1:1с Figma, кадр 402×874

100%corner smoothing у каждой плашки

2шрифта: Fraunces и Lexend Deca

0обводок у плашек — объём даёт свет

Из чего состоит

Слой	Что задаёт	Где лежит
Кадр	сцена 402×874 из Figma, ужатая в телефон 390×844 через `zoom`	.cl-scene · .cl-fig · .cf
Атмосфера	свечения, боке, звёзды, лучи, зерно	.cl-glow · .cl-bokeh · .cl-star · .cl-ray · .cl-noise
Плашки	стекло с цветным «подтёком» света и сквиркл-формой	.cf-gs · .cf-bleed · sqPath() · clip-path
Золото	главные действия, выбранные фильтры, «+»	.cf-btn · .cf-pill.on · .cf-plus
Навигация	таб-бар с выемкой под «+», одна панель на все сцены	nav.cf-gs · .cl-navlayer · .cl-tglow

Все образцы ниже — живые вырезки из самого прототипа: страница запускает прототип у себя и клонирует нужные узлы. Поэтому они совпадают с кейсом один в один.

Чем этот язык отличается

Цвет вина — это свет

Карточка не залита цветом. Цвет вина проступает размытыми пятнами изнутри, как будто за стеклом стоит бутылка на просвет.

Золото — только действие

Золотой градиент с «выпуклым» бликом сверху и тенью снизу — только у того, на что нажимают. Больше золотом ничего не красится.

Память, а не данные

Даже служебная информация — дата, полка, температура — подаётся как запись в дневнике, с курсивной цитатой.

Принципы

Семь правил, по которым собирается любой новый экран Cellaré.

Бутылка — это воспоминание. У каждой бутылки есть история: где, с кем, что почувствовали. Характеристики вторичны и живут в маленькой таблице.
Ночь, а не темнота. Фон никогда не чёрный: это глубокий винный градиент со свечениями, звёздами и зерном. Экран должен ощущаться как вечер при свечах.
Без обводок. Плашки отделяются от фона светом — цветными пятнами изнутри и мягкой тенью, а не линией.
Сквиркл везде. Все прямоугольные плашки — суперэллипс Figma со сглаживанием 100%. Круги остаются кругами, капсулы — капсулами.
Золото — один раз на экран. Одна главная золотая кнопка. Второстепенное действие — стеклянная капсула.
Антиква рассказывает, гротеск объясняет. Названия, цитаты и заголовки — Fraunces. Подписи, данные и кнопки — тонкий Lexend Deca.
Всё проявляется, ничего не выскакивает. Элементы экрана поднимаются по очереди, обводки прорисовываются, карта «летит» к региону.

Цвет

Узкая тёплая палитра: винная ночь, слоновая кость, золото. Остальные цвета — это цвета самих вин и регионов, они появляются только как свет внутри плашек.

Роли

Gold · действиеглавная кнопка, выбранный фильтр, «+», активная вкладка

Wine · эмоцияподсветка карточек, кольцо аватара, акцент истории

Glass · содержимоеплашки, строки меню, поля, второстепенные кнопки

Night · фонградиент сцены со свечениями и зерном

Ivory · текстосновной текст и цифры — тёплый, не белый

Основа

Золото--cel #D9B87Cкнопки, акценты, иконка активной вкладки

Светлое золото--cel-soft #EFD9A8верх градиента, прогресс

Золотой металл180° D9B87C → A8834Cзаливка кнопок

Вино--cel-wine #8A2136свет в плашках, графики

Розе#C05A6Bвторой тон вина, градиенты полос

Слоновая кость--cel-ivory #F4EDE3основной текст

Приглушённый--cel-muted #A99E93подписи

Тихий#8A7F76вкладки, вторая строка

Цитата#C9BCB0курсив Fraunces

Ночь150A10 → 241019 → 0B0608фон сцен

Корпус#0B0709фон телефона, заставка

Чернила на золоте#1A0D06текст и иконки на золотых кнопках

Цвета вин

Каждый стиль вина задаёт пару: тёмный край и светлое пятно. Они используются только внутри карточки вина как свет.

Красное · выдержанное2B0A16 / 7A1E33–8A2136Bordeaux, Barolo

Белое · свежее1E2415 / 6E7A3ERiesling

Белое · минеральное1C2420 / 4E6E52Sancerre

Шампанское2E2617 / 8A7A3EChablis, Champagne

Цвета регионов

Типографика

Две гарнитуры. Fraunces 300 — голос мемуара: названия вин, заголовки, цитаты курсивом. Lexend Deca 300 — всё служебное: подписи, данные, кнопки, капсы с широким трекингом.

Romanée-Conti

Fraunces 300 · 300 italic

Названия, заголовки экранов, цифры в плашках, цитаты.

Pinot Noir · 12°C

Lexend Deca 300

Подписи, данные, кнопки. Одно начертание на всё.

Роли

Good evening, Artem

ПриветствиеFraunces 300 · 36–40 · имя курсивом в золоте

The Cellar

Заголовок экранаFraunces 300 · 36

Romanée-Conti 1999

Название вина крупноFraunces 300 · 26–30 · год курсивом в золоте

Barolo Riserva

Название в карточкеFraunces 300 · 15.5–17

128

Число в плашкеFraunces 300 · 26

“Tar and roses, as promised.”

Цитата-воспоминаниеFraunces 300 italic · 12.5–16 · #C9BCB0

Burgundy · Pinot Noir

ПодписьLexend Deca 300 · 12–13 · #A99E93

RAREST IN COLLECTION

Капс-меткаLexend Deca 300 · 9–10 · трекинг .2–.42em

Open this bottle

Подпись кнопкиLexend Deca 300 · 12–13 · #1A0D06

Cellar · Journal · Atlas · You

Подпись вкладкиLexend Deca 300 · 9

Правила набора

Жирного нет вообще. Иерархию дают размер, гарнитура и цвет, а не вес.
Годы и имена в заголовках — курсивом и золотом: «Artem», «1999», «taste tonight?».
Цитаты всегда в типографских кавычках “…” и всегда Fraunces italic.
Капс — только короткие метки над блоками, с трекингом не меньше .2em.

Сквиркл и геометрия

Кадр прототипа — 402×874, как в Figma; в телефон 390×844 он попадает целиком через zoom:.97015, поэтому координаты переносятся буквально. Форма плашек — суперэллипс Figma со сглаживанием 100%, его строит sqPath() и режет clip-path: path().

сглаживание 100%

Сглаживание угла

Золотой контур — сквиркл с выбранным сглаживанием, пунктир — обычное скругление того же радиуса. При 100% угол начинается раньше и входит в прямую без «ступеньки».

sqPath(w, h, r, smoothing)

Радиусы

Элемент	Радиус	Форма
Hero-карточка	24–28	сквиркл
Строка истории, стеклянная карточка	22	сквиркл
Карточка вина	20	сквиркл
Плашка статистики	16–18	сквиркл
Превью бутылки в строке	14	сквиркл
Кнопки, фильтры, поиск	100	капсула
Кнопки-кружки, «+», аватар	50%	круг
Таб-бар	верхние углы 28, выемка под «+»	сквиркл + гладкая выемка

Ритм

Что	Значение
Поля экрана	24 слева и справа (в кадре 402)
Сетка карточек вин	2 колонки по 171, зазор 12, шаг по вертикали 208
Строки истории	шаг 178, линия времени на x=43, точка 9px
Заголовок экрана	top 84 (кадр), подпись-капс под ним на +50
Таб-бар	от top 794 до низа экрана, «+» 58px в выемке

Атмосфера и свет

Фон каждой сцены собран из одних и тех же слоёв. Они медленно дышат, поэтому экран живой, даже когда ничего не происходит.

Заставка

Логотип, три расходящихся пунктирных кольца, звёзды и горизонт — золотая линия с блюром.

.cl-rings · .cl-star · .cl-horizon

Слои фона

Градиент ночи → 2–3 больших свечения (блюр 55–60) → косой золотой луч → боке → зерно 5%.

.cl-glow · .cl-ray · .cl-bokeh · .cl-noise

Подтёк света в плашке

Внутри плашки — 1–2 размытых пятна .cf-bleed цвета вина сверху и винно-тёмное снизу. Оно и заменяет обводку.

.cf-bleed · radial-gradient · blur 24–25

Слой	Параметры	Движение
Свечение .cl-glow	420–460px, винный или сиреневый, блюр 55–60	дыхание 6s, scale 1.09 и сдвиг 10px
Луч .cl-ray	90×760, розе 12% → 0, блюр 45	поворот 14→17° за 11s
Боке .cl-bokeh	26–28px, золото 12% или вино 20%, блюр 18	дыхание 7s
Звёзды .cl-star	2px, золото, свечение 6px	мерцание 4.2s
Зерно .cl-noise	SVG-турбулентность, 5%	статично

Движение

Экран не появляется целиком — он собирается. Блоки поднимаются по очереди, обводки рисуются по кругу, большие вещи проявляются. Переходы между сценами — мягкий наплыв с лёгким масштабом.

Что	Кривая	Длительность
Подъём блока clUp	cubic-bezier(.22,1,.36,1)	0.7s, с 22px, задержки .08 → .58 (cl-d1…d6)
Прорисовка контура sqDraw	cubic-bezier(.4,0,.2,1)	0.9s кольца и линии, 2.4s береговая линия атласа
Проявление clReveal	ease	0.6–1.1s
Смена сцены	cubic-bezier(.22,1,.36,1)	0.55s прозрачность, 0.85s масштаб 1.03 → 1
Перелёт в регион	ease-in-out (.42,0,.58,1)	карта ×3.6 за 1s + блюр 2px, список «садится» с 1.14
Свет под вкладкой	ease-in-out	0.8s, старое гаснет — новое загорается
Нажатие .cf-press / .cf-circ	cubic-bezier(.34,1.56,.64,1)	0.18s, scale .965 / иконка .76
Шкалы sttGrow	cubic-bezier(.22,1,.36,1)	1.1s от нуля до значения

Появление

cubic-bezier(.22,1,.36,1)

Всё, что приходит

Быстрый старт, долгая мягкая посадка.

Перелёт

cubic-bezier(.42,0,.58,1)

Перемещения камеры

Плавный разгон и такое же торможение: полёт к региону, свет под вкладкой.

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

Всё, что есть в прототипе. Образец — живая вырезка из сцены, под названием — класс или функция в коде.

Компонент	Состояния	Где встречается
Главная кнопка.cf-btn	покой · нажатие (scale .94)	«Begin your memoir», «Seal this memory», «Add a note»
Пара кнопок.cf-btn + стеклянная капсула	главная · вторая	«Open this bottle» · «Memory +»
Малая кнопка.cf-btn	покой · нажатие	«Begin ritual» внутри hero
Фильтры.cf-pill / .cf-pill.on	выкл · вкл (золото) · наведение	The Cellar
Кнопки-кружки.cf-circ	покой · нажатие (иконка .76)	назад, избранное, закрыть
Hero-карточка[data-sq=hero]	один вид	«Tonight’s opening» на главной
Карточка-витрина.cf-gs	один вид	«Rarest in collection»
Карточка вина.cf-card	покой · нажатие	сетка The Cellar
Плашки статистики.cf-gs	один вид	главная, You
Воспоминание.cf-mem	покой · нажатие	лента «Recent memories»
Запись дневника[data-profile] + линия времени	покой · нажатие	Journal
Строка меню.cf-gs.cf-press	покой · нажатие	You
Таблица фактов.cf-gs · .bd-*	один вид	страница бутылки
История бутылки.bd-story	один вид	страница бутылки
Шкалы вкуса.rt-row · .rt-fill · .rt-knob	перетаскивание	ритуал дегустации
Радар вкусаsvg · stt-anim	прорисовка	ритуал дегустации
Линия жизни бутылкиточки + подписи	пройдено · впереди	Bottle history
Сканер этикетки.cl-scan	скан (3.4s туда-обратно)	Add bottle
Поиск#srchField	пусто · ввод с кареткой	Search
Подсказки поиска.srch-pill	покой · нажатие	Search
Кольцевая диаграммаstt-anim · oPath	прорисовка сегментов	Collection
Полосы регионов.stt-fill	рост от нуля	Collection
Регион на карте.atl-r · .atl-ring · .atl-fill	прорисовка · наведение · полёт	Atlas
Аватар коллекционеракольцо + пунктир	один вид	You
Таб-бар с выемкойnav.cf-gs · .cf-plus-big	вкладка вкл · свет под вкладкой	все основные сцены

08b

Расширенный каталог

Компоненты, которых в прототипе нет, но которые понадобятся следующим экранам мемуара: заметка, оценка, ароматы, год урожая, температура погреба, окно питья, полка, пары к еде. Нарисованы тем же языком: стекло, свет вина, золото только на действии.

Образец	Компонент	Состояния	Где пригодится
Your note · 24 July Dark cherry, a whisper of smoke — Sofia said it tastes like the first night in Alba	Заметка-воспоминание.kx-note	пусто · ввод · сохранено	«Add a note to its story»
Unforgettable	Оценка.kx-stars	0–5 · полузвезда	после дегустации
CherryVioletTarLeatherTobaccoRoseTruffle	Ароматы.kx-aromas	выкл · вкл	ритуал, заметка
20142015201620172018	Год урожая.kx-wheel	прокрутка · выбран	ручное добавление бутылки
12°CShelf B · humidity 70% Ideal for reds	Климат погреба.kx-temp	норма · тепло · холодно	Cellar settings
Drinking window 2016now · too young2045	Окно питья.kx-window	рано · в окне · поздно	страница бутылки
	Полка.kx-shelf	пусто · красное · белое · выбрано	где лежит бутылка
BottlesMemoriesRegions	Переключатель.kx-seg	3 позиции	Collection, Journal
Remind me to open itwhen the window begins Share with Sofiashe’ll see this memory	Тумблер.kx-tog	выкл · вкл	настройки, память
Where did you open it? Osteria in Alba	Поле ввода.kx-field / .focus	пусто · фокус	место, люди, повод
SSofia MMiguel AAnna +Add	С кем пили.kx-who	покой · выбран	память о бутылке
Truffle tajarinpairs with Nebbiolo · Piedmont	Пара к еде.kx-pair	один вид	страница бутылки
Estimated value € 1 240+18% since 2023	Оценка стоимости.kx-price + спарклайн	рост · падение	редкие бутылки
IXC	Печати-достижения.kx-seal	получена · закрыта	Achievements
Memory sealed Barolo Riserva · 24 July Undo	Тост.kx-toast	успех · отмена 5s	после «Seal this memory»
Your cellar is waiting for its first story Scan a label — we’ll remember the rest. Add a bottle	Пустое состояние.kx-empty	один вид	новый пользователь
	Скелетон.kx-skel	загрузка	списки, поиск
Open this bottle? It’s still 3 years early. The story can wait — or begin tonight. WaitOpen tonight	Шторка подтверждения.kx-sheet	два действия	необратимые шаги

Экраны и сценарий

Все 13 сцен прототипа — живые, тем же кодом. В кейсе они проигрываются подряд, любую можно открыть вкладкой, кнопкой или регионом на карте.

Кнопки

Три вида: золотая капсула — главное действие, стеклянная капсула — второе, кружок — служебное. «+» в таб-баре — золотой круг, самый заметный элемент приложения.

Золотая капсула

Градиент D9B87C → A8834C, светлый блик внутри сверху, коричневая тень внутри снизу, тёплое свечение снаружи. Текст — #1A0D06.

.cf-btn · 48–52px · r100

Главная + вторая

Вторая кнопка — стекло того же размера. Рядом с золотой она всегда справа и уже.

Кружки

40–44px, стекло 6–8%, иконка 1.5px. Невидимая зона нажатия шире на 10px.

.cf-circ::before inset:-10px

«+» в выемке

58px, стоит над панелью в её выемке. Добавляет бутылку из любого экрана.

.cf-plus-big

Карточки вин

Карточка — окно в бутылку. Сверху бутылка на просвет, под ней название, регион, год и цветная точка стиля. Фон собран из размытых пятен цвета вина, у каждой карточки они лежат по-своему.

Сетка карточек

171×196, r20, сквиркл. Бутылка 68×102, лёгкое покачивание у первых карточек. Цвет точки = цвет стиля. Год — золотом.

.cf-card · .cf-bleed · .cf-sway · radial-gradient ×4

Анатомия фона

Слой	Что делает
Главное пятно	эллипс 78×46% цвета вина, смещён от центра — как бутылка на просвет
Второе пятно	меньше и тише, с другой стороны — ломает симметрию
Блик	светлый тон вина над главным пятном
Отсвет снизу	смесь тёмного и светлого у нижнего края, под текстом
Основа	тёмный тон вина → ночь #120A0E
Зерно	.cl-noise 5% поверх

Стеклянные плашки

Всё содержимое живёт на стекле: 4–6% белого, размытие фона 18–50px и цветной подтёк света внутри. Обводок нет — край плашки даёт разница света.

Статистика

Число Fraunces 26, подпись капсом 9px. Три в ряд, зазор 12.

Строка меню

Иконка золотом, название 15px, подпись 10px, шеврон. Нажатие — золотой отлив и сжатие .965.

.cf-press

Капсула-ссылка

Вторичное действие внутри экрана, стекло с иконкой.

Запись

Превью бутылки 56px r14 на цвете вина, название, дата, цитата курсивом.

Панель на всю ширину и до низа экрана. Верхний край — одна плавная линия: сквиркл-углы 28, выемка вокруг «+» по дуге, стенки выемки идут по касательной. В прототипе панель одна на все сцены и не двигается при их смене. Выбранная вкладка загорается изнутри мягким золотым пятном (0.8s ease-in-out).

notchPts() · clip-path: path() · .cl-navlayer · .cl-tglow

Шапка страницы

Кружки по краям, без заголовка — заголовок живёт в контенте.

Шапка с заголовком

Fraunces 22 по центру, кружок назад слева.

Шаг сценария

Капс «STEP 2 OF 3» над вопросом — вместо прогресс-бара.

Поиск и ввод

Поле поиска

Капсула 50px, стекло, золотая каретка. Плейсхолдер — курсив Fraunces «Search your cellar…».

Недавние запросы

Строки Fraunces 17 с шевроном, при наведении золотятся.

.srch-row

Быстрые фильтры

Капсулы 32px с тонкой светлой линией — единственное место, где линия осталась: это не плашка, а метка.

.srch-pill

Шкалы

Полоса вино → розе → золото, ручка — слоновая кость со свечением.

.rt-fill · .rt-knob

Данные и карта

Данных в мемуаре мало, и они подаются как картина, а не таблица: кольцо коллекции, полосы регионов, карта Европы с пузырями.

Коллекция

Кольцо из сегментов стилей с зазорами и скруглёнными концами, число в центре Fraunces. Легенда — точки цвета стиля и проценты.

Атлас

Береговая линия прорисовывается 2.4s, потом проявляются суша, границы, острова и названия. Размер пузыря — число бутылок, цвет — цвет региона.

.atl-coast · .atl-r · flyTo()

Язык и тон

Интерфейс говорит как друг-сомелье, который помнит вечер лучше тебя. Коротко, тепло, с деталью.

Не такItem added to inventory

ТакMemory sealed

Не такStock: 128 units

Так128 bottles · 10 regions · since 2023

Не такTasting profile form

ТакHow does it taste tonight?

Не такDescription

Так“Brought back from the estate on a rainy October evening.”

Не такAging recommended

ТакPatience. The violets are still waiting.

Состояния и отклик

Компонент	Покой	Наведение / нажатие	Выбран
Золотая кнопка	блик сверху, свечение	scale .94	—
Фильтр	стекло 5%, текст приглушённый	стекло 9%, текст слоновая кость	золото, текст #1A0D06
Плашка-строка	стекло	золотой отлив 13%, scale .965	—
Кружок	стекло	золото 22%, иконка .76	—
Вкладка	#8A7F76	золото + свечение иконки	золото, подпись слоновая кость, пятно света внутри панели
Регион на карте	пузырь с кольцом	яркость ×1.3, кольцо толще	полёт к региону

Чего не делать

Каждый пункт — реальная ошибка из работы над прототипом.

Не возвращать градиентные обводки плашкам.Проверили оба варианта: без линии плашки спокойнее, а объём и так дают подтёки света.

Не делать фон карточки ровной полосой.Горизонтальный градиент выглядел технично. Фон — несколько смещённых пятен, у каждой карточки своих.

Не класть панель навигации внутрь сцены.Сцена при смене масштабируется, и панель дёргалась вместе с ней. Панель одна и стоит поверх всех сцен.

Не делать выемку таб-бара с вертикальной стенкой.Там, где дуга становится вертикальной, контур ломался. Стенка идёт по касательной с 50°.

Не рисовать выемку, обрезая саму кнопку «+».clip-path панели срезает всё внутри. Кнопка вынесена из панели и стоит над ней.

Не блюрить детей обрезанной плашки в Safari без проверки.Safari рисует вокруг размытых детей прямоугольник. Новый фон карточек — радиальные градиенты без filter.

Не красить золотом то, что нельзя нажать.Золото — сигнал действия. Год и имя в заголовке — исключение, но это курсив, а не заливка.

Не использовать жирный.Вся система на весе 300. Жирное название вина выглядит как ценник.

Токены

Токен	Значение	Где
--cel	#D9B87C	золото
--cel-soft	#EFD9A8	светлое золото
--cel-wine	#8A2136	вино
--cel-ivory	#F4EDE3	текст
--cel-muted	#A99E93	подписи
Золотой металл	linear-gradient(180deg,#D9B87C,#A8834C) · inset 0 4px 9px rgba(255,243,214,.9) · inset 0 -6px 12px rgba(122,67,24,.6)	кнопки, «+», выбранный фильтр
Стекло	rgba(255,255,255,.04–.06) · backdrop-filter: blur(18–50px)	плашки
Подтёк света	radial-gradient(closest-side, цвет .3–.45, transparent) · blur(24–25px)	.cf-bleed
Кадр	402×874 · zoom .97015	.cl-fig
Сквиркл	sqPath(w,h,r,1) → clip-path: path()	все прямоугольные плашки

Как пользоваться

Начать с истории. Что человек вспоминает на этом экране? Это станет заголовком Fraunces и цитатой.
Собрать фон из слоёв раздела 06. Ночь, 2 свечения, луч, боке, зерно.
Сложить содержимое на стекло. Каждой плашке — подтёк света цвета вина или региона, без обводки.
Поставить одну золотую кнопку. Остальные действия — стекло или кружки.
Задать форму через sqPath. Радиусы из раздела 05, круги и капсулы не трогать.
Развести появление по cl-d1…d6. Сверху вниз, крупное раньше мелкого.
Прогнать по разделу 19.

Документ живой: образцы берутся прямо из прототипа. Если в кейсе поменялся компонент, он поменяется и здесь, — достаточно обновить блоки CSS прототипа, разметку и скрипты в этом файле.

Соберите любой макет на дизайн-системе Cellaré

Обзор

Из чего состоит

Чем этот язык отличается

Цвет вина — это свет

Золото — только действие

Память, а не данные

Принципы

Цвет

Роли

Основа

Цвета вин

Цвета регионов

Типографика

Fraunces 300 · 300 italic

Lexend Deca 300

Роли

Правила набора

Сквиркл и геометрия

Сглаживание угла

Радиусы

Ритм

Атмосфера и свет

Заставка

Слои фона

Подтёк света в плашке

Движение

Всё, что приходит

Перемещения камеры

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

Расширенный каталог

Open this bottle?

Экраны и сценарий

Кнопки

Золотая капсула

Главная + вторая

Кружки

«+» в выемке

Карточки вин

Сетка карточек

Анатомия фона

Стеклянные плашки

Статистика

Строка меню

Капсула-ссылка

Запись

Навигация

Таб-бар с выемкой

Шапка страницы

Шапка с заголовком

Шаг сценария

Поиск и ввод

Поле поиска

Недавние запросы

Быстрые фильтры

Шкалы

Данные и карта

Коллекция

Атлас

Язык и тон

Состояния и отклик

Доступность

Чего не делать

Токены

Как пользоваться