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 Cursor or Claude Code MCP servers
  • Setting up a new Replit project

​
Inspecting page code

  1. Open code mode by clicking Code in navbar
  2. Click on Inspect tab
  3. You should now see all the code for your page

​
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 command for syncing all components in the page or your selection
To learn more about how syncing works, see syncing components.

​
Exporting using MCP server

  1. Click on Prompts tab
  2. Copy a prebuilt prompt, or copy the MCP link and ask your question directly