Skip to main content
Here’s how to connect your agent and codebase, then make a design change to your live app.

Get started in Subframe, from design to code and back.

1

Download the desktop app

Download Subframe for macOS or Windows ↗ and sign in.
2

Connect your agent

Connect Claude Code or Codex using your existing subscription.
The Agents dialog with Connect buttons for Claude Code and Codex, and the Subframe agent already connected
3

Connect your codebase

Select your local repository. Your code stays on your machine.
The beit-rima repository on the main branch connected above the Agent chat message box
4

Open your app

Start your development server and open your app from a new tab.
A new tab with localhost:3000 listed under Detected servers, along with its page title, repository, and branch
5

Make design changes

Use Inspect to edit an element on the live page, or capture the page to explore bigger changes on the canvas.
6

Ship with the agent

Ask the agent to implement your design in your codebase. Agent chat automatically includes the design or browser page you’re viewing.
Last modified on October 22, 2026