What Is Subframe Docs and What Is It Used For?

Updated

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.