Mise UI
自我解释的 UI。每个组件都附带其形态背后的原理以及何时不应使用的规则。在安装或修改时，请保留这两者。
何时使用
- 项目使用 React + Tailwind CSS v4，并包含 shadcn 样式的
components.json - 屏幕包含 AI 步骤：等待模型、流式文本、工具调用、推理、语音输入
- 你需要一个基础组件库（按钮、对话框、选择框……），其设计原理可在设计评审中引用
安装
- 主题（每个项目一次）：
npx shadcn@latest add https://miseui.junsu4621.workers.dev/r/theme.json - 每个组件：
npx shadcn@latest add https://miseui.junsu4621.workers.dev/r/<名称>.json（依赖项会自动安装） - 首次使用组件前，请阅读
references/<名称>.md
规则
- 尊重
prefers-reduced-motion。每个 Mise 组件已经做到了；修改时请保持。 - 每个屏幕只有一个
mise强调色。它标记主要操作或活跃的 AI 活动，而非装饰。 - 命名等待。任何超过约一秒的模型调用都需要一个
thinking-indicator，其标签说明正在发生的事情。 - 无暗黑模式：无虚假倒计时、隐藏取消、预勾选同意。每个参考文档中的“禁止”行具有约束力。
- 保留
data-slot属性；测试和样式挂钩依赖它们。
症状 → 组件
| 当您看到... | 使用... |
|---|---|
| 用户等待模型调用超过约一秒 | thinking-indicator |
| 令牌一个接一个到达，应显示为打字效果，而不是冻结的块 | streaming-text |
| 代理运行了一个工具，用户应能信任结果 | tool-call-card |
| 多步骤计划，用户可能想检查但不强制阅读 | reasoning-steps |
| 麦克风处于活动状态，用户必须知道 | voice-wave |
| 内容正在加载且最终布局已知 | skeleton |
| 一个操作比屏幕其余部分更重要 | button |
| 一个地方选项太多 | select |
| 一个触发器后面的短操作列表 | dropdown-menu |
| 用户必须先做出决定才能做其他事 | dialog |
| 仅部分用户需要的额外细节 | tooltip |
| 属于一起的相关控件 | card |
AI 状态
- 推理步骤（
reasoning-steps）：折叠的模型步骤时间线；标题命名当前步骤，主体显示所有步骤。 — 渐进式披露 · 参考 - 流式文本（
streaming-text）：按阅读速度逐字符显示到达的文本，并带一个光标标记下一个单词出现的位置。 — 感知延迟 · 参考 - 思考指示器（
thinking-indicator）：三个呼吸点和一个实时标签，告诉用户模型正在工作以及正在做什么。 — 系统状态可见性 · 劳动幻觉 · 参考 - 工具调用卡片（
tool-call-card）：可折叠的工具调用记录：名称、状态、持续时间以及按需显示的精确输入和输出。 — 透明度建立信任 · 参考 - 语音波形（
voice-wave）：随麦克风音量上升的条，让用户看到自己被听到，以及何时没有被听到。 — 系统状态可见性 · 参考
核心组件
- 徽章（
badge）：五种变体的小型状态芯片；温暖的 mise 变体保留给必须突出的那一个项目。 — 冯·雷斯托夫效应 · 参考 - 按钮（
button）：按压目标，具有 150 毫秒的稳定时间和 2% 的按下效果，让点击感到被确认。 — 多赫蒂阈值 · 参考 - 卡片（
card）：带边框的表面，包含头部、内容和页脚插槽，在任何人阅读文本之前就作为一个区域被识别。 — 共同区域法则 · 参考 - 复选框（
checkbox）：方形切换开关，在按下后 150 毫秒内填充并绘制检查标记，并通过 aria-checked 宣布更改。 — 即时反馈 · 参考 - 对话框（
dialog：模态表面，使其他所有内容变暗并保持焦点，直到用户回答一个问题。 — 注意力漏斗 · 参考 - 下拉菜单（
dropdown-menu）：紧凑的操作菜单，从按钮打开，选择后关闭，支持箭头键导航和破坏性变体。 — 希克定律 · 参考 - 输入框（
input）：单行文本字段，高 36 像素以匹配按钮，将无效状态移至其边框和环上。 — 费茨定律 · 参考 - 标签（
label）：绑定到控件的标题：点击它聚焦字段，当字段被禁用时会变暗。 — 接近法则 · 参考 - 弹出框（
popover）：锚定到打开它的控件的小型浮动面板，用于不需要完整对话框的表单或细节。 — 空间记忆 · 参考 - 选择框（
select）：从列表中选择一项的下拉框，包含占位符、分组、选中行上的复选标记以及完整的键盘支持。 — 默认效应 · 参考 - 骨架屏（
skeleton）：形状像正在加载的内容的脉动占位符，让等待感觉比旋转器短。 — 感知性能 · 参考 - 开关（
switch）：滑动开/关控件，其拇指在 150 毫秒内移动 16 像素，模仿其模拟的物理开关。 — 示能性 · 参考 - 标签页（
tabs）：分段控件，原地交换一个面板为另一个，使相关视图共享屏幕上的一个点。 — 组块化 · 参考 - 文本域（
textarea）：多行文本字段，从 64 像素开始并随内容增长，因此答案永远不会隐藏在滚动条后面。 — 组块化 · 参考 - 工具提示（
tooltip）：悬停或聚焦时立即出现的单行提示，随指针离开，用于不值得屏幕空间的细节。 — 渐进式披露 · 参考