Perspective

While exploring different vibe coded tools that were popping up all over the place, I started to notice that every AI-generated tool seems to look identical these days - they all have the same rounded corners, same purple gradients, and the same finish. After reading more about why this was happening, I learned that it was because all the tools are built on Tailwind and shadcn, which makes them look similar to each other.

I've been studying UI design through Eric Kennedy's course (great course!) and he said something that stuck with me: Taste isn't innate. You build it by studying designs and deciding whether you like them or not, and then identifying what it is that pulls you towards particular designs.

What I Built

A Chrome extension that applies six different design systems to a simple webpage to transform its vibe completely! You can see what Wikipedia looks like styled as Reddit, or a blog post rendered with Linear's aesthetic, or a form with Slack's purple everywhere.

I reverse-engineered the design systems for the six sites by opening DevTools and documenting the exact colors, font stacks, and spacing scales. I then created an extension that lets you switch between the different design systems to see how they'd look using another site's branding. It's all the same content but a completely different feeling when viewed through a different design system's perspective.

The caveat is that this only works on simple sites. Complex web apps like Gmail or Figma have too much custom CSS - the extension can't override everything. It works great on blogs, documentation, and articles. Anything with straightforward HTML.

What I Learned

This exercise made me realize how much difference branding and design choices make in the overall user experience of a product. It also made me appreciate the details that go into making all the products that I love stand out to me.