Design prompts for cards

A card is a small, self-contained box that holds one thing worth a click: a product, a person, an article, a metric, a plan. Nielsen Norman Group describes it as a container for a few short, related pieces of information that acts as the entry point to more detail, so the whole card is usually one clickable link. The ones that work do one job, rank their content (image, then title, then a line of meta, then a single action), keep one primary action, and look the same across the row. The prompts below are the most-copied card and component designs in the Superdesign library, from glassmorphism and glowing-edge cards to profile cards, bento grids, pricing cards and 3D tilt and stack effects. These are UI component cards, not greeting cards. Open any one to see the exact prompt behind it, then tweak the copy and generate your own editable version in seconds.

How to prompt a card that looks designed, not generated

An AI design agent has a strong default for a card, and most of those defaults are the average of every Tailwind demo it trained on: a frosted-glass box on a purple gradient, a gradient-blob icon, the Inter typeface, filler copy, and a couple of equal ghost buttons. A good prompt is really a list of constraints that override those defaults. Here is each default you need to override, the words that do it, and a template that bakes them all in.

Design a [type] card, for example a [product, profile, stat, article or pricing] card, that holds one [the single thing it represents] and links to [where a click goes].
One concept: put exactly one subject on the card and one primary action. If you need more actions, move them to the detail view, not the card.
Content order, top to bottom: [an image or icon with a fixed aspect ratio], a short title of about [five] words, one line of meta such as [price, date, role or read time], then a single primary action.
Hierarchy: make the title the loudest element, mute the meta, and give only the primary action color. Everything else is neutral.
Action: one solid primary button, for example [Add to cart or Read more], plus at most one quiet secondary link. Make the whole card a link so the entire surface is clickable.
States: include the hover state (a slight lift or border), the focus ring for keyboard users, and a loading skeleton.
In a grid: equal heights, the same internal padding of about [16 to 24px], the same image aspect ratio on every card, and [3] across on desktop reflowing to [1] on mobile.
Style: a neutral surface with a 1px border and a soft shadow, one [accent] color used only for the primary action and status, and a named typeface, not the default Inter. No glassmorphism, no purple gradient.

One concept per card

Default: It crowds a card with several subjects and a handful of equal buttons, so nothing reads as the point. Nielsen Norman Group defines a card as a short, linked representation of a single conceptual unit.

Constrain it: Say the card holds exactly one thing and one primary action, and push any extra actions to the detail view.

Content hierarchy

Default: It stacks every element at the same weight, so the card is a flat block of equal lines with no clear order to read it in.

Constrain it: Name the order: image, then a short title as the loudest element, then a muted line of meta, then the action. Rank it, do not flatten it.

One primary action

Default: It drops two or three equally weighted buttons on the card, so a person has to stop and choose instead of acting.

Constrain it: Ask for one solid primary action and at most one quiet secondary link. Material guidance is a single dominant action per card.

The surface

Default: Left alone it reaches for frosted glassmorphism on a purple gradient, a gradient-blob icon, and the Inter typeface, the look of every AI card on the internet.

Constrain it: Name a neutral surface with a 1px border and a soft shadow, one accent color, and a real typeface. Say no glassmorphism and no purple gradient.

Interactive affordance

Default: It ships a flat, dead rectangle with no hover, no focus ring, and no real link, so a clickable card gives no sign it can be clicked.

Constrain it: Ask for a hover state (a slight lift or border), a focus ring for keyboard users, and the whole card as one link with cursor pointer.

Consistency in a grid

Default: It sizes each card to its own content, so a row ends up with ragged heights, mismatched padding, and different image crops.

Constrain it: Require equal heights, the same internal padding, and one image aspect ratio across the row, three across on desktop reflowing to one on mobile.

Frequently asked questions

What is a card in UI design?

A card is a small, self-contained box that groups a few related pieces of information, like an image, a title and an action, and acts as the entry point to more detail. Nielsen Norman Group describes it as a short, linked representation of a single conceptual unit. Because the whole card usually links somewhere, the entire surface is the click target, not just a button inside it.

What makes a good card UI?

It does one job and shows one primary action. Rank the content so the eye has an order to follow, usually an image, then a short title, then a muted line of meta, then the action. Give only the primary action color, keep generous and consistent padding, and make every card in a row the same height. Restraint and a clear hierarchy do more than another badge or button ever will.

When should you use cards instead of a list or table?

Use cards when the items are mixed in type and each one needs an image or a different shape of content, like a feed of products, profiles or articles you browse and tap into. Use a list or table for uniform rows people scan or compare line by line. Nielsen Norman Group warns that cards are less scannable than lists and a poor fit for side-by-side comparison, so reach for them when each item earns its own little container.

Why does my AI-generated card look generic?

Because a vague prompt gets the model defaults: a frosted glassmorphism box on a purple gradient, a gradient-blob icon, the Inter typeface, filler copy, and two equal ghost buttons. Name the one concept the card holds, the content order, a single primary action, a neutral surface with one accent and a real typeface, and say no glass and no purple gradient, and it stops reaching for the average.

How do you write a prompt to generate a card UI?

Describe the brief, not the vibe: the one thing the card represents, where a click goes, the content order from image to action, the single primary action, the hover and focus states, and the grid rules so a row stays even. Add one accent color on a neutral surface and a named typeface. The template above walks through each part, and you can open any example here to see a full prompt that works.