Design Canvas
The design canvas is a standalone workspace: an infinite canvas you can zoom and pan, hosting multiple design nodes.
Opening
- Auto-opens when the agent generates HTML
- Or manually add from the right panel “+” menu
Node Types
| Node | Description |
|---|---|
| Webpage | Live rendering preview (locally isolated) or an embedded online page |
| Sections mode of a webpage node | Block-based prototype; Alt+click to select and report “wherever the user clicks, LanMate edits” |
Workflow
- Describe the interface you want
- Agent generates HTML and pushes to a canvas node
- Preview live; click elements to specify what to change
- Agent iterates; canvas refreshes automatically
- Export HTML or full-page PNG when satisfied
Multi-Option Comparison
- Place multiple nodes on the canvas
- Compare options side by side
Other Node Types
- Image assets: drag in or generate images as canvas material
- Design documents: write design notes, requirements, and decisions on the canvas
- Sticky notes: temporary notes that don’t become deliverables
Design Tokens
Theme switching that applies per canvas owner: colors, fonts, and spacing change together, affecting only Sections-mode webpage nodes.
Export
- HTML: fully runnable file
- PNG: full-page screenshot for reports