subframe.com

Subframe's agent works on both sides of a product at once: it can research your codebase to plan how a feature would be implemented, and it can capture your existing product so you can explore new ways to present it. That makes it useful when you want a feature plan and design directions from the same starting point — for example, planning photo geotagging by studying the codebase and then exploring how geotagged photos could be shown in the current UI.

One agent for design and code

Subframe describes itself as "a design tool connected to your codebase, and a coding agent with a canvas," with the agent positioned as "one agent for design & code." The intended workflow is a roundtrip: designing and building feed into each other rather than happening in separate tools.

In practice, the agent's work falls into two connected activities:

• Researching the codebase to understand how something is currently built and propose an implementation approach.
• Capturing the existing product so new designs can be explored against what already exists, instead of in isolation.

What the agent can do

Plan a feature from the codebase

The clearest example in Subframe's own material is planning photo geotagging. The described task is to "plan a new feature for geotagging where photos are taken" by researching the codebase to arrive at an implementation approach. So the agent's output here is a plan grounded in your actual code, not a generic spec.

Explore new designs from the live product

The same task continues: "capture the existing product to explore a few new designs of how to present it to" users. The agent uses the current product as the reference point, then generates design options for presenting the feature.

Work against a running app

Subframe's canvas shows a live app alongside the design surface — the page evidence includes a localhost:3000/home launch target and a browser view next to the canvas. That means the agent's design and code work is anchored to a running app you can preview and edit, rather than a static mockup.

How the pieces fit together

When this fits

This setup suits you if you want feature planning and design exploration to start from the same source of truth — your existing code and product — rather than handing a spec to design and a separate spec to engineering. If your work is purely visual with no codebase connection, or purely backend with no UI to present, the design-and-code roundtrip adds less.

For pricing and plan details, Subframe points to its billing settings and a docs page on pricing and plans and AI credits; check those for current terms rather than assuming a free tier.

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:

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.

Yes. Subframe is built around a roundtrip between design and code, and one of its core surfaces is a browser view of your running app. The page evidence shows a canvas that can launch localhost:3000/home and display it alongside a layers panel and a stack of card components. That means you are not looking at a static mockup — you are looking at the app itself, and edits made in the design surface are meant to correspond to that running interface.

What "live preview" means here

Subframe describes itself as "a design tool connected to your codebase, and a coding agent with a canvas." The relevant heading is "Preview & edit your live app," and the broader framing is "Designing & building is a roundtrip."

The practical reading of that:

• Input: a running app, referenced by a local address such as localhost:3000/home.
• Action: the canvas loads that page and lets you work on it — inspecting structure, editing design, and using an agent for code changes.
• Expected result: the change you make in the design surface maps back to the app, rather than living only in a separate design file.

This is the difference between a design tool that exports specs and a tool that sits on top of the actual running product.

The three surfaces: Canvas, Browser, Agent

The page lists its main areas as "Canvas. Browser. Agent." They are not separate products — they are three views of the same work:

The evidence also shows a "Layers" panel with a "Home" tree containing a "Stack" of "Card" components. So the canvas is not just visual — it exposes the component hierarchy of the page you are previewing.

A concrete example from the page

The clearest illustration in the evidence is a planning task:

"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 to..."

This is the roundtrip in one sentence. The agent researches the codebase, captures the existing product, and explores new designs — all before or alongside implementation. You are not switching between a design tool, an editor, and a browser to do this.

What this changes about the workflow

If you are used to a design-then-handoff process, the shift is:

1. You point Subframe at your running app.
2. You edit in the canvas, seeing the live result.
3. The agent handles the code side of the change.

The page's own summary is "Design & build in one tool," and the roundtrip framing suggests the loop can repeat — design, build, preview, adjust — without leaving the tool.

What to check before relying on it

The page evidence supports the preview-and-edit capability and the localhost connection. It does not spell out every constraint, so verify these against your own setup:

• How your app is served. The example uses localhost:3000/home, so a locally running dev server is the implied starting point.
• Which frameworks and component structures map cleanly to the canvas layers view.
• How agent-made code changes are reviewed before they land in your codebase.

Pricing and plan limits are referenced on the site (there is an "Upgrade to Pro" link and a docs page about AI credits), so if agent usage matters to you, check the plans page rather than assuming a free tier covers it.

The short answer: Subframe previews your live app in a browser view and lets you edit against it, with an agent bridging design and code. Whether that fits your stack depends on how your app is served and how much of the code-change loop you want automated.

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.

Subframe's canvas is built for code rather than for static mockups. It connects to your codebase, so the things you arrange on the canvas — pages, layers, cards, stacks — correspond to real structures in your app instead of being a separate visual artifact. The point is to keep design and implementation in one loop: you work on the canvas, and the result maps back to code.

What "built for code" actually means

A conventional design canvas treats every element as a drawing. Subframe's canvas treats elements as components and layout structures that already exist in, or are intended for, your codebase. The site describes it as "a design tool connected to your codebase, and a coding agent with a canvas," and frames the workflow as "designing & building is a roundtrip."

That roundtrip is the key difference. On a pure visual canvas, the handoff to code is a translation step — someone reinterprets the mockup. On Subframe, the canvas is meant to be the same surface where the code lives, so there is less to reinterpret.

How the canvas connects to your app

The page evidence shows the canvas working alongside a live app rather than in isolation:

• Canvas and Browser side by side. The interface shows a Browser view running localhost:3000/home next to the Canvas. You can preview and edit your live app, not just a picture of it.
• Structured objects on the canvas. The canvas holds named, typed items — Home, Pages, Fieldnote, Redesign, Layers, Home, Stack, Card, Card, Card. These read like real page and component structure, not freeform shapes.
• An agent that reads the codebase. One example task on the canvas is: "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." The agent researches the codebase and captures the existing product, then you explore designs on the canvas.

So the connection runs in both directions: the canvas reflects what's in your app, and changes you explore on the canvas are aimed at the code, not at a detached file.

Why this reduces design-to-code loss

The usual loss happens at the boundary: a designer produces a layout, a developer rebuilds it, and details drift. Subframe's approach collapses that boundary by keeping one agent for design and code and one canvas that both sides reference.

A concrete way to see it: if you're adding a photo geotagging feature, you don't mock up a screen in one tool and then ask an engineer to wire it up. You point the agent at the codebase to research an approach, capture the current product, and iterate on presentation directly on the canvas — with the app previewable at localhost:3000 beside it.

What to check before relying on it

• Your codebase needs to be connectable. The value depends on Subframe reading your actual code, so confirm your stack is supported before assuming the roundtrip works for you.
• The canvas is for building, not just exploring. If you only need static visuals, a plain design tool may be simpler; the code connection is the reason to choose this.
• Pricing and plan limits aren't specified here. The site references an "Upgrade to Pro" billing page and a docs page on pricing and plans and AI credits, so check those for current terms rather than assuming a free tier covers your use.

If your goal is to keep design decisions and code structure in sync instead of translating between them, Subframe's canvas is designed for exactly that. If you just need throwaway mockups, the code connection adds overhead you won't use.