> ## Documentation Index
> Fetch the complete documentation index at: https://docs.subframe.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Install Subframe, connect your codebase, and ship your first change.

Here's how to connect your agent and codebase, then make a design change to your live app.

<Steps>
  <Step title="Download the desktop app">
    [Download Subframe for macOS ↗](https://subframe.com/downloads) and sign in.
  </Step>

  <Step title="Connect your agent">
    [Connect Claude Code or Codex](/agent/connecting-an-agent) using your existing subscription.
  </Step>

  <Step title="Connect your codebase">
    [Select your local repository](/agent/connecting-your-codebase). Your code stays on your machine.
  </Step>

  <Step title="Open your app">
    [Start your development server and open your app](/browser/previewing-your-local-app) from a new tab.
  </Step>

  <Step title="Make design changes">
    [Use **Inspect**](/browser/making-live-edits) to edit an element on the live page, or [capture the page](/browser/capturing-as-designs) to explore bigger changes on the canvas.
  </Step>

  <Step title="Ship with the agent">
    [Ask the agent to implement your design](/agent/making-code-changes) in your codebase. Agent chat automatically includes the design or browser page you're viewing.
  </Step>
</Steps>


## Related topics

- [Quickstart](/learn/quickstart.md)
- [Introduction](/overview.md)