Agent skill · design visual · lobehub
ux
Use for product design principles and UX checks when designing or implementing user-facing flows.
Why this skill is useful
Provides specific interaction principles and design values that enhance user experience in product design, which the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-08-07. 81,352 stars on the source repository.
What this skill does
UX — Design Values & Execution Checklists How LobeHub products should feel, and concrete rules to get there. Use this when building or reviewing any user-facing flow. This file is the index: the design values and interaction principles below are the conceptual layer; the execution checklists live in per-module reference files (see Checklist modules). Each checklist item is tagged with the design value(s) it serves. What lives where: DESIGN.md vs this skill Two documents, two jobs — don't duplicate; cross-reference. DESIGN.md — the design system: what the product looks and sounds like. Themeable tokens (color, typography, elevation, radius), the component inventory, and Voice & Content (wording, tone). Reach for it when you need a token value, a component, or copy tone. this ux skill — interaction behavior: how a flow should behave over time. Empty / loading / error states, lists at scale, selection visibility, pickers, number formatting, draft safety, action flow & momentum, button hierarchy, entity lifecycle, capability guardrails, progressive disclosure. Rule of thumb: static look & wording → DESIGN.md; dynamic behavior → this skill. For component/styling choices see react; for imperative modal wiring see modal. Design values LobeHub follows four product design values — Natural・Meaningful・Certainty・Growth. Read them before designing: references/design-values.md (definitions + conflict priority). Interaction principles Use these before the execution checklists when a flow has multiple plausible interaction patterns. Preserve the surface contract・Meaningful・Natural Every surface carries a task promise: chat keeps the user in a working conversation, a document page supports focused reading / editing, a settings page supports configuration, and so on. Default interactions should continue that promise instead of unexpectedly moving the user into another mode. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills lobehub/ux--723e15