ThroughLine — плагин
Агентная команда дизайна: строит токены и компоненты в Figma и коде, затем рисует экраны на них или на готовой библиотеке.
- 80 ★ репозитория
- Последний коммит
Расширенный доступ
Почему такой уровень
- Плагин пишет в файлы Figma и репозитория через локальный MCP-сервер и по вашему согласию создает репозиторий GitHub.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add plugins/throughlineОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Плагин пишет в файлы Figma и репозитория через локальный MCP-сервер и по вашему согласию создает репозиторий GitHub.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Плагин строит дизайн-систему, которую агент способен читать. В Figma создаются первичные и семантические токены (цвет, отступы, типографика, радиусы, тени) с темами и брендами, все стили текста и эффектов, иконки Lucide или Material и базовые компоненты в виде матриц вариантов. В коде появляются монорепозиторий на pnpm и Turborepo, адаптер синхронизации токенов на Style Dictionary, Storybook и проверки визуальной регрессии в Chromatic. Каждый экран в Figma собирается из переменных системы: жестко заданное значение допустимо, только если подходящей переменной нет, и об этом сообщается. Команда `/throughline:drift` показывает, что разошлось, а проверки останавливают сборку при нарушении контраста WCAG AA, отсутствии видимого фокуса и расхождении сгенерированного CSS с токенами. Для готовой системы есть режим ретрофита с таблицей соответствия старых и новых токенов.
Для кого. Дизайнерам и продуктовым командам, у которых нет дизайн-системы или она разошлась с кодом, и которые готовы вести работу через агента без глубокого знания кода.
Подходит, если
- С нуля собирают систему токенов и компонентов в Figma и синхронизируют ее с React.
- Экран рисуют на уже используемой библиотеке команды, и отчет называет каждый нестандартный элемент.
- Разъехавшуюся систему переводят на новые токены с проверкой, что значения не изменились.
- Новый компонент проходит путь от Figma до токенов, кода и историй Storybook одной командой `/new-component`.
Не подходит, если
- Работа идет в другом редакторе: плагин рассчитан на Figma.
- Нужна быстрая одноразовая картинка, а не система.
- Нет настольного приложения Figma: браузерная версия вызывает ошибки соединения.
Пример запроса к агенту
Запусти /throughline:start и собери дизайн-систему для моего продукта: токены, иконки Lucide и базовые компоненты в открытом файле Figma.Ограничения
Нужны настольное приложение Figma (рекомендован тариф Professional или выше ради режимов переменных) и агент: Claude Code, Cursor, Codex или совместимый с AGENTS.md. Плагин регистрирует локальный MCP-сервер `figma-console-mcp` версии 1.40.8 и работает через плагин Desktop Bridge в Figma. Токен доступа Figma нужен только для вызовов, недоступных через мост. Навыки пишут файлы в репозиторий, а при выборе создают репозиторий GitHub и добавляют шаг CI для Chromatic с `CHROMATIC_PROJECT_TOKEN`. Каждую отправку в GitHub навык показывает и ждет вашего согласия. Режим без библиотеки пока в планах.
Как отключить. Выполните `/plugin uninstall throughline@throughline-marketplace`. Файлы дизайн-системы в репозитории и локальный MCP-сервер `figma-console-mcp` удаляйте отдельно, токен Figma отзовите в настройках аккаунта.
Частые вопросы
С чего начать в Claude Code?
Выполните `/throughline:start`. Команда спрашивает, строите ли вы систему или рисуете на готовой библиотеке, и запускает настройку окружения.
Как поставить в Cursor или Codex?
Выполните `npx @radicool/throughline@0.34.0 init --target=cursor` или `--target=codex`. Для общего варианта с AGENTS.md есть `--target=generic`.
Нужен ли токен Figma?
Необязателен. Он нужен только для вызовов, которые Desktop Bridge не умеет, например чтения опубликованной библиотеки. Токен не пересылается в чат.
Что уходит в GitHub и Chromatic?
Только то, что вы выберете: репозиторий создается после вашего согласия, а Storybook загружается в Chromatic, если вы добавили этот шаг CI. Без этих шагов ничего не уходит.
Как узнать, что экран разошелся с системой?
Выполните `/throughline:drift`: команда находит экраны с вариантом, который убрали, и компоненты, изменившиеся под ними.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
ПлагиныСкилл для дизайн-систем Figma: чтение, аудит с проверкой WCAG, создание компонентов и выгрузка токенов в код.
Oh My Design (3x-haust)
Oh My Design
Плагин ведет дизайн-задачу одной командой /ultradesign: изучает проект, строит, рендерит, чинит и проверяет интерфейс
Figma Console MCP
figma-console-mcp
MCP-сервер Figma для дизайн-систем в обе стороны: читает и записывает переменные, компоненты и стили, синхронизирует токены с кодом
designlang
designlang (design-extract)
CLI и MCP-сервер, который читает готовый сайт и достает из него дизайн-систему: токены DTCG, конфиг Tailwind, переменные Figma и брендбук
Генератор DESIGN.md для Figma
DESIGN.md generator for Figma
Плагин Figma от TypeUI: собирает стили файла и генерирует DESIGN.md и SKILL.md для Claude Code, Codex и Cursor
Бесплатный двусторонний MCP-сервер для Figma: превращает дизайн в код с учетом фреймворка и возвращает код обратно на холст
Коротко о README
Описаны режимы работы с Figma, что строится в Figma, в коде и в документации, проверки, ретрофит существующей системы, требования, что запускается на компьютере и установка для Claude Code, Cursor и Codex.