Central Design System

Компоненты по Atomic Design

Атомы, молекулы и организмы используют общие композаблы и токены: кнопка, поле и собранная из них форма ведут себя одинаково. Свои компоненты вы собираете из тех же атомов.

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

Токены темы

--cds-color-brand-primary

--cds-color-surface-primary

--cds-color-content-primary

--cds-color-line-secondary

Классы Tailwind

.bg-brand-primary

.bg-surface-primary

.text-content-primary

.border-line-secondary

Темы, токены и Tailwind

Тема — объект семантических токенов, из которого при старте генерируются CSS-переменные. Tailwind CSS v4 подключается поверх тех же токенов: утилиты bg-surface-primary и text-brand-primary перекрашиваются вместе с темой.

Тематизация Tailwind CSS v4

createCds({
  theme:    { defaultTheme: 'b2bLight' },
  icons:    { defaultSet: 'phosphor' },
  locale:   { locale: 'en' },
  defaults: {
    global:    { size: 'sm' },
    CdsButton: { appearance: 'secondary' }
  }
});

Настраивается под проект

Один вызов createCds задаёт тему, локаль, значения пропсов по умолчанию и набор иконок — Remix, Phosphor, Lucide, Carbon, MDI или свой. Базовый слой и переменные компонентов переопределяются SASS-конфигурацией при сборке.

Глобальная конфигурация SASS-переменные Иконки

$ npx --package @central-design-system/skills@next cds-skills install
✓ cds-builder   ✓ cds-migrate   ✓ cds-refactor

СкиллыMCP-серверllms.txt

AI Ready

Agent Skills, MCP-сервер и llms.txt идут с пакетом: агент собирает интерфейс на Luma по тем же правилам, что и человек, и проверяет разметку по контрактам компонентов.

AI для агентов

Luma AI-firstDesignSystem

Компоненты по Atomic Design

Темы, токены и Tailwind

Настраивается под проект

AI Ready