Tinte — плагин
tinte
Компилирует дизайн-систему в плагин агента: идентичность из референса, SKILL.md и tokens.css, проверка, что код обходит токены
- 624 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Пишет файлы в проект
- Пресеты и темы подтягиваются с внешнего адреса
Установка
- Работает в
Ручная установка
bunx tinte build --pluginПресеты shadcn: npx shadcn@latest add https://tinte.dev/api/preset/one-hunter. Темы: bunx tinte <тема>.
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Пишет файлы в проект
- Пресеты и темы подтягиваются с внешнего адреса
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Tinte компилирует дизайн-систему в плагин для агента: вытягивает идентичность из референса, создает `SKILL.md` и `tokens.css` и проверяет, не обходит ли код токены. Сборка плагина: `bunx tinte build --plugin`. Те же 13 семантических токенов OKLCH превращаются в пресеты shadcn/ui, темы VS Code и терминала: `npx shadcn@latest add https://tinte.dev/api/preset/one-hunter`, темы в редакторы `bunx tinte <тема>`. Версия 1.3.0 от 07.08.2026, лицензия MIT.
Для кого. Для разработчиков и дизайнеров, которые хотят превратить дизайн-систему в плагин агента и проверять, что код следует токенам.
Подходит, если
- Нужно превратить дизайн-систему в плагин агента
- Нужна проверка, что код не обходит токены
- Нужны пресеты shadcn и темы редакторов из одних токенов
Не подходит, если
- Нужна визуальная правка макетов: инструмент работает с токенами и кодом
- Нельзя ставить пресеты и темы из внешнего адреса
Пример запроса к агенту
Скомпилируй мою дизайн-систему в плагин агента, затем проверь код на места, где цвета заданы мимо токеновОграничения
CLI пишет файлы плагина и токенов в проект, а пресеты и темы подтягиваются с адреса tinte.dev, поэтому доступ расширенный: смотрите, что ставите. Идентичность из референса нужно проверять на соответствие бренду.
Как отключить. Удалите скилл из каталога агента или плагин через менеджер плагинов.
Частые вопросы
Что делает Tinte?
Компилирует дизайн-систему в плагин агента с SKILL.md и tokens.css и проверяет, что код следует токенам.
Как собрать плагин?
bunx tinte build --plugin.
Что еще умеет?
Превращает токены OKLCH в пресеты shadcn, темы VS Code и терминала.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
ПлагиныСкилл и CLI, которые снимают с публичного сайта цвета, шрифты, отступы, скругления и тени и сохраняют их как токены JSON и CSS
CLI, который вытаскивает дизайн-систему любого сайта в токены: цвета, шрифты, отступы, тени за один запуск
Плагин и npx CLI, которые создают DESIGN.md по спецификации google-labs-code/design.md из официальных шаблонов
Color Expert
color-expert
Скилл по науке о цвете: OKLCH, контраст APCA и WCAG, шкалы для дизайн-систем, генерация палитр, смешение пигментов и история цвета
designlang
designlang (design-extract)
CLI и MCP-сервер, который читает готовый сайт и достает из него дизайн-систему: токены DTCG, конфиг Tailwind, переменные Figma и брендбук
Tastemaker
tastemaker
Скилл «вкуса» для интерфейсов, чтобы результат не выглядел сгенерированным: только Markdown и скрипты, контраст проверяется расчетом WCAG
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| Tinte (эта запись) | нет | 624 | ||
| Oh My Design | нет | 534 | каталог готовых дизайн-систем компаний | |
| StyleKit | нет | не нужна | 604 | 148 наборов визуальных стилей с токенами |
| Inspo | нет | не нужна | 889 | образцы интерфейсов реальных сайтов |
Коротко о README
README описывает компиляцию дизайн-системы в плагин агента с токенами OKLCH, пресетами shadcn и темами редакторов. Лицензия MIT.