# Design System Create

> Собрать дизайн-систему с нуля: токены, типографика, компоненты, гайдлайны. Триггеры: «создай дизайн-систему», «UI-кит», «общие токены проекта».

- Skill: `jhamidun/design-system-create` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jhamidun/design-system-create`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jhamidun/design-system-create/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: JHamidun (https://skillmd.com/u/jhamidun)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/jhamidun/design-system-create

---


# Design system create

Минимально жизнеспособная дизайн-система — это:

1. **Tokens** (цвета, типографика, отступы, радиусы, тени).
2. **Components** (кнопка, инпут, карточка, бейдж — ядро).
3. **Принципы** (1 страница: что считается «правильным»).
4. **Примеры** — компоненты в работе на 2-3 экранах.

Не делай сразу 50 компонентов. Начни с ядра, расширяй по мере появления реальных нужд.

## Структура файлов

```
design-system/
  README.md
  tokens.css
  tokens.json
  type.html         ← страница со всеми текстовыми стилями
  colors.html       ← страница с палитрой
  components/
    button.html
    input.html
    card.html
    badge.html
  examples/
    landing.html
    settings.html
```

## tokens.css — обязательный минимум

```css
:root {
  /* Цвета */
  --color-bg:        #FAF9F6;
  --color-fg:        #111111;
  --color-muted:     #6B6B6B;
  --color-rule:      rgba(0, 0, 0, 0.08);
  --color-primary:   #D97757;
  --color-success:   #2E7D5F;
  --color-warning:   #C58B14;
  --color-danger:    #C24E3A;

  /* Типографика */
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Шкала размеров */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  48px;
  --text-4xl:  72px;

  /* Spacing — кратно 4 */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-20: 80px;

  /* Радиусы */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Тени */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 30px 80px rgba(0,0,0,.12);

  /* Время и easing */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}
```

## Принципы (template)

В `README.md` системы укажи:

- **Цвета.** Когда какой использовать. «Primary только для главного CTA на странице. Не больше двух primary-кнопок в один экран».
- **Расстояния.** Никаких magic numbers. Если 17px — значит, ты ошибся; нужно 16 или 24.
- **Типографика.** Какой шрифт где. Не больше 3 размеров на экран.
- **Бордеры и тени.** Когда уместны, когда нет.
- **Состояния.** Что должно быть у любого интерактивного элемента.

## Минимальные компоненты ядра

### Button

3 варианта × 3 размера = 9 кнопок:
- variants: primary, secondary, ghost
- sizes: sm (32px), md (40px), lg (48px)
- states: default, hover, active, focus-visible, disabled, loading

### Input
- text, password, email, number, search, textarea
- states: default, focus, filled, error, disabled
- с label, helper, error

### Card
- minimum padding, border, optional shadow
- header / body / footer slots

### Badge
- info, success, warning, danger, neutral
- sizes: sm, md

Дальше — что реально нужно.

## Что НЕ нужно делать на старте

- ❌ Колорпикер с 12 оттенками каждого цвета. Достаточно 3-4.
- ❌ 20 размеров шрифта. Достаточно 8.
- ❌ Сложные компоненты (data-grid, file-uploader) до того, как нужны.
- ❌ Несколько тем (light/dark) до базовой системы.

## Финальная проверка

Открой `examples/landing.html` или `settings.html`. Если для построения нужно было что-то «доделать руками» — это пробел в системе. Закрой пробел токеном или компонентом, не inline-стилем.