好界面，
从说清楚开始。Great interfaces.
The right words.

认出组件，找到风格，把灵感变成 AI 听得懂的设计语言。Name the component. Find the style. Turn inspiration into a design brief your AI understands.

寻找页面灵感Explore page references 从 UI 元素开始Explore UI elements

动态控件标本 · 中英双语 · 可复制 AI 提示词Live UI specimens · Bilingual · Ready-to-use prompts

一个熟悉的界面，有一个准确的名字。A familiar interface. A precise name.试试看Try it

寻找一个页面参考Find a page reference 探索一种视觉风格Explore a visual style

Command palette命令面板Search and run actions in one place.

想搭页面Build a page12 个页面参考references 想找灵感Find inspiration74 个品牌规范websites 想定风格Set the style45 种视觉风格visual styles

UI 元素词典UI dictionary

点开标本，了解它的名字与用法Open a specimen to learn its name and use

78 elements, each one seeable, nameable, promptable78 个元素，每一个都看得见、叫得出、可指挥

动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Text Scramble (Decode Effect)new 文本乱序（Decode 效果） web

ScrambleTextPlugin

Random characters churn and settle into the real text

随机字符不停翻滚，最终落定成真正的文字

动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Spring Animationnew 弹簧动画（Spring Animation） web

transition={{ type: "spring", stiffness, damping }}

Physics-based motion that overshoots the target and settles

基于物理的运动：冲过目标，再缓缓停稳

动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Easing (Timing Function)new 缓动（Timing Function） web

transition-timing-function

The speed curve of an animation — why motion feels smooth or robotic

动画的速度曲线 —— 决定动起来是顺滑还是僵硬

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Masonry Layout (Pinterest Grid)new 瀑布流布局（Pinterest 网格） web

columns

Cards of different heights packed into columns with no row gaps

高度各异的卡片紧塞进列中，行线完全错开

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Bento Gridnew 便当网格（Bento Grid） web

display: grid + grid-column: span 2

One grid, mixed tile sizes — a layout packed like a bento box

一个网格，大小不一的格子 —— 像便当盒一样紧凑分装的布局

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Spatial Card Layouts 空间卡片布局 web

perspective + transform-style: preserve-3d

A card collection arranged in space so depth explains order, focus, and browsing

让卡片集合在空间中排列，用纵深解释顺序、焦点和浏览方式

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Hamburger Menu (Nav Drawer)new 汉堡菜单（导航抽屉） web

aria-expanded + aria-controls

The three-line button and the navigation panel it slides open

三条线的按钮，以及它滑出的导航面板

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Lightboxnew 灯箱（Lightbox） web

The click-to-enlarge image overlay that dims the page behind it

点图放大、背后页面变暗的图片浮层

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Marqueenew 跑马灯（Marquee） web

animation + @keyframes translateX

Content that auto-scrolls sideways in an endless loop

横向自动滚动、无限循环的内容

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Pointer (Cursor) 指针（光标） macos

NSCursor

Every shape the mouse pointer takes — and the real name of each one

鼠标指针的每一种形态 —— 以及它们各自的本名

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Alert 提醒（Alert） macos

NSAlert

The small centered window with a badged icon, a bold line, and Cancel/OK buttons

居中的小窗口：带角标的图标、一行粗体字，以及“取消/好”按钮

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Slider 滑块（Slider） macos

NSSlider

The round knob you drag along a track to pick a value from a range

沿轨道拖动的圆钮，用来在一个范围里取值

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Color Well 颜色井（Color Well） macos

NSColorWell

The little swatch button that shows the current color and opens the picker

显示当前颜色的小色块按钮，点开就是取色器

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Form Field 表单字段（Form Field） web

Every part of a labeled input — label, placeholder, helper text, and the red error line

带标签输入框的每个部分 —— 标签、占位文本、辅助文本和那行红色错误信息

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Truncation (Ellipsis & Line Clamp) 文本截断（省略号与行数截断） web

text-overflow: ellipsis

Text cut short with … — at the end of the line, after N lines, or in the middle

用 … 把文本截短 —— 在行尾、在 N 行之后，或者在中间

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Drag & Drop 拖放（Drag & Drop） web

ondrop

The grips, handles, previews, and landing cues around a drag interaction

拖拽交互周边的抓手、手柄、预览和落点提示

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Divider vs. Separator vs. Rule 分隔线：Divider、Separator 与 Rule web

<hr>

The same thin line can mark a topic break, separate controls, or be decoration

