Member-only story
How to Cheat at UI Design
This month alone I have built three polished animated landing pages and an entire CMS and I didn’t:
🚫 Do it from scratch
🚫 Use AI
🚫 Use a UI static kit
🚫 Build a design system
🚫 Use a no-code tool
So how did I do it? Well, I used two big cheat codes.
I’m going to show you how to start designing before you even open Figma and find unlimited inspiration, how to create dynamic designs that are functional out of the box, and how to do the heavy lifting of building a product (even if you don’t know everything about code or design).
Cheat Code №1: Work Backwards
Modern front-end web and app development involves a tech stack, and the most popular tech stack right now uses React and Tailwind. So, as a designer, I decided to do the same.
Now to back up a little bit: if you don’t know, React is a JavaScript library that developers use to build websites and user interfaces. So when we hand off our static designs to our front-end developers, this is the language they’re coding them in. Tailwind CSS is a styling framework that makes it easy to customize how everything looks.
So, as a designer, instead of starting with static designs in Figma, I used an existing UI component library. Now, these are nothing new. Front-end devs and builders have been using these frameworks for a while now, but I’m not talking about any old UI component library. I’m talking about the new generation of UI components that are making it possible to build crazy-looking stuff like this ten times faster.
