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 or start from scratch.
1

Prompt with AI

Design with AI prompt dialogAsk AI generates multiple design variations using your theme and components.
  1. Open your project and click the Ask AI button in the toolbar (or press Cmd + /).
  2. Type a prompt for the page you want to design.
  3. Submit your prompt and wait for designs to generate.
  4. Variations land as pages in a flow on your canvas — click a variation tile in the chat to open one.
Ask a follow-up prompt to refine a variation or combine ideas from different ones.
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.
1

Setup your project

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

Install the MCP server

Installation instructions for Claude Code, Cursor, and Codex MCP serversIn the page editor, open Code > Installation to view Claude Code, Cursor, or Codex instructions specific to your project.
To learn more about the MCP server and its capabilities, see MCP Server.
3

Initialize Subframe

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

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

Start your development server

If you created a new project, you can start your development server with:
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.
Last modified on July 31, 2026