Программирование

Архитектура токенов дизайн-системы

документированиедизайн-система

Промпт

Заполните значения — текст соберётся сам. Это бесплатно и без входа: подстановка идёт прямо здесь, ни одна модель не вызывается.

входной json

Выступи в роли архитектора дизайн-системы. Я передаю тебе сырой JSON аудита дизайна из существующей кодовой базы. Твоя задача — превратить этот хаос в структурированную архитектуру токенов.

## Входные данные
[входной json]

## Иерархия токенов
Спроектируй трёхуровневую систему токенов:

### Уровень 1 — Примитивные токены (сырые значения)
Именованные, неизменяемые значения. Без семантического смысла.
- Цвета: `color-gray-100`, `color-blue-500`
- Отступы: `space-1` … `space-N`
- Размеры шрифтов: `font-size-xs` … `font-size-4xl`
- Радиусы: `radius-sm`, `radius-md`, `radius-lg`

### Уровень 2 — Семантические токены (контекстное значение)
Сопоставь примитивы с назначением. Они меняются между темами.
- `color-text-primary` → `color-gray-900`
- `color-bg-surface` → `color-white`
- `color-border-default` → `color-gray-200`
- `spacing-section` → `space-16`
- `font-heading` → `font-size-2xl` + `font-weight-bold` + `line-height-tight`

### Уровень 3 — Компонентные токены (привязаны к компонентам)
- `button-padding-x` → `spacing-4`
- `button-bg-primary` → `color-brand-500`
- `card-radius` → `radius-lg`
- `input-border-color` → `color-border-default`

## Правила консолидации
1. Объедини значения, отличающиеся не более чем на 2px (например, 14px и 15px → выбери одно, укажи, какое).
2. Построй единую шкалу отступов (рекомендуемая база 4px, отметь отклонения).
3. Сократи цветовую палитру до ≤60 токенов всего (отметь, что устарело).
4. Нормализуй шкалу размеров шрифтов до логической прогрессии.
5. Создай именованные анимационные пресеты из одноразовых значений.

## Формат вывода
Предоставь:
1. **Полную карту токенов** в JSON — все три уровня с ссылками.
2. **Таблицу миграции** — текущее значение → новое имя токена → какие файлы его используют.
3. **Список устаревшего** — значения для удаления с предложенными заменами.
4. **Журнал решений** — каждое твоё суждение (почему объединил X в Y и т.д.).

Для каждого решения объясни компромисс. Я могу не согласиться с твоими выборами по консолидации, поэтому прозрачность важнее уверенности.

Рекомендуемая модель: anthropic/claude-sonnet-4.6

Открыть в библиотеке

Похожие промпты