A design board is only as useful as the frames on it — and those frames need to hold three different things: exported image mockups, live HTML app shells, and real React components. Most canvases force everything through one rendering path (usually an image), so live mockups go stale and agent-authored frames can't be real UI.

ArtPiece is an authoring marker for one frame. Its content is a JSON-friendly discriminated union — {kind:"image"}, {kind:"html"}, or {kind:"node"} (your JSX children, resolved by id). All three render inline so they scale crisply under the world transform. A stable id is the agent handle; pending marks an agent-staged frame.

Inside an <ArtBoard.Section>, drop <ArtPiece id="a" content={{ kind: "image", src }} /> for a mockup, content={{ kind: "html", html }} for a live shell, or pass JSX children for a kind:"node" piece. Set pending for agent proposals. Each piece's kebab menu exports PNG/HTML self-contained.