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

Design System Documentation Page

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

documentationdesign-systemcomponents

Design Principle

Design system docs must support finding, understanding, copying, and judging suitability.

Principle Design system docs must support finding, understanding, copying, and judging suitability.

Design action Component pages include purpose, anatomy, props, states, examples, accessibility notes, code entry, and avoid cases.

Examples Positive example: Component libraries, brand systems, product guidelines, and team development docs. Counterexample: Only screenshots exist without usage or state guidance.

Apply when Component libraries, brand systems, product guidelines, and team development docs. 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

Component pages include purpose, anatomy, props, states, examples, accessibility notes, code entry, and avoid cases.

Apply When

  • Component libraries, brand systems, product guidelines, and team development docs.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • Only screenshots exist without usage or state guidance.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

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