Дизайн-система, которой ваш кодовый агент действительно следует.
3 бесплатных запуска. Карта не нужна.
Колода и результат — так, как показывает приложение
Свайпайте настоящие продукты, нарисованные в форме вашего продукта; система возвращается страницами вроде этой, каждый компонент в обеих схемах. Показаны страницы Ledger — примерной системы, которую мы держим в приложении.
Система, которую ваш код импортирует, а не документ, который он пересказывает.
Broom передаёт готовые части одним zip-архивом, который не перезаписывает ваш код.
Компоненты для вашего стека
44 для веб-приложения, 50 для мобильного приложения и 52 для сайта, со всеми вариантами и состояниями, в виде файлов компонентов для React + Tailwind, Next.js + Tailwind, Vue, Svelte и React Native.
Токены для светлой и тёмной темы
Каждое сочетание текста проверено на своём фоне и записано как CSS-переменные, конфиг Tailwind и тема Tailwind v4, W3C DTCG JSON, а также Dart, Swift и Kotlin.
Документация, которую читает агент
DESIGN_SYSTEM.md, по странице на компонент вdocs/components/иfigma/README.md, чтобы перенести токены обратно в Figma.Навыки — вашими названиями
build·states·edge-cases·consistency·review·finish·slop-checkи один для вашего типа продукта: data, mobile или page. В них ваши названия компонентов и ваши числа; CLAUDE.md, AGENTS.md или .cursorrules — только для выбранных вами агентов — направляют к ним агента, а проверка слопа — это скрипт, который он запускает на изменённых файлах.
- Веб-приложение44
- Мобильное приложение50
- Сайт52
Каждый — со всеми вариантами и состояниями.
Навыки в каждом пакете
buildstatesedge-casesconsistencyreviewfinishslop-check
И один для вашего типа продукта: data, mobile или page.
| Стек | Компоненты | Токены | Документы |
|---|---|---|---|
| React + Tailwind | Код | Да | Да |
| Next.js + Tailwind | Код | Да | Да |
| Vue | Код | Да | Да |
| Svelte | Код | Да | Да |
| React Native | Код | Да | Да |
| HTML + CSS | Спецификации | Да | Да |
| Flutter | Спецификации | Да | Да |
| SwiftUI | Спецификации | Да | Да |
| Jetpack Compose | Спецификации | Да | Да |
Несколько ответов или несколько свайпов.
Файл не нужен: покажите свой вкус одним из двух способов.
Быстрый путь
Пролистайте дизайны продуктов и отметьте, что нравится, а что нет. Broom считывает ваш вкус по тем, что вы оставили; нужно хотя бы три оценки.
Полный бриф
Выберите температуру серых — тёплые, нейтральные или холодные, — акцент и фирменные цвета, углы, пару шрифтов, иконки, анимацию, платформы и то, чего вы не хотите видеть никогда. Живое превью вашего продукта следует за каждым выбором.
- Температура серых
- Акцентный цвет
- Углы
- Фирменные цвета
- Пар шрифтов: 11
- Библиотека иконок
- Анимация
- Платформы
- Никогда не показывать
Живое превью
Рядом с каждым визуальным выбором нарисован ваш продукт, со своим переключателем светлой и тёмной темы.
Иконки, которыми вы уже пользуетесь
Компоненты берут иконки из Hugeicons, Lucide, Phosphor, Tabler, Heroicons, Material Symbols, SF Symbols и вашего собственного набора.
Атмосфера для сайта
За крупными секциями: зерно, шум, туман, дуотон и меш-градиент — несколько сразу или ни одной.
Начать заново с продукта, который у вас есть
Выберите «У меня есть продукт», затем «Полный редизайн»: «Облик меняется. Мы начинаем с того, что есть, и с того, почему это не работает, и проектируем систему, которая нужна продукту». Принесите репозиторий или файл Figma — хотя бы одно — и свои причины. Если есть репозиторий, один из ваших экранов пересобирается в новой системе: до и после.
От чистого листа до системы за четыре шага.
01Опишите продукт.
Название, что он делает, для кого он и что это — веб-приложение, мобильное приложение или сайт; затем его категория.
02Покажите свой вкус.
Пролистайте дизайны или ответьте на полный бриф.
03Broom собирает систему.
Токены, компоненты, документация и навыки; каждое сочетание текста проверено в светлой и тёмной теме.
04Ваш агент строит с её помощью.
Распакуйте пакет в корень репозитория; файлы инструкций в нём направят к нему вашего агента.
Он передаёт систему, а не готовые экраны.
Экраны остаются за вашим агентом
Broom не пишет ни одного из них и не меняет ваш код. Агент собирает их из пакета.
Она не уникальна для вас
На похожий бриф может вернуться похожая система.
Она написана на английском
Приложение говорит по-английски, по-русски и по-узбекски. Пакет — на английском, потому что его читают кодовые агенты.
Некоторые стеки пока получают спецификации
HTML + CSS, Flutter, SwiftUI и Jetpack Compose получают токены, документацию и спецификации компонентов. Код компонентов для них будет позже.
Вопросы перед началом.
Нужен ли мне дизайнер или файл Figma?
Нет. Всё начинается с нескольких ответов о продукте или с дизайнов, которые вы пролистываете. Если ваш дизайн уже в Figma, его вместо этого запишет хендофф из Figma.
Как работает хендофф из FigmaМожно ли начать с документа с требованиями?
Да. Перетащите его на первый шаг — .txt, .md, .docx или .pdf, — и он заполнит название продукта, что тот делает и для кого. Поля можно править, а документ читается как контекст вашего продукта.
Можно ли менять результат?
Да. Когда проект открыт, пакет ваш: используйте, меняйте, выпускайте и продавайте с ним. Можно запустить заново с другими ответами; повторный запуск — ещё один запуск.
Работает ли это для мобильных приложений и нативных стеков?
Да. Мобильное приложение получает 50 компонентов. Для React Native это файлы компонентов; для Flutter, SwiftUI и Jetpack Compose — спецификации компонентов рядом с токенами на Dart, Swift и Kotlin и документацией; код компонентов для них будет позже.
Выберите мобильный стек в полном брифе, и он ещё спросит, как должны выглядеть компоненты: нативные компоненты, Liquid Glass или собственные компоненты, одинаковые на всех платформах.
Он сам выбирает шрифты и цвета?
В быстром пути — да: Broom подбирает их по вкусу, который считывает с оставленных вами дизайнов. В полном брифе вы выбираете сами — температуру серых, акцент и до двух фирменных цветов рядом с ним, углы, одну из 11 пар шрифтов и библиотеку иконок, — а живое превью вашего продукта показывает каждый выбор в светлой и тёмной теме.
Чем это отличается от файла DESIGN.md?
Файл DESIGN.md описывает дизайн — его цвета, шрифты и правила, — и агенту всё равно приходится превращать его в компоненты, экран за экраном. Broom передаёт саму систему: компоненты, которые импортирует ваш код, токены в форматах вашего стека, страницу на каждый компонент и навыки с проверкой, которую агент запускает на своей работе.
А если продукт у меня уже есть?
Выберите «У меня есть продукт»: «Полный редизайн», если облик должен измениться, или «Только убрать AI-слоп», если он должен остаться, а уйти должны только шаблонные решения.
Как работает аудит слопа
Ваш агент получает правила, каким бы путём вы ни пришли.
Только убрать AI-слоп
Облик остаётся. Мы изучаем вашу систему по самому продукту, находим, где код уходит от неё к шаблонным решениям, и пишем правила, чтобы это прекратилось.
Хендофф из Figma
Дизайн готов в Figma. Мы превращаем его в правила для вашего агента.
Дайте агенту систему до того, как он напишет следующий экран.
Ответьте на короткий бриф или пролистайте несколько дизайнов — и прочитайте результат.
3 бесплатных запуска. Карта не нужна.
- Все результаты на экране — до оплаты
- Неудавшийся запуск возвращается сам
- Ваш код не хранится после запуска