UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Design Systems Page Patterns

AI Generation Progress Pattern

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

aigenerationprogress

Design Principle

AI generation needs to show what the system is doing, what users can still do, and how to recover after failure.

Principle AI generation needs to show what the system is doing, what users can still do, and how to recover after failure.

Design action Generation areas show stage, queue/time, cancel/retry, partial results, and error recovery; avoid a spinner-only state.

Examples Positive example: Text, UI, images, reports, code, and workflows are generated asynchronously by AI. Counterexample: A long task only shows Loading.

Apply when Text, UI, images, reports, code, and workflows are generated asynchronously by AI. Users need to judge state, scope, risk, or next action quickly.

Source notes Source note: Synthesized from GOV.UK, Carbon, Polaris, Atlassian, Design.Systems, Design Systems Repo, and product-pattern libraries.

Agent Directive

Generation areas show stage, queue/time, cancel/retry, partial results, and error recovery; avoid a spinner-only state.

Apply When

  • Text, UI, images, reports, code, and workflows are generated asynchronously by AI.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • A long task only shows Loading.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

Category
Design Systems Page Patterns
Quality
88%
Version
v1
Published
6/6/2026