Skip to main content
Subframe generates high-quality React code deterministically from your designs.
For a complete guide to working with Subframe code, see the developer docs.
There are three tabs in code mode:
  • Inspect — Get code from your designs
  • Installation — Install MCP servers or get setup with an existing codebase or Replit
  • Prompts — Get prebuilt prompts after you install MCP server

​
Installation

Use the Installation tab for the following:
  • Setting up Subframe in your codebase
  • Setting up Claude Code, Cursor, or Codex MCP servers
  • Setting up a new Replit project

​
Inspecting page code

Pages are screens built from components. After designing a page in Subframe, you can copy its React code and add application logic such as API calls, state, and routing in your codebase.
  1. Open the page in Subframe
  2. Click Code in the navigation bar
  3. Open Inspect
  4. Copy the React code
To copy code for part of a page, select the elements first. Inspect shows code for your selection.

​
Inspecting elements

  1. Click on Inspect tab
  2. Click on element you want to inspect
  3. Use dropdown to select what code format you want:
    • React + Tailwind code
    • CSS code
    • Properties

​
Syncing components

  1. Click on Inspect tab
  2. Copy the npx @subframe/cli@latest command for syncing all components in the page or your selection
To learn more about how syncing works, see syncing components.

​
Implementing a page with Agent chat

Agent chat can implement a page directly in your connected codebase. Give it the page in any of these ways:
  • Open the page or its flow, then ask the agent to implement what you are viewing
  • Select the page before opening Agent chat
  • Add the page to your message with an @ reference
  • Copy the page frame and paste it into Agent chat
Then ask the agent to implement the page and describe any application logic it should add. Agent chat automatically includes the page or flow you are viewing and the page you have selected. Learn more about giving your agent context.

​
Implementing a page with an external agent

If your team already uses an external agent connected through the MCP server, copy the MCP link from Prompts and paste it into your agent with your implementation request.
For new workflows, use Agent chat to implement the page.
You can also use the page link to update an existing implementation:
Last modified on September 19, 2026