Subframe generates React code for your designs which you can export directly to Cursor, Bolt, or Replit to speed up development. We’ve created prompts optimized for Cursor, or you can export manually.

​
Open Code Mode

  1. Click Code in the top right of your page to open Code Mode.
  2. Select Export to Cursor.

​
Set up your Cursor project

To sync your Subframe components with Cursor, you’ll need to install it for your project. If you’re starting fresh, we recommend using our Vite or Next.js starter kit, but you can use any framework you prefer.

  1. Go to the Setup your Cursor project section in Code Mode.
  2. Click Open Cursor.
  3. Click Generate Cursor Prompt — this will create an installation prompt that sets up Subframe and installs any required dependencies.
  4. Copy the generated prompt and paste it into Cursor Agent to run the setup.

​
Export your design to Cursor

You can export an entire page or a specific selection from Subframe to Cursor.

  1. Copy the Export to Cursor prompt and paste it into Cursor Agent. This will sync your components and copy over your design code.
  2. In Cursor, modify the prompt as needed to:

Once exported, your design is ready to build on, connect to a backend, or deploy to production.

​
Configuring Cursor rules to work with Subframe

Cursor rules help customize AI behavior in your project. We provide general Subframe rules as well as framework-specific rules for Next.js, Vite, and Astro projects.

To use them:

  1. Copy the relevant rule files into your .cursor/rules directory
  2. Set .cursor/rules/subframe/general.mdc to “Always” rule type
# Project Overview

This project is built using components generated by a design tool called Subframe. The files for these components are located in the `ui` directory. NEVER EDIT THE FILES IN THE `ui` DIRECTORY. Instead, whem implementing business logic, wrap them in your own components. The `ui` directory may be in different places, so check the codebase first to make sure you find it. If you can't find it on the first try, look harder. It could be in the `src/ui` directory. If you can't find it, ask the user where it is.

# General Guidelines

Check if this project uses Next.js by looking for a `next.config.(js|mjs|cjs|ts|cts|mts)` file. If so, adhere to the guidelines in @nextjs.mdc. Check if this project uses vite by looking for a `vite.config.(js|mjs|cjs|ts|cts|mts)` file. If so, adhere to the guidelines in @vite.mdc. Check if this project uses astro by looking for a `astro.config.(js|mjs|cjs|ts|cts|mts)` file. If so, adhere to the guidelines in @astro.mdc.

Check `ui/tailwind.config.js` for the fonts used in the project. Import them using Google Fonts adhering the to following structure: 

<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=[FONT_NAME]:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"/>

When the user wants to sync their Subframe components, run `[PACKAGE_MANAGER_COMMAND] exec @subframe/cli@latest sync -all`.

# Development Guidelines

- When building UI, try using the Subframe components in the `ui` directory first, wrapping them in your own components to implement business logic.
- When creating a page layout, try using the layouts in `ui/layouts` first. If you implement your own layout, don't use one from `ui/layouts`.
- Respect the user's choice for a package manager. Use `npm` if you find a `package-lock.json` file in the project, `yarn` if you find a `yarn.lock` file, `pnpm` if you find a `pnpm.lock` file and `bun` if you find a `bun.lock` or `bun.lockb` file. If the desired command fails, fall back to `npm`.
- Use TypeScript for type safety.
- Follow the coding standards defined in the ESLint configuration.
- Ensure all components are responsive and accessible.
- Make sure the project uses TailwindCSS v3. Subframe is not compatible with TailwindCSS v4 yet.
- Use Tailwind CSS for styling, adhering to the defined color palette. You can use all tokens defined in `tailwind.config.js` and `ui/tailwind.config.js`.
- Prefer using the libraries already installed within the project instead of installing new ones. Only if necessary, install your own.
- If you're not sure how to implement something, use the links provided in additional resources.
- Build production ready code. If you have to store data, use a database ORM. Handle user inputs with extreme care, validating and sanitizing any inputs before saving them. For example, use prepared statements in SQL before saving inputs and Zod for validating inputs.
- When building business logic, create test files first and run them using the testing library most applicable for the framework the project is using. Iterate until all tests pass and we get no linter errors from TypeScript or ESLint.
- After implementing anything, run the project's `build` and `test` (if applicable) commands and iterate until there are no more errors.

# AI Interaction Guidelines

- When generating code, prioritize TypeScript and React best practices.
- Ensure that any new components are reusable and follow the existing design patterns.
- Minimize the use of AI generated comments, instead use clearly named variables and functions.
- Always validate user inputs and handle errors gracefully.
- Use the existing components and pages as a reference for the new components and pages.

# Additional Resources 

- TypeScript Handbook: https://www.typescriptlang.org/docs/handbook/intro.html
- TailwindCSS Documentation: https://v3.tailwindcss.com/docs/installation
- React Documentation: https://react.dev/reference/react
- Supabase Documentation: https://supabase.com/docs
- Subframe Help: https://help.subframe.com/en/collections/9444971-developing-with-subframe
- Subfame Documentation: https://docs.subframe.com