A field guide for people who build with AI

You don't lack taste.
You lack the words.

AI can design better than most of us. The gap is not skill anymore. The gap is vocabulary.

You know a screen looks good the moment you see it. But when you sit down to prompt, all you can type is "make it clean and modern". And the AI gives you the same template it gives everyone else.

This guide fixes that. Every style, color mood, font personality and layout pattern below has a name. Check whatever you like, and the prompt builds itself at the bottom of your screen. Paste it into Claude, Cursor, Lovable, v0, wherever you build.

Share it with the PM who says "make it pop", the engineer who ships default Bootstrap, and the founder who knows exactly what they hate but not what they want.

"Design taste is nothing. It is just knowing the names of things you already like."

1Scroll and check what you like

Every card shows the look, the real products that use it, and the exact words that produce it.

2Watch the bar count your picks

Your selections get grouped into a proper design brief: style, color, type, layout, details.

3Copy, paste, build

One click copies the full prompt. Paste it into your AI tool as-is, or edit it first.

!One rule before you start

Pick one style, one color mood, and one or two fonts. Ten picks fighting each other is how a design turns into khichdi.

01

Design styles

The style is the biggest decision you will make. Everything else, color, type, spacing, hangs off it. Pick one. If you want to mix two, make one dominant and the other a garnish.

02

Color

Most people pick colors. Good designers pick a mood and let the colors follow. Tell the AI the mood, and let it handle the hex codes.

Palette moods

Gradients

A gradient is the fastest way to make a flat screen feel alive. The trick is restraint: pick one, use it in the hero, and let the rest of the page stay calm.

Color vocabulary

These are the phrases that separate "add some blue" from a proper brief. Check any that fit.

03

Typography

Every font has a personality, and your interface speaks in it. The samples below are set in the real fonts. Read them like you would listen to a voice.

Type styling

04

Themes & mood

Light or dark is a context question, not a preference question. Reading-heavy products lean light. Media, finance and dev tools flex dark. Pick for your user's moment, not your mood.

05

Layout

Layout is where hierarchy lives. These wireframes are deliberately grey: squint and look at the shapes, not the content.

06

Details & components

This is the level most prompts never reach. Corners, shadows and borders are why two "minimal" designs feel completely different. Details are the design.

Buttons

Corners

Shadows

Cards & surfaces

Finishing touches

07

Motion & feel

Motion is seasoning. A little makes the interface feel alive. A lot makes it feel like a wedding invite website. When in doubt, less.

08

Density & spacing

Whitespace does one job: it tells the eye where to look. Airy costs scrolling. Compact costs calm. Pick by what your user is doing, reading or working.

09

Imagery & graphics

Illustration style dates a product faster than anything else on this page. Pick one visual language and stay loyal to it.

10

Voice & microcopy

Words are part of the design. "Oops! Something went wrong :(" and "Request failed. Retry." are two different products. Tell the AI which one you are.

Principles worth adding to any prompt

These lines raise the floor of whatever the AI produces. When unsure, check the first four.

Things to tell the AI to avoid

Half of taste is knowing what you don't want. These are the most common AI-design giveaways.

11

Ready-made recipes

Don't want to assemble from scratch? Start from a look you already trust and edit from there. Each recipe is a complete prompt. One click copies the whole thing.

The premium fintech

CRED energy. Quiet, expensive, earned.

