How to Get Started with Subframe

Get started with Subframe by downloading the macOS desktop app from subframe.com/downloads, then following the Quickstart in the docs. The desktop app is the entry point for the core workflow: it connects to your local codebase, your development server, and a coding agent, so you can move between visual design and real code in one place. If you only want to read about the product first, the Introduction page covers how the pieces fit together before you install anything.

What Subframe is

Subframe is a design tool for your codebase, built on HTML and CSS. You design with the same primitives used to build the web, and it supports React and Tailwind as first-class citizens when they're part of your stack.

It brings three tools together:

• Canvas — design with HTML and CSS on an infinite canvas.
• Browser — preview your live app, edit it visually, and capture it as a design.
• Agent — work with Claude Code, Codex, or Subframe AI credits across your designs, browser, and code.

Step 1: Download the desktop app

The desktop app is what lets Subframe work with your local codebase, development server, and coding agent. Download it for macOS at subframe.com/downloads.

Note that the documentation only lists a macOS download. If you're on another platform, check the downloads page for current availability rather than assuming a build exists.

Step 2: Open your app in the built-in browser

Once installed, open your local app in Subframe's built-in browser. This is the starting point of the typical workflow — you're looking at your real running application, not a mockup.

Step 3: Edit it live

Use Inspect to change the running page visually. This lets you adjust what you see in the browser directly, without leaving the app to edit source files by hand.

Step 4: Design on the canvas

Capture the page or an element as an editable design, then explore bigger changes on the canvas. This is the step where Subframe stops being a preview tool and becomes a design tool: you're working with your actual UI as the starting material.

Step 5: Ship with the agent

Ask the agent to implement your design in your connected codebase. Because the agent works across your designs, browser, and code, the changes it makes are grounded in what you designed rather than described in a separate spec.

The workflow at a glance

The loop runs both directions — design to code and back — so you can start from either a running app or a canvas design depending on what you're doing.

Common questions before you start

Do I need a coding agent set up first? The agent step works with Claude Code, Codex, or Subframe AI credits. You can complete the browser and canvas steps without deciding on an agent, but you'll need one connected to implement designs into your codebase.

Can I use it without a local project? The documented workflow assumes a local codebase and development server, since the desktop app connects to both. If you don't have a running app to open, start with the Quickstart to see what's required.

Where do I go next? The Quickstart is the intended next step after the Introduction. The docs also cover managing pricing and plans if you need account-level details.

What to do first

If you want to evaluate Subframe, read the Introduction and skim the workflow above. If you want to actually use it, download the macOS app, run through the Quickstart, and try the four-step loop on a small change in your own project — that will tell you quickly whether the canvas-to-agent handoff fits how you work.