[MaggieAppleton]

Wireframes drawn by the Planner were wordy, always stacked, and looked like finished UI inside a dotted frame. This makes the wireframe fence a low-fidelity sketch language: grey placeholders instead of copy, grids and proportional rows, sidebars flush to the frame, components drawn at their own width. The change is additive, so every existing fence still parses and renders.

Before

After

Language

• New kinds: box (outlined area, optional label), fill (grey block), lines n= (grey text bars), icon, grid cols=.
• Sizing: w=1..12 (share of a row), h=xs..xl, width=sm|md|lg (box, card or panel), and repeat=2..12 to draw a collection once.
• Flags: flush (row or header touches the frame edges), shaded (tinted surface or selected option).
• Placeholders: button labels are optional, and nav and list take n= placeholder items.
• Bound: expanded size (repeats, items, placeholders) is bounded by the existing 400-part limit, with capped arithmetic so nested repeats can't overflow.

Renderer

• One hairline frame. The dot grid and inset ground are gone.
• Greys come from Chopin's scale: --color-inset, --color-selected, gray-300 and gray-400.
• Flush rows become edge-to-edge columns with single dividers. A vertical nav in one becomes a shaded sidebar.
• Narrow containers stack rows and switch the dividers to horizontal.
• Notes mark only the first copy of a repeated part. The text alternative lists that part once.

Planner

WIREFRAME_AUTHORING and the creating-chopin-plans skill now tell the Planner to:

• draw the shape, not the copy
• label only key areas
• use lines, image and fill in place of content
• draw a collection once with grid and repeat
• give a single component a width

Both use a new app-shell example that is checked to parse.

Verification

• bun test packages/diagrams apps/server/src/agent skills: 410 pass.
• bun run types and bun run ci pass.
• Checked in Chromium on the diagram gallery at wide and narrow widths.

🤖 Generated with Claude Code