Design Canvas
Design it whereyou are talking about it
The design canvas is a board of pages docked beside the chat. Ask for a landing page, three versions of a hero, or a mobile and a desktop layout, and they appear as frames rendering live. Click the heading you want changed, say what is wrong, and watch the page update in place. Each frame is an ordinary HTML file in your project, so nothing has to be exported to be real.
Related features
A board of real pages, not a picture of one
Ask for a landing page and it lands on the board as a frame you can read at full size. Each frame is one HTML file under your project, at the size you asked for (desktop 1280x800, mobile 390x844, or anything you name). The pane renders it live: when the AI edits the file, a watcher sees the write and the frame redraws where it sits.
- Frames live at .plexon/canvas/<board>/frames/ inside your project
- No separate format and no export step: a frame is a page
- Drag the background to pan, the wheel to zoom, Fit to frame the whole board
- Your git history carries the frames like any other file
Three directions, side by side
Ask for a few alternatives and they arrive as frames laid out left to right, so you compare them at their real size instead of flipping between tabs. The AI screenshots each frame after it writes it and reads its own work back, which is why the second version usually fixes something you would have had to point out.
- A new frame is placed beside the rightmost one, never on top of it
- The AI reviews its own frame with a screenshot before starting the next
- Pick one and keep working on it; the others stay on the board
- Send an options set from the chat to the canvas to compare the candidates there
Point at the part you mean
Move the pointer over a frame and the element under it outlines. Click it and a small toolbar appears with its tag name. From there you can leave a comment, hand it to the AI, read its markup, or type straight into the text. The Layers panel shows the same page as a tree, and Properties shows what the element actually computes to, including the values a stylesheet gives it.
- Layers is a searchable tree; picking a row selects the element on the frame
- Ctrl-click (Cmd on a Mac) picks several elements, and Properties marks every value they disagree on as Mixed
- Properties reads live computed values: size, weight, colour, padding, radius, opacity
- The opacity slider changes the frame while you drag it and undoes as one step
- The HTML tab shows the element and everything inside it, markup coloured, and takes an edit
- Double-click text to place the caret and edit in place; the file is saved for you
Every comment the board has, in one list
A comment the AI answers and resolves in the same turn sits on the frame for about a second. The Comments panel is where you read it back. It lists every thread under the frame it was left on, and the number on the toolbar button counts the ones still waiting on somebody. Click a row and the board flies to that element and puts the conversation back on the frame.
- Filter the list to Open, Resolved or All, and narrow it to one frame
- A resolved thread keeps a muted pin with a check where it was left
- Reopen one from the list or from the card when the answer did not land
- Arrow keys walk the rows, Enter opens a thread, N jumps to the next one still waiting
- Fold a side panel away and it leaves a 28px strip with a chevron to bring it back
The board and the chat are one conversation
Say "make the hero taller on the desktop one" and the AI edits that file. You do not have to say where anything is. Click an element first and the message carries it: the composer shows what you scoped to, and the AI gets the selector, the markup and a cropped picture of exactly that element.
- Pin a comment on an element and it waits on the frame until the AI answers it
- Ask AI sends the comment as a request and resolves the comment when the work lands
- A rewrite is patched into the page in place, so the scroll position and your selection survive
- A large rewrite plays back over a few seconds instead of blinking
- Undo and redo work on the board: Ctrl+Z steps back through moves, resizes and style changes
Start from a design you already have
Import PDF, in the More menu, puts a PDF on the board one frame per page at the page’s real size; dropping the file on the board does the same, with the first page where you dropped it. The words on a page stay selectable, so a comment pins on a heading and the AI reads the copy. Imported frames are never edited: ask for a rebuild and an editable page lands beside the original, keeping the document’s own typefaces, its logos and pictures, and the position of everything on the page. The import saves those fonts and images beside the frame and writes down where each line, rule and picture sits, so the rebuild is measured rather than guessed from a screenshot.
- Up to 40 pages per import; pages appear as they render, and Stop is one click
- The page text sits in a plain file beside the frame, so the AI works from the real copy
- The page’s geometry sits in a second file: fonts, text lines, rules, bands and images
- The AI can run the same import from the chat with its canvas tool
- Delete the frames to take an import back; there is no undo for it
A Figma frame from its link
From Figma URL, under Add frame, takes the link Figma gives for a selected frame and puts that frame on the board at its own size, drawn by Figma itself. A file link imports the first page’s frames, up to 12. The first time, Plexon asks for a Figma personal access token and holds it until the app closes; Settings keeps it for good.
- Faithful without local fonts: Figma renders the frame, Plexon adds the selectable text layer
- The AI also receives the design’s colours, type and layer tree, to rebuild it as an editable page beside the import
- Token, not an OAuth app: the same token the Figma tool uses, asked for once
- Imports go into the board’s own folder, so they travel with a backup or a transfer
What you settle stays settled
The Memory panel holds the board’s own house rules, the decisions that came out of your comments, and any frame you pinned as a reference. When the AI reads enough settled decisions to see a pattern, it offers one rule for you to accept or dismiss. Accepting writes it into the board’s guidelines and keeps the previous copy, and the panel lists it.
- Guidelines are a markdown file you can edit by hand in the panel
- Every earlier version is kept, and the panel lists them
- A proposed rule says which decisions it was read from
- Pin a frame as a reference and the AI matches it instead of guessing
Show it, save it, publish it
Present fills the window with one frame at its own size, and the arrow keys walk the board. The frame stays live while it is up, so an edit the AI makes lands on the screen you are both looking at. When you are done, take the board with you as images, as a PDF, or as a web address.
- Export PNG or JPG writes the selected frame at twice its size; Copy image puts it on the clipboard
- Export as PDF writes one file with a page per frame, each page the frame’s own size
- Publish puts the whole board on a web address: one page listing every frame at the size you designed it
- Publishing needs company hosting on your account and a board inside a project
It stays on your computer
A board is a folder in your project. Nothing about a canvas reaches the Plexon server, and a publish uploads only the frames and the page that lists them. Your comments, the decisions and the board’s house rules stay on your machine.
- One folder per board, holding canvas.json and one HTML file per frame
- Show in folder opens it; delete removes the folder and its frames, with no undo
- A publish excludes canvas.json, the guidelines, their history and pinned references
- A board travels in a transfer bundle and in cloud backup, like a dashboard or a data source
What the design canvas gives you
Frames that render live
Each frame is one HTML file in your project. The AI writes it, the watcher sees it, the frame redraws.
Click the thing you mean
Hover to outline, click to select. The message you send carries the selector, the markup and a crop of that element.
Layers and properties
A searchable tree of the page and a panel of its computed values, including what a stylesheet gives it.
Comments on the frame
Pin a comment where the problem is. It stays there until the AI answers it and resolves it.
Versions side by side
Three directions at full size on one board, each reviewed by the AI with a screenshot before the next one starts.
House rules the AI follows
Guidelines, decisions and pinned references live with the board, so a later chat starts from what you agreed.
Bring a piece of any page over
Pick elements in the browser and send them to a board as editable frames, with the page styles written in. Restyle them, then ask for the change to go back into the site.
Documents and code, not only designs
A plan or a source file goes on the board as a page you can edit. Code blocks get their own editor, and the frame exports as Markdown or as source files.
Every frame keeps its history
See the states a frame has been in, what changed between two of them, and put an older one back. Right-click the frame, History.
Present and export
One frame full screen with the arrow keys, or PNG, JPG and a PDF with a page per frame.
Publish the board
One web address listing every frame at its designed size. Needs company hosting and a board inside a project.
Import a PDF or a Figma frame
A PDF becomes one frame per page with selectable words; a Figma link becomes a frame at its own size, drawn by Figma.
Files you already own
Frames sit in your repository and your git history carries them. Nothing about a board reaches the Plexon server.
Connects to
Nothing here works alone. See the whole map for how the pieces fit together.
What feeds it
AI Chat & Modes authors this.
Ask for a page, three versions of a hero, or a mobile and a desktop layout, and each one lands on the board as a frame you can read at full size.
Dynamic UI Widgets feeds this.
Open on canvas takes the page a widget is already showing and adds it to a board; Compare on canvas lays every candidate out side by side.
Where it goes
This renders into Publish Sites.
Publish puts the whole board on a web address as one page listing every frame at the size you designed it.