Архитектура фронтенда
Design-токены: соберите тематизированный пайплайн токенов
Читать про тиры и пайплайны — не то же самое, что выкатить ребрендинг одной правкой. Соберите реальную систему токенов, подключите генератор, добавьте dark-тему, не тронув ни одного компонента, и докажите обещание «ребрендинг-в-одну-правку» через diff.
Превратите ментальную модель юнита в рабочий пайплайн: авторите токены один раз в DTCG JSON по трём тирам, генерируйте платформенный CSS через Style Dictionary, тематизируйте dark mode переопределением только semantic-слоя и закрепите правило no-raw-value, чтобы drift не вернулся.
Соберите небольшой набор компонентов (button, card, link, input), стилизованных целиком через трёхтировую систему токенов. Авторите токены один раз в DTCG JSON, генерируйте CSS custom properties через Style Dictionary, выкатите dark-тему без правок кода компонентов и закройте систему так, чтобы захардкоженное значение валило сборку — затем докажите, что ребрендинг это одна правка.
- Diff коммита ребрендинга показывает, что изменение ограничено primitive-слоем токен-источника (плюс перегенерированный CSS) — ни одного файла компонента не тронуто.
- Переключение data-theme в dark корректно перекрашивает все четыре компонента без JavaScript и без правок CSS компонентов; захардкоженное значение, если просочилось, видно как двухцветный дефект.
- Lint-гейт валит сборку на намеренно вставленном сыром hex в компоненте и проходит, как только тот заменён на semantic-токен.
- Короткий разбор: в каком тире живёт каждый токен и почему, и одно предложение о том, когда вы НЕ стали бы добавлять component-тир или пайплайн.
- Добавьте вторую платформенную сборку (iOS Swift или Android colors.xml) из того же источника и покажите, что трансформ цвета (hex в UIColor или 8-значный ARGB) даёт корректный нативный артефакт без правки JSON.
- Добавьте high-contrast-тему как третий semantic-override и убедитесь, что все компоненты адаптируются без нового кода компонентов.
- Добавьте шаг CI, который гоняет сборку токенов и валится, если сгенерированный CSS устарел относительно источника (drift закоммиченного артефакта), как работает проверка сгенерированного кода.
- Добавьте составной DTCG-токен (typography или shadow, бандлящий несколько суб-значений) и подключите к нему один компонент, показав, что бандл корректно разрешается через пайплайн.
Это и есть цикл, который система токенов должна делать рутинным: авторь intent один раз в DTCG JSON по тирам primitive, semantic и component; генерируй платформенный CSS, чтобы ничего не копировалось руками; тематизируй dark mode переопределением только semantic-слоя, чтобы каскад перекрасил всё за одну перерисовку; и закрывай сырые значения линтером, чтобы конвенция не разваливалась. Diff ребрендинга, ограниченный primitive-слоем, — вся отдача: одиннадцатинедельный grep становится одной правкой.