How AI Supercharged My UX Redesign: From Analysis to Prototype

Recently, I worked on a project for a client who had built a heavy SaaS application. The backend and computational models were rock solid, but they knew their UX fell short of modern standards. Their request was clear: a user-friendly, visually appealing interface that better highlighted the value of their product.

In this article, I’ll share how I used AI, specifically Large Language Models (LLMs), during the redesign. Not as a theoretical experiment, but as a practical case study. I’ll show how it helped me run analyses, create personas and improvement plans, and even generate working React prototypes. This approach not only gave me valuable insights but also saved me weeks of work.

I’ll walk you through my process, the results in practice, where the limits of AI became clear, and how UX/UI designers and frontend developers can use it as both an accelerator and a sparring partner in their workflow.

Project Background

The application was built by a team highly skilled in backend development and data analysis. Their product crunched complex models and displayed the results in dashboards and charts. Functionally, it worked, though sometimes very slowly, but the interface was outdated and clunky. Charts were hard to interpret, buttons and navigation weren’t intuitive, and the overall look and feel no longer met modern expectations.

My job was to modernize the interface and improve both user flows and the overall experience. The focus wasn’t just aesthetics, but usability: How can users find the right information faster? How do you design charts so insights are immediately clear? And how can you make interactions feel smooth and pleasant, even in a heavy, calculation-driven app?

This wasn’t just a cosmetic facelift. The real challenge was translating technical complexity into an accessible, intuitive experience. And that’s exactly where AI came in, helping me cut through the noise and focus on the right design decisions.

Analysis and Planning with AI

Normally, redesigns start with a lot of research: user interviews, competitor analysis, market comparisons. This can take weeks. For this project, I decided to see how AI could accelerate the process.

Using Cursor, I first defined the role of a professional UX/UI designer and saved it in a .cursorrules file. This ensured the AI would respond consistently with that perspective.

I then added the application’s existing web pages as local files in the project. Cursor couldn’t analyze screenshots directly, but analyzing the code turned out to be even more useful, it recognized endpoints and data types, giving me a detailed overview of the app.

When I asked AI to review the interface, it immediately flagged issues: inconsistent navigation, unclear labels, poor readability. I then had it generate personas and map out target users. While these were assumptions (no real user data was available), it gave me a solid starting point. The model also produced a competitor analysis and SaaS best practices overview, again, a strong basis for client discussions.

The result: within days I had insights and a rough improvement plan that would normally have taken weeks. The output wasn’t perfect, but it helped me get to the core challenges quickly and move forward with concrete steps.

From Analysis to Prototype with Lovable.dev

After analysis, it was time to make ideas tangible. Instead of starting with wireframes or Figma, I went straight to code. Why? Because with Lovable.dev I could use AI to generate not just sketches of screens, but fully working React prototypes.

The workflow was simple: I described the pages and components I needed, and Lovable.dev generated a base React structure. Since I’m a frontend developer, I could fine-tune the prompts, review the code, and refactor where necessary. Sometimes I let the AI handle adjustments; other times I jumped in myself.

For example, I had it generate multiple chart variants so I could immediately test improvements in readability and interaction. Instead of a static wireframe, I had working, Tailwind-styled components, clickable, navigable, and easy to present to the client for feedback.

The big win was speed. Within a few days, I had a working prototype that functioned as an interactive wireframe. Not production-ready code, but a solid base for exploring and validating UX improvements.

Where AI Struggle: The Need for Custom Solutions

AI is powerful, but it’s not magic. One limitation I hit was when building an Excel-style table component where both the top row and first column needed to stay sticky while scrolling.

No matter how I worded my prompts, the model could only get one part working at a time, the sticky header or the sticky column, but never both. In the end, I hand-coded a custom solution. Once the foundation was in place, AI could take over again to extend the component with features like draggable items.

This highlighted the boundary: AI is excellent for generating ideas, drafts, and variations, but when tasks require combining multiple complex techniques, human expertise is still essential. That said, once the hardest problem was solved, the AI was a great partner for refinement.

Extra Use Case: Performance Optimization

Beyond design, I also used AI for a technical issue. The app’s API calls sometimes took over 20 seconds to return, causing major frustration for the users.

I asked it for a caching and synchronization strategy. Its proposal: use IndexedDB to temporarily store results in the browser, paired with a smart sync mechanism with the server. The answer wasn’t just high-level, it included:

• pros and cons of the approach,

• potential implementation risks,

• step-by-step code examples.

This plan alone saved me at least two weeks. It gave me a strong foundation to build on and made client discussions much easier.

Key Lessons for Developers and Designers

From this project, I drew several practical lessons about using AI in UX and frontend work:

Lesson 1: Asking the right questions is crucial

A Large Language Model only gives useful output if your context and instructions are well constructed. Defining the role of a professional UX/UI designer in a .cursorrules file helped me get more consistent, relevant advice. The better your prompts fit your domain, the better the results.

Lesson 2: Treat the AI as a sparring partner, not a final solution

The strength of AI is speed and inspiration, but you can’t adopt its output blindly. Sometimes it generates surprising ideas or complete plans (like the IndexedDB caching plan), but there are always assumptions and limitations you must evaluate.

Lesson 3: Combine expertise with AI output

Because I’m a Frontend Developer, I could review, refactor, and extend the generated React components. Without that expertise, it would’ve been harder to ensure quality. It’s not AI or human expertise, it’s the combination that works.

Lesson 4: Use prototypes as wireframes, not production code

The generated code is perfect for quickly making ideas tangible. It works like an interactive wireframe: clickable, visual, and useful for validation with stakeholders. But before going to production, every component needs careful review and refinement.

Lesson 5: Small investment, big impact

Experimenting with free AI tools is fun, but with a paid subscription (around €20/month), a whole new level opens up. You get far more room to test prompts and truly integrate AI into your workflow.

Lesson 6: Choose your tools consciously

In hindsight, I didn’t really need Lovable.dev, since Cursor could’ve generated the same code. Still, it was valuable: it introduced me to working in a visual builder and gave me insights into how AI-driven prototyping can feel different.

By embracing these lessons, developers and designers can harness the power of AI without falling into pitfalls. You save time, gain new perspectives, and still maintain control over final quality.

Conclusion

Using AI in this redesign project proved to be a massive accelerator. Analyses that usually take weeks were done in days. Prototypes weren’t static wireframes but interactive React applications. At the same time, there were moments when AI hit its limits and human expertise was essential.

The real strength is in the combination: let AI handle the heavy lifting upfront, then use your expertise to ensure quality and make the right calls. That way, AI doesn’t replace your craft, it becomes a valuable co-pilot in the design process.