Дизайн-токены из референса
Извлечь систему цветов, типографики, теней, радиусов и spacing из примера и оформить как токены.
Построение цветовой системы
От raw-палитры к семантическим токенам, темам и контрасту — с проверкой на edge-кейсах.
Spacing scale и вертикальный ритм
Базис 4/8, шкала отступов, вертикальный ритм типографики и допустимые исключения.
Темизация дальше тёмной темы
Multi-theme: бренд-темы, density modes, accessibility modes. Стратегия токенов, переключение, что не масштабируется.
План миграции дизайн-токенов
Рефактор существующих токенов без поломок прод-компонентов: codemod, opt-in flag, deprecation window, коммуникация.
Density modes: переключатель comfortable / cozy / compact
Как у Linear и Notion: переключатель плотности интерфейса. Token strategy, что НЕ масштабировать, сохранение preference.
Дизайн-система от нуля до Storybook
Orchestrator: дизайн-система за один проход. 7 фаз: audit → tokens → primitives → components → docs → Storybook → governance. Готовый стартер на TypeScript + Tailwind.
Полировка поверхностей: бордеры, тени, радиусы как у премиум-сайтов
Конкретные значения, которые отличают «сделано в Figma за час» от премиума. Subtle borders 1px, тени с низким blur, шкала радиусов 4/8/12, никаких неоновых градиентов.
Бюджет контекста для агента
Сколько токенов есть, как делить между инструкциями, контекстом и историей.
Cost optimization для агентов
Снижаем cost/request без потери качества: модель, кеш, контекст, batch. Что мерить и что НЕ оптимизировать.