A design system your coding agent actually follows.
3 credits free. No card needed.
A system your code imports, not a document it paraphrases.
Broom hands over the parts, in one zip that overwrites none of your code.
Components for your stack
44 for a web app, 50 for a mobile app and 52 for a website, every variant and state, as component files for React + Tailwind, Next.js + Tailwind, Vue, Svelte and React Native.
Tokens for light and dark
Every text pairing checked against its background, and written as CSS variables, a Tailwind config and a Tailwind v4 theme, W3C DTCG JSON, and Dart, Swift and Kotlin.
Documentation your agent reads
DESIGN_SYSTEM.md, a page per component indocs/components/, andfigma/README.mdto take the tokens back into Figma.Skills in your own names
build·states·edge-cases·consistency·review·finish·slop-check, and one for your product type: data, mobile or page. They use your component names and numbers; CLAUDE.md, AGENTS.md and .cursorrules point your agent at them, and the slop check is a script it runs on the files it changed.
A few answers, or a few swipes.
No file is needed: show your taste one of two ways.
The quick way
Swipe through product designs and like or dislike each one. Broom reads your taste off the ones you keep; it needs at least three ratings.
The full brief
Choose the temperature of the greys — warm, neutral or cool — the accent colour, the corners, the type pairing, the motion, the platforms, and the things you never want to see.
Starting over from a product you have
Choose “I have a product”, then “Full redesign”: “The look changes. We start from what exists and why it fails, and design the system it should have.” Bring your repository or your Figma file, at least one, and your reasons. With a repository, one of your own screens is rebuilt with the new system, before and after.
From a blank page to a system in four steps.
- 01
Describe the product.
Its name, what it does, who it is for, and whether it is a web app, a mobile app or a website; then its category.
- 02
Show your taste.
Swipe through designs, or answer the full brief.
- 03
Broom builds the system.
Tokens, components, docs and skills, with every text pairing checked in light and dark.
- 04
Your agent builds with it.
Unzip the pack at the root of your repository; its instruction files point your agent at it.
Timed on our own runs: a system from a brief was ready in 23 seconds. That is what happened, not a promise.
It hands over a system, not finished screens.
Your screens stay your agent's
Broom writes none of them and changes none of your code. Your agent builds from the pack.
It is not unique to you
A similar brief can come back with a similar system.
It is written in English
The app speaks English, Russian and Uzbek. The pack is in English, because coding agents read it.
Some stacks get specs, for now
HTML + CSS, Flutter, SwiftUI and Jetpack Compose get tokens, docs and component specs. Component code for these is coming.
Questions before you start.
Do I need a designer or a Figma file?
No. It starts from a few answers about your product, or from designs you swipe through. If your design is already in Figma, the Figma handoff writes it down instead.
How the Figma handoff worksCan I change what comes out?
Yes. The pack is yours to use, change, ship and sell with. You can also run it again with different answers; a re-run is one more credit.
Does it work for mobile apps and native stacks?
Yes. A mobile app gets 50 components. For React Native they come as component files; for Flutter, SwiftUI and Jetpack Compose, as component specs beside tokens in Dart, Swift and Kotlin and the docs — component code for these is coming.
Choose a mobile stack in the full brief and it also asks how the components should look: native components, Liquid Glass, or custom components that are the same on every platform.
Does it pick the fonts and colours for me?
In the quick way, yes: Broom chooses them from the taste it reads off the designs you keep. In the full brief you choose the grey temperature, the accent colour, the corners and the type pairing yourself.
How is this different from a DESIGN.md file?
A DESIGN.md file describes a design — its colours, type and rules — and your agent still has to turn it into components, screen by screen. Broom hands over the system itself: components your code imports, tokens in your stack's formats, a page per component, and skills with a check your agent runs on its own work.
What if I already have a product?
Choose “I have a product”: “Full redesign” if the look should change, or “Just remove AI slop” if it should stay and only the generic defaults should go.
How the slop audit works
Your agent gets its rules whichever way you come in.
Just remove AI slop
The look stays. We learn your system from the product itself, find where the code drifts from it toward generic defaults, and write rules so it stops.
Figma handoff
Your design is ready in Figma. We turn it into rules for your agent.
Give your agent a system before it writes the next screen.
Answer a short brief or swipe a few designs, and read what comes back.
3 credits free. No card needed.
- Everything it writes is yours to keep
- A run that fails returns its credit
- Your code is not kept after the run