Screen guide

List & search UI design

The job: Scan many items fast, find the right one, act.

Structure

Optional filter/search bar → consistent rows or cards → a clear per-item action. Consistency beats variety here.

Hierarchy

The identifying field (name/title) is boldest; status and meta are quieter; the value/amount is emphasized on the trailing edge.

Mobile

Full-width rows, swipe-to-act, ≥44px rows, sticky filter.

Signature patterns

List item (title + status dot + trailing value)
Filterable list
Segmented control
Swipe actions on mobile
Empty state
Skeleton while loading

Avoid

rows that vary wildly
no empty/loading state
status by color alone (pair with text)
tiny tap targets
pagination where infinite scroll fits

Build it with StyleSeed

This is the screen-typehalf of design judgment — cross it with your app’s domain and you get the actual decisions. StyleSeed bakes both into 74 rules your AI reads automatically; for a list / search / browse, reach for the snap motion seed.

Make your AI design a list / search / browse right

Open-source design engine for Claude Code, Codex & Cursor. MIT.

Star on GitHub

Other screen guides

Dashboard design →Form design →Landing page design →Detail & profile page design →Settings page design →Onboarding & empty state design →