> ## Documentation Index
> Fetch the complete documentation index at: https://subframe-59800133-apg-edit-updates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> View and export code from your designs.

Subframe generates high-quality React code [deterministically](/overview#code-quality-matters) from your designs.

<Note>For a complete guide to working with Subframe code, see the [developer docs](/overview).</Note>

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

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@latest` command for syncing all components in the page or your selection

To learn more about how syncing works, see [syncing components](/concepts/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