同一条细线，可以是话题转折、控件分隔，也可以只是装饰

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Progress Ring vs. Spinner vs. Progress Bar 进度环 vs. Spinner vs. 进度条 web

A spinner means wait; a ring or bar can show how much work is complete

Spinner 只表示「请等待」；进度环或进度条能显示已经完成了多少

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Mac Window Mac 窗口 macos

NSWindow

The movable Mac app frame, from its title bar and toolbar to its resize edges

可移动的 Mac 应用框架，从标题栏、工具栏一直到调整大小的边缘

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Split View 拆分视图 macos

NSSplitView

Resizable panes separated by a draggable divider inside a Mac window

Mac 窗口里由可拖动分隔条隔开、可各自调整大小的窗格

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Scroll View (Scroller) 滚动视图（Scroller） macos

NSScrollView

A viewport whose AppKit scrollbar is called a scroller

一个视口，它的滚动条在 AppKit 里叫 scroller

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Search Field 搜索栏 macos

NSSearchField

A Mac text field with built-in search, clearing, and recent-query controls

Mac 上的文本输入框，自带搜索、清除和最近查询控件

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Save Panel 存储面板 macos

NSSavePanel

The standard Mac dialog for naming a file and choosing where to save it

Mac 上给文件起名、选择存储位置的标准对话框

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Token Field 令牌输入框 macos

NSTokenField

A text input that turns recognized values into removable rounded tokens

一种文本输入框，能把识别出来的值变成可移除的圆角令牌

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Combo Button 组合按钮 macos

NSComboButton

A primary action joined to a separate arrow that opens related actions

主操作和一个独立箭头拼在一起，箭头打开相关操作

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Level Indicator 级别指示器 macos

NSLevelIndicator

A Mac gauge rendered as a capacity bar, rating stars, or relevance meter

Mac 上的量表：容量条、评分星星或相关度仪表

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Column View (Browser) 分栏视图（层级浏览器） macos

NSBrowser

Finder-style columns that reveal each successive level of a hierarchy

Finder 风格的分栏，逐级展开层级结构

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Outline View 大纲视图 macos

NSOutlineView

An indented tree of rows that expand to reveal nested children

一棵带缩进的行树，展开后露出嵌套的子行

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

The Three Dots (Overflow Menu) 三个点（溢出菜单） web

Horizontal dots, vertical dots, three lines, and an ellipsis mean different things

横排三个点、竖排三个点、三条横线和省略号，含义各不相同

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Menu Bar 菜单栏 macos

NSApp.mainMenu

The strip along the top of the Mac screen — every part, labeled

Mac 屏幕顶部那条横条——每个部件都标上名字

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Context Menu 上下文菜单 macos

NSMenu

The menu opened at the pointer by right-clicking or Control-clicking an item

在项目上右键点按或 Control-点按，在指针处打开的菜单

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Disclosure Triangle 披露三角 macos

NSOutlineView

The small rotating control that reveals or hides nested content

那个会旋转的小控件，用来显示或隐藏嵌套内容

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Dock Badge Dock 角标 macos

NSDockTile.badgeLabel

The red count or status label overlaid on an app's Dock icon

叠在应用 Dock 图标上的红色数量或状态标签

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Focus Ring 焦点环 macos

NSView.focusRingType

The accent-colored glow that identifies the control receiving keyboard input

标示当前接收键盘输入的控件的强调色光晕

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Inspector 检查器 macos

View.inspector(isPresented:content:)

The right-hand panel for viewing and editing details of the current selection

右侧用于查看和编辑当前选中项详情的面板

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Panel (Floating Window / HUD) 面板（浮动窗口 / HUD） macos

NSPanel

An auxiliary macOS window that floats above related document windows

悬浮在相关文稿窗口上方的 macOS 辅助窗口

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Popover 弹出框（Popover） macos

NSPopover

A floating bubble whose arrow points back to the control that opened it

带箭头的浮动气泡，箭头指回打开它的控件

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Pop-Up Button vs. Pull-Down Button vs. Combo Box 弹出式按钮 vs. 下拉式按钮 vs. 组合框 macos

NSPopUpButton

Three similar-looking macOS controls for choosing a value or invoking a menu action

三个外观相似的 macOS 控件，分别用于选取一个值或触发菜单操作

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Segmented Control 分段控件 macos

NSSegmentedControl

A row of connected choices with the current segment visibly selected

一排相连的选项，当前选中的分段清晰可见

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Sheet 窗口附着面板（Sheet） macos

NSWindow.beginSheet(_:completionHandler:)

