Гайд по Token Fix

Token Fix подсказывает, какой токен дизайн-системы поставить вместо цвета или размера, и находит в коде значения, которые вписали руками вместо токена. Открыть Token Fix

Зачем он нужен

В макете — значение, а не токен. Именно при переходе от одного к другому код и начинает расходиться с дизайн-системой:

• Один цвет — несколько токенов. Один и тот же синий — это и акцентный текст, и акцентный фон, и акцентная рамка. Сегодня подходит любой, но не тот сломается в тот день, когда тема поменяет один из них.
• Значения между шагами. Отступ 20px там, где в шкале есть 16 и 24, — уже вне системы, и этого никто не замечает.
• Значения, вписанные руками, не меняются вместе с системой. Hex-код в компоненте останется тем же и в тёмной теме, и в следующем релизе.
• Опечатка в переменной не видна. var(--text-defualt) не даёт никакого значения, а браузер не сообщает об ошибке.

Token Fix читает систему так, как её использует код: каждый токен со значением в каждой теме, назначением и тем, откуда он берёт значение.

Все иллюстрации на этой странице живые: это настоящий Token Fix прямо в вашем браузере на небольшой учебной дизайн-системе из трёх слоёв — палитры, семантических токенов и токенов компонентов — со светлой и тёмной темой.

Как пользоваться

1. Откройте токены. Выберите, где они лежат:

   • npm: имя пакета и версия.
   • GitHub: владелец/репозиторий/папка и ветка, тег или коммит; для приватного репозитория нужен токен с правом чтения, он хранится только во вкладке.
   • Файлы: перетащите файлы токенов, папку или .zip — выгрузку из плагина для Figma можно открыть без распаковки.

   Если в пакете много файлов, укажите нужные в поле Файлы, например dist/tokens.css. Затем нажмите Открыть (⌘ ↵) или Пример.

2. Ищите по имени, по значению или вставьте код.

3. Добавьте свой код на вкладке Ваш код, чтобы увидеть, что в нём вписано руками.

Token Fix читает те же форматы, что и Token Diff: DTCG 2025.10 с резолверами и режимами, JSON токенов старого формата, CSS-переменные с темами.

Обзор

Пока поиск пуст, Token Fix рассказывает о системе:

• Где легко взять не тот токен: значения, которые есть у нескольких токенов с разным назначением, и какой из них для чего.
• Что для чего: токены, сделанные для текста, фонов, рамок и теней — сначала те, на которых построена большая часть системы, — и шаги отступов и скруглений.
• Как устроены слои: палитра, семантика, компоненты и самостоятельные значения, а ещё ссылки, которые идут между слоями не в ту сторону. Компонент, который берёт значение прямо из палитры, не поменяется вместе с темой.
• Что поправить в системе: что проверки нашли в самих токенах.

Токен для значения

Введите значение: #2563eb, 12px, 200ms. Затем укажите, для чего оно — текст, фон, рамка или тень, — и состояние, если оно есть: наведение, фокус, нажатие, неактивное, выбранное. Можно написать и так, как пишет код: background: #2563eb.

Сначала идут точные совпадения, наверху — токен, сделанный именно для этого. Если точного нет, будут ближайшие: цвета — по тому, насколько они отличаются на глаз (ΔE, где 1 — примерно самая маленькая разница, которую видит человек), размеры — по разнице в пикселях.

Для размера между двумя шагами шкалы Token Fix предложит команде дизайн-системы новый токен: каким было бы его имя и куда бы он встал. Скопировать предложение даст текст для задачи.

Вставить код

Вставьте в поиск CSS, JSX с классами Tailwind или объектами стилей, Vue или Svelte. Вы получите тот же код, где каждое значение, вписанное руками, заменено токеном, выбранным по свойству, в котором оно стоит. Замены, в которых Token Fix не уверен, отмечены — решите сами. Скопировать код копирует результат.

Ваш код

На вкладке Ваш код перетащите папку приложения на этой системе или укажите его репозиторий на GitHub. CSS, SCSS и Sass, JSX и TSX с классами Tailwind, объекты стилей и CSS-in-JS, Vue, Svelte и Astro читаются во вкладке и никуда не загружаются. Вы увидите:

• Какая доля кода на токенах — отдельно для цветов и для размеров.
• Заменить на токены: каждое значение, вписанное руками, для которого есть токен. Токен выбран по свойству, состоянию и компоненту, где написано значение, рядом — все места с файлом и строкой.
• Каких токенов не хватает: значения без точного токена. Если они встречаются часто, это кандидаты в новые токены; если один раз — возьмите ближайший.
• Переменные, которые надо исправить: имена, которых нет среди токенов, с тем, что, скорее всего, имелось в виду, и устаревшие токены с заменой.
• Собственные переменные кода: переменные, которые код объявляет сам, как это бывает в прототипе, с токеном системы для каждой. Скопировать слой перевода даст CSS, который заново объявляет их через токены системы.

Скопировать задание для агента соберёт всё это в задачу, которую выполнит ИИ-агент.

Карточка токена

Нажмите на токен, чтобы открыть карточку: значение в каждой теме, откуда токен берёт значение и какие токены его используют — в виде графа, — его слой, файл и как его записать в CSS или как {ссылку}. Устаревший токен подскажет, чем его заменить. Сравнить с другой версией откроет его в Token Diff.

Как поделиться

Скопировать ссылку сохраняет то, что на экране: токены, тему, поиск и открытый токен. Для npm и GitHub ссылка — это просто адрес; ваши файлы попадают в часть после #, которую браузер никогда не отправляет на сервер. Код, вставленный в поиск, в ссылку не попадает.

Клавиатура

В Windows и Linux вместо ⌘ — Ctrl.

Из Token Diff

После сравнения кнопка Открыть в Token Fix передаёт новую версию и ваш код, если вы его добавили, — чтобы сразу поправить код под релиз.

Для ИИ-агентов

MCP-сервер даёт агентам те же ответы: find_token — для значения, check_styles — для кода, который они пишут.

Приватность

Всё работает во вкладке браузера. Перетащенные файлы и ваш код никуда не загружаются. Пакеты приходят с jsDelivr, репозитории — с GitHub, их скачивает сам браузер. Аккаунта нет, ничего не сохраняется.