Who is Subframe for and what should you know before using it?

Updated

Subframe is for people who build software and want design and code to stay connected: a design tool connected to your codebase, plus a coding agent with a canvas. It fits you if you already have a codebase (or a locally running app) and want to move between designing on a canvas and editing the live app without switching tools. If you only need static mockups, or you have no code to connect to, it is not the right starting point.

What Subframe actually is

The site describes it in one line: "Design & build in one tool." Two pieces make that up:

  • A design tool connected to your codebase — the canvas is not a separate artifact from your app.
  • A coding agent with a canvas — the agent works alongside the visual surface, not in a chat window detached from it.

The homepage headings frame the same idea from different angles: "Canvas. Browser. Agent.", "Infinite canvas built for code.", "Preview & edit your live app.", "One agent for design & code.", and "Designing & building is a roundtrip."

That last phrase is the clearest statement of intent: work is meant to loop, not flow one direction from design to handoff.

Who it is for

Subframe suits you if:

  • You have a codebase you can connect to the tool.
  • You want to preview and edit a running app, not just a picture of it.
  • You think in terms of iterating on real UI rather than producing specs for someone else to implement.
  • You are comfortable with a workflow where design and code changes happen in the same loop.

It is a weaker fit if:

  • You need a standalone mockup tool with no code behind it.
  • You have no app or repository to point it at.
  • You want a purely visual tool and do not want an agent touching code.

What you need before you start

Based on what the site shows, plan on having:

  1. A codebase — the tool is described as connected to your codebase, so there has to be one.
  2. A way to run the app locally — the interface shows a localhost:3000/home launch target, which implies a locally running app is part of the loop.
  3. A project structure the tool can read — the agent is shown researching the codebase to plan a feature, so it needs access to your source.

If any of those are missing, the core value — designing against your real app — does not apply.

How the roundtrip works in practice

The page evidence shows the pieces side by side:

  • A Canvas view and a Browser view, with a Launch localhost:3000/home control.
  • A layers/stack panel (Home, Stack, Card, Card, Card) alongside the canvas.
  • An Agent panel where a task is described in plain language.

The agent example on the page is a feature plan: "Plan a new feature for geotagging where photos are taken. Research the codebase to come up with an implementation approach, and capture the existing product to explore a few new designs of how to present it."

That single prompt shows the intended division of labor:

Step What happens
Research The agent reads the codebase to understand the current implementation
Plan It proposes an implementation approach
Capture It takes the existing product as the starting point
Explore It tries a few new designs for presenting the feature

So the loop is: describe intent → agent researches code → you see designs on the canvas → you preview against the live app → you edit. The "roundtrip" is that design changes and code changes inform each other rather than being handed off once.

Pricing and plan levels

The site signals more than one tier:

  • A "Start for free" entry point is shown on the page.
  • An "Upgrade to Pro" link points to app.subframe.com/settings/billing.
  • A docs page covers "pricing and plans" and specifically "AI credits", which suggests agent usage is metered in some way.

What this means for you: there is a free way to begin, and there is a paid tier. Because AI credits are called out separately, expect agent-driven work to have usage limits that differ from the base plan. The exact prices, credit amounts, and what each tier includes are not stated in the material here — check the billing settings page and the pricing-and-plans docs before committing.

Common things to check before you commit

  • Does your stack match? The tool connects to a codebase; confirm yours is supported before investing time.
  • Can you run the app locally? The preview-and-edit loop depends on a running app, so a project that only builds in CI will be awkward.
  • How much agent usage will you need? Since AI credits are a named concept, estimate your usage against the plan you are considering.
  • Is your team ready for a shared design/code loop? This tool collapses two roles into one surface; that is an advantage for small teams and a change in process for larger ones.

If you have a codebase, a locally runnable app, and you want design and code to stay in the same loop, Subframe is built for exactly that. Start with the free entry point, connect a real project, and test the roundtrip on one feature before deciding on Pro.