A modal panel attached to one macOS window rather than the whole app

只附着于单个 macOS 窗口、而非整个 App 的模态面板

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Sidebar (Source List) 边栏（源列表） macos

NavigationSplitView

The translucent navigation column along the left edge of a macOS window

位于 macOS 窗口左缘的半透明导航列

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Stepper 步进器 macos

NSStepper

The compact up-and-down arrow pair used to increment or decrement a value

一对紧凑的上下箭头，用来递增或递减数值

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Toolbar (Unified Title Bar) 工具栏（统一标题栏） macos

NSToolbar

A row of window actions integrated with the modern macOS title bar

与现代 macOS 标题栏融为一体的一排窗口操作

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Traffic Lights (Window Controls) 红绿灯按钮（窗口控制按钮） macos

NSWindow.standardWindowButton(_:)

The red, yellow, and green controls at the top-left of a macOS window

macOS 窗口左上角的红、黄、绿三个控制按钮

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Visual Effect Material (Vibrancy) 视觉效果材质（Vibrancy） macos

NSVisualEffectView

The adaptive translucent background used behind macOS sidebars, menus, and panels

macOS 边栏、菜单和面板背后那种自适应的半透明背景

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Toast (Snackbar) 轻提示（Snackbar） web

role="status"

A brief, non-blocking message that appears after an action

操作完成后短暂出现、不打断流程的消息

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Modal Dialog vs. Drawer vs. Sheet 模态对话框 vs. 抽屉 vs. 底部面板 web

Three overlay patterns distinguished by placement, scope, and task depth

三种覆盖层模式，按位置、范围和任务深度区分

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Popover vs. Dropdown Menu vs. Tooltip 弹出框 vs. 下拉菜单 vs. 工具提示 web

popover

Three anchored overlays with different triggers, content, and dismissal rules

三种锚定式覆盖层，触发方式、内容和关闭规则各不相同

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Scrim (Backdrop / Overlay) 遮罩层（背景遮罩 / 覆盖层） web

::backdrop

The translucent layer that separates a modal surface from the page

把模态界面与页面隔开的那层半透明层

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Skeleton vs. Spinner 骨架屏 Skeleton vs. 旋转指示器 Spinner web

aria-busy="true"

Two loading indicators for predictable layouts and indeterminate waits

两种加载指示器：一个给布局可预期的内容占位，一个应付时长未知的等待

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Combobox (Autocomplete / Typeahead) 组合框 Combobox（自动补全 / 输入联想） web

role="combobox"

A text input paired with a filtered list of selectable suggestions

一个文本输入框，配一个按输入过滤、可供选择的建议列表

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Command Palette 命令面板 Command Palette web

Command

A keyboard-first searchable launcher for actions and navigation

键盘优先的可搜索启动器，用来执行操作和跳转导航

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Accordion (Disclosure) 手风琴 Accordion（披露式展开 Disclosure） web

Stacked sections whose headings expand and collapse their content

堆叠的分区，点标题即可展开或收起对应内容

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Tabs 标签页 Tabs web

role="tablist"

A single row of labels that switches one shared content region

一排标签，切换同一块共享内容区

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Badge vs. Chip vs. Pill vs. Tag 徽标 Badge vs. 碎片 Chip vs. 胶囊 Pill vs. 标签 Tag web

Badge

Compact labels distinguished by meaning, shape, and interactivity

同样是小标签，靠含义、形状和可交互性来区分

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Breadcrumbs 面包屑导航 Breadcrumbs web

<nav>

A hierarchy trail from the current page back to its ancestors

一条从当前页面回溯到各级上级的层级路径

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Sticky vs. Fixed Positioning 粘性定位 Sticky vs. 固定定位 Fixed web

position: sticky

Two ways to keep an element visible with different containing blocks

两种让元素保持可见的定位方式，包含块各不相同

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Focus Ring (:focus-visible) 焦点环 Focus Ring（:focus-visible） web

:focus-visible

The keyboard-aware outline that identifies the active control

感知键盘操作的轮廓线，标识当前活动的控件

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Empty State 空状态 Empty State web

Purposeful guidance shown when a view has no content yet

视图还没有内容时，给出有目的的引导

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Hover Card 悬停卡片 Hover Card web

HoverCard

A rich, non-modal preview revealed from a hovered or focused reference

悬停或聚焦某个参照物时浮现的富内容、非模态预览

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Switch vs. Checkbox vs. Radio 开关 Switch vs. 复选框 Checkbox vs. 单选按钮 Radio web

