Skip to main content

​
Create your first project

  1. Sign up at subframe.com to create your first project.
  2. Configure your theme with quick presets or customize later in the Theme page.
  3. Select a default navigation style for your app.
Component library gallery for a new project After onboarding, you will see a blank project with the base component library set up.

​
Design your first page

You can create a new page with AI, select a template, or start from scratch.
1

Prompt with AI

Design with AI prompt dialogAsk AI generates multiple design variations using your theme and components.
  1. Go to subframe.com/design/new to open the new page dialog.
  2. Type a prompt for the page you want to design.
  3. Submit your prompt to open the page editor and wait for designs to generate.
  4. Select a variation to preview in the Ask AI panel.
  5. Click Apply design to add it to the current page.
Mix and match elements from different variations by dragging to the page from the preview.
2

Edit in Design Mode

Page editor in design modeSwitch to Design Mode to refine your page in the responsive page editor.
  • Drag-and-drop elements on the page to rearrange.
  • Select an element and click the + Insert buttons to add new elements inline.
  • Edit styles and properties in the Inspector panel on the right.
  • Right-click or press / for contextual edits to a selected element.

​
Set up your codebase

Next, we’ll create a new project using the Subframe Vite starter kit to implement your design. Open a new folder on your computer using Cursor or your favorite IDE.

​
Build with Subframe MCP

1

Install the MCP server

Installation instructions for Cursor and Claude MCP serverIn the page editor, open Code > Installation to view Cursor or Claude Code instructions specific to your project.Go to https://app.subframe.com/cli/auth to generate your auth token.
2

Initialize Subframe

Cursor project with Subframe installation promptCopy the installation prompt in Code > Installation for Cursor or Claude Code and run it in your project’s root folder.
3

Prompt to implement your design

Code mode inspect view with link for MCP serverSwitch to Code > Inspect and copy the MCP link from Subframe to add to your prompt:
“Implement the design from this Subframe page [YOUR_PAGE_MCP_LINK]”
AI fetches the code via MCP and adds business logic.
4

Start your development server

npm install
npm run dev
Open localhost:3000—your page renders exactly as designed.

​
Or manually copy code

1

Create a new Vite project with CLI

npm
npx @subframe/cli@latest init --dir ./src/ui --alias '@/ui/*' --install --tailwind --sync --template vite
2

Copy your page code

  1. Switch to Code > Inspect to view React & Tailwind CSS code for your page.
  2. Click the copy icon in the code viewer.
  3. Paste into src/pages/App.tsx
3

Start development

npm install
npm run dev
Open localhost:3000—your page renders exactly as designed.
Continue developing your app using Subframe to sync components and export new designs as code.