Design

Design is where you build and refine your pages. It has three parts:

• The ribbon across the top of the stage: theme, typography, colours, page animation, preview options, and undo and redo.
• The page workbench on the left: your pages, the selected page's settings, its blocks, and the Inspector for the selected block.
• The artboard in the centre: a live preview of the selected page, exactly as it will render.

The artboard

The artboard always shows your current draft, including unsaved changes and the AI's changes as they land.

• Click a block to select it and open it in the Inspector.
• Hover a block in the workbench to highlight it on the artboard.
• Click a link to follow it to another page of your site. If no page exists at that path yet, Qanvas tells you (No page at /path yet) instead of leaving the preview.

Dual-modality workflow

Design in Qanvas is an ongoing, iterative collaboration that pairs conversational AI with direct visual control:

• Conversational iteration with project awareness: Use chat to explore alternate directions, restructure sections, test new copy, or scaffold entire pages. The AI partner reads your active route, design tokens, and project assets, so you refine in context rather than prompting from scratch.
• Direct visual inspector control: When you want to adjust layout modes, padding, typography scale, surface bands, or color tokens, make point-and-click edits directly in the Inspector. Routine visual adjustments happen instantly with zero LLM latency and zero API token cost.

Preview options

On the right of the ribbon:

Control	Options
Preview theme	Light or dark
Preview viewport	Desktop, Mobile or Full page

Full page fills the window with the page, as a visitor would see it. Press Esc or select the exit button to return.

Empty pages

When the selected page has no blocks yet, the artboard offers a starting point:

• If your Blueprint brief is not complete yet: Open blueprint & Define Strategy, or Add first block manually.
• Once the brief is complete: Generate Page with AI, which composes the whole page from your strategy, or Add First Block.

Undo and redo

Undo and Redo sit at the end of the ribbon (Ctrl+Z / ⌘Z and Ctrl+Shift+Z / ⌘⇧Z). Their tooltips name the step they will undo or redo. One undo reverts a whole AI change. See Saving, undo and recovery.

The styling controls are covered in Themes, colours and typography, and the workbench in Pages and Blocks and the Inspector.