Начать бесплатно

Передайте файл Figma кодовому агенту — вместе с правилами, как ему следовать.

Загрузите .fig, и Broom прочитает систему внутри — переменные с их названиями, значениями и режимами, стили и компоненты с вариантами, — а затем запишет её в виде токенов, документации, правил и навыков для вашего кодового агента. Сам файл остаётся ровно таким, какой есть.
Начать бесплатно

3 бесплатных запуска. Карта не нужна.

Экран хендоффа из Figma в приложении Broom: зона для файла .fig с пометкой, что отправляются только данные дизайна, а изображения не покидают ваш компьютер.Вкладка «Правила дизайна» в приложении Broom: слева дерево папок пакета правил, справа открыт CLAUDE.md со списком компонентов, токенов и навыков.

Загрузка и правила, которые она пишет, — так, как показывает приложение

Слева загружается .fig; справа — вкладка «Правила дизайна» одного запуска, его файлы деревом. Показано дерево Ledger — примерной системы, которую мы держим в приложении.

Система из вашего файла, записанная для вашего агента.

Вы получаете собственную систему файла — в файлах, которые читает ваш агент. Не новый дизайн и не экраны.

  • Найденная система

    Переменные с режимами, стили и компоненты — так, как они есть в файле, чтобы вы проверили разбор, прежде чем агент начнёт на нём строить.

  • Что уже выглядит сгенерированным

    Там, где сам файл ушёл к шаблонным решениям — вплоть до угла, который не повторяет скругление вокруг него, — хендофф об этом скажет. Это отмечается для вас и остаётся как есть.

  • Токены, которые импортирует ваш код

    CSS-переменные, конфиг Tailwind, тема Tailwind v4, W3C DTCG JSON и те же значения на Dart, Swift и Kotlin.

  • Система с документацией

    DESIGN_SYSTEM.md — для системы целиком и по странице на компонент в docs/components/.

  • Правила и навыки — названиями из файла

    CLAUDE.md, AGENTS.md и .cursorrules направляют агента к навыкам, написанным названиями из вашего файла, а не к общим советам.

  • Путь обратно в Figma

    figma/README.md переносит токены обратно в Figma.

  • DESIGN_SYSTEM.mdВся система — так, как она есть в файле
  • docs/components/По странице на компонент
  • tokens/Значения, которые импортирует ваш код
  • tokens.cssCSS-переменные
  • tailwind.config.jsКонфиг Tailwind
  • tailwind.v4.cssТема Tailwind v4
  • tokens.jsonW3C DTCG JSON
  • native/Dart, Swift и Kotlin
  • .claude/skills/Навыки — названиями из файла
  • CLAUDE.md · AGENTS.md · .cursorrulesНаправляют агента к правилам
  • figma/README.mdПереносит токены обратно в Figma

Пакет в том виде, в каком он распаковывается в корень репозитория. Каждый путь здесь — из тех, что записывает хендофф.

Сам файл, а не ссылка.

Загрузите .fig, который у вас уже есть. В файле весь документ, поэтому Broom читает его целиком.

Ваш компьютер

file.fig

  • Документ
  • Изображения

Broom

Читает его

Документ

Браузер открывает .fig и отправляет в Broom только документ внутри; изображения остаются на вашем компьютере.

  • Уходит только документ

    Браузер открывает файл и отправляет только документ внутри. Изображения из него не покидают ваш компьютер.

  • Больше ничего готовить не нужно

    Ни брифа, ни репозитория. Файл — это всё, что нужно.

Одна загрузка — и у агента есть правила.

  1. 01Выберите хендофф из Figma.

    Вход с надписью «Дизайн готов в Figma. Мы превращаем его в правила для вашего агента».

  2. 02Загрузите .fig.

    Браузер открывает его и отправляет документ внутри.

  3. 03Broom читает систему.

    Переменные с названиями, значениями и режимами; стили; компоненты с вариантами. Он показывает, что нашёл, и отмечает, что уже выглядит сгенерированным.

  4. 04Ваш агент читает пакет.

    Распакуйте его в корень репозитория. CLAUDE.md, AGENTS.md и .cursorrules направляют агента к правилам до того, как он напишет экран.

Он записывает систему и не трогает дизайн.

  • Он не пишет ваши экраны

    Их собирает ваш агент — из пакета, в вашем собственном репозитории.

  • Он не меняет файл

    В ваш файл Figma ничего не записывается.

  • Он не придумывает значения

    И не «исправляет» ваши числа. Противоречие отмечается, а не перезаписывается.

  • Он не проверяет ваш код

    Для уже собранного продукта есть аудит слопа: он читает репозиторий и находит, где тот уходит от своей же системы.

    Как работает аудит слопа

Вопросы перед тем, как загрузить файл.

  • Что уходит с моего компьютера, когда я загружаю .fig?

    Только документ внутри файла. Браузер открывает .fig и отправляет его; изображения из файла не покидают ваш компьютер.

    Broom ничего не обучает на том, что вы отправляете, и по условиям Vertex AI Google тоже этого не делает.

  • Читает ли он переменные Figma и их режимы?

    Да. Он читает переменные файла с их названиями, значениями и режимами, его стили и компоненты с вариантами и показывает найденное, прежде чем что-либо будет записано для агента.

  • Изменит ли хендофф мой дизайн?

    Нет. Он не меняет файл, не придумывает значения и не «исправляет» ваши числа. Противоречие отмечается, а не перезаписывается, а то, что уже выглядит сгенерированным, указывается, а не удаляется.

  • Какие кодовые агенты могут использовать результат?

    Любые агенты, которые читают файлы инструкций проекта. В пакете есть CLAUDE.md для Claude Code, AGENTS.md, который читают Cursor, Codex, GitHub Copilot, Gemini CLI, Windsurf и многие другие, и .cursorrules для Cursor.

  • Можно ли получить токены Tailwind из переменных Figma?

    Да. Система, прочитанная из файла, записывается в виде токенов: CSS-переменные, конфиг Tailwind, тема Tailwind v4 и W3C DTCG JSON, а для нативного кода — версии на Dart, Swift и Kotlin.

  • А если в моём файле Figma беспорядок?

    Тогда разбор это покажет. Хендофф записывает систему, которая есть в файле, и отмечает, что уже выглядит сгенерированным; сам он ваши числа не причёсывает.

    Если файл нужно не записать, а переосмыслить, полный редизайн начинает с него и проектирует систему, которая ему нужна.

    Как работает полный редизайн

Ваш агент получает правила, каким бы путём вы ни пришли.

  • Только убрать AI-слоп

    Облик остаётся. Мы изучаем вашу систему по самому продукту, находим, где код уходит от неё к шаблонным решениям, и пишем правила, чтобы это прекратилось.

    Как работает аудит слопа

  • Дизайн с нуля

    Дизайна ещё нет. Мы создаём облик и правила для вашего агента.

    Как работает дизайн с нуля

Что такое AI-слоп и почему агенты его производят

Дайте агенту систему, которая уже есть в вашем файле.

Загрузите .fig и прочитайте результат, прежде чем агент напишет следующий экран.

Начать бесплатно

3 бесплатных запуска. Карта не нужна.

  • Все результаты на экране — до оплаты
  • Неудавшийся запуск возвращается сам
  • Ваш код не хранится после запуска