AI for Web Designs

Designing intuitive and professional user interfaces has always been a challenge for me. While I have a good sense of what looks and feels right, coming up with fresh ideas from scratch can be time-consuming and sometimes frustrating. To streamline the process, I use large language models (LLMs) to generate design examples and refine UI concepts.

While AI-assisted development isn't new, tools with rendering capabilities, like Claude.ai and Loveble, have significantly improved my workflow efficiency.

My Process Before AI

Before using LLMs, my process for finding UI inspiration involved:

• Looking at existing tools – Exploring existing applications to get a sense of good design patterns, for instance from Tailwind Showcase.

• Using templates – Browsing pre-built components like 21st.dev or MUI Templates.

While these approaches help, they have their limitations. Finding the right design takes time, and it is difficult to find something that matches my exact use-case.

How LLMs Transformed My Process

Now, instead of manually searching for UI inspiration, I describe what I need in a prompt, and tools like Claude.ai, Loveble, and LlamaCoder generate a UI design for me.

These tools don’t just produce code, they render it as well, making it easy to iterate and refine in real time. I can quickly visualize the result and adjust my prompt as needed.

Examples

I frequently use this approach while developing PortfolioMetrics - a portfolio backtesting and optimization tool. The examples below illustrate how it helped me find UI inspiration more efficiently, leading to a faster and more tailored solution for my specific use case.

Metrics Page

Asset Search

Dashboard

Why I Still Rewrite the Code

Even though LLMs generate visually appealing UI components, I rarely use the code directly in my projects because it often lacks maintainability and can introduce technical debt.

1. Integration challenges – The generated code often doesn’t align with my existing codebase, as it fails to utilize existing methods or CSS styles. To ensure better integration, I would need to provide more context about my codebase. But I find it faster to write my own implementation than to fix the generated output.

2. Common AI-generated mistakes – I've noticed that LLMs repeat mistakes, likely because they're trained on flawed examples. For example, a common issue in React is the improper use of useEffect hook, which leads to unnecessary re-renders (React’s official docs explain why this is a problem).

Choosing the Right LLM Tool

I’ve found that different LLM clients work better for different tasks:

• For simple UI components – I use Claude.ai, which generates components in a single LLM call, making it quick and efficient.

• For more complex designs – I use Loveble, which is optimized for larger projects and multi-file applications. It breaks down requests into structured subtasks, leveraging multiple LLM calls for more refined outputs. It takes a bit longer, but at least I have time to make a coffee while waiting.

• For experimenting with alternatives – I sometimes use LlamaCoder, which works similarly to Claude.ai but utilizes open-source models like Qwen 2.5 Coder, DeepSeek V3, and Llama 3.3. While it's an interesting option, I’ve found that its design quality is generally lower compared to Claude.ai and Loveble.

Final Thoughts

Using LLMs for UI design has saved me a lot of time and effort. While the generated code isn’t always perfect, it provides a great starting point for my designs.

As LLM technology continues to improve, I expect it will become even more useful for frontend development—helping backend and ML engineers like me create better UIs with less effort.