Skip to main content
Every tile on the Canvas is a frame. Frames are what you select, drag, and act on. This page covers the frame kinds, the per-frame action bar that surfaces on selection, and the capabilities you trigger from it: Build and Focus.
Canvas with three frames laid out on the board: a Website (Scroll Hero), an APEX X1 Design System, and a Design mockup of the APEX X1 supercar, with the floating toolbar (Chat, Draw, Edit, Generate) at the bottom

​
Frame kinds

The two main kinds are Artifacts (live, app-backed surfaces) and Designs (mockups). The frame’s top-left header shows which kind it is.
Whether a Design frame behaves as a static image or an interactive prototype depends on the Interactive frames capability. When it’s enabled, Design frames respond to clicks and form input like a real page; otherwise they render as a snapshot you can iterate on but not click through.

​
Preview on different devices

See how a design looks on different screen sizes. Ask Agent to show you a mobile, tablet, or desktop version, for example “Show me the mobile version of this page”, and it renders a frame at that size:
  • Mobile: 390 × 844
  • Tablet: 768 × 1024
  • Desktop: 1280 × 720

​
Per-frame action bar

Selecting a frame surfaces an action bar. The actions depend on the frame’s kind.

​
Artifact and Design frames

For Artifact (Website, Slides, etc.) and Design frames, the action bar runs across the top of the frame.
Canvas with an APEX X1 Design frame selected, showing the per-frame action bar across the top with the kind label and the Build, Focus, and more-options actions, the frame attached as a chip in the chat prompt box

A Design frame's action bar: Build…, Focus, and more options.

The action cluster compresses to icons at narrow widths and reveals labels as the frame gets wider. The full set, in left-to-right order: App frames (Website, Slides, Mobile app) show Focus and more options; Design frames add Build… before them. To branch new directions from a selected frame, follow its suggestions. Selecting a frame also attaches it to the next Agent chat message as a snapshot — see What lives on the canvas.
The action bar respects Read-only mode. When Canvas is locked inside a background-task context, the iteration actions hide and only Focus remains.

​
Media frames

Image, Video, and Vector graphic frames show a small floating action bar above the frame. All three kinds share:
  • Replace media: upload a new file to swap into the frame, keeping its position and size on Canvas.
  • Download: save the media file to your computer.
  • Alt text: add alternative text for accessibility and so Agent has more context when the frame is referenced.
A selected video frame of a blue supercar on Canvas with its floating action bar above, showing Replace media, Download (with a tooltip reading 'Download original'), and Alt text controls.

A video frame's action bar: Replace media, Download, and Alt text.

Image frames add two more controls:
  • Crop: trim the image directly on Canvas.
  • Generate video: generate a video clip from the image.
A selected image frame of a yellow supercar on Canvas with its floating action bar above, showing Replace media, Crop, Download, Alt text, and Generate video controls.

An image frame's action bar adds Crop and Generate video.

​
Explore new directions

Selecting a frame surfaces suggestions beside it: one-click directions grounded in what you’re looking at, such as a different layout, a new vibe, or a page your design implies. Each one generates as a new frame alongside the source, so the original stays untouched and you can compare.
A selected Website frame showing an APEX X1 supercar hero, with a Suggested next steps panel beside it offering suggestion chips such as Explore different approaches, Try different layouts, Explore different vibes, and Surprise me

​
Build

The Build… menu on a selected Design frame graduates the design into a live, running app. The same menu also covers applying the design to an Artifact that already exists.
The Build menu open on a selected Design frame (APEX X1 Exact Replica) with the header 'Build or apply your designs', showing 'Build this design', which creates a new artifact, and 'Apply to an existing creation' listing the project's APEX X1 Design System and its Scroll Hero website

​
Build this design

Picking Build this design in the menu starts a new Artifact from the selected Design frame. The new Artifact lands in the project’s artifact list and becomes a live, running app. Build requires Core or Pro.

​
Apply to an existing Artifact

The Build… menu lists every Artifact in the project. Picking one applies the selected Design’s changes to that Artifact — Agent rewrites the Artifact’s code to match the design, leaving the Design frame on the Canvas for reference.

​
Focus mode

Focus mode lets you work with a selected frame full-size while staying in Design.
1

Choose Focus on a frame

Select a frame, then choose Focus in its action bar.
A selected Design frame on Canvas with the Focus action highlighted in the frame action bar.

The Focus action in a selected frame's action bar.

2

Work at full size

The frame fills the view, so you can work on it up close without the rest of the board.
Focus mode showing a Design frame filling the view and an Exit focus button at the top of the board.

Focus mode

3

Return to the canvas

Select Exit focus at the top of the board to go back to the canvas.
  • Canvas — overview and anatomy.
  • Toolbar — the floating toolbar; Generate creates new frames.
  • Elements — the individual pieces inside a frame.
  • Visual Editor — element-level edits inside a focused frame.