Boards

When an agent builds UI, a board is where your team sees it. The agent puts each screen on the board with show_on_board, the board opens beside it, and everyone with the link watches frames arrive as they're made. Each frame is checked against your brand when it lands. Comments, sketches and messages left on the board go back to the agent on its next call.

How it works#

1. 1

   The agent puts screens up

   Ask your agent to show you what it's building, or to "put the screens on a board". It sends each screen or state as a self-contained page, one frame each, grouped in rows such as Light and Dark. Sending a frame again makes its next version.

2. 2

   The board opens beside the agent

   In the Claude app or Codex, the agent opens the board in the app's built-in browser pane, right beside your conversation. In a terminal, it runs npx archetype-os board <link>, which opens the board in its own window on the right of your screen. Every board is also on the Create wall, with the designs, images and campaigns made with your brand. The board an agent is working on rises to the top.

3. 3

   Each frame is checked

   Every frame is held up against the brand as it lands, the same check check_against_brand runs on code. Colours and type are checked at once; the look for rebuilt components follows a few seconds later. A frame with issues shows them in red, with the token to use instead, and the agent gets the same list. Values the brand doesn't define yet are listed as gaps, not issues.

4. 4

   Your team leaves notes

   Pick Comment and click a spot on a frame, or Pen and draw on it. The note records what the frame shows there, so the agent knows which element you meant. A message in the rail goes to the agent about the whole board.

5. 5

   The agent reads them and pushes again

   Each note shows whether it's Waiting for the agent, the Agent has it, or Resolved. The agent acts on what it read and updates the frames it changed (usually by sending just the edited lines, not whole pages), then marks the notes it addressed resolved. It can also wait on the board for your next note instead of asking you to come back to it.

Inspect a frame#

Turn on Inspect at the top of the board and point at anything in a frame: its size, spacing, colours and type show, each named by the brand token it matches, and a value the brand doesn't have shows as it is. An element inside a kit component is named as that component.

Select a frame and press its expand button (or double-click it, or press F) to see it on its own, as large as it fits. The panel beside it lists what the frame is made of: what the brand check found, the kit's components, and every colour, typeface and corner, with anything not in the brand first. Use the arrow keys to step through the board and Esc to go back.

Agents mark the kit's components as they build (data-component="button"), which is how the board knows a Button from a box.

Who sees a board#

A board shares the way everything on Create does, from the same Share menu, with the same three settings:

Only the person whose agent made a board changes who sees it. Its link never changes. See Sharing what you make.

What a frame can hold#

A frame is one HTML page: inline CSS, images and fonts from https:// addresses. Scripts don't run, which is what lets the board read what a note points at. Frames are sized in CSS pixels, 390 × 844 by default, and a board holds up to 60.