密集工具 UI
一套針對「冷靜、密集、鍵盤優先」工具 UI 的測量參考：巢狀內容面板、44 像素高且無分隔線的列、⌘K 指令面板、內嵌編輯，以及使用 LCH 灰度階層替代陰影。此外，還包含與之匹配的單色調登陸頁面。
複製其結構和行為，絕不複製品牌。深色 + Inter 字型 + 紫色強調色正是 AI 生成器預設會產生的結果：務必為專案更改 --accent-h 和 --font。
檔案
| 路徑 | 何時閱讀 |
|---|---|
assets/app-template.html | 建構應用程式/儀表板/管理後台時。可執行的外殼：清單/看板、詳細資訊、⌘K、建立模態框、提示訊息、深色/淺色、?selftest。 |
assets/landing-template.html | 建構登陸頁面時。模糊頁首、英雄區塊 + 產品截圖、宣言、功能區塊 + 規格抽屜、更新日誌、客戶評價、定價 + 比較表格、頁尾。?selftest。 |
references/app.md | 外殼、側邊欄、清單、看板、問題/專案詳細資訊、模態框、⌘K、篩選選單、快捷鍵的精確尺寸。 |
references/tokens.md | 色階（深色 + 淺色）、字體比例、圓角半徑、陰影、緩動函數。 |
references/landing.md | 登陸頁面、定價與客戶頁面的結構、響應式斷點、行銷令牌。 |
工作流程
- 將相符的範本複製到專案中。切勿編輯原始檔案。
- 重新品牌化：設定
--accent-h（例如青色 190、橘色 50、綠色 150）和--font，然後是產品名稱、資料和文案。重新命名app-theme的localStorage鍵值。 - 替換範例資料。保持 DOM 結構：
.grp > .row、.col > .card、.detail > .doc + .props。 - 將指令新增至
CMDS，格式為[label, [keys], fn]。單鍵快捷鍵則放入已忽略輸入框輸入事件的keydown監聽器中。 - 在新增範本中沒有的畫面之前，請先閱讀相關的
references/檔案。 - 驗證：開啟
file.html?selftest，並預期看到分頁標題顯示SELFTEST OK <n>。然後檢查 1280 像素和 390 像素兩種寬度下的深色和淺色模式。
規則
- 密度優先：13 像素內文、44 像素高的列、無列分隔線、無裝飾性圖示。顏色僅用於狀態、標籤和每個畫面中的一個主要按鈕。
- 深度來自背景色階，而非漸層、發光或模糊（甚至在 ⌘K 背後也無模糊）。邊框是 1 像素低透明度的環狀陰影。
- 每個動作都有快捷鍵，且快捷鍵必須可見，在按鈕、選單和工具提示中顯示。支援上下文感知的 ⌘K。
Ctrl/⌘+Enter提交。 - 原地編輯，即時儲存：沒有儲存按鈕。屬性是開啟選擇器的按鈕。建立動作結束時會顯示包含連結的提示訊息。
- 空狀態應有引導作用：細線條插圖、一句話、一個顯示其快捷鍵的主要按鈕。
- 刪除是軟刪除：需確認、保持可還原狀態、並說明保留期限。
- 清單和看板使用相同的資料。「顯示選項」讓使用者選擇分組、排序和可見欄位。
- 登陸頁面：幾乎是單色調，使用兩種文字色調來強調，一個淺色行動呼籲按鈕重複出現在頁首和頁尾前，以真實產品截圖作為英雄區塊圖片。
請勿複製
來自原始產品的標誌、產品名稱、插圖、圖示集、行銷圖片或文案。僅擷取測量值、結構和行為。