Design principles

These are the principles that separate a great product from AI slop. They're simple, but they make an enormous difference. Reference them while you're building.

Intro

You have access to the same AI tools as everyone else. The output of those tools, left on their own, all looks the same. Same layouts, same defaults, same generic everything.

These 9 principles are what separate something that looks AI-generated from something that feels like a real product. They're organized into three groups: how your product looks, how it feels to use, and how you think while building it.

You don't need a design degree. You just need to start noticing.

How it looks

1.Hierarchy — One thing should be loudest

Every screen needs a clear focal point. When someone lands on your page, they should know what to look at first — instantly, without thinking.

If everything is bold, nothing is bold. If every piece of text is the same size, the page is a wall. Your headline should be unmistakably the biggest thing on the screen. Your primary button should be the most prominent action. Everything else should be quieter.

Ask yourself: if someone glanced at this for 2 seconds and looked away, would they know what it's about?

How to apply it

Look at your page and squint. What jumps out? If the answer is "everything" or "nothing," you have a hierarchy problem. Tell Cursor: "Make the headline significantly larger than everything else and make the primary CTA the most visually prominent element on the page."

2.Constraint — Fewer choices, not more

AI will happily give you 6 colors, 4 font sizes, 3 button styles, and a gradient. A great product uses 2 colors, one font family, one button style, and restraint.

The best products feel inevitable — like there was only one way they could look. That feeling comes from limiting your options, not expanding them. Every extra color, every extra font weight, every extra style is noise.

This is the hardest one to internalize because it feels like you're making your product worse by taking things away. You're not. You're making it focused.

How to apply it

After your first build, tell Cursor: "Simplify the color palette to one accent color plus neutrals. Use only one font family. Make all buttons the same style. Remove any gradients." Then look at the result. It'll feel cleaner immediately.

3.Steal like a designer — Look at real apps before you build

Designers don't start from a blank canvas. Before building anything, they look at 2–3 real apps that solve a similar problem. They study how those apps handle layout, typography, spacing, and interaction patterns. Then they borrow what works.

This is the single most effective shortcut to making something feel professional. And when you adapt what you've seen into your own product, your own brand, your own context — it becomes yours.

