docs.subframe.com

Subframe is a design tool for your codebase, built on HTML and CSS. It is used to design and build web software in one place by combining three tools that are normally separate: a canvas, a browser, and a coding agent. If you work with a local codebase and want to move between visual design and real code without switching tools, Subframe is aimed at that workflow.

The three tools it brings together

Subframe's core idea is that design and build should happen in the same environment. It does this through three components:

• Canvas — design with HTML and CSS on an infinite canvas. It has first-class support for React and Tailwind when those are part of your stack.
• 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.

Because it is built on HTML and CSS, you design with the same primitives used to build the web, rather than a proprietary format that has to be translated later.

How the workflow goes from design to code and back

Subframe is designed for a round trip between design and code. A typical workflow looks like this:

1. Open your app — open your local app in the built-in browser.
2. Edit it live — use Inspect to change the running page visually.
3. Design on the canvas — capture the page or an element as an editable design and explore bigger changes on the canvas.
4. Ship with the agent — ask the agent to implement your design in your connected codebase.

The key mechanism here is the capture step: instead of redrawing a page from scratch in a design tool, you take the running page or element and turn it into an editable design. That keeps the design grounded in what the app actually renders.

What you need to use it

Subframe provides a desktop app for working with your local codebase, development server, and coding agent. It is available for macOS, downloadable from subframe.com/downloads.

This matters for choosing it: the desktop app is what connects Subframe to your local codebase and dev server, so the design-to-code workflow depends on running it locally rather than purely in a browser.

When Subframe fits and when it doesn't

Subframe is a reasonable fit if:

• You build web software with HTML and CSS, and especially if you use React and Tailwind.
• You want visual editing and design exploration tied directly to a real, running app.
• You want an agent to implement designs into a connected codebase.

It is less of a fit if you need a standalone design tool that produces static mockups with no connection to a codebase, or if you are not working with a local development setup.

Where to start

The documentation points to a Quickstart as the entry point once you have the desktop app. For managing plans, there is a dedicated page on managing pricing and plans. Note that the docs do not state whether Subframe is free, so check the pricing page rather than assuming.

Desktop software is a program you install and run directly on your computer's operating system (Windows, macOS, or Linux), rather than inside a browser tab. You should choose it over a browser extension or web app when your task needs deeper system access, steadier performance, or offline capability — for example, real-time meeting transcription that captures audio from multiple apps. Browser extensions are lighter and install in seconds, but they live inside one browser and inherit its limits.

What "desktop software" actually means

A desktop app is installed on the machine and runs as its own process. It can:

• Read and write local files without a download/upload round trip
• Access system-level resources like the microphone, speakers, camera, and other running apps
• Keep working when the browser is closed or the network drops (depending on the app)
• Persist settings and data locally

This is different from a web app, which runs in a browser tab and depends on a live connection and browser permissions, and from a browser extension, which is a small add-on that modifies or extends one browser's behavior.

Desktop app vs. browser extension vs. web app

The practical takeaway: extensions and web apps are convenient and low-commitment; desktop apps trade a heavier install for capability and stability.

When a desktop app is the better choice

Pick desktop software when the task depends on one or more of these:

• Capturing audio from multiple sources at once — a meeting where you're on a call and taking notes. A desktop notetaker can tap system audio and the mic; a browser extension generally can't reach outside its tab.
• Real-time transcription and live summaries — Otter's Meeting Agent is described as supporting real-time transcription, live chat, automated summaries, insights, and action items. That kind of continuous processing benefits from a local process rather than a single browser tab.
• Long or resource-heavy sessions — recording and transcribing for an hour is more stable outside a tab you might accidentally close.
• Working across apps — if your workflow spans a video call app, a document, and a notes tool, a desktop app can sit across all of them.

Choose a browser extension instead when you only need to enhance one website (for example, adding a button to a specific web tool), want zero install friction, and don't need system-level access.

How to choose and install a desktop app safely

1. Confirm the task fits a desktop app. If you only need to tweak one website, an extension is lighter. If you need system audio, local files, or offline use, go desktop.
2. Check system requirements. Match the OS (Windows/macOS/Linux) and version. Download only from the vendor's official site — for Otter, that's otter.ai.
3. Review permissions before granting. A meeting/transcription app will ask for microphone (and possibly screen or system audio) access. Grant only what the task needs.
4. Install and sign in. Follow the vendor's installer. If the app requires an account, expect a login step.
5. Verify it works. Run a short test — record 30 seconds and confirm transcription or capture appears as expected.
6. Check update and pricing terms. Otter lists a pricing page at otter.ai/pricing; check it for current plan limits rather than assuming a free tier.

