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.

1. Hierarchy — One thing should be loudest

Every screen needs a clear focal point. If everything is bold, nothing is bold.

Ask yourself: when someone lands on this page, what should they see first? Make that thing bigger, bolder, or more prominent — and quiet everything else down.

Before

Welcome to Our Product

The Best Solution for Your Team

Get StartedLearn MoreContact Us

Features You'll Love

After

The best solution for your team

Streamline your workflow and ship faster with tools designed for modern teams.

Get started free →

Prompt tip

Tell Cursor: "Make the headline much larger and bolder. Make the supporting text smaller and lighter. I want a clear visual hierarchy."

2. Constraint — Fewer choices, not more

AI loves to give you 6 colors, 4 font sizes, and 3 button styles. A great product uses 2 colors, a clear type scale, and one button style.

The best products feel inevitable — like there was only one way they could look. That feeling comes from restraint, not variety.

Before

Dashboard

SaveExportShare

3 tasks completed today

Last updated 2 min ago

After

Dashboard

SaveExportShare

3 tasks completed today

Last updated 2 min ago

Prompt tip

Tell Cursor: "Simplify the color palette to just [one color] and neutrals. Use only 3 font sizes: heading, body, and small. One button style."

3. Real content, not placeholders

Lorem ipsum and "John Doe" make everything feel fake. Real words, real names, real numbers make a prototype feel like a product.

Write the copy yourself, or tell the AI to write it as if the product already exists and has real users.

Before

Pricing

Feature 1

Lorem ipsum dolor sit amet consectetur.

$XX/mo

Feature 2

Description goes here.

$XX/mo

After

Pricing

Starter

For individuals and small side projects.

Free

Pro

For teams shipping real products.

$12/mo

Prompt tip

Tell Cursor: "Replace all placeholder content with realistic copy. Write as if this product has been live for a year and has real customers."

4. Spacing is a feature

AI-generated layouts tend to cram things together. Whitespace isn't wasted space — it's what makes a design feel premium.

When in doubt, add more space. Between sections, between elements, between lines of text. Let the design breathe.

Before

Our Features

Fast performance for all your needs.

Why Choose Us

Trusted by teams worldwide since 2020.

Get Started

Sign up in seconds. No credit card.

After

Our Features

Fast performance for all your needs.

Why Choose Us

Trusted by teams worldwide since 2020.

Get Started

Sign up in seconds. No credit card.

Prompt tip

Tell Cursor: "Add significantly more whitespace. Double the padding between sections. Increase the line-height. Let the design breathe."

5. Steal like a designer

Professional designers don't start from a blank canvas. They look at how real products solve the same problem, then adapt those patterns.

Before you build, spend 2 minutes on mobbin.com or in the App Store. Find 2-3 apps that do something similar. Screenshot them. Paste them into Cursor and say "make it feel like this."

This is the single most effective shortcut to making something feel professional. Use it.

Prompt tip

Take a screenshot of an app you love. Paste it into Cursor and say: "Use this as inspiration for the layout and visual style. Don't copy it exactly, but match the feeling."