Skip to main content
Export to Cursor

Copy your Subframe designs to Cursor and turn them into production-ready apps with AI.

Filip Skrzesinski avatar
Written by Filip Skrzesinski
Updated over a month ago

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 Cusror, modify the prompt as needed to:

    • Create a new page

    • Update an existing page

    • Add additional logic or connections

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

Did this answer your question?