The design board your agent draws on

Your agent writes each screen as a plain HTML file. Frameboard shows it the moment the file lands, and you review it and tweak it by hand.

npx frameboard serve
GitHub
The board canvas as an agent draws a landing page and two phone screens

From a file to a screen you signed off

One take per step, playing beside the step you are reading.

  1. The agent drawing the plant screen, its outline marking the frame it holds

    Every frame is a plain HTML file

    The moment your agent writes one, it is on the board, so it draws with the tools it already has.

  2. A finding badge on the home frame the agent is still editing

    Break a rule, and the agent hears at once

    Clipped text, a missing font, or a color set for one theme only is flagged on the frame and reported to the agent that wrote it.

  3. The inspector open on a selected element, its fill picked from a token

    Small things, you just fix

    Change text, color, and type by hand, picking colors from your own tokens. Only what you touch changes.

  4. A note thread on the landing frame, with the agent reply under the request

    Bigger things, you ask

    Pin a note on a frame or an element, and it reaches your agent straight away. Its reply lands in the thread.

  5. The plant frame split between its version before and now

    See exactly what it changed

    Compare a frame with the version before the agent touched it.

  6. The landing, plant, and home frames shown in dark

    Every frame, in light and dark

    Flip one frame or the whole board, and capture either theme as a PNG.

Watch the whole thing

Seventy seconds, from an empty board to a finished one.

The launch film's closing frame

Built for an agent to run

Every command prints JSON on request, never stops to ask, and exits with a code an agent branches on.

  • The check names the rule, the frame, and the element that broke it
  • A Claude Code plugin checks each frame the agent writes and hands it your notes as they arrive
$ frameboard check sprout/app/home
sprout/app/home.html  clipped  sprout/app/home is 442 px wide in its 390 px width, so the board cuts it off, <div> at element 8 first past the box and 1 more element is. Reflow or shorten the content to fit its 390 px width, since frame fit sets the height alone.
frameboard: Checked 1 frame, 1 finding.

# the agent narrows the list and writes the frame again

$ frameboard check sprout/app/home
Checked 1 frame, no findings.

Start a board in an empty folder

Runs on macOS and Linux, with Node 22 or later or with Bun.

  • No account
  • No hosted service or MCP server
  • Any folder, with or without git
  • MIT licensed
npx frameboard serve
GitHub