Design Canvas
The core workspace in design mode: an infinite React Flow canvas with zoom and pan, hosting multiple design nodes.
Opening
- In design mode, auto-opens when the agent generates HTML
- Or manually add from the right panel “+” menu
Node Types
| Node | Description |
|---|---|
| Webpage | Live HTML rendering (local sandbox) or iframe URL |
| Sections | Block-based prototype; Alt+click to select “user clicks, agent 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
- Independent snapshots per node; rollback anytime
Design Tokens
Project-level design tokens for theming: colors, fonts, spacing change across all prototype pages at once.
Export
- HTML: fully runnable file
- PNG: full-page screenshot for reports