What is Subframe and what does it do?

Updated

Subframe is a design tool connected to your codebase, plus a coding agent that works on a canvas. Its stated purpose is "design & build in one tool," which means the design surface and the real application are meant to stay in the same loop rather than handing off static mockups. It fits teams or individuals who want design decisions to land directly in a working app instead of being re-created by hand in code.

The three surfaces

Subframe's own headings describe the product as Canvas. Browser. Agent. Each covers a different part of the workflow:

  • Infinite canvas built for code. A design space that is structured around code rather than around static artboards.
  • Preview & edit your live app. You work against a running application, not a detached picture of one.
  • One agent for design & code. A single agent handles both sides, so design changes and code changes come from the same actor.

The phrase Subframe uses for this is a roundtrip: designing and building feed back into each other. That is the main distinction from a conventional design tool, where the output is a file that someone else implements later.

What the workflow looks like

The page evidence shows the canvas and the browser sitting side by side, with a local app running at localhost:3000/home. Alongside that, an agent is given a task in plain language — in the example shown, planning a photo-geotagging feature by researching the codebase, proposing an implementation approach, and capturing the existing product to explore new designs for presenting it.

So the loop is roughly:

  1. A real app is running and visible in the browser pane.
  2. The canvas holds the design work, connected to the same codebase.
  3. The agent can research the code, propose an approach, and generate design options.

The expected result is that exploration and implementation happen against the actual product, not a separate representation of it.

Who it is for

Subframe is a reasonable fit if:

  • You want design changes to reach real application code without a translation step.
  • You are comfortable working near a codebase and a local dev server.
  • You want an agent that can both investigate code and produce design directions.

It is a weaker fit if your process depends on static handoff artifacts, or if you need a design tool that stays entirely separate from engineering.

Pricing and plans

The site references an Upgrade to Pro action in billing settings and a documentation page about AI credits, which indicates a paid tier and a credit-based system for AI usage. Specific prices, credit amounts, and what the free tier includes are not stated in the available material, so check the billing settings and the pricing-and-plans documentation directly before committing.