Skip to main content

​
Prerequisites

Subframe generates React components with Tailwind CSS. Your project needs:
  • React 16+
  • Tailwind CSS 3.4+
  • TypeScript

​
Install Subframe

Start from a new project or install in an existing project. Our CLI is open source ↗ and will help you get started quickly.
Run our CLI in a blank folder to scaffold a new pre-configured project and follow the prompts:
npx @subframe/cli@latest init

​
Install fonts

Your Subframe theme may use a Google Font or an uploaded custom font. You’ll need to add a snippet to your codebase to render the fonts correctly.
1

Copy the font import snippet

You can get the import code snippet from your Subframe theme ↗
2

Add the code snippet to your `<head>` tag

<head>
  <!-- Insert the font import snippet you copied here -->
  <!-- Example: importing the Inter font... -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
    rel="stylesheet"
  />

  <!-- Remaining code in your `<head>` tag... -->
</head>
The MCP server lets AI tools like Cursor and Claude Code fetch your designs directly. Skills teach your AI assistant how to use Subframe well — setting up projects, designing pages, and implementing with business logic.
The Subframe plugin for Claude Code sets up the MCP server and Skills in one install.
1

Install the Subframe plugin

Run the following commands in Claude Code:
/plugin marketplace add SubframeApp/subframe
/plugin install subframe@subframe
See our MCP server guide and Skills guide for more details.

​
FAQ

You can use our MCP server to access your designs and documentation in your AI coding assistant and convert them to your preferred language and framework.While Subframe only generates React + Typescript + Tailwind code for now, we found that in practice, asking AI to convert the code to your preferred framework is far faster than starting from scratch. Our generated frontend code is high-quality and consistent, without the overhead that most LLMs add to AI-generated UI code, so AI’s often are able to convert the code to your preferred framework consistently in a single prompt.
Yes. All generated code lives in your codebase and is yours to keep. Any dependencies you see are open source ↗.
Join our active Slack community ↗ for additional support from the Subframe team and other users.
Last modified on February 3, 2026