Mise 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/<name>.json（依賴項會自動安裝） - 首次使用元件前，請閱讀
references/<name>.md
規則
- 尊重
prefers-reduced-motion。每個 Mise 元件已內建此支援；修改時請保持。 - 每個畫面只使用一個
mise強調色。它用於標記主要動作或即時 AI 活動，絕非裝飾。 - 為等待命名。任何超過約一秒的模型呼叫都應使用
thinking-indicator，其標籤需說明正在發生的事。 - 無黑暗模式：禁止虛假倒數、隱藏取消、預先勾選的同意。每個參考文件中的**「禁止」**（Don't）行具有約束力。
- 保留
data-slot屬性；測試和樣式鉤子依賴它們。
症狀與對應元件
| 當您遇到 | 請使用 |
|---|---|
| 使用者等待模型呼叫超過約一秒 | thinking-indicator |
| Token 一個接一個到達，應像打字般顯示，而非凍結的區塊 | 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% 的按壓下沉，讓點擊感覺得到確認。— Doherty 閾值 · 參考文件 - 卡片（
card）：帶有邊框的表面，包含標題、內容和頁尾插槽，在任何人閱讀文字之前就形成一個區域。— 共同區域法則 · 參考文件 - 核取方塊（
checkbox）：方形切換開關，在按壓後 150 毫秒內填滿並繪製勾選記號，並透過aria-checked宣佈變更。— 即時反饋 · 參考文件 - 對話框（
dialog）：模態表面，使其他內容變暗並保持焦點，直到使用者回答一個問題。— 注意力漏斗 · 參考文件 - 下拉式選單（
dropdown-menu）：緊湊的動作選單，從按鈕開啟，選擇後關閉，支援方向鍵導航和破壞性變體。— 希克定律 · 參考文件 - 輸入框（
input）：單行文字欄位，高度 36 px 以匹配按鈕，將無效狀態移至其邊框和環上。— 費茨定律 · 參考文件 - 標籤（
label）：綁定到控制項的說明文字：點擊它會聚焦該欄位，並在欄位禁用時變暗。— 接近法則 · 參考文件 - 彈出框（
popover）：錨定於開啟它的控制項的小型浮動面板，用於不需要完整對話框的表單或細節。— 空間記憶 · 參考文件 - 選擇框（
select）：從清單中選擇一個項目的下拉選單，包含佔位文字、分組、所選行上的勾選記號以及完整的鍵盤支援。— 預設效果 · 參考文件 - 骨架屏（
skeleton）：脈衝式佔位符，形狀類似正在載入的內容，讓等待感覺比旋轉器更短。— 感知性能 · 參考文件 - 開關（
switch）：滑動開/關控制，其滑塊在 150 毫秒內移動 16 px，模仿其模擬的實體開關。— 功能可見性 · 參考文件 - 分頁（
tabs）：分段控制，在原地切換一個面板為另一個，使相關檢視共享畫面上的同一位置。— 分塊 · 參考文件 - 文字區域（
textarea）：多行文字欄位，從 64 px 開始，隨著內容增長而擴展，確保答案永遠不會隱藏在滾動條後面。— 分塊 · 參考文件 - 工具提示（
tooltip）：一行提示，在懸停或焦點時立即顯示，並在指標離開時消失，用於不值得佔用螢幕空間的細節。— 進步性揭露 · 參考文件
原始碼與問題追蹤：https://github.com/kimjusnu/miseui