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 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, and your 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 withai- (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 and which tools use messages.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.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.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 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.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.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.Prototype controls respond as you click
Switches, checkboxes, radio buttons, dropdowns, tabs, text fields, and counters now update live while you preview a prototype. 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.Import Figma frames from your coding agent
The newimport-figma MCP tool 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.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.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.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 apublic/assets/ folder so the export runs as-is. See exporting 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.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 and 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.Improvements and fixes
- Image exports use the height you’ve resized a screen to, and empty screens no longer fail to export.
- Drop an
.mdfile 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.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.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.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.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.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.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.
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.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 opendesign.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.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.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.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.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.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.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.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.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.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.
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, runnpm i and npm run setup, then npm run dev, and the screen runs locally with its fonts and components included. See exporting code.