GOLDJAXE UI Kit¶
Единый source of truth дизайн-системы экосистемы GOLDJAXE и контракт для AI-отрисовки интерфейсов.
Framework-agnostic: один и тот же CSS/токены подключают и статические лендинги, и Next.js-проекты. В ядре нет React/Tailwind/shadcn — это осознанное решение (см. Анти-паттерны).
С чего начать¶
| Роль | Куда идти |
|---|---|
| Верстаю экран / нейронка | Семантическое ядро → Токены → Компоненты → эталоны reference/canonical/ |
| Проверяю готовое | Чеклист аудита · Анти-паттерны · Failure modes |
| Работаю через Claude | AI design workflow · Canonical enforcement |
| Понять принципы | Ментальные модели · Конституция бренда |
Подключение¶
import '@goldjaxe/ui-kit/fonts';
import '@goldjaxe/ui-kit/css';
import '@goldjaxe/ui-kit/js/toast';
import tokens from '@goldjaxe/ui-kit/tokens.json' assert { type: 'json' };
<link rel="stylesheet" href="https://ui.goldjaxe.ai/fonts.css">
<link rel="stylesheet" href="https://ui.goldjaxe.ai/css/eco-components.css">
Токены¶
Источник — tokens/design-tokens.json (формат DTCG). Никогда не хардкодь значения — ссылайся на токены. Из JSON автоматически собираются dist/tokens.css (переменные --gjx-*), dist/tokens.js, dist/tokens.flat.json и Tailwind-preset.
Технический долг
Боевые переменные в eco-components.css (--accent-amber, --bg-primary) и генерируемые из JSON (--gjx-color-amber-primary) пока живут в двух пространствах имён. Унификация — отдельная задача.