Design this interface in a dark luxury direction. Near-black background (#0B0B0D), one champagne-gold accent, an elegant serif display font for headlines (Playfair or Fraunces) with a clean grotesque sans for body. Generous spacing, thin 1px gold dividers, soft glow on the primary CTA only. Cards are near-black with a subtle inner border highlight, 16px corners. Motion is minimal: 200ms fades, slight lift on hover. Imagery is dark and moody. No bright colors, no playful illustration, no clutter. The feel: quiet, premium, earned. Reference: CRED.

The modern dev tool

Linear and Vercel energy. Sharp, fast, keyboard-first.

Design this interface like a modern dev tool. Dark charcoal background (#0A0A0B), high-contrast white type, one electric accent (violet or blue). Grotesque sans like Inter for UI, monospace for code, numbers and labels. Sharp 6-8px corners, hairline borders, a subtle glow behind the hero only. Features shown in a bento grid. Fast 150ms transitions, no bounce. Keyboard-first cues: visible shortcuts, a command menu. No stock illustrations, no gradients outside the hero. Reference: Linear, Vercel.

The friendly consumer app

Duolingo's energy, Swiggy's warmth. Made to be loved.

Design this interface bright and playful. One saturated primary color with candy accents on a cream background. Rounded 20px+ corners everywhere, chunky pill buttons with a 3D press effect (hard bottom edge, moves down on click), bouncy spring animations. Rounded geometric sans like Poppins or Nunito. Flat colorful illustrations, cheerful encouraging microcopy, big touch targets. Celebrate user progress with streaks and confetti moments. Reference: Duolingo's energy, Swiggy's warmth.

The calm productivity tool

Notion energy. The interface disappears behind the work.

Design this interface calm and minimal. Off-white or warm paper background, dark ink text, almost no color: one muted accent at most. A neutral sans like Inter, body line height 1.6, content max-width around 720px. Hairline dividers instead of boxes, shadows either absent or very soft. Simple line icons from one set. Motion nearly invisible. The interface should disappear behind the content. Reference: Notion, iA Writer.

The loud startup landing

Gumroad energy. High volume, zero subtlety.

Design this landing page neo-brutalist. Flat loud background colors, thick 3px black borders, hard offset shadows (6px, zero blur), chunky bold type, one oversized headline. Buttons look pressable: black border, hard shadow, they move down on click. Add a marquee text strip and sticker-like badges. Grid stays strict even though the style is loud. High energy, zero subtlety. Reference: Gumroad, Figma's marketing pages.

The editorial story

Stripe Press and NYT features energy. Print, with hyperlinks.

Design this page editorial. Cream paper background, large serif headlines (Fraunces or Playfair Display), drop caps on opening paragraphs, pull quotes, generous margins, multi-column text on desktop. Muted palette with one deep accent like oxblood or forest green. Full-bleed images with proper captions, footnote styling, a strong masthead. It should feel like print that happens to be interactive. Reference: Stripe Press, NYT feature stories.
12

How to talk to the model

A good design prompt has four parts. Miss the first one and even perfect vocabulary produces a pretty page that solves nothing.

1Context

What the product is, who uses it, and on which device. "A expense tracker for freelancers, mobile-first" changes every decision downstream.

2Direction

The words you picked in this guide: one style, one color mood, one or two fonts, layout, details.

3References

Name real products. "Like Linear" carries more information than three paragraphs of adjectives.

4Constraints

What to avoid. Models have habits, purple gradients being habit number one. Say no explicitly.

A full prompt with all four parts:

Build a landing page for an invoicing tool for Indian freelancers. Mobile-first.

Design direction: clean minimalist style, warm cream background with dark ink text, one terracotta accent. Serif display headlines (Fraunces), Inter for body. Single-column layout, max-width 720px. Soft 16px corners, hairline dividers, no shadows. Subtle 200ms transitions only.

Reference: Notion's calm, Stripe's typography discipline.

Avoid: purple gradients, stock illustrations, more than two fonts, emoji in headings.

Four habits that compound

Change one variable at a time

If you change the font, the palette and the layout in one go, you'll never know what fixed it or what broke it. Iterate like a scientist.

Ask for three directions first

Before committing, ask the AI for three different takes on the same brief. Commit to one, then refine. Choosing beats guessing.

Steal like a designer

See a site you love? Screenshot it, give it to the AI, and ask "describe this design direction in words." Now you own that vocabulary forever.

Keep a taste file

Save every prompt that produced something you loved. Six months of this and you have a design system in plain English.

13

Words that do heavy lifting

Twelve terms designers use daily. Drop any of them into a prompt and the AI knows exactly what you mean.

HierarchyWhat the eye sees first, second, third. If everything is bold, nothing is.
WhitespaceThe empty space around elements. It is doing work: it separates, groups and calms.
ContrastThe difference between elements: size, weight, color. Contrast is how you point without pointing.
AlignmentInvisible lines that elements snap to. Misalignment is why a design feels "off" without you knowing why.
ConsistencySame spacing, same corners, same colors for the same jobs. Users learn your interface once, not on every screen.
Visual weightHow much an element pulls the eye. Big, dark, saturated things are heavy. Balance the weights and the page feels stable.
GridThe invisible column structure everything sits on. Ask for a "12-column grid" and layouts stop drifting.
AffordanceA thing looking like what it does. Buttons should look pressable; links should look clickable.
Accent colorThe one color reserved for actions and highlights. Its rarity is what gives it power.
Type scaleThe fixed ladder of font sizes (12, 14, 16, 20, 24, 32...). Sizes off the ladder look accidental.
Above the foldWhat users see before scrolling. Your one chance to say the most important thing.
Empty stateWhat a screen shows before there is data. Great products design it; average products show a blank void.

Taste is built by exposure.
You just got the exposure.

That's a 101 on design vocabulary. You now have 200+ words that designers use every day, and every one of them works in a prompt.

To get great ideas, you need enough ideas. Same for design: to develop taste, see more, name more, try more.

Open your AI tool, pick a recipe, and ship one screen today.

You have zero excuses to not build.

0picks

Your design prompt

Edit anything you like, then copy and paste it into your AI tool.

Copied. Now go paste it somewhere useful.