> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Flowstep changelog
> Flowstep changelog and product updates. Stay up to date with new features and improvements shipped in Flowstep.
## Sharper, more reliable photos in your designs
Photos in generated screens now load at a higher resolution, so they no longer look blurry, and they no longer show up broken. When you ask for a screen that reuses imagery from elsewhere in your file, Flowstep can pick up photos that are already on your canvas.
## Improvements and fixes
* Colors and corner radii from your theme now stay linked everywhere, including inside shadows, filters, and gradients, so they survive later edits and follow theme and appearance changes.
## Edit and publish your team's themes
Open any theme from **Themes** on Home to edit it. In **Theme settings** you can adjust every color for both light and dark appearance — **Primary**, **Secondary**, **Accent**, **Muted**, **Destructive**, **Background**, **Card**, **Border**, **Charts**, **Sidebar**, and more — and set rounding under **Radius**, or choose **Custom** and drag **Base radius**. A live preview of buttons, controls, typography, navigation, surfaces, and tables updates as you work.
Edits save as a draft automatically. Click **Publish** and every screen using the theme updates to match, or **Reset changes** to discard the draft. **Delete theme** removes a theme from the pickers without changing screens that already use it. Everyone on your team except guests can edit and delete themes.
## Improvements and fixes
* Elements positioned with transforms, such as a badge centered over an image, now render exactly where they were designed.
## Explore Flowstep's MCP server on flowstep.ai
New pages at [flowstep.ai/mcp](https://flowstep.ai/mcp) show how to connect Flowstep to Claude Code, Cursor, Claude, Windsurf, and Codex — with one-click install links where the client supports them — and list every tool. New guides compare Flowstep's MCP server with Figma's, round up the best MCP servers for designers, and explain what MCP means for designers. The About and Affiliates pages got the new look too.
## Themes give every file a consistent look
Every file now has a theme — a shared color palette and corner rounding — plus an appearance. Set both from the theme button in the prompt composer: choose a built-in theme or one of your team's, and set **Appearance** to **Automatic**, **Light**, or **Dark**. Your pick under **Theme for new screens** applies to what you generate next; screens already on the canvas keep their look.
Leave the theme on **Automatic** and Flowstep designs a custom theme for the file along with its first screens, working from your prompt, any brand colors you mention, your attachments and [links](/design-references#paste-a-url), and your [design guidelines](/design-guidelines). The theme is saved to your team's library under **Themes** on Home. To restyle a single screen, select it and click **Theme** in the menu above it.
## A revamped MCP server
Flowstep's MCP server got a major upgrade. Tools now follow consistent names: AI tools start with `ai-` (`ai-generate-screens`, `ai-edit-screens`, `ai-generate-screen-variant`, `ai-edit-screen-variant`) and code-first tools end in `-jsx` (`get-screen-jsx`, `add-screen-jsx`). New `replace-screen-jsx` and `delete-screen` tools bring the total to 23. Every tool publishes clear descriptions and structured inputs and outputs, and tells your agent whether it's free or draws on your message allowance — only the four AI tools use messages. Clients on the latest MCP protocol version can connect alongside existing ones. See the [tool reference](/mcp/tools) and [which tools use messages](/mcp/usage-limits).
## Faster, more faithful Figma imports
Large Figma pages now import more than twice as fast. Images in imported designs are copied into Flowstep, so they keep working after Figma's own image links expire, and image-only sections that used to come through empty now show their images. Gradients arrive as fills you can inspect and edit.
Importing the same frame again now adds it as a new screen and keeps your earlier import. See [importing from Figma](/figma-integration#import-a-design-from-figma).
## Background images in AI designs
Flowstep's AI can now use images as section backgrounds, as masks, and as custom list bullets, not just as standalone images — so a photo behind a hero headline comes out the way it was designed.
## A new flowstep.ai
We rebuilt the flowstep.ai homepage around the product as it is today: the design canvas for agents. It shows an agent building a multi-screen app from start to finish, connecting to Cursor, Claude Code, Windsurf, and Codex over MCP, plus new recordings of prototyping, AI edits, references, design guidelines, Figma export, and sharing. The Pricing and About pages got the new look too.
## Improvements and fixes
* Opening **Preview** no longer re-links your screens when nothing has changed, so prototypes open straight away.
* Some older files that couldn't be upgraded to the current format now open correctly.
## Corners that follow your theme
Link corner radius to your theme. In the **Corners** panel, click a corner's preview and pick a step on the **Token** tab, or set an exact value on **Custom**. A linked corner shows its token name, and **Detach from token** turns it back into a fixed value. Because the corner remembers its token, changing your theme's rounding re-rounds your screens.
## Export multi-screen apps as code
Select several screens, or a whole file, and click **Code** to export them together. Each screen becomes its own React component file, and any navigation you've set up between screens is wired into the generated code. See [exporting code](/export-formats#export-code).
## Rename screens from your coding agent
The new `rename-screen` [MCP tool](/mcp/tools#rename-screen) lets your coding agent rename screens on the canvas. It changes the screen's label only, not its layout or content.
## Send designs straight to your coding agent
Click **Send to your coding agent** in the toolbar, or choose it in the export dialog, to copy a ready-to-paste prompt. Your agent reads the screens over the [Flowstep MCP server](/mcp/overview) and builds them in your repo. It works for a single screen, a selection, or a whole file. See [sending designs to your coding agent](/export-formats#send-designs-to-your-coding-agent).
## Approve every MCP connection
When you connect an MCP client, Flowstep now shows an **Authorize access** screen after you log in. It names the client asking for access and shows where you'll be redirected. Nothing connects until you click **Allow**. See [reviewing and approving access](/mcp/authentication#review-and-approve-access).
## Failed generations no longer cost a message
If a generation fails, the message is credited back to you automatically. That includes requests where only some screens in a multi-screen generation fail. See [messages and limits](/messages-and-limits).
## Prototype controls respond as you click
Switches, checkboxes, radio buttons, dropdowns, tabs, text fields, and counters now update live while you [preview a prototype](/prototypes#interactive-controls). Screens in a file share one prototype state, so a change on one screen carries through as you click into others. There's nothing to wire up.
## Import designs from Figma
Figma import is now available to everyone. Connect your Figma account once, then paste a frame link to bring it into Flowstep as native, editable elements. Link a whole page to import all of its top-level frames at once. See [importing from Figma](/figma-integration#import-a-design-from-figma).
## Import Figma frames from your coding agent
The new `import-figma` [MCP tool](/mcp/tools#import-figma) lets your coding agent import a Figma frame into a Flowstep file as editable elements.
## Seat reductions wait until your renewal
When you reduce seats, the change now takes effect at the end of your billing period, and you keep the seats and their access until then. Adding people before then cancels the reduction. See [removing people](/seats#removing-people).
## The Team plan is now Max
The **Team** plan has been renamed **Max**. It's still the plan with the highest usage limits. See [plans](/pricing).
## Copy several screens into Figma at once
Select several screens and copy them to Figma together. They all paste onto your Figma canvas in one go, so you don't have to copy them one at a time. See [Figma integration](/figma-integration).
## Your coding agent edits the screens you already have
When your coding agent asks Flowstep over MCP to edit, regenerate, or extend a design, the change now lands on your existing screens in the same file, instead of in a new design.
## Design guidelines that keep up with you
When you give a standing style instruction in a prompt, such as "make the theme red for all new screens", Flowstep updates the file's design guidelines automatically. One-off requests only affect that generation. See [design guidelines](/design-guidelines#flowstep-updates-guidelines-for-you).
## Use your own images in generated designs
Attach an image to your prompt and ask Flowstep to use it — a logo, product photo, or screenshot can go straight into the screens it generates and edits. Your images stay with the design: image exports include them, and code bundles put them in a `public/assets/` folder so the export runs as-is. See [exporting code](/export-formats#export-code).
## Swap and download images from the property panel
Select an image on the canvas and the property panel shows an **Image** section with a preview. Drag a new file onto it, or click **Pick image**, to replace it. Click **Download image** to save it.
## Click through your screens as a prototype
Click **Preview** in the editor to open your file as a clickable prototype. Flowstep links buttons, cards, and menu items to the screens they lead to, so you can walk through the flow the way your users will. You can also set links yourself in the **Navigation** panel. See [prototypes](/prototypes).
## Work as a team with organizations
Your Flowstep workspace now belongs to an organization you can share with your team. Owners get new **Organization** and **People** pages in Settings, next to **Plan & Billing**. On **People** you can **Invite people** by email, change their roles, and remove them. If you belong to more than one organization, a switcher lets you move between them, and Home shows that organization's files.
Paid plans are billed per seat, and **Sync plan seats** keeps your subscription in step with your team. The share dialog was redesigned to match: choose **General access** — **Restricted**, **Members only**, or **Public** — and public links are view-only. See [organizations](/organizations) and [seats](/seats).
## Improvements and fixes
* Results arrive sooner: Flowstep writes the chat summary while it designs, instead of after.
## Stay connected to your coding agent for longer
MCP sessions no longer expire after an hour. Once you connect Claude Code, Cursor, or another MCP client, it stays signed in for up to 30 days, so you aren't asked to log in again mid-task. See [MCP authentication](/mcp/authentication).
## Improvements and fixes
* Image exports use the height you've resized a screen to, and empty screens no longer fail to export.
* Drop an `.md` file into **Design guidelines** to import it.
## Edit just part of a screen
Select a card, a button, or any other element inside a screen and write a prompt like "highlight this". Flowstep changes only that element and leaves the rest of the screen as it is. You can target elements across up to 10 screens in one message. See [editing part of a screen](/editing-designs#edit-just-part-of-a-screen).
## Restore a screen to an earlier version
Every AI generation in the chat now has a results card. If a screen has been edited or deleted since, click **Restore original** on its card to bring that version back, or **Show on canvas** to jump to the screens it produced. See [restoring a previous version](/editing-designs#restore-a-previous-version).
## More ways for your coding agent to design
Your coding agent now has dedicated MCP tools to create a design, edit it, regenerate it, and extend it with the next screen, instead of one general-purpose prompt tool. Each request is clearer, so agents get the result they're asking for more often. See the [MCP tools](/mcp/tools).
## Improvements and fixes
* When you chat about selected screens, Flowstep works out whether you want an edit or an answer, and your selection stays in place after it replies.
## Improvements and fixes
* Downloading many screens at once is reliable now, including in Safari.
* Copying a design to Figma works more reliably in Safari.
## See what Flowstep is working on
While Flowstep generates, the status line now describes what it's doing based on your request — for example, "Designing 3 login screens for iOS mobile." — instead of a generic "thinking" message. The status survives a reload mid-generation.
## A clear reply when you reach your message limit
When you're out of messages, Flowstep replies in the chat to explain why it can't continue and how to get more, with an **Upgrade** button, and the prompt doesn't use up a message. See [messages and limits](/messages-and-limits).
## AI edits update your screen in place
Editing or regenerating a screen with AI now changes that screen directly instead of adding a copy beside it. As the change streams in, Flowstep highlights the element it's working on, so you can watch the screen update. See [editing designs](/editing-designs).
## Improvements and fixes
* Adding large image attachments to the prompt is much faster.
## Pick exactly the element you want with direct selection
The Select tool has a new **Direct selection** mode that picks the deepest element under your cursor. Switch to it from the dropdown on the Select button or press **Shift+V**, and press **V** to go back to **Selection**. See [editing part of a screen](/editing-designs#edit-just-part-of-a-screen).
## Paste images, files, and long text straight into the prompt
Paste an image or file into the prompt box and it's added as an attachment. Paste text that's longer than the prompt allows and Flowstep turns it into a text file attachment, so nothing gets cut off.
## Improvements and fixes
* Fewer interrupted generations: Flowstep recovers from small mistakes at the end of a result instead of starting over.
## Add screens to your canvas from your coding agent
A new MCP tool lets your coding agent add a screen to your Flowstep file from JSX. Together with reading a screen as JSX, your agent can pull a screen into code, change it, and put the result back on the canvas. See the [MCP tools](/mcp/tools).
## AI edits build on your manual changes
When you prompt an edit on a screen you've already adjusted by hand, Flowstep now works from your edited version instead of the original generation, so your tweaks stay in place.
## Your coding agent gets more out of Flowstep
A prompt over MCP that generates several screens now returns all of them to your agent, and your agent sees Flowstep's clarifying questions. New tools let it read, update, and clear a file's design guidelines, and agents can attach text and code files as references. Deleting a file over MCP now requires its name as a safety check. See the [MCP tools](/mcp/tools).
## Improvements and fixes
* Downloaded images and code bundles are named after the screen you exported.
## Steer every design with a DESIGN.md
Click **Edit design guidelines** in the chat panel to open **Design guidelines**, then write or paste guidelines in the open `design.md` format: colors, typography, spacing, and conventions. Flowstep applies them to every generation and edit in that file. Use **Copy raw file** or **Download** to take your `DESIGN.md` elsewhere. See [design guidelines](/design-guidelines).
## Dictate your prompts
Click the mic in the prompt box, or press **Cmd+Shift+V** (Mac) / **Ctrl+Shift+V** (Windows), and speak. Flowstep transcribes what you said and adds it to whatever you've already typed. See [more ways to prompt](/generating-designs#more-ways-to-prompt).
## Flowstep can research the web for you
When your prompt calls for it — for example, "clone the Stripe pricing page" — Flowstep can search the web and pull in a site's content and branding, so generated screens land closer to what you had in mind. See [more ways to prompt](/generating-designs#more-ways-to-prompt).
## Attach Markdown and text files
Add `.md` and `.txt` files to a prompt alongside images and PDFs. Feed in a PRD, spec, or notes, and Flowstep uses them as context. See [references](/design-references).
## Improvements and fixes
* More reliable reconnection when you come back to a tab you left idle, or one your browser froze in the background.
* Text on the canvas stays sharp at any zoom level.
## Flowstep asks before it guesses
When a request is ambiguous, Flowstep now asks a quick clarifying question in the chat, with options you can pick from. You can also type your own answer in **Type something else...** or dismiss the question.
## Higher-quality, more reliable generations
Generations got an upgrade under the hood for better design quality, and multi-screen requests are more reliable: if a step returns a bad result, Flowstep retries automatically.
## Delete files from Home
Each file card on Home now has a delete button, so you can tidy up without opening the file. Only a file's owner can delete it.
## Rename, copy, and duplicate from the options menu
A new **More...** button in a screen's options menu gives you **Rename**, **Copy**, and **Duplicate**, and export actions in the menu now behave consistently.
## Build and rearrange screens by hand
Drag elements to reorder them inside auto layout containers. Use the toolbar's **Box** (B) and **Text** (T) tools to draw new elements, and open **Components** to drag in ready-made pieces such as buttons, inputs, cards, tabs, tables, form fields, and area, bar, line, or pie charts. See [editing designs](/editing-designs).
## One-click design actions
Select a screen and open **Edit** in its options menu to explore it without writing a prompt: **Make it pretty**, **Try a different layout**, **Try a different visual style**, switch between dark and light, **Create mobile version** / **Create web version**, and **Create empty state** — alongside **Create next screen**, **Create error state**, and **Try again from scratch**. See [one-click actions](/editing-designs#one-click-actions).
## Faster, smarter generation
Loading placeholders appear on the canvas sooner after you send a prompt, and Flowstep is better at working out what you're asking for — a new screen, a whole flow, or an edit. Keep using **Create next screen** to extend a flow one screen at a time.
## Design from your coding agent over MCP
Flowstep now has an MCP server, so Claude Code, Cursor, and other MCP clients can work directly on your canvas. Sign in with your Flowstep account, and your agent can list files and screens, generate and edit screens from a prompt, attach references, and pull back screen images to check the result. See the [MCP overview](/mcp/overview).
## Better results when you copy to Figma
Copying to Figma now runs on a new conversion engine, so designs land in Figma more faithfully than before. See [Figma integration](/figma-integration).
## A cleaner editor header
Rename files straight from a refreshed file name field in the header. Hide or show the chat and properties panels independently with **Hide chat** and **Hide properties**, or use **Hide UI** in the main menu to clear everything away. When you follow a collaborator, a **Following** indicator shows whose view you're on and lets you stop following.
## Select nested elements like in your design tool
Clicking a screen selects the screen; double-click to go deeper into nested elements. Once you're working inside a screen, a single click selects at that same depth, and hover highlights show what a click will select.
## Improvements and fixes
* Icons in generated designs render more reliably.
* Icons and fonts survive copying to Figma more reliably.
## Auto layout controls in the property panel
The property panel now has full layout controls. **Layout** sets width and height as **Fixed**, **Hug**, or **Fill**, and can clip overflow. **Container** turns on auto layout — **Horizontal**, **Vertical**, or **No auto layout** — with gaps and wrapping. **Padding** and **Position** are there too. See [editing designs](/editing-designs).
## Edit typography directly
Select a text element to adjust it in the new **Typography** panel: font family (Inter, Roboto, DM Sans, Playfair Display, and more), size, weight, line height, letter spacing, style, alignment, and decoration.
## New screens match the rest of your app
When Flowstep generates or regenerates screens, it now takes your whole app into account, so new screens stay consistent with the theme, style, and purpose of what's already on your canvas.
## Improvements and fixes
* Undo works more reliably when someone else is editing the same file.
* Charts export correctly to code and images.
## Try paid features free for three days
New accounts now start with a three-day free trial that includes paid features such as exports. During the trial, **Settings → Plan & Billing** shows an **Upgrade** button so you can keep paid access whenever you're ready. See [plans](/pricing).
## Flowstep's AI now sees your canvas
When you generate, regenerate, edit, or extend a design, Flowstep now looks at images of the screens on your canvas, not just their structure, which gives it a better sense of what your designs actually look like and improves output quality.
## Charts in your designs
Generated screens can now include real charts and graphs, and they carry through when you export.
## Resize panels and focus on the canvas
Drag to resize the prompt and property panels. Press **Cmd+.** (Mac) / **Ctrl+.** (Windows) to toggle focus mode, which hides the panels so you can concentrate on the canvas.
## Files start with a name, not "Untitled"
When you start a file from a prompt, Flowstep names it from that first prompt, so your file list stays easy to scan.
## Edit fills and borders in the property panel
The redesigned property panel now has **Fill** and **Border** sections. Add, edit, or remove fill colors, and set border width — uniform or per side — and color.
## Watch your designs appear as they generate
Screens now build up on the canvas while Flowstep is still generating, so you see the layout take shape right away instead of watching a loader.
## More reliable AI generations
We tuned how Flowstep's AI produces designs and made it better at handling the results, so fewer generations fail or come back unusable.
## Name your screens right on the canvas
Every screen now shows its name above it on the canvas. Double-click the name to rename it and press Enter to save, or click the label to select the screen and drag it around.
## Refresh without losing your generation
If you reload the page while Flowstep is generating, the in-progress state comes back and the finished design still lands on your canvas — however many times you refresh.
## Edits that understand your whole file
When you edit or expand a screen, Flowstep now considers the other screens in your file and what you've asked for earlier in the chat, so changes stay consistent with the rest of your design. Ask for a change without selecting anything and it applies to the screen you generated last.
## Copy and paste between files and tabs
Copied elements now go to your system clipboard, so you can paste them into another file or another browser tab.
## Opacity, blend modes, and corner radius
Select an element to set its opacity, blend mode, and corner radius — including a different radius for each corner.
## A clearer options menu for every screen
The options menu on each screen was redesigned with clear tooltips for exporting, editing with AI, expanding, and trying again. Expand offers quick actions like **Next screen**, **More content**, **Less content**, and **Error state**.
## Zoom in to the pixel
Zoom up to 25,600%, with grid lines that line up with real pixels and get easier to see as you zoom in — useful when you need to check alignment closely.
## See the code behind any element
Select any element and the new **Code** panel shows its code with syntax highlighting. Click **Copy code** to copy it, or **Download code** to download it.
## New screens match the ones you already have
Flowstep now carries your existing colors, theme, and styling into new screens, and looks at every screen in the file and your recent conversation when you edit or expand, so your designs stay consistent as the file grows.
## A refreshed flowstep.ai
We redesigned flowstep.ai to match the latest product, with polished landing, pricing, affiliates, and about pages, and FAQ answers that link to the relevant pages.
## Earn rewards by referring people to Flowstep
Join the Flowstep Affiliate Program from **Settings → Referrals** to get your referral link and follow your referrals. People who sign up through your link get a discount on their first subscription.
## Improvements and fixes
* Large files load faster because less data is sent when you open them.
## Export any screen as code
Export a screen from its options menu as a ready-to-run React project. Unzip it, run `npm i` and `npm run setup`, then `npm run dev`, and the screen runs locally with its fonts and components included. See [exporting code](/export-formats#export-code).
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.