Controls for an on/off setting, independent choices, or one choice from a group

三种控件：管开/关的设置、各自独立的多选、组内只能选一个

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Toggle Group (Segmented Control) 切换组 Toggle Group（分段控件 Segmented Control） web

ToggleGroup

A connected row of compact options with one persistent selection

连成一排的紧凑选项，其中一项保持选中

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Menu Bar Extra (Status Item) 菜单栏附加项 Menu Bar Extra（状态项 Status Item） macos

NSStatusItem

The icon that lives on the right side of the macOS menu bar

住在 macOS 菜单栏右侧的那个图标

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Container Morph (7 Patterns)new 容器变形（7 种模式） web

@keyframes + border-radius

A container changes shape, size, or layout while its content stays continuous

容器改变形状、大小或排版，但内容始终保持连续

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

OTP Input (One-Time Code)new 验证码输入框 OTP Input（一次性代码） web

inputmode="numeric" + autocomplete="one-time-code"

A segmented field for entering a short verification code

用于输入短验证码的分段式输入框

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Duration Pickernew 时长选择器 Duration Picker web

input[type=number]

A compact control for choosing an amount of time

用于选择一段时间长度的紧凑控件

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Animated Counternew 动态数字计数器 Animated Counter web

requestAnimationFrame

A value that counts to a new number so the change is easy to notice

用短暂计数过程让数值变化更容易被注意到

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Scroll Progress Indicatornew 滚动进度指示器 Scroll Progress Indicator web

scrollY + scrollHeight

A small cue showing how far a reader has moved through a long page

显示读者在长页面中已经阅读到哪里

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Code Blocknew 代码块 Code Block web

pre > code

A readable code sample with context, copy, and line-level structure

带有上下文、复制功能和逐行结构的可读代码示例

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Destructive Action (Danger Button)new 危险操作 Destructive Action（危险按钮） web

aria-describedby + alertdialog

A clearly signposted action that can remove or irreversibly change data

明确标记可能删除或不可逆改变数据的操作

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

AI Status Orbnew AI 状态球 AI Status Orb web

role=status + aria-live

A compact animated focal point that communicates an AI system's current state

用紧凑的动态焦点表达 AI 系统当前处于什么状态

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Agent Processing Statenew Agent 处理状态 web

role=status + aria-live

A visible status sequence that explains what an AI agent is doing between input and result

让用户看见 AI Agent 在输入和结果之间正在做什么的状态序列

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Streaming Responsenew 流式响应 web

aria-live="polite"

A response surface that reveals generated text as it arrives and stays interruptible

让生成中的文字逐步出现，同时保持可停止、可重试和可复制

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Agent Approval Cardnew Agent 操作确认卡 web

role=group + aria-describedby

A human-in-the-loop checkpoint for reviewing and approving an agent plan or action

在 Agent 执行计划或动作前，留出人工查看和批准的检查点

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Diff Viewernew 差异查看器 web

A line-aware comparison surface that makes additions, deletions, and changes safe to review

让新增、删除和修改行可以安全审阅的逐行对比界面

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Agent Input Composernew Agent 输入编排器 web

A task input surface that combines a prompt with model, skill, and attachment context

把 Prompt 与模型、Skill、附件上下文组合在一起的任务输入区

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Inline Citationsnew 行内引用 web

Source references placed beside a claim so an AI answer can be checked in context

把来源放在论断旁边，让 AI 回答可以在上下文中核查

动效加载中…Loading animation…动效加载失败，点开详情查看Animation unavailable. Open the detail to retry.

Agent Task Listnew Agent 任务清单 web

A compact checklist that shows an agent’s planned, active, completed, and blocked work

展示 Agent 计划中待处理、当前、完成和阻塞工作的紧凑清单

好界面，从说清楚开始。Great interfaces.The right words.

UI 元素词典UI dictionary

Text Scramble (Decode Effect)new 文本乱序（Decode 效果） web

Spring Animationnew 弹簧动画（Spring Animation） web

Easing (Timing Function)new 缓动（Timing Function） web

Masonry Layout (Pinterest Grid)new 瀑布流布局（Pinterest 网格） web

Bento Gridnew 便当网格（Bento Grid） web

Spatial Card Layouts 空间卡片布局 web

Hamburger Menu (Nav Drawer)new 汉堡菜单（导航抽屉） web

Lightboxnew 灯箱（Lightbox） web

Marqueenew 跑马灯（Marquee） web

Pointer (Cursor) 指针（光标） macos

Alert 提醒（Alert） macos

