設計與使用者介面
打造看起來刻意且高級、而非模板化的介面。這是應用程式建構器中最重要的品質槓桿。將其應用於 DOM / 覆蓋層 UI — 頁面、瀏覽器 chrome、HUD、選單、表單。（對於 3D 遊戲的遊戲畫布，請參見 building-games 技能；此技能管理疊加在其上的 DOM UI。）
深入閱讀請參考 references/（按需載入 — 不要全部內聯）：
references/refined-ui.md— 完整的產品 chrome/覆蓋層設計系統。references/typography.md— 字型尺度、配對、節奏。references/surfaces.md— 高程、邊框、陰影、分層。references/animations.md— 動畫、緩動、過渡。references/performance.md— 保持 UI 流暢（60fps，無卡頓）。
1. 設計系統優先（在進行任何樣式設定前先做這個）
先定義系統，然後從中組合。絕不隨意使用臨時數值。
- **CSS 中的標記（Tailwind v4 是 CSS 優先）。**將色板、圓角和字型放在
src/styles.css的@theme區塊中，作為 CSS 變數；透過 Tailwind 工具類別來使用它們。單一事實來源。@import "tailwindcss"; @theme { --color-bg: #0b0b0f; --color-surface: #16161d; --color-fg: #e7e7ea; --color-muted: #a0a0ab; --color-primary: #14b8a6; --color-border: #26262f; --radius: 0.75rem; --font-sans: "Inter", system-ui, sans-serif; } - 使用 shadcn/ui 元件（Radix 基礎 +
cva變體 +tailwind-merge）來處理按鈕、對話框、下拉選單、輸入框等。它們具有可及性且一致性。將它們產生到src/components/ui；透過標記來設定樣式，不要使用內聯的十六進位碼。 - **Tailwind v4 基礎修正 — 按鈕需要指針游標。**v4 的 Preflight 讓
<button>使用cursor: default，感覺像壞了一樣。在src/styles.css中加入這一行，讓按鈕/可點擊角色顯示指針：@layer base { button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer; } } - 禁止隨意樣式： JSX 中不能有原始十六進位碼、不能有像
text-white/bg-black這樣的文字、不能有像p-[16px]或text-[13px]這樣的任意值。如果你需要某個值，它必須變成一個標記或標度台階。
2. 量化評分表（避免「醜」的簡單規則）
- 最多使用 3–5 種顏色（一個主色 + 中性色 + 最多一個強調色）。不要隨機加入額外色調。除非要求，否則不要預設使用紫色。
- 最多使用 2 種字體家族（通常一種）。將一個顯示/標題字體與一個正文字體配對，或只使用一種。
- 行高 1.4–1.6 用於正文；大標題使用較窄的行高。
- 當你覆寫背景顏色時，也要同時覆寫前景/文字顏色（必須保持對比度 — 在淺色和深色模式下都檢查）。
- 行動裝置優先：先設計約 390px 的版面，然後再放大。沒有水平溢出；觸控目標 ≥ 44px。
- 一致的間距標度（基於 4/8）。充裕的空白勝過塞滿內容。
- 一個強調色，節制使用於主要操作 — 不是到處都用。
3. 反 AI 罐頭（讓輸出看起來模板化的跡象 — 避免）
- 沒有漸層色塊填充，沒有巨大的英雄區漸層作為內容的替代品。
- 不使用表情符號作為圖示 — 使用真正的圖示集（
lucide-react）。 - 沒有手繪 SVG 插圖/地圖/圖表 — 使用真正的函式庫（圖表使用
recharts）或真實產生的圖片。 - 最終產品中沒有佔位圖片 / 灰色的填色方塊 — 產生真實圖片或使用真實內容；在 canvas 圖片上設定
crossOrigin="anonymous"。 - 避免過度使用的字型外觀（僅預設系統字型，或類似 Comic Sans 等級的選擇）。
- 每個元素都要證明其存在價值。 刪除裝飾性噪音。建立系統，然後有目的地變化 — 而不是隨機。
- 在編輯現有應用程式時，要符合現有用戶介面；不要引入第二種視覺語言。
4. 佈局與層級
- 清晰的視覺層級：每個視圖一個主要操作；大小/粗細/顏色表達重要性。請參閱
references/typography.md和references/surfaces.md。 - 使用真正的佈局結構（grid/flex、容器最大寬度），而不是絕對定位的技巧。對齊到一致網格。
- 空白狀態、載入狀態和錯誤狀態是設計的一部分 — 不要出貨空白/卡頓的中間狀態。
5. 動畫（微妙、有目的）
- 短暫、平滑的過渡（150–250ms）在懸停/按下/進入時；尊重
prefers-reduced-motion。詳情請見references/animations.md。 - 決不以導致卡頓的方式動畫佈局；優先使用 transform/opacity。
6. 遊戲覆蓋層（當此技能與 building-games 搭配使用時）
遊戲畫布由 building-games 管理。此技能負責設定 DOM 覆蓋層的樣式：開始/「點擊開始遊戲」畫面、HUD、分數、選單、暫停、行動控制。保持覆蓋層在畫布上可讀（背景、對比度），並將其排除在指針鎖定/遊戲輸入路徑之外。
完成檢查清單（在您認為 UI 完成之前）
- 標記已在
@theme中定義；JSX 中沒有臨時的十六進位碼/任意值。 - ≤ 5 種顏色，≤ 2 種字型，一致的間距標度。
- 對比度成立；所有覆寫背景的地方也同時覆寫了前景。
- 行動裝置（約 390px）沒有溢出；觸控目標 ≥ 44px。
- 真實的圖示/圖片/圖表 — 沒有任何反罐頭跡象。
- 已處理載入/空白/錯誤狀態；動畫微妙且支援減少動畫。
- 已在瀏覽器中渲染並目視檢查（請參閱 AGENTS.md 驗證），而不僅僅是透過 curl 檢查。