Troubleshooting common desktop software problems

• Install fails — confirm OS version meets requirements, free up disk space, and re-download from the official source (a corrupted installer is a common cause).
• App crashes on launch — update to the latest version, restart the machine, and check whether a security tool is blocking it.
• No audio captured — re-check microphone/system-audio permissions in OS settings, not just in the app.
• Sync or login issues — verify your network and credentials; if the app stores data locally, confirm it isn't blocked by a firewall.
• Extension works but desktop doesn't (or vice versa) — they use different permission models; a feature available in one may not exist in the other.

If your goal is AI meeting transcription with live summaries and action items, a desktop app is usually the more capable choice; if you just need a small tweak inside one website, a browser extension is the faster path.

Subframe is built on HTML and CSS, with first-class support for React and Tailwind when they are part of your stack. It works with Claude Code, Codex, or Subframe AI credits as the coding agent, and the agent operates across your designs, browser, and code. This applies when you use the desktop app against a local codebase and development server; the docs describe the desktop app as the way to work with your local codebase, dev server, and coding agent, with a macOS download available.

Technology stack

Subframe is described as a design tool for your codebase, built on HTML and CSS, so you design with the same primitives used to build the web. The documentation calls out two specific stack integrations:

• HTML and CSS — the foundation of the canvas and the design model.
• React — first-class support when React is part of your stack.
• Tailwind — first-class support when Tailwind is part of your stack.

The phrasing "when they're part of your stack" matters: React and Tailwind support is framed as conditional on your project already using them, not as a requirement to adopt them.

Coding agents

Subframe brings three tools together in one place — a canvas, a browser, and an agent — and the agent options named in the docs are:

Subframe AI is consumed through credits, and those credits are described as spanning your designs, browser, and code — meaning the same credit pool covers agent work across all three surfaces rather than being split per tool.

What the agent actually works across

The agent isn't limited to generating code from a design. Per the docs, you work with the agent "across your designs, browser, and code." In the typical workflow, the agent is the final step: after you capture a page or element as an editable design and explore changes on the canvas, you ask the agent to implement your design in your connected codebase.

Choosing based on your setup

• If your project is React + Tailwind, you're in the stack the docs explicitly support with first-class treatment.
• If you use Claude Code or Codex already, the docs name both as compatible agents, so you can keep your existing agent rather than switching.
• If you'd rather not run an external agent, Subframe AI credits are the built-in option.
• If you need to work against a local codebase and dev server, the desktop app is the documented path, and it's listed for macOS.

One thing the documentation does not specify on this page: which agent is best for which task, or how credits are priced. For plan and pricing details, the docs point to a separate "Managing pricing and plans" page rather than the introduction.

Subframe's pricing and plan management documentation lives at docs.subframe.com/admin/pricing-and-plans, under the "Managing pricing and plans" section of the admin docs. That page is the place to look for how plans are handled inside Subframe. The introduction page on docs.subframe.com does not list prices or plan tiers, so treat the admin page as the entry point rather than a source of exact figures.

What the documentation covers

The Subframe docs are organized around how the product works rather than around a pricing table. The introduction describes Subframe as a design tool for your codebase, built on HTML and CSS, that combines three things in one place:

• Canvas — design with HTML and CSS on an infinite canvas, with first-class support for React and Tailwind when they're part of your stack.
• 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.

The desktop app is what connects to your local codebase, development server, and coding agent, and it's available for macOS at subframe.com/downloads. Pricing and plan management sit in the admin area of the docs, separate from these product mechanics.

How to get there

1. Go to docs.subframe.com.
2. Navigate to the admin section of the documentation.
3. Open the page titled Managing pricing and plans, at docs.subframe.com/admin/pricing-and-plans.

The expected result is a page covering plan-related administration. If you're looking for the cost of a specific tier or what each plan includes, that detail belongs on this page or on the main subframe.com site — the introduction page itself doesn't carry it.

What to check on the page

Because the introduction doesn't state prices, plan names, or billing terms, verify these directly on the pricing and plans page:

• Which plans exist and what each one includes
• How plan changes are managed
• Any limits tied to plans, such as AI credit usage for the agent

Don't assume the product is free or that no login is required — the available documentation doesn't say either way, so confirm on the page itself.

Related questions

If your actual goal is getting started rather than billing, the docs point to a Quickstart as the next step after the introduction. The typical workflow described there runs: open your local app in the built-in browser, edit it live with Inspect, capture the page or an element as an editable design on the canvas, then ask the agent to implement the design in your connected codebase.

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.