Hand your Figma file to your coding agent — with the rules to follow it.

Upload the .fig and Broom reads the system inside it — the variables with their names, values and modes, the styles, and the components with their variants — then writes it down as tokens, documentation, rules and skills for your coding agent. The file itself is left exactly as it is.
Start free

3 credits free. No card needed.

The system in your file, written down for your agent.

What comes back is the file's own system, in files your agent reads. Not a new design, and not screens.

  • The system it found

    The variables with their modes, the styles and the components, laid out as the file has them, so you can check the reading before your agent builds on it.

  • What already reads as generated

    Where the file itself has drifted toward generic defaults, the handoff says so. It is noted for you and left as it is.

  • Tokens your code imports

    CSS variables, a Tailwind config, a Tailwind v4 theme, W3C DTCG JSON, and the same values in Dart, Swift and Kotlin.

  • The system, documented

    DESIGN_SYSTEM.md for the whole of it, and a page per component in docs/components/.

  • Rules and skills in the file's own names

    CLAUDE.md, AGENTS.md and .cursorrules point your agent at skills written with the names your file uses, not general advice.

  • A way back into Figma

    figma/README.md takes the tokens back into Figma.

The file itself, not a link.

Upload the .fig you already have. The file carries the whole document, so Broom reads it in full.

  • Only the document leaves

    Your browser opens the file and sends only the document inside it. The images in it never leave your machine.

  • Nothing else to prepare

    No brief to answer and no repository to connect. The file is the whole input.

One upload, and your agent has the rules.

  1. 01

    Choose Figma handoff.

    The door that says “Your design is ready in Figma. We turn it into rules for your agent.”

  2. 02

    Upload the .fig.

    Your browser opens it and sends the document inside.

  3. 03

    Broom reads the system.

    Variables with their names, values and modes; styles; components with their variants. It lays out what it found and notes what already reads as generated.

  4. 04

    Your agent reads the pack.

    Unzip it at the root of your repository. CLAUDE.md, AGENTS.md and .cursorrules point the agent at the rules before it writes a screen.

Timed on our own runs: a Figma handoff finished in 8 seconds. Your file decides how close to that you land; we do not promise a number.

It writes the system down and leaves the design alone.

  • It does not write your screens

    Your agent builds them, from the pack, in your own repository.

  • It does not change the file

    Nothing is written back to your Figma file.

  • It does not invent values

    Nor does it “fix” your numbers. A contradiction is noted, not overwritten.

  • It does not audit your code

    For a product that is already built, the slop audit reads the repository and finds where it drifts from its own system.

    How the slop audit works

Questions before you upload a file.

  • What leaves my machine when I upload a .fig?

    Only the document inside the file. Your browser opens the .fig and sends that; the images in it never leave your machine.

    Broom trains nothing on what you send, and Google's Vertex AI terms say Google does not either.

  • Does it read Figma variables and their modes?

    Yes. It reads the file's variables with their names, values and modes, its styles, and its components with their variants, and lays out what it found before anything is written down for your agent.

  • Will the handoff change my design?

    No. It does not change the file, it does not invent values, and it does not “fix” your numbers. A contradiction is noted, not overwritten, and what already reads as generated is pointed out rather than removed.

  • Which coding agents can use the result?

    Any agent that reads a project's instruction files. The pack carries CLAUDE.md for Claude Code, AGENTS.md, which Cursor, Codex, GitHub Copilot, Gemini CLI, Windsurf and many others read, and .cursorrules for Cursor.

  • Can I get Tailwind tokens from my Figma variables?

    Yes. The system read out of your file is written as tokens: CSS variables, a Tailwind config, a Tailwind v4 theme and W3C DTCG JSON, with Dart, Swift and Kotlin versions for native code.

  • What if my Figma file is messy?

    Then the reading shows it. The handoff writes down the system your file has and notes what already reads as generated; it does not tidy your numbers on its own.

    If the file needs rethinking rather than writing down, a full redesign starts from it and designs the system it should have.

    How a full redesign 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.

  • Design from scratch

    No design yet. We create the look and the rules for your agent.

What AI slop is, and why agents produce it

Give your agent the system your file already holds.

Upload the .fig and read what comes back before your agent writes another screen.

Start free

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