Quickstart

Create your first project and export a design to code in minutes.

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.

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

   

   Ask 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

   

   Switch 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.

1. Setup your project

   See Installation for detailed instructions on setting up Subframe in a new or existing project.

2. Install the MCP server

   

   In 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.

   To learn more about the MCP server and its capabilities, see MCP Server.
3. Initialize Subframe

   

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

4. Prompt to implement your design

   

   Switch 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.

5. Start your development server

   If you created a new project, you can start your development server with:

   npm install
   npm run dev
   

   Open localhost:3000—your page renders exactly as designed.

You’re all set! Your Subframe project is now connected and ready for development.

Next steps

Core concepts

Understand how Subframe works under the hood.

Learn the editor

Discover how to design using Subframe’s visual editor.

Go to developer docs

Dive deeper into using Subframe for developer handoff.

Ask AI

Explore AI-powered design features.