Introducing Layout Mode

How It Works

“What if the testimonials went above the pricing table?” “I want a sidebar here, about this wide.” “Build me a dashboard that looks roughly like this.” That kind of thing is hard to describe in text. So you just sketch it out.

Press L and the toolbar switches into layout mode. Drop components where you want them, grab existing sections and drag them around, or clear the page and wireframe something new. Everything you do turns into structured output with positions, sizes, and labels.

Wireframing

Toggle “Wireframe New Page” and the current page fades out. There’s an opacity slider if you want to reference what’s already there while you work.

A purpose field at the top lets you give context: “landing page with pricing table and testimonials” or “settings page with tabs.” That gets included in the output so the agent knows what the boxes are for.

Wireframe placements and rearrange changes keep their state separately. You can toggle wireframe on and off without losing work in either.

Rearranging

Every section of the page becomes draggable in layout mode. Hover over a section and it gets outlined with its CSS selector label. Drag to reorder. You can rearrange sections and place new components in the same session.

Component Palette

The palette has 65+ component types across five categories: Layout, Content, Controls, Elements, and Blocks. Pick a type, drag it onto the page, resize it. Each placement records the component type, pixel dimensions, and position on the page.

Under the Hood

Layout mode extends the Annotation Format Schema to AFS 1.1. Annotations now carry a kind field: feedback, placement, or rearrange. Each kind has its own structured data so agents know what to do with it.

With the MCP server running, your agent sees layout changes as they happen.