Slider 滑块（Slider） macos

Color Well 颜色井（Color Well） macos

Form Field 表单字段（Form Field） web

Truncation (Ellipsis & Line Clamp) 文本截断（省略号与行数截断） web

Drag & Drop 拖放（Drag & Drop） web

Divider vs. Separator vs. Rule 分隔线：Divider、Separator 与 Rule web

Progress Ring vs. Spinner vs. Progress Bar 进度环 vs. Spinner vs. 进度条 web

Mac Window Mac 窗口 macos

Split View 拆分视图 macos

Scroll View (Scroller) 滚动视图（Scroller） macos

Search Field 搜索栏 macos

Save Panel 存储面板 macos

Token Field 令牌输入框 macos

Combo Button 组合按钮 macos

Level Indicator 级别指示器 macos

Column View (Browser) 分栏视图（层级浏览器） macos

Outline View 大纲视图 macos

The Three Dots (Overflow Menu) 三个点（溢出菜单） web

Menu Bar 菜单栏 macos

Context Menu 上下文菜单 macos

Disclosure Triangle 披露三角 macos

Dock Badge Dock 角标 macos

Focus Ring 焦点环 macos

Inspector 检查器 macos

Panel (Floating Window / HUD) 面板（浮动窗口 / HUD） macos

Popover 弹出框（Popover） macos

Pop-Up Button vs. Pull-Down Button vs. Combo Box 弹出式按钮 vs. 下拉式按钮 vs. 组合框 macos

Segmented Control 分段控件 macos

Sheet 窗口附着面板（Sheet） macos

Sidebar (Source List) 边栏（源列表） macos

Stepper 步进器 macos

Toolbar (Unified Title Bar) 工具栏（统一标题栏） macos

Traffic Lights (Window Controls) 红绿灯按钮（窗口控制按钮） macos

Visual Effect Material (Vibrancy) 视觉效果材质（Vibrancy） macos

Toast (Snackbar) 轻提示（Snackbar） web

Modal Dialog vs. Drawer vs. Sheet 模态对话框 vs. 抽屉 vs. 底部面板 web

Popover vs. Dropdown Menu vs. Tooltip 弹出框 vs. 下拉菜单 vs. 工具提示 web

Scrim (Backdrop / Overlay) 遮罩层（背景遮罩 / 覆盖层） web

Skeleton vs. Spinner 骨架屏 Skeleton vs. 旋转指示器 Spinner web

Combobox (Autocomplete / Typeahead) 组合框 Combobox（自动补全 / 输入联想） web

Command Palette 命令面板 Command Palette web

Accordion (Disclosure) 手风琴 Accordion（披露式展开 Disclosure） web

Tabs 标签页 Tabs web

Badge vs. Chip vs. Pill vs. Tag 徽标 Badge vs. 碎片 Chip vs. 胶囊 Pill vs. 标签 Tag web

Breadcrumbs 面包屑导航 Breadcrumbs web

Sticky vs. Fixed Positioning 粘性定位 Sticky vs. 固定定位 Fixed web

Focus Ring (:focus-visible) 焦点环 Focus Ring（:focus-visible） web

Empty State 空状态 Empty State web

Hover Card 悬停卡片 Hover Card web

Switch vs. Checkbox vs. Radio 开关 Switch vs. 复选框 Checkbox vs. 单选按钮 Radio web

Toggle Group (Segmented Control) 切换组 Toggle Group（分段控件 Segmented Control） web

Menu Bar Extra (Status Item) 菜单栏附加项 Menu Bar Extra（状态项 Status Item） macos

Container Morph (7 Patterns)new 容器变形（7 种模式） web

OTP Input (One-Time Code)new 验证码输入框 OTP Input（一次性代码） web

Duration Pickernew 时长选择器 Duration Picker web

Animated Counternew 动态数字计数器 Animated Counter web

Scroll Progress Indicatornew 滚动进度指示器 Scroll Progress Indicator web

Code Blocknew 代码块 Code Block web

Destructive Action (Danger Button)new 危险操作 Destructive Action（危险按钮） web

AI Status Orbnew AI 状态球 AI Status Orb web

Agent Processing Statenew Agent 处理状态 web

Streaming Responsenew 流式响应 web

Agent Approval Cardnew Agent 操作确认卡 web

Diff Viewernew 差异查看器 web

Agent Input Composernew Agent 输入编排器 web

Inline Citationsnew 行内引用 web

Agent Task Listnew Agent 任务清单 web

好界面，
从说清楚开始。Great interfaces.
The right words.