Skip to main content
Capture turns what your app shows in the Preview into a design on the canvas. You get real, editable layers, not a screenshot, placed next to the Preview. Use it to explore a change on top of the real screen, then hand the result to your agent to build. Before you start · Desktop app · Free plan

​
Capture a screen onto the canvas

  1. Start the Preview and open the screen you want, in the state you want, such as a dialog open or a form filled in. See Preview your running app.
  2. Select the Preview and click Capture in the bar at the bottom of the canvas.
  3. Hover over your app to highlight a part of it, then pick what to capture:
    • Click the highlighted element, or press Enter, to capture that part.
    • Press ⌘ Enter, or ⌘-click, to capture the full page.
A conference site running in a Preview with Capture on, the Setting type by hand session card highlighted with its size, 376 × 469, and the capture shortcuts bar over the app Use the arrow keys to move the highlight, and ⇧ ↑ or ⇧ ↓ to move to the parent or a child. You can scroll your app while you pick. Press Esc, or click Capture again, to cancel. The bar shows Capturing page or Capturing selection, then Adding to canvas… and Added to canvas. The design appears to the right of the Preview, selected, as one step you can undo. The captured session card on the canvas to the right of the Preview, selected as a frame named Frame What you get:
  • A part is a frame at the size it had on screen.
  • A full page is the whole page, not just the part in view, at the Preview’s current width. To capture a phone layout, change the Preview’s screen size first.
  • Where your app’s CSS uses a variable, such as var(--brand), and your file has a variable with the same name, the capture is linked to it. The fonts your app uses are added to the file.
A capture is a copy. It doesn’t change when your app changes, and changing it doesn’t change your app. Capture again to get the current screen. You can capture a Preview you started, or a published Preview, in a file you can edit.

​
Copy a capture to another file

A capture is ordinary layers, so copy it like any design:
  1. Select the capture on the canvas and press ⌘ C.
  2. Open the other file and press ⌘ V.
In a Preview tab, there’s no canvas to place it on, so Capture copies the design instead and says Captured to clipboard. Paste it into any file.

​
Explore on top of a capture and send it to your agent

  1. Change the capture like any design: move things around, change text, colors and spacing, or ask your agent in the chat to try ideas on it.
  2. Select the frame you want built and press ⌘ L to add it to your message, or right-click it and choose Add context. When Attach selection to chat is on in Settings > Preferences (it is by default), selecting it is enough.
  3. In the chat, say what to do with it, for example “update the settings page in the app to match this design”, and send.
Your agent reads the design from the canvas with Wonder MCP and changes your code to match. To build it in a specific worktree, send it from that worktree’s chat.

​
Let your agent capture

Ask your agent, for example “capture the pricing page onto the canvas”. It captures its own worktree’s Preview the same way, next to the Preview, and can capture a single part of the page. The chat shows Capturing the Preview onto the canvas. Your agent only captures when you ask it to.

​
How this differs from Wonder Capture

Both use the same capture engine, so the picker, its shortcuts and the result are the same.

​
If something goes wrong

  • Capture is greyed out. Start the Preview.
  • There’s no Capture button. You can capture only a Preview you started, or a published one, in a file you can edit, with only the Preview selected.
  • This design has too many elements to capture. Pick a smaller part of the page instead of the full page. The same goes for too deeply nested, too large and too complex.
  • Nothing was added. Capturing stops if your app reloads or goes to another page, or if the Preview stops. Wait for the page to settle and capture again.
  • A video or animation looks frozen. Videos and <canvas> drawings come through as still images.
  • An image or font is missing. Images and fonts from other sites come through only when that site allows it.
  • Only part of a long list came through. Lists that draw only the rows in view capture only those rows.