5 Best AI Design Tools for Great UI: I Redesigned a Legacy Banking App Screen
What happens when you point five different AI UI generators at the same outdated bank app and give them zero room to improvise12 min read1 hour ago--Press enter or click to view image in full size5 Best AI. . .
What happens when you point five different AI UI generators at the same outdated bank app and give them zero room to improvise12 min read1 hour ago--Press enter or click to view image in full size5 Best AI Design Tools for Great UI: I Redesigned a Legacy Banking App Screen With 5 Popular AI UI ToolsSome UI screens age like milk. The one I used for this test is a real pattern still floating around in production banking apps: a dense ledger table, a raw date input, gray buttons labeled “Update View,” and pagination text that says “Showing 1-15 of 452. ” It’s functional in the way a filing cabinet is functional. I wanted to see whether today’s AI design tools could actually fix that, not generate a pretty dashboard from scratch, but take a genuinely bad, genuinely real screen and turn it into something a bank could ship. So I gave five tools the same prompt and the same source screen:No follow-up prompts, no cherry-picking the best of three generations. First output, judged as-is. Here’s how each tool handled it. List of tools I tested:FlowstepGoogle StitchV0LovableFigma MakeThe starting pointThe Source screen I attached to the prompt:Press enter or click to view image in full sizeThe prompt I used on all 5 tools:“Redesign this mobile banking app screen: an account overview showing balance, a list of recent transactions, and a bottom nav with Home, Cards, Transfer, and Profile. Problems with the current version: the balance isn’t visually prioritized, transaction rows are dense and hard to scan, there’s no clear primary action, and the visual style feels dated (default system fonts, flat gray cards, no depth). Redesign it with:A 2026 modern fintech aesthetic, clean, trustworthy, confident, clear visual hierarchy: balance should dominate the screen-Scannable transaction list (merchant, category icon, amount, date)-One obvious primary action (e. g. , Transfer or Add Money)-Consistent spacing, typography, and a cohesive color system- Light theme, accessible contrast. Mobile-first, single screen, portrait orientation”1. FlowstepFlowstepwas the clear standout. The first thing it got right was the information hierarchy. Balance up top in a confident gradient card, immediately followed by the two things people actually open a banking app to do: transfer and add money as thumb-reachable buttons instead of a row of gray boxes. Then it did something none of the other tools thought of; it surfaced the next bill due date directly on the balance card, with the amount and due day. That’s not in the prompt. That’s a tool inferring what “trustworthy and mobile-native” actually means for a finance app, rather than just restyling the existing layout. Screenshot from FlowstepThe transaction list also got real design treatment instead of a reskinned table: category icons, merchant names cleaned up from the raw bank codes, and color-coded amounts. It read like a screen a bank’s design team would actually ship, not a wireframe with better colors. Part of that came down to what’s available once you’re past the first generation. Flowstep didn’t just hand back one static screen, it generated multiple layout variants from the same prompt, so I could compare a few different takes on hierarchy before settling on one. Inside the same workspace, I could keep prompting the AI to adjust things or just reach in and edit manually, without bouncing between a generator and a separate design tool. A few other details made this feel like it was built for how design teams actually work, not just for generating a nice screenshot:I could feed it more than a prompt, a rough PRD, the original screenshot, and a reference link all fed into the same generation as context, which is a big part of why the output tracked the source screen so closely instead of drifting into something generic. The screens came out as editable layers I could copy straight into Figma, not a flattened image or a black-box component I’d have to rebuild by hand. It supports real-time collaboration, so a teammate could be adjusting the transaction list while I was still tweaking the balance card, with both sets of edits staying in sync. On the handoff side, it exports clean React, TypeScript, and Tailwind CSS, and it plugs into Cursor, Claude Code, and Windsurf through MCP, so the path from “AI-generated screen” to “code a developer will actually merge” is short. Best for:designers who need output that’s close enough to production-ready to hand to engineering with minor tweaks, especially for fintech and other data-dense verticals where hierarchy matters more than decoration, and for teams that want the AI generation, manual editing, and dev handoff to happen without switching tools. 2. Google StitchGoogle Stitch’sversion leaned dark-mode and card-based, and it’s genuinely competent. Balance card up top, a clear row of Deposit / Pay / Statement actions, and activity grouped by “Today” and “Yesterday,” which is a nice touch for scannability; it’s the kind of grouping that makes a long transaction list feel shorter than it is, and it’s exactly the sort of small UX decision that separates a generated screen from a lazy one. Screenshot from Google StitchStitchis Google Labs’ entry into this space, built on top of Gemini’s multimodal models, and you can feel that lineage in how it handles the prompt-to-screen step: it reads image and text input together reasonably well, which is presumably why it managed to keep the original screen’s basic content model, balance, actions, activity feed, intact instead of wandering off into a generic template. The dark theme it chose wasn’t in the brief either, and while it’s a legitimate design decision for a finance app (dark UI reads as “premium” to a lot of users), it’s a stylistic choice rather than a functional one, which is the distinction that matters here. The layout is correct, but it doesn’t go much beyond what you’d get from restyling the original screen with a nice template. There’s no real insight into why a user opens this screen beyond “check balance, see transactions,” no added context, no small extra that wasn’t already implied by the prompt. The transaction rows, while clean, don’t do much to translate the raw bank data into something more human; the merchant names are legible, but there’s no category tagging, so everything still reads as one flat list. I also ran into the free tier’s screen cap fairly quickly, which is worth knowing if you’re planning to iterate through a few variants before landing on one. Stitch offers a standard mode with a decent monthly screen allowance and a slower, higher-quality experimental mode, but neither is unlimited. Get Tech with Eldad’s stories in your inboxJoin Medium for free to get updates from this writer. Remember me for faster sign inBest for:quick, solid dark-themed layouts when you want a safe, on-brand starting point rather than a fully reasoned redesign, especially if you’re already living inside Google’s ecosystem. 3. v0 (Vercel)v0’soutput was the most “engineered” of the five, which makes sense given its code-first roots this is a tool built by the team behind Next. js, and it shows in how the output is structured. It added a personalized greeting (“Welcome back, Alex Rivera”), a blue gradient balance card, and, a genuinely useful addition, separate Income and Spending summary cards below the balance, giving the user a quick read on cash flow without opening a full statement. That’s a real UX improvement over the source screen, a genuine addition rather than just a restyle. Screenshot from V0The generation itself came back fast, and the component boundaries were obvious even just looking at the screenshot, balance card, summary row, and activity list all read as distinct, reusable pieces rather than one flattened composition. That tracks with what v0 is actually optimized for: it’s less a “design tool” in the Figma sense and more a fast path from prompt to working front-end code, which means the visual result is really a byproduct of a React component tree underneath. The trade-off is that it feels more like a well-built dashboard component than a considered redesign of this specific screen. The personalized greeting is a nice touch, but the overall composition, gradient card, two stat tiles, and list below is a pattern you’ll recognize from a dozen other fintech and SaaS dashboards, because it’s the pattern the model has clearly seen thousands of times in training data. It’s polished, but generic in a way that could sit on top of almost any fintech product without anyone noticing it was originally built for a bank ledger screen. Best for:teams that are going to take the output straight into a React codebase and want something close to production markup, not just a visual comp v0 is at its best when the destination is a repo, not a design file. 4. LovableLovable’sversion had the right instincts, green accent, a bold balance card, a “Spent $1,247. 39 in the last 30 days” callout, but execution let it down. The bottom navigation overflowed the viewport and required horizontal scrolling to see the fourth tab, which is exactly the kind of thing that would get flagged in a design review, not shipped. On a screen whose entire brief was “make this feel trustworthy,” a broken layout on the very first generation undercuts the message before a user reads a single balance figure. Screenshot from LovableThat’s a bit of a shame, because some of the underlying decisions were solid. The 30-day spend summary is a genuinely useful piece of context, and it shows the model understood that “recent transactions” alone doesn’t tell a user much without a total to anchor it against. The green color choice also does real work, it reads as “healthy account” in a way the original screen’s gray-on-white never could. Lovable, like v0, leans toward being a full app-builder rather than a pure UI generator; its whole pitch is prompt-to-working-app, spanning front end and back end, so a single-screen UI redesign is a bit of an edge case for what it’s built to do. That probably explains both the strength (it’s thinking in terms of a real, functioning account view, not just a static comp) and the weakness (viewport and responsiveness issues that a dedicated design tool would have caught). Best for:fast, scrappy prototyping where you’ll do a manual QA pass on spacing and responsiveness before it goes anywhere near a stakeholder, or where you’re building toward a working app rather than a polished screen. 5. Figma MakeFigma Make kept the original bank’s branding intact, “LegacyBank” stayed on the screen, with a “Good morning” greeting sitting above it rather than replacing it with something generic. It’s a small detail, but it’s a reasonable one for a redesign of an existing product rather than a from-scratch concept. Screenshot from Figma MakeThe layout leans into a dark, high-contrast checking card up top, masked account number, ledger balance front and center, with a small “452 transactions” label carried over from the original screen. Below the balance, it splits Income and Spent into two pill-shaped stats, and the primary action, Transfer Money, sits as a full-width button directly beneath. Below the card, three quick-action tiles (Add Money, Pay Bills, Export CSV) carry over some of the original screen’s functionality rather than dropping it, and the transaction list keeps a “Raw / See all” toggle, a small nod to users who might still want the denser view. It’s a solid, workmanlike redesign, functional and on-brief. Where it comes up short of Flowstep is in how much it’s actually rethinking versus reorganizing: most of what’s here is the original screen’s content restyled into a cleaner container, rather than new reasoning about what the user actually needs from this view. The Raw toggle is a nice idea, but it’s also a bit of a hedge, keeping the old dense format around rather than committing to the redesign the prompt asked for. Best for:redesigns where preserving the existing brand and functionality matters and you’re already working inside a Figma-based workflow, but expect to do more of the “why does this feature belong here” thinking yourself. The verdictFlowstepcame out ahead on nearly every axis that matters for shipping a real screen. It showed genuine UX reasoning, the bill-reminder callout being the clearest example, paired with polish that’s close enough to production to hand off with minor tweaks, plus a direct path into Figma or into React, TypeScript, and Tailwind CSS. It didn’t have a real weakness in this test. Flowstep uses message-based pricing, and while manual edits are free, the free plan’s message allowance is tight if you want to iterate seriouslyGoogle Stitchturned in a clean, safe dark-mode layout with genuinely solid text-and-image understanding of the source screen. Where it fell short was depth; it restyled rather than rethought, and the free tier’s screen cap is worth knowing about if you plan to iterate. It’s best suited to fast, on-brand starting points rather than a fully reasoned redesign. v0produced the strongest componentized output of the group, with a real UX addition in its income/spending breakdown. The trade-off is that the result feels generic, polished, but interchangeable with dashboards from a dozen other fintech products. It’s the right choice when the destination is a React codebase rather than a design file. Lovablehad good instincts, including its own useful spending summary, but execution let it down: a layout overflow bug cut off part of the bottom navigation. It’s best treated as fast, scrappy prototyping that you’ll QA manually before it goes near a stakeholder. Figma Make kept the existing brand and functionality intact and stayed close to the workflow designers already use, but it leaned more on reorganizing the original screen than rethinking it. It’s a safe, workmanlike option rather than the most inventive one in this test. Every tool here can technically “redesign a screen. ” The gap shows up in whether the tool understands why the screen needs redesigning in the first place. Flowstep was the only one that added something the prompt never asked for but the use case clearly needed, the bill reminder, which is the difference between a tool that follows instructions and one that understands the product. FAQ1. What prompt was used for all five tools?The same detailed prompt across every tool: a description of the screen (balance, recent transactions, bottom nav with Home/Cards/Transfer/Profile), an explicit list of what was wrong with the original (poor balance hierarchy, dense unscannable transaction rows, no clear primary action, dated styling), and specific redesign requirements, a 2026 fintech aesthetic, balance-first hierarchy, a scannable transaction list with merchant/category icon/amount/date, one obvious primary action, consistent spacing and typography, a light theme with accessible contrast, and a single mobile-first portrait screen. No follow-up prompts or edits were made before capturing results. 2. Why redesign a screen instead of testing a from-scratch prompt?Most AI design tool comparisons start from a blank canvas, which mostly tests visual taste. Redesigning a real, flawed screen tests something different, whether a tool can read existing content and constraints and actually improve on them, which is closer to how these tools get used in real design work. 3. Which tool produced the most production-ready output?Flowstep’s result needed the least additional work to be handoff-ready, both visually and because it exports directly to editable Figma layers or to React, TypeScript, and Tailwind CSS. 4. Did any tool add features that weren’t in the prompt?Yes, Flowstep added a “next bill due” callout on the balance card, v0 added income/spending summary cards, and Lovable added a 30-day spend total. Google Stitch and Figma Make stuck closer to a direct restyle of the original content. 5. Were any of the results actually broken or unusable as-is?Lovable’s layout overflowed the viewport, cutting off the fourth bottom navigation tab behind a horizontal scroll. It’s a fixable issue, but it shipped that way on the first generation. 6. Which tool is best for a solo designer versus a team?For solo, fast exploration, Figma Make or Stitch are low-friction starting points, especially if you’re already working inside Figma. For a team that needs to collaborate on the same screen in real time and hand off to engineering, Flowstep’s shared workspace and code export make more sense. 7. Should you trust a single-prompt test like this to pick a tool?No, treat it as a starting signal, not a verdict. Prompt phrasing, screen complexity, and how much iteration you’re willing to do all change the outcome. The most useful thing to take from a test like this is which tools are worth trialing on your own real screens, not a final ranking. This redesign used a single prompt across all five tools, with no follow-up iteration. Your results may vary depending on prompt phrasing and screen complexity. 💡 Stay inspired every day with Muzli!Follow us for a daily stream of design, creativity, and innovation. Linkedin|Instagram|Twitter