The design canvas: designs you can grab and tweak

Ask the chat to "design a landing page for my coffee shop" and a finished page renders in a new tab, with the chat sliding into the left sidebar beside it. Hover a headline and a little chip names it. Click, and a properties panel pops open. This is the design canvas.

The canvas is where you edit the designs the AI makes. UI mockups, landing pages, posters, one-pagers, and slide decks all open here, rendered pixel-for-pixel like a browser. Click any element to restyle it or rewrite its text, and for a bigger change the AI is one message away.

One HTML file is the whole design

There's no special format to learn. Each design is one complete HTML file in your workspace's top-level designs/ folder, with the styles inline in a <style> block and no external CSS or JS.

That file is the single source of truth: the canvas, the code view, your browser, and the PNG/PDF exports all read the same bytes. Every edit autosaves right back into it.

• Ask the AI: when the agent creates a design (its create_design tool), the canvas opens front and center as a new tab. A design from a background run appends as a background tab instead, without stealing focus.
• The file tree: click any .html or .htm file under designs/ and it opens on the canvas. HTML anywhere else opens in the code editor. The folder decides.
• From code: an HTML file opened as code shows a "View as canvas" button in the titlebar; the canvas dock has the reverse, "View as code". Switching closes the other tab, so there's always one view per file.
• There's no sidebar icon or shortcut for a "design mode"; you always arrive through a design file or one the AI just made.

Pages and decks

The canvas treats every design as one of two kinds, and figures out which one automatically:

Design file

One self-contained HTML document under designs/. It's the single source of truth shared by the canvas, code view, browser, and exports.

Page

A responsive design document. The canvas scrolls it like a browser tab.

Deck

A design made of fixed 1280×720 slides, shown one at a time with a filmstrip.

Semantic name

The plain name the canvas gives an element: Slide, Heading, Text, Image, Icon, Button, Link, List, Table, or Group. Never a raw HTML tag.

Element chip

The purple chip that appears in the composer when you select something, so your next chat message targets exactly that element.

Filmstrip

The strip of slide thumbnails along the bottom of a deck. Click to jump to a slide, right-click to duplicate, reorder, or delete.

Design with the chat beside you

While a design tab is active, the chat pane slides into the left sidebar, the same full chat you know, with thread, composer, and attachments. A session switcher opens a "Chats" dialog so you can jump between conversations without leaving the canvas. The design file rides along in the composer as a deletable @-mention chip, so "make it blue" just works, with nothing to re-attach.

Select an element and that file chip turns into a purple element chip, like "Heading · Q3 results…". Your next message then carries the design file name, the slide, the element's DOM path, and its exact source markup.

The DOM path is that element's exact address in the document, so the agent edits precisely that node and nothing around it. When the edit lands, the canvas hot-reloads and flashes an indigo outline around what changed for about 1.6 seconds.

Edit elements yourself, no AI round-trip

Hover anything and a chip names it in your language: Heading, Button, Image, Group. "Group" just means any container, so you never see "div".

Click to select and the properties popover opens beside it. Its breadcrumb shows up to four ancestors, so you can hop straight to a parent Group.

Styling, text edits, duplicate and delete, new text blocks, and slide management are all local DOM edits that run the same way every time. They're instant, free, and never call the model.

• Typography section: "Size", "Weight" (400–800), "Color", "Line height", "Letter spacing", "Opacity %", "Align" (left / center / right).
• Box section: "Padding", "Margin", "Radius", "Background", "Width", "Height", all in px.
• Text section: a textarea that mirrors the element's text (for text-editable elements only).
• Number fields commit when you press Enter, click away, or pause for a moment. They never react to every keystroke, and Escape reverts a value you're still typing. If a box field's four sides differ, it shows "Mixed"; type a number and all four sides snap to it.

With the popover closed, a micro-toolbar sits at the top-right of your selection with "Properties", "Edit text", "Ask AI…", "Duplicate", and "Delete". Right-click for the same actions plus "Select overlapping…".

The dock: slides, zoom, export

A glass pill floats at the bottom-center of the canvas (its accessible name is "Design tools"). Here's what's on it, left to right:

PDF export captures the whole design: one page per slide at 1280×720 for decks, or a single tall page at full height for pages. PNG is always one frame, the current slide or the page.

The save dialog suggests a name like <design>.pdf, <design>.png, or <design>-slide-N.png. The finished file is revealed in Finder or Explorer. The titlebar adds "Open in browser" for the real HTML file, and its ⋯ menu carries "Export as PDF" too.

Autosave, conflicts, and undo

Edits autosave about 0.4 seconds after you stop. ⌘S or the titlebar save badge saves right away, and closing the tab runs the same checked save.

Every save first checks whether the file changed underneath you. If something else wrote it first, the disk version wins and your edits wait behind a banner.

The banner reads "A newer version of this file replaced your unsaved edits." and carries a "Restore my edits" button. Restore makes your version win; dismissing keeps the disk version. Nothing ever vanishes quietly.

• Undo history holds up to 100 steps. Quick tweaks to the same field within a 1.2-second window collapse into one step.
• History resets whenever the file reloads from disk, whether from an agent edit, a conflict, or an external write. Disk becomes the new baseline.
• Your selection survives reloads. After an agent edit, the canvas re-selects the same element by its DOM path, as long as it's still there.
• The canvas re-checks the file every time the app window regains focus, so an open design never quietly falls out of date.

That's the design canvas: one self-contained HTML file you can open three ways, on the canvas, as code, or in your browser. The AI does the heavy lifting, and the properties popover handles everything you'd rather nudge yourself. Next, you'll wire your other apps and data sources into the agent's reach.