Skip to main content

​
Projects

Projects contains the theme, components, and pages used design and build your product. Each team can have multiple projects.
The Project Switcher dropdown showing a list of projects with a New project button

​
Components

Reusable React UI components synced with your codebase. Create custom components or customize the pre-built library to build your design system.
The Components tab showing a list of design system components

​
Pages

Design individual pages in the drag-and-drop visual editor using real components and code export.
The editor showing a page being designed with components on the canvas

​
Theme

Design tokens for colors, typography, shadows, and borders used by components and pages. Syncs to code as a Tailwind configuration.
The theme panel showing color tokens, typography settings, and spacing scale

​
Ask AI

Generate designs from prompt or image using your design system. Use inline AI to make direct edits or Ask AI to design variation of pages.
The Ask AI panel with a prompt and multiple design variations generated

​
Prototypes

Build interactive web apps from your designs by annotating pages and chatting with AI to prompt functionality. Prototypes can be shared and downloaded as code.
Prototype mode showing a page with annotations and AI chat panel for adding interactions

​
CLI

Use init and sync terminal commands to install and add components from Subframe to your codebase. All code lives locally for further development.
Terminal showing the sync command running and components being updated

​
MCP server

Connect AI coding tools like Claude Code and Cursor to fetch context and code from your Subframe project’s components and pages.
Configuration file showing MCP server setup with Subframe access token