Kombai Logo

How to use Kombai to build world-class user experiences (aka, say no to AI slop UIs)

The Internet is flooded with complaints about “AI Slop” UIs, i.e. the interfaces that are immediately recognizable as AI generated (e.g., 1, 2, 3). You probably know the telltale signs already, for example - overused sans-serif fonts, heavy use of purple gradients, lots of cards and blocky layouts. The UI isn’t broken. But it is easily recognizable as AI-generated and doesn’t stand out - which is probably just as bad.

Why does this happen even when we have got all these powerful LLMs? It is not because the models aren’t smart enough; it is because regression to the mean is their designed behavior. During output generation, models predict tokens based on statistical patterns in their training data. The training data includes the common, generic UI patterns that dominate the web. So without strong constraints, you get safe, median design choices — the ones that aren’t obviously broken, but do not stand out.

Unfortunately, just better prompting isn’t good enough to break-out of this convergence. So, just asking the models to “make it pop” or “improve how it looks” doesn’t work, no matter how creatively you structure the prompt. Instead, we need domain-specific contexts and tools that can provide the models with opinionated, human-like “design taste”.

Kombai offers several built-in features that help you make UIs that stand out. In this guide, we’ll walk through the features and workflows that allow you to move beyond prompting to build truly polished, professional interfaces.

Start by generating a theme

Users judge a product's credibility within seconds of landing on a page. Generic, AI-generated interfaces are often easy to spot, signaling a lack of polish that can drive users to bounce before they even explore the product. To build immediate trust, an interface must feel intentional and professionally crafted rather than automated.

Kombai's Suggest Themes skill solves this by generating high-quality, distinctive themes based on your specific design intent. This is really helpful for establishing a strong identity in new projects or refreshing the look and feel of existing ones.

By analyzing your goals or design references, Kombai creates three tailored theme options that you can visualize and refine within the Kombai Browser. Once you are satisfied with a theme, ask Kombai to implement it in your project.

See how I finalized the theme for my Sushi project using Kombai's Suggest Themes skill:

Note: Certain elements of your tech stack (e.g., your component library and CSS implementation) may impact how themes can be used in the repo. So, generate the theme once your repo is set up with the main tech stack of your choice.

Generate wireframes before generating code

In the real world, teams finalize a page's layout before writing code because changing the structure later inevitably requires significant refactoring. Most AI coding agents ignore this and jump straight to code generation.

Kombai’s Create Wireframes skill solves this by keeping layout and implementation separate. When you run the skill, Kombai first analyzes your design preferences. You can provide URLs, Figma files, or screenshots as references for your desired layout.

Kombai then generates three medium-fidelity wireframes, which you can compare side-by-side in the Kombai Browser. These wireframes vary in layout structure, content organization, and visual hierarchy. Each wireframe includes "New" and "Existing" component badges, allowing you to see exactly which components from your repository will be reused and which will be created from scratch. You can further iterate on specific sections of the wireframes in the Kombai Browser until you find the right layout. Once you are happy with a layout, simply ask Kombai to code it up.

Here’s how I generated multiple wireframes for the homepage of my Sushi website and generated code for it.

Use design inspirations from Kombai’s curated Resource Library

Standout UIs are usually built on strong references, not just “better prompting.” That's why we have curated an entire collection of design inspiration websites in Kombai's built-in Resource Library. Browse the collection to find strong design references that you can use for the sections and pages you are building.

You can use the element selection tools in Kombai Browser to select the exact design element you want to use as a reference. You can also bring selections from multiple tabs of our browser to easily craft better prompts by combining multiple design inspirations. Kombai will then build on top of this design reference using your theme and components to create new, unique designs native to your repo.

See this example where I updated the reservation section of my Sushi website using a design inspiration from Airbnb’s reservation system:

Note: You can also use your own design references outside the Kombai's Resource Library. Ask Kombai to open your specific link in the browser. Then, use the element selection tools to select the inspiration and craft your prompt.

Use new components from modern UI Libraries

Kombai’s Resource Library also includes several modern UI libraries packed with beautiful, animated components. Ask Kombai to use components from these libraries in your project, or use them as inspiration and modify your existing components. These libraries often bake in hard-to-fake, sophisticated details ( e.g., motion, states, and polish), so even using them as inspiration can significantly improve your UX.

You can browse and pick a specific component from our library in Kombai Browser, or ask the agent to shortlist strong options for your use case using @Resources. When you use @Resources, take a minute to review the shortlisted components before implementation. This additional "human judgment" layer before the implementation can significantly improve the final output.

See this example where I asked Kombai to suggest animated components from Aceternity for the image gallery of my restaurant, and implement it:

Note: Most UI libraries in our collection are built on top of Shadcn, Tailwind, and Framer. If you’re on a different tech stack, Kombai will use the library component as inspiration and try to create similar-looking components in your repo.

Ask Kombai to review your designs

Interfaces outdate as trends and styles evolve, and while you don’t need to chase every passing fad, your UI/UX does need to feel modern and intuitive. Kombai’s Review Design skill is built for this exact scenario, helping you evaluate your interfaces and identify improvements based on modern design standards.

When you run the skill, Kombai checks whether you’d like to reimagine the entire page or simply audit your current implementation.

If you choose to reimagine the page, Kombai generates three medium-fidelity wireframes in the Kombai Browser, giving you fresh structural directions to explore.

If you prefer to stick with your current layout and just want to polish the details, you can choose to review your existing implementation. Kombai will ask which specific areas you want to focus on—such as visual styling, animations, responsiveness, or micro-interactions—and then generate a detailed report on any design issues it finds within those categories.

See this example where I asked Kombai to review the “Chef’s profile” section of my Sushi restaurant website:

Use Figma designs

Figma is a great way to remove ambiguity from your project. Kombai can replicate your Figma designs with high fidelity. This works best when the Figma design matches your repo’s design system, or when you’re building from scratch.

You can also use a Figma design as a reference, with clear instructions on what you want Kombai to use. For example: “Use the layout and structure from this file, but keep my current theme and generate appropriate content that fits my project.” This approach is incredibly useful when you want to use community Figma designs to bring new design choices without losing your brand identity.

Use different component libraries

One reason AI-generated apps often look the same is that they default to the same few component libraries. Because component libraries come with opinionated styling and interaction patterns, they dictate how your project looks and works.

Kombai natively supports a massive range of tech stacks, including over 50 different component libraries. You can even add custom libraries via the tech stack configuration page. Trying a new component library is an easy hack to generate sites and apps that feel fresh and different.

This is great when you're juggling multiple products and want each one to feel distinct. It's best to choose your component library when you are building from scratch, since switching halfway is technically difficult and generally not recommended.

Conclusion

The Internet has enough boring, AI-generated interfaces. And settling for "AI Slop" is the fastest way to tell your users that you didn't care enough to be original.

If you're serious about building unique, beautiful interfaces from your next project, give Kombai a try and put the workflows mentioned in this guide into work. For any help, check out our docs or reach out directly!