How does the Subframe design-to-code workflow work?

Updated

Subframe is a design tool for your codebase, built on HTML and CSS. It brings a canvas, a browser, and a coding agent together in one place so you can move from design to code and back. This workflow applies when you have a local app and want to make visual changes that get implemented in your actual codebase.

The four-step workflow

Subframe describes a typical loop 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.

Step 1: Open your app in the built-in browser

You start by loading your local app inside Subframe's browser. This gives you a live view of the running page rather than a static mockup, so any visual edit you make is grounded in the real rendered output.

Step 2: Edit the running page with Inspect

Inspect lets you change the running page visually. Instead of editing source files and waiting for a reload, you adjust what you see in the browser. The result is a live, modified page you can then work from.

Step 3: Capture as a design and work on the canvas

Once the page looks closer to what you want, you capture the page or a single element as an editable design. That design lives on the canvas, where you can explore larger changes. The canvas is an infinite surface for designing with HTML and CSS, with first-class support for React and Tailwind when they're part of your stack.

Step 4: Implement with the agent

Finally, you ask the agent to implement your design in your connected codebase. Subframe supports working with Claude Code, Codex, or Subframe AI credits across your designs, browser, and code. The agent closes the loop by turning the design back into code.

What makes this different from a static design tool

Subframe is built on HTML and CSS, so you design with the same primitives used to build the web. That means the design and the code share a vocabulary, which is what allows the round trip from design to code and back. The three tools — canvas, browser, and agent — are unified rather than split across separate applications.

Where to run it

Use the desktop app to work with your local codebase, development server, and coding agent. It's available for macOS at subframe.com/downloads.

Getting started

If you want to try the workflow, Subframe points you to its Quickstart. The documentation also covers managing pricing and plans for account-level administration.