# Как ИИ-Агентам Использовать Дизайн-Систему Golova
Этот файл можно давать Claude Code, Codex и другим ИИ-агентам перед созданием прототипов Golova.
## Что Это За Продукт
Golova — профессиональная B2B SaaS-платформа для компаний, которые занимаются арендой AV-оборудования и техническим обеспечением мероприятий.
Интерфейс должен ощущаться как современная ERP/CRM-система:
- инженерный;
- профессиональный;
- насыщенный информацией;
- спокойный;
- надежный;
- ориентированный на ежедневную работу.
Не делать лендинг, BI-панель, игровой интерфейс или стартапный промосайт.
## Какие Файлы Читать
1. `AI_USAGE.md` — быстрые правила для ИИ.
2. `tokens.json` — машинно-читаемый контракт токенов.
3. `css/tokens.css` — runtime CSS variables.
4. `css/components.css` — классы компонентов.
5. `index.html` — живая витрина, примеры и правила использования.
6. `DESIGN_SYSTEM_GUIDE.md` — русская памятка по поддержке системы.
## Главные Правила
- Используй CSS-переменные из `css/tokens.css`.
- Не хардкодь цвета в компонентах.
- Для цветов используй semantic tokens: `--text-*`, `--bg-*`, `--border-*`, `--icon-*`.
- Primitive tokens (`--neutral-*`, `--dark-*`, `--brand-*`) используй только при документировании токенов или создании новых semantic tokens.
- Темная тема включается через `.theme-dark` или `[data-theme="dark"]`.
- Не создавай отдельные классы вроде `.button-dark`; компонент должен работать через токены.
- Формы всегда угловатые: `--radius-form` (`4px`).
- Switch track — единственный pill-shaped form control.
- Roboto Flex — весь UI-текст.
- PragmataPro Mono — только логотип и декоративные акценты, не body copy.
- Иконки в HTML-примерах — Bootstrap Icons: `bi bi-*`.
## Визуальный Стиль
Делать:
- плотные рабочие экраны;
- таблицы, списки, панели, формы;
- тонкие разделители;
- спокойную типографическую иерархию;
- минимум теней;
- понятные состояния: default, hover, focus, disabled, error, success.
Не делать:
- большие карточки без необходимости;
- декоративные иллюстрации;
- градиенты;
- тяжелые тени;
- чрезмерное пустое пространство;
- яркую маркетинговую композицию;
- цвет как основной способ иерархии.
## Базовое Подключение
```html
```
Темная тема:
```html
```
или для отдельного блока:
```html
...
```
## Компонентные Контракты
### Buttons
```html
```
Варианты:
- `.btn-primary` — главное действие, обычно одно на экран.
- `.btn-secondary` — второстепенное действие.
- `.btn-informative` — информационное акцентное действие.
- `.btn-danger` — разрушительное действие.
- `.btn-ghost` — низкоприоритетное действие в тулбаре.
- `.btn-link` — действие внутри текста.
Размеры:
- `.btn-sm`
- `.btn-md`
- `.btn-lg`
Icon-only:
```html
```
У icon-only кнопок всегда нужен `aria-label`.
### Tabs
```html
```
## Prompt Для Claude Code
```text
Перед началом прочитай AI_USAGE.md, tokens.json, css/tokens.css и css/components.css.
Собери прототип Golova как плотный B2B SaaS/ERP экран.
Используй существующие CSS variables и component classes.
Не хардкодь цвета, не делай лендинг, не используй градиенты и декоративные иллюстрации.
Поддержи светлую и темную тему через data-theme="dark".
```
## Когда Можно Отклоняться
Отклонение допустимо только если:
- нужного компонента еще нет в дизайн-системе;
- отклонение явно подписано в прототипе как temporary;
- новый паттерн потом будет перенесен в `index.html` и `css/components.css`.