---
title: "From a captured frame to code"
description: "Capture a screen, change it on the canvas, and let the agent write the change into the component it came from."
url: https://help.modeinspect.com/en/articles/25-from-a-captured-frame-to-code
collection: "Build mode"
updated: 2026-10-29
language: en
---

# From a captured frame to code

Capture a screen, change it on the canvas, and let the agent write the change into the component it came from.

Capture a screen from a Portal, change it on the canvas, and send it to the build chat. The agent writes your changes into the component the capture came from, and the page in Build Mode shows the result.

![Capture selection takes the order summary card onto the canvas, a drag makes it wider, and Add to Build Chat sends it to the agent](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/RxyDZaJJf8HdmIwdUZOBX4fQfryOQfEDl3xvgte2rDoF5d1jiKl3CeyX0heY4HAYTUWh7CdvuuF.gif)

## How it fits

Start on a Portal. **Capture page** or **Capture selection** puts the screen, or one part of it, on the canvas as real layers. Each layer keeps a pointer to the component and file it came from. See [Capture a live page or selection](https://help.modeinspect.com/en/articles/33-capture-a-live-page.md).

Edit the capture like any other frame: move and resize layers, change text, pick a fill from your design tokens, adjust the layout in the design panel. You do not have to be exact. The agent reads the difference between the capture and the code.

Right-click the frame and pick **Add to Build Chat**. Build Mode opens with the frame above the message field as a Source frame chip. The element it came from is outlined on the stage. Send with an empty field and the agent gets the instruction "Apply this frame's design changes to its source code." Or type what matters and what does not. See [Attach a frame to the build chat](https://help.modeinspect.com/en/articles/22-attach-a-frame-to-the-build-chat.md).

The agent edits the source file. The page on the stage reloads with the change, and the reply names the file and shows how many lines changed. From there you review the code changes and open a pull request.

![Build Mode after the build: the order summary on the stage has a light blue background, and the agent's reply names the changed file with a +1 −1 count](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/xiT1hVDYQLSBNYW4avuKi7qCrcg7uPLbWWdfyuI3k42yv5Zw0SCs8YZOvjHGhkuLCswtzl7TdO1.png)

## What it does not do

-   A frame you drew has no source. The agent needs to be told where it goes, see [Attach a frame to the build chat](https://help.modeinspect.com/en/articles/22-attach-a-frame-to-the-build-chat.md).
    
-   The agent does not copy pixels. It changes the code, so the result uses your codebase's own classes and tokens.
    
-   Images you attach are references for the agent, see [Attach images to the build chat](https://help.modeinspect.com/en/articles/24-attach-images-and-files.md).
    

## Next

-   [Attach a frame to the build chat](https://help.modeinspect.com/en/articles/22-attach-a-frame-to-the-build-chat.md)
    
-   [Attach images to the build chat](https://help.modeinspect.com/en/articles/24-attach-images-and-files.md)
    
-   [Capture a live page or selection](https://help.modeinspect.com/en/articles/33-capture-a-live-page.md)

## Related

- [What is Build Mode](https://help.modeinspect.com/en/articles/30-what-is-build-mode.md)
- [Open Build Mode and move around your app](https://help.modeinspect.com/en/articles/29-open-build-mode-and-move-around-your-app.md)
- [Preview your app at different screen sizes](https://help.modeinspect.com/en/articles/27-preview-your-app-at-different-screen-sizes.md)
- [Attach a frame to the build chat](https://help.modeinspect.com/en/articles/22-attach-a-frame-to-the-build-chat.md)
- [Attach images to the build chat](https://help.modeinspect.com/en/articles/24-attach-images-to-the-build-chat.md)