Зачем разбирать эту тему
UI-kit становится системой, когда команда договаривается не только о внешнем виде, но и о правилах применения. Повторяющиеся решения должны иметь одно имя и один источник.
Как устроена задача на практике
Design tokens отделяют смысл от цвета: `surface-primary` проще переключить на светлую тему, чем искать сотни `#171923`. Компонент описывает hover, focus, disabled, loading и error.
Что важно в production
Figma и код используют одинаковые названия компонентов и variants. Документация объясняет не только как выглядит элемент, но и когда его применять.
Типичные ошибки
Главная ошибка — выбирать технологию или паттерн раньше, чем сформулирован пользовательский сценарий и ограничения. Второй частый промах — проверять решение только на идеальном happy path и не продумывать восстановление после сбоя, повторный запрос и права доступа.
Практический вывод
Система окупается на продукте с несколькими командами, большим количеством форм и экранов, светлой/тёмной темой или white-label.
- фиксируйте допущения до реализации;
- проверяйте решение на реальных данных и устройствах;
- сохраняйте наблюдаемость и возможность безопасного отката;
- усложняйте архитектуру только когда это подтверждает задача.