How to apply it

  1. Go to Mobbin (it's free to browse).
  2. Search for apps similar to what you're building.
  3. Screenshot 1–2 screens you like.
  4. Paste them into Cursor and say: "Use this as visual reference. Match the spacing, typography hierarchy, and overall layout feel."

How it feels

4.Sweat the details that help the user

The tiny decisions are where products go from "fine" to "this feels great." And the details that matter most aren't decorative — they're the ones that make the user's life easier.

A button placed right where your eye naturally goes after reading. A loading state that tells you something is happening so you don't click twice. A confirmation message so you know it worked. A smart default so you don't have to fill in something obvious. An empty state that tells you what to do instead of just saying "No results."

AI won't add these on its own. It builds what you ask for, not what the user needs. Your job is to walk through your product as if you're using it for the first time and notice every moment where you hesitate, wonder, or feel lost. Then fix those moments.

How to apply it

Use your product from start to finish. Every time you pause or think "wait, did that work?" or "where do I go now?" — that's a detail to fix. Tell Cursor: "After the user submits the form, show a success message and a clear next step." Or: "Add a loading state to this button so the user knows it's working."

5.Consistency makes it feel real

The fastest way to make something feel like a real product instead of a prototype: make everything follow the same rules.

Same spacing between every section. Same padding inside every card. Same font sizes for the same types of content. Same button style everywhere. Same corner radius on everything. When a user scrolls through your product and every section feels like it belongs to the same family, it feels real. When the spacing drifts, the button styles change, and the fonts are slightly different in each section — it feels like a demo someone threw together.

AI is particularly bad at this. It's locally okay (each section looks fine on its own) but globally inconsistent. Different sections end up with different spacing, different text sizes, different visual treatments. You need to catch this.

How to apply it

Scroll through your entire build top to bottom. Does the spacing between sections stay the same? Are all the buttons the same size and style? Is the body text the same size everywhere? If anything drifts, tell Cursor: "Make the vertical spacing between all sections consistent at 80px. Make all body text 18px. Make all buttons the same style — solid black background, white text, same padding and border radius."

6.Give it one moment of personality

AI-generated products are competent but soulless. Everything is correct and nothing is memorable. Every page looks like it could belong to any product. There's no moment where you feel like a human was here.

The fix isn't adding more stuff. It's picking one place where the product winks at you. A loading message that says something unexpected. A hover animation that feels satisfying. An empty state that's charming instead of just "No data to display." A 404 page that makes you smile. One micro-interaction with a little bounce to it. A piece of copy that has a voice.

You only need one. One moment of personality makes the whole product feel more human.

How to apply it

Pick one place in your product — just one — and make it feel like you. Some easy wins: give your empty states a personality ("Nothing here yet — go build something"), add a subtle hover animation to your cards, write a headline that sounds like a human and not a corporation, add a small transition when content loads in. Tell Cursor: "Add a subtle scale-up animation when hovering over the cards" or "Write the empty state copy with personality — make it friendly and a little playful."

How you think

7.Start with the problem, not the screen

Before you open Cursor, spend 2 minutes on one question: what is the person using this actually trying to do? What's frustrating about how they do it now?

AI will happily build you a gorgeous screen that solves nothing. A beautiful landing page for a product nobody needs. A slick dashboard that shows data nobody asked for. The screen is not the product — the problem it solves is the product.

You don't need a product strategy document. Just one sentence: "[Type of person] needs a better way to [do specific thing] because [current way is broken in this specific way]." If you can fill in that sentence, you're ahead of most people who jump straight into building.

How to apply it

Before prompting Cursor, write one sentence: "This is for [who] and it helps them [what] because [why the current way sucks]." Then build. You'll make completely different decisions when you're solving a specific problem for a specific person versus just "building an app."

8.Ask "what happens next?"

At every point in your product, the user just did something or just arrived somewhere. What do they need now? Where should they go? Is there a dead end?

This is the instinct that separates products that feel guided from products that feel like a collection of screens. Good products always have an answer to "what happens next?" You read the headline → here's a CTA. You submitted the form → here's a confirmation and a next step. You finished the article → here are related articles. You hit an empty state → here's how to get started.

AI builds pages. You build flows. The navigation between moments matters as much as the moments themselves.

How to apply it

Walk through your product and at every stopping point ask: "If I'm a user who just got here, what would I want to do next?" If the answer isn't obvious on the screen, you have a dead end. Fix it with a CTA, a link, a suggestion, or a next step. Tell Cursor: "After this section, add a clear call-to-action that guides the user to [next logical step]."

9.Know when to stop

AI will let you add forever. Every prompt can tack on another section, another feature, another animation, another color. There is no natural stopping point. The tool will never say "actually, this is getting cluttered" or "you should remove that section."

That's your job.

The hardest skill in building anything is recognizing the moment when the next change will make it worse, not better. When you have the impulse to add one more thing, pause. Look at what you have. Is it clear? Does it work? Does it communicate what it needs to? Then stop.

Shipping something focused and simple will always beat shipping something bloated and "complete." The best products feel like someone made a hundred decisions about what to leave out.

How to apply it

When you feel the urge to add something, ask: "Does this help the user do the thing they came here to do?" If the answer is no (or even maybe) don't add it. If you've already added too much, tell Cursor: "This page is getting cluttered. Remove the least essential section and increase the whitespace between remaining sections." Removing things takes courage. Do it anyway.

The cheat sheet

Reference this every time you build.

How it looks

  1. Hierarchy — one thing should be loudest
  2. Constraint — fewer choices, not more
  3. Steal like a designer — screenshot real apps first

How it feels

  1. Sweat the details that help the user
  2. Consistency makes it feel real
  3. Give it one moment of personality

How you think

  1. Start with the problem, not the screen
  2. Ask "what happens next?"
  3. Know when to stop

One more thing

These 9 principles work whether you're using Cursor, Claude, Figma, or a napkin. The tools will change. The principles won't.

The barrier to building is gone. The differentiator is now taste. You develop it by building things, looking at great work, noticing what feels right and what doesn't, and doing it again.

You just learned the 9 things to notice. Now go build something.