Agents on one canvas
What the clip shows
Kaptea (Angelo Libero, 2026-10-20): three agents restyle three frames on one design canvas at the same time. Each agent has its own coloured cursor and name tag on the frame it owns. One left sidebar lists In review, Doing and Done with an Undo on each row. Clicking a frame opens a small card with what the agent did ("Made Eyebrow and Heading"). The card has Keep, Undo, a before/after slider and a follow-up box.
What Claude does (Claude Design, Anthropic Labs, Apr 2026)
- A chat panel sits next to a live canvas.
- You refine the result three ways: chat, inline comments pinned on the design, and direct edits.
- Claude makes adjustment sliders on the fly for the thing you're tuning.
- It reads your brand and codebase first, so drafts stay on-brand.
- It hands off to Claude Code, or exports PDF, PPTX or HTML.
- It runs one agent. Claude Design has no parallel agents and no per-change Keep/Undo queue. That part is Kaptea's edge, and ours to take.
What we already have
| Piece | Where | State ||---|---|---|| tldraw Design canvas (frames, components, UI blocks) | `DesignCanvasEditor.tsx`, `design-canvas-sync.ts` | live || Agent skill that edits the canvas | `views/design/design-canvas-agent.ts` via pane_artifact | live, **one agent** || Social size sets (linked frame copies) | `social-frames.ts` | live || Agent presence, cursors, suggestions + Accept all | `feat/agent-watch-*` (3 branches, migration 096) | **built, not merged** || Change-set Accept/Reject UI | `ChangeSetReview.tsx` (Code mode) | live || Delegate board (fan work to bots) | Project Delegate | live |The gap, and how we close it
| Kaptea / Claude Design | Allternit today | Build ||---|---|---|| N agents in parallel on one canvas | one agent per pane | **Frame claims**: an agent claims a frame (or a size set) before editing; the skill refuses to edit shapes in a frame another agent holds. That's the "never step on each other" rule. || Agent cursor + name tag on its frame | agent-watch cursors (doc/sheet only) | Extend agent-watch presence `anchor` to `{frameId}`. Draw the tag on the tldraw overlay layer in the agent's colour. || Activity sidebar: In review / Doing / Done | none on canvas | **Canvas activity rail** fed by the session tool stream and agent-watch suggestions. Rows open the frame when you click them (no hover menus). || Keep / Undo per change, before/after | Code mode change sets; agent-watch suggestions | Each agent turn on a frame becomes **one change set**: a tldraw snapshot before and after. Keep commits it; Undo restores the before snapshot. Add a before/after wipe slider on the frame. || Follow-up on a frame | chat only | A follow-up box in the frame card goes to **that frame's agent** session. || "Restyle these three frames" → split | manual | A **Split** action sends one prompt to N bots, one frame each, through the Delegate fan-out. The Doing row shows "Split 0/3". || Inline comments (Claude) | artifact comments (doc/sheet) | Pin comments to frames, using the same thread as agent-watch. || Generated sliders (Claude) | none | Phase 2: the agent emits `tweak` controls for a frame (radius, spacing, hue); the card renders them. || Handoff to code (Claude) | Code mode | Phase 2: "Build this" sends the frame JSON plus a screenshot to a Code-mode session. |How a parallel run flows
Mockup
Phases and surfaces
- Merge agent-watch first (3 branches, migration 096). The canvas reuses its presence, cost and suggestions contract.
- Phase 1, the Kaptea core: frame claims, canvas cursors and the activity rail. Then Keep/Undo change sets, frame follow-ups and Split to N bots.
- Phase 2, Claude Design parity: pinned frame comments, generated sliders, and "Build this" to Code mode.
- Phones (ai.allternit.com phone + m PWA): the canvas is view-and-review. The rail is a sheet. A tap on a frame opens the Keep/Undo card and follow-ups. No dragging shapes.
- Docs: user guide
guides/design-canvas-agents.mdx, dev doc for claim and change-set tools, nav,check_links.py.