UI 專家
此技能決定介面為何，並證明其對使用者有效。程式碼慣例 (TypeScript, React, Next.js, tests, lint) 來自 ts-coding 技能：每當你處理 .ts 或 .tsx 檔案時，請載入該技能。
工作流程
-
了解全局。 閱讀 UI 的真實來源：
package.json(react、next、tailwindcss、基礎元件庫：react-aria-components、@radix-ui/*、@base-ui-components/react或 shadcn 的components.json；圖示集；@playwright/test、@axe-core/playwright)，持有@import "tailwindcss"及@theme的樣式表、深色模式機制、共享元件目錄，以及與你正在修改的畫面相鄰的兩三個既有畫面。專案既有的選擇優先於此技能的預設值；重複使用其基礎元件、Token、間距節奏與術語。 完成條件： 你能說出樣式系統、Token 檔案、基礎元件庫、圖示集、主題切換機制、開發指令與呈現工作的 URL，以及瀏覽器測試執行器（或表示不存在）。 -
構思簡報。 在任何標記之前，將以下區塊寫入你的回覆中並據此建構：
使用者與任務： 誰使用此功能，以及它所服務的唯一任務 視覺焦點： 眼睛首先落在哪個單一元素上 主要動作： 唯一肯定的動作；破壞性動作需單獨標示 密度： 稀疏 | 舒適 | 緊湊，與相鄰畫面一致 氛圍： 一個形容詞，結果必須達到的感覺（"精確"、"平靜"、"溫暖"） 狀態： 空白、載入中、錯誤、部分、溢出、無權限：適用的狀態版面、構圖與視覺工藝：
references/taste.md。 完成條件： 每個欄位都為此畫面提供了具體答案，明確到審查者可以拒絕一個未達標的版本。 -
解析 Token。 將每個顏色、大小、空間、圓角、陰影與持續時間對應到步驟 1 中的一個語意 Token。如果缺少 Token，請在來源處新增一個包含淺色和深色值的 Token，遵循
references/tokens.md。 完成條件： diff 中沒有原始顏色、任意值 (p-[13px]、bg-[#1a1a1a]) 或可主題化屬性的行內樣式，每個新 Token 都有淺色和深色值，並且node scripts/contrast.ts <theme.css>（相對於此技能目錄的路徑）通過。 -
建構。 使用專案的基礎元件（如果沒有則使用 React Aria Components），行動優先，遵循規則與
references/components.md。語意、鍵盤與 WCAG 細節：references/accessibility.md。介面文字：references/copy.md。 完成條件： 每個互動元素涵蓋所有適用的狀態，每個資料檢視呈現簡報中指定的每個狀態，且無前綴的樣式是 320px 版面。 -
驗證。 執行
ts-coding的檢查，然後執行references/verification.md中的靜態與瀏覽器關卡：Token 漂移、表情符號、Token 對比度、淺色與深色模式下的 axe、鍵盤、320px 下的回流、目標大小、減少動畫。 完成條件： 每個關卡都返回 0，並且你報告每個關卡的輸出；無法執行的關卡應報告為 "未驗證" 並附上原因。 -
檢視。 擷取 1280 和 390 寬度、淺色和深色模式下的畫面截圖，以及簡報中的每個狀態；使用讀取工具開啟每張圖片並點擊每個控制項。然後使用
references/review.md提出拒絕理由。當子代理工具可用時，將截圖和該文件交給一個新的代理：一個未參與建構的評論者能更清楚地看到問題。 完成條件： 你已檢視每張截圖，每個控制項都產生可見的變更，並且每個嚴重或重大發現都已修正或向使用者報告。
小型變更（既有元件內的間距、顏色或文案調整）：執行步驟 1、3 和 5 的靜態關卡，然後在淺色和深色模式下擷取變更元素的截圖並檢視兩者。
審查既有 UI：執行步驟 1，推斷並撰寫步驟 2 的簡報，針對其執行步驟 5 和 6，並以 references/review.md 的格式報告。如果無法渲染，請說明原因，並將發現限制在原始碼可證明的範圍內。
規則
證據
- 僅在指令剛輸出對比度數值、通過結果或分數時，才能陳述該資訊；否則請說「未驗證」。跳過的關卡（無瀏覽器、無伺服器）並未測量任何東西。
- 關卡證明正確性，而非品質：從截圖判斷階層與工藝。
階層
- 一個主導元素：簡報中的視覺焦點是最大、最粗或對比度最高的元素，而它的同級元素則應更為低調。在行銷與著陸頁面上，展示字體至少為正文大小的 2.5 倍；產品畫面則讓頁面標題比正文大一兩級，其餘透過字重與位置來達成。
- 間距向外擴展：群組內部的間距 < 其容器的內邊距 < 區塊之間的空間。
- 空白狀態應填滿其區域並指出第一個動作。頁面應有意義地結束：摘要、頁尾、下一步。
Token 與顏色
- 按意圖使用 Token：選擇其意義與動作匹配的 Token。破壞性動作在其觸發按鈕和確認對話框中都應使用破壞性 Token；主要 Token 標記每個檢視中唯一的主要肯定動作。
- 每個狀態都將顏色與圖示或文字配對。一個強調色；中性色負責其餘部分。
- 主題化只需在 Token 來源處進行一次編輯：每個畫面都讀取相同的語意 Token。
- 淺色與深色模式遵循系統偏好；系統 / 淺色 / 深色設定會覆蓋它並持久化 (
references/tokens.md)。
狀態
- 互動元素：預設、懸停、焦點可見、按下、停用、等待中、無效、已選取。每個適用的狀態在淺色和深色模式下都應明顯不同；選擇器請參考
references/components.md。 - 等待中應保持控制項的完整強度，並顯示旋轉器或進度標籤 (
isPending、aria-busy)。停用標記一個使用者當前無法執行的動作，並在附近顯示理由。 - 回饋報告發生了什麼事：成功提示應在資料變更後出現，且檢視已顯示該變更。
版面
- 行動版是基礎：無前綴的公用程式類別是手機版面；
sm:、md:、lg:則疊加在更寬的螢幕上。在不同寬度下重複使用的元件應響應其容器 (@container、@md:)。 - 橫向滾動的區域應顯示可見的提示：邊緣淡出效果、滾動條。
護欄
- 圖示來自 lucide-react（或專案的圖示集），為帶有
currentColor的 SVG。UI、文案、程式碼和提交中完全禁止使用表情符號。 - 表面之間使用完整的極細邊框、表面層級差異或間距進行分隔。禁止在卡片、提示、通知或呼籲上僅在單側使用彩色邊框。
- 內容應是真實的：合理的名稱、長字串、大數字、零個和一個項目。產品中絕不渲染佔位符文案或除錯控制項。
參考文件
載入與你目前所在分支匹配的文件：
references/taste.md：雜訊判斷、構圖、排版、色彩、深度；適用於任何新畫面或重新設計。references/tokens.md：Tailwind v4@theme、語意 Token、系統主題及其覆蓋設定、新增或稽核 Token。references/components.md：React Aria Components、狀態屬性、表單、覆蓋層、資料檢視、圖示、動畫。references/accessibility.md：語意、鍵盤與焦點、對比度、WCAG 2.2 標準、強制色彩模式、RTL。references/copy.md：標籤、錯誤、空白狀態、確認訊息、提示、生成式文案的跡象。references/verification.md：漂移、表情符號與對比度掃描、渲染元件狀態、Playwright 與 axe 關卡、截圖矩陣。references/review.md：評論視角、啟發式評估、嚴重性、發現事項格式。