UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
KnowledgeCommunity design principlesOnly reviewed published knowledge enters Agent RAG.
Contribute

Categories

AllDesign Systems Page Patterns

Tags

accountadminagentaialertsanalyticsassetsaudit-logbrandbrowsecardscommunitycomparisoncomponentscontractcopycrmdashboard
Knowledge RAG

Design Knowledge Base

Community-maintained principles reviewed before publication and retrieved as Agent design constraints.

Submit principle
30 published principles
Design Systems Page Patternsai / generation

AI Generation Progress Pattern

AI Generation Progress Pattern turns a frequent interface judgment into an executable constraint before generation.

AI generation needs to show what the system is doing, what users can still do, and how to recover after failure.88%
Design Systems Page Patternstokens / editor

Token Editor Pattern

Token Editor Pattern turns a frequent interface judgment into an executable constraint before generation.

Token editors need to make design decisions, references, and impact scope visible.87%
Design Systems Page Patternsdocumentation / design-system

Design System Documentation Page

Design System Documentation Page turns a frequent interface judgment into an executable constraint before generation.

Design system docs must support finding, understanding, copying, and judging suitability.87%
Design Systems Page Patternssettings / ia

Settings Page Architecture

Settings Page Architecture turns a frequent interface judgment into an executable constraint before generation.

Settings should be grouped by user intent and risk, not database fields or internal org structure.87%
Design Systems Page Patternscommunity / library

Community Library Contribution Flow

Community Library Contribution Flow turns a frequent interface judgment into an executable constraint before generation.

Community resources need low contribution friction while review and source notes protect quality.86%
Design Systems Page Patternsaudit-log / timeline

Audit Log Timeline

Audit Log Timeline turns a frequent interface judgment into an executable constraint before generation.

Audit logs need to answer who, when, what object, what action, and what impact.86%
Design Systems Page Patternssearch / filters

Search Results and Facets

Search Results and Facets turns a frequent interface judgment into an executable constraint before generation.

Search interfaces need to explain why results appear and how to narrow or broaden scope.86%
Design Systems Page Patternsgovernance / review

Component Governance Review Flow

Component Governance Review Flow turns a frequent interface judgment into an executable constraint before generation.

A design system needs to record why components are added, how they are reused, and when they are deprecated, not just list components.86%
Design Systems Page Patternsai / prompt

Prompt Builder Interface

Prompt Builder Interface turns a frequent interface judgment into an executable constraint before generation.

Prompt builders should help users express goal, context, constraints, and output format instead of only offering a large textarea.86%
Design Systems Page Patternsanalytics / drilldown

Analytics Drilldown Workflow

Analytics Drilldown Workflow turns a frequent interface judgment into an executable constraint before generation.

Analytics interfaces should move from anomalies and questions toward causes, not just show chart collections.86%
Design Systems Page Patternsadmin / list-detail

Admin List Detail Pattern

Admin List Detail Pattern turns a frequent interface judgment into an executable constraint before generation.

Admin work often moves from filtered lists into detail handling, and both views must share state and action semantics.86%
Design Systems Page Patternsnotifications / inbox

Notification Center Pattern

Notification Center Pattern turns a frequent interface judgment into an executable constraint before generation.

Notification centers should help users judge importance, source, handled state, and next action.85%
Design Systems Page Patternsdocs / toc

Documentation TOC Layout

Documentation TOC Layout turns a frequent interface judgment into an executable constraint before generation.

Long docs need to show current position, section structure, and related next steps.85%
Design Systems Page Patternsempty-state / projects

Empty Project Start State

Empty Project Start State turns a frequent interface judgment into an executable constraint before generation.

An empty project page should move users toward the first real outcome, not explain product features.85%
Design Systems Page Patternspricing / comparison

Pricing Plan Comparison

Pricing Plan Comparison turns a frequent interface judgment into an executable constraint before generation.

Pricing pages help users choose the right plan rather than stacking marketing adjectives.85%
Design Systems Page Patternsonboarding / setup

Progressive Onboarding Setup

Progressive Onboarding Setup turns a frequent interface judgment into an executable constraint before generation.

Onboarding should not ask for everything at once; it should get users to a usable result quickly.85%
Design Systems Page Patternsaccount / profile

Profile and Account Settings

Profile and Account Settings turns a frequent interface judgment into an executable constraint before generation.

Profile, login security, notifications, and billing have different risk levels and should be separated.84%
Design Systems Page Patternsmarketplace / browse

Marketplace Browse Pattern

Marketplace Browse Pattern turns a frequent interface judgment into an executable constraint before generation.

Marketplace pages need to support discovery, comparison, trust judgment, and install or purchase action.84%
Design Systems Page Patternsassets / images

Visual Assets by Page Type

Visual assets should reveal the real product, scene, gameplay, or person rather than only provide vague atmosphere.

When users need to inspect an object, imagery must be specific, clear, and relevant.82%
Design Systems Page Patternsresponsive / stability

Responsive Layout Stability

Fixed-format UI elements need stable dimensions and responsive constraints to avoid shifts or overlap.

Boards, toolbars, counters, and button groups need predefined sizing rules.82%
Design Systems Page Patternsrag / agent

RAG Retrieval to Generation Rule

Knowledge hits should become design constraints, not visible page copy copied from the knowledge item.

RAG improves decision quality and traceability; it should not make pages recite theory.82%
Design Systems Page Patternspage-pattern / layout

Page Pattern Selection

First classify the page task as marketing, operations, reading, configuration, commerce, or creation, then choose the layout pattern.

The wrong page pattern makes good components serve the wrong goal.82%
Design Systems Page Patternsecommerce / product

Ecommerce Product Decision Flow

Ecommerce pages should help users understand the product, compare differences, confirm trust, and purchase.

Purchase decisions need images, price, specs, stock, reviews, delivery, and return information together.82%
Design Systems Page Patternslanding / hero

Landing Page First-Viewport Signal

A landing first viewport must clearly show what the brand, product, person, or place is and hint at the next section.

The first viewport should not only create atmosphere; it should show identity, value, and the next exploration path.82%
Design Systems Page Patternscrm / workflow

CRM Workflow Pages

CRM pages should organize around leads, customers, stage, owner, and next actions rather than decorative sections.

CRM value comes from quick customer state judgment and next-step execution.82%
Design Systems Page Patternsdashboard / alerts

Dashboard Hierarchy and Alerts

Dashboards should show status overview first, then anomalies, trends, details, and action entries.

More metrics are not better; the priority is helping users decide whether action is needed.82%
Design Systems Page Patternssaas / crm

Operational Tool Density Pattern

SaaS, CRM, and admin tools should prioritize repeated scanning, comparison, and action over marketing narrative.

Tool first screens should show work objects, state, and next steps rather than a full-screen promotional area.82%
Design Systems Page Patternscopy / brand

Brand Voice in Interface Copy

Interface copy should help users act, with brand voice applied carefully to buttons, states, and explanations.

Brand expression must not sacrifice clarity, especially for errors, payments, moderation, and destructive actions.82%
Design Systems Page Patternscomponents / contract

Component Consistency Contract

Components need clear props, states, sizes, and disallowed combinations to stay consistent across pages.

A component is not a visual screenshot; it is a reusable set of behaviors and constraints.82%
Design Systems Page Patternstokens / design-system

Design Token Governance

Tokens should express roles and constraints, not merely store colors, type, and spacing.

Maintainable tokens need names, scope, defaults, and prohibited uses so humans and agents can share them.82%