How to make an AI Generated Front End which doesn’t look Terrible

Vibe coding the functionality of your app is a great time - you tell your AI coding tool (which for me, is Claude Code) what you want the app to do, and AI figures it out - and it usually does a pretty great job!

Vibe coding the front end, however, is usually a different story. While AI is great at performing logical tasks, it doesn’t have the best idea of what does and doesn’t look good - leading to weird layouts and downright ugly design choices.

That’s how I felt, at least, until I discovered the method which I’m going to share with you today: Shadcn UI, the MCP server and Tweakcn.

What is Shadcn UI?

Shadcn UI is a popular, if not THE most popular component library right now - well, that’s how I’d describe it. According to the Shadcn UI website, “This is not a component library. It is how you build your component library.” Huge companies such as Adobe and OpenAI use Shadcn UI to build their front ends.

Sounds super esoteric, high-level, and complicated - but, at the end of the day, it’s a whole bunch of beautiful and accessible human-designed components.

They look incredible right out of the box, but what sets Shadcn UI apart is the ease of customizability - not only for developers, but for AI as well.

How do I use Shadcn UI?

You can see the installation instructions for Shadcn UI on this link - but, one of the best things about it is how well AI knows it. I use it in every single project, and writing this article was the first time I’ve ever had to look at the installation instructions.

Simply tell your vibe coding tool of choice to install + use shadcn, and you’re off to the races.

In a nutshell, that’s it. Just tell your vibe coding tool to only use shadcn components, and watch as your AI generated front ends become 100x better immediately.

That’s not why I wrote this article though - I wrote this article to give you 2 tips which will make using Shadcn UI infinitely better than simply asking your tool to use it.

The MCP server

An MCP server is just a fancy word for something that allows your AI to take actions on your behalf - and in the case of shadcn, the MCP server allows your UI to access full, up-to-date lists of components and documentation.

The new shadcn MCP makes it extremely easy to set up - you just need one command.

For Claude Code:

npx shadcn@latest mcp init --client claude

For Cursor

npx shadcn@latest mcp init --client cursor

To view the full installation instructions, you can click here - but it should be as simple as running one command.

Once you’ve successfully installed the MCP server, try asking your AI a question about Shadcn UI - you should now see that it’s making tool calls and using the server. Congratulations, your AI is now 10x better at using Shadcn UI!

Tweakcn

You don’t just want a nice looking UI - you want a unique one too - but, how can you make sure that your AI generated front end is clean, modern, unique, and cohesive?

That’s where tweakcn comes in! To put it simply, tweakcn is an incredibly easy way to build themes for shadcn.

To build a theme with tweakcn, click here and start making edits! You have full control over things like shadows, radius, borders, colors, and more - but my favorite part of tweakcn is the pre-built themes they have. With 42 themes (as of the time of writing), you probably won’t even have to build a theme yourself. Just click through the list until you find one you like and then add it to your project!

Speaking of adding themes to your project - click the ‘code’ button in the top right to open this modal. I find the best way to install the themes is to just copy the code, send it to my AI coding tool, and ask it to install the theme.

So, there you have it - the 3 things I use to make sure that my AI generated front ends don’t look like AI generated front ends!

Have any other tips? Let us know!