回应

Use a spinner for indeterminate short waits.

使用转圈表示时长未知的短暂等待。

Use skeleton placeholders matching the final layout.

使用与最终布局同结构的骨架占位。

Use shimmer loading with a moving highlight.

使用带流动高光的微光骨架加载。

Use a labeled progress bar showing percent complete.

使用显示完成百分比的线性进度条。

Use circular progress with a percent label.

使用带百分比文字的环形进度。

Use an indeterminate progress animation when percent is unknown.

百分比未知时使用不确定进度动画。

Use determinate progress bound to a known percentage.

使用绑定已知百分比的确定进度。

Use an empty state with explanation and a create action.

使用带说明和创建操作的空状态。

Use an error state with retry.

使用带重试的加载失败状态。

Use a success result page with a confirmation and next step.

使用带确认和下一步的成功结果页。

Use an exception page for 404 or 500.

使用 404 或 500 的整页异常页。

Build a single Tooltip. Structure: a short trigger labeled Name and a tiny floating label with one line of help (Display name shown on invoices). Visual: dark or inverse small chip, no buttons inside. Interaction: show on hover and keyboard focus, hide on blur/leave; delay about 200ms. States: hidden, visible. Do not put forms or actions inside, and do not use a popover or modal. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成工具提示。触发器文字 Name，浮层只有一行短说明（如发票上显示的名称）。小块反色，里面不能有按钮。悬停和键盘聚焦约 200ms 后出现，离开即关。不要放表单或操作，也不要做成气泡卡片或对话框。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Popover that can hold actions, not just text. Structure: a trigger button Share; the floating panel contains a short title, a compact field or two actions (Copy link, Embed). Interaction: click trigger to toggle; click outside or Escape closes; focus stays in the panel while open. States: closed, open. Do not auto-open on hover only, do not dim the whole page like a modal, and do not limit content to one tooltip sentence. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成可放操作的气泡卡片，不要只有一句话。触发按钮 Share；浮层里有短标题、一两个操作（Copy link、Embed）。点击开关；点外部或 Escape 关闭；打开时焦点在面板内。不要只靠悬停、不要整页遮罩（那是对话框），也不要做成纯 tooltip。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Hover Card that previews a person. Structure: a text trigger (Ada Lovelace); on hover a card appears with name, role, and one action (Message). Interaction: open on hover with a short delay; keep open while moving into the card; close when leaving both. States: hidden, visible. Do not require a click to open, do not use a blocking modal, and do not use a one-line tooltip. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成悬停预览人物的卡片。触发文字 Ada Lovelace；悬停出现姓名、角色和操作 Message。稍延迟出现，移进卡片保持打开，都离开才关。不要靠点击才打开，不要阻断式对话框，也不要做成一行 tooltip。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Modal Dialog. Structure: a dimmed overlay, a centered panel with title Edit project, body text or a simple field, primary Save and secondary Cancel, plus a close control. Interaction: open from a trigger; trap focus inside; Escape and overlay click close; Cancel/Save close. States: closed, open. Motion: overlay fade, panel ~180ms. Do not use a side drawer, and do not open without a scrim. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成对话框。有变暗遮罩、居中面板、标题 Edit project、正文或简单字段、主按钮 Save 和次按钮 Cancel、关闭。从触发器打开；焦点锁在内部；Escape 和点遮罩关闭。遮罩淡入，面板约 180ms。不要做成侧抽屉，也不要没有遮罩。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Alert Dialog that must be answered. Structure: overlay plus panel titled Delete file?, short warning copy, danger Confirm and Cancel. Interaction: open from Delete; the rest of the UI is inert; Escape may cancel; there is no click-away-to-dismiss, or overlay click maps to Cancel only. States: closed, open. Do not include extra form fields, and do not use a non-blocking toast. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成必须回应的警告对话框。标题 Delete file?，短警告，危险色 Confirm 和 Cancel。打开后其余界面不可用；不能点空白处当没看见（或点遮罩只等于 Cancel）。不要加额外表单，也不要用非阻断 Toast。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Popconfirm anchored to a dangerous action. Structure: a Delete text/button; beside it a small bubble with Confirm deletion? plus Yes and No. Interaction: click Delete to open the bubble; Yes/No or outside click closes; no full-screen dim. States: closed, open. Do not use a centered modal, and do not use a tooltip-only sentence without buttons. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成锚定在危险操作旁的气泡确认。Delete 旁小气泡：Confirm deletion? 加 Yes / No。点 Delete 打开；选完或点外部关闭；不要全屏变暗。不要做成居中对话框，也不要做成没有按钮的纯 tooltip。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single right-side Drawer. Structure: a trigger Open; a fixed-width panel slides from the right over a dim overlay, with title Details, body content, and close. Interaction: open/close; Escape and overlay click close; focus in the drawer. Motion: panel slides ~200ms. Do not center a modal, do not rise from the bottom (bottom sheet), and do not use a persistent sidebar that never overlays. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成从右侧滑入的固定宽度抽屉。触发 Open；遮罩上从右滑入，标题 Details、正文、关闭。Escape 和点遮罩关闭。约 200ms 滑入。不要居中对话框，不要从底部升起，也不要做成从不盖住内容的常驻侧栏。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single edge Sheet (not a modal, not a bottom sheet). Structure: a panel that slides in from the right or left edge with title Filters and a few controls, optional overlay. Interaction: open from a trigger, close via close control or Escape. Motion: edge slide ~200ms. Do not center the panel, and do not attach it to the bottom of the screen. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成从左右边缘滑入的面板，不是居中对话框，也不是底部弹层。标题 Filters 加几个控件，可有遮罩。触发打开，关闭钮或 Escape 关闭。约 200ms。不要居中，也不要贴屏幕底边。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Bottom Sheet. Structure: a panel that rises from the bottom with a grab handle, title Actions, and stacked actions (Share, Copy, Delete). Interaction: open from a trigger; close by swipe down, overlay click, or a cancel row. Motion: ~200ms rise. Do not slide from the side (drawer), and do not center a desktop modal. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成从底部升起的弹层。有拖动手柄、标题 Actions、纵向操作 Share、Copy、Delete。可下扫、点遮罩或取消行关闭。约 200ms 升起。不要从侧面滑入，也不要做成桌面居中对话框。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Use a numeric badge on a host control, not as a category tag.

使用挂在宿主控件上的数字徽章，不要当成类别标签。

Use a tag to represent a category.

使用表示类别的标签，通常不可点删。

Use a chip that can be dismissed.

使用可关闭的交互芯片，不是 Tag。

Use filter chips with a selected check treatment.

使用带选中勾选态的筛选芯片。

Use a status badge with a color dot and short label.

使用带色点和短文案的状态徽章。

Use a lozenge for compact status text such as IN PROGRESS.

使用如 IN PROGRESS 的紧凑胶囊状态文字。