Skip to main content
Screenshot 2026 05 06 At 14 19 49
When you’re ready to share or hand off a design, Flowstep lets you export it as a static image — either a JPG or a PNG. Both formats are widely supported across design tools, presentation software, and browsers, so you can take your AI-generated designs wherever you need them.

​
How to export your design

1

Open your design

Navigate to the design you want to export inside Flowstep.
2

Open the export menu

Locate the export option in the toolbar or design panel. Select it to open the export settings.
3

Choose your format

Select either JPG or PNG depending on your use case (see the comparison below).
4

Download the file

Confirm your selection and download the exported image to your device.
Screenshot 2026 05 06 At 14 19 39

​
JPG vs PNG: which format should you use?

If you’re pasting your design into a slide deck or sending a quick preview to a client, JPG is usually the right choice. If you need crisp edges or a transparent background — for example, to overlay the design on another image — use PNG.

​
Export code

Beyond images, the Code button exports your design as React + Tailwind code — copy a snippet, or download the full bundle as a ZIP. You can export a single screen, several selected screens, or a whole file at once. When you export more than one screen, each becomes its own component file and any navigation you’ve set up between screens is wired into the generated code, so the exported app is clickable end to end. Bundles are self-contained: images used in the design (including ones you attached in the chat panel) are included in a public/assets/ folder with the code referencing them by local path, so the export runs as-is. Downloaded files — images and code bundles alike — are named after the screen they belong to (falling back to the file name if the screen is unnamed), which keeps exports easy to identify when you’re working with many screens.

​
Send designs to your coding agent

Instead of downloading a file, you can hand a design straight to an AI coding assistant. Click Send to your coding agent in the toolbar — or open the export dialog and choose the same option — to copy a ready-to-paste prompt for your agent:
Your agent reads these screens over MCP and builds them in your repo. Paste this prompt into Claude, Cursor, or your preferred agent.
The prompt tells your agent to fetch the screens over the Flowstep MCP server and rebuild them in your codebase. You can hand off a single screen, several selected screens, or an entire file in one go — the prompt adapts to what you’ve selected. This uses the Flowstep MCP server, so connect an MCP client first. See the MCP server overview for supported clients and the Quickstart to connect one.
If you need to take your design into a vector editing workflow, copy it directly into Figma instead. See Copy Flowstep designs into Figma instantly.