desktop

ultrahand: desktop

將桌面應用程式與網頁應用程式的畫面設計成互動式 Claude artifact。此 artifact 是一個 可拖曳至您選擇的最小與最大尺寸之間的視窗，並提供常見筆電、顯示器與靠攏半版的預設值，版面配置會隨著拖曳即時重新排列。您套用的每一條規則都記錄在 references/principles.md 中，且每一條規則都引用 references/sources.md。尺寸、限制與尺寸類別則記錄在 references/presets.md。

1. 收集需求

只詢問您無法推斷的項目。在繪製前先確定以下事項：

• 平台： macOS、Windows、一個網頁應用程式或以上皆有。原生 macOS 應用程式有選單列； Windows 與網頁應用程式則有指令列或工具列（附 overflow）。
• 範圍： 單一畫面或一個流程。若是流程，列出所有畫面以及使用者如何在它們之間移動： 側邊欄、頁籤、列表到詳細、側面板、對話框或新視窗。
• 主要任務： 每個畫面要處理的主要事項，以及最適合的版面配置 （列表-詳細、輔助面板、資訊串流或單一文件面板）。
• 真實內容： 名稱、長度、數量、欄位組合以及最長的可能字串。 不要使用 lorem ipsum 進行設計。
• 資料狀態： 每個面板中，哪些內容會載入、哪些可能為空、哪些可能失敗或離線。
• 視窗限制： 最小視窗尺寸、最大視窗尺寸以及最大內容寬度。原生應用程式預設為 640 × 480，網頁應用程式預設為 320 × 256（請參閱 presets.md）。
• 輸入方式： 永遠包含指標與鍵盤；如果可能執行於 2-in-1 或觸控筆電，則包含觸控。 哪些指令頻繁到值得擁有快捷鍵？
• 視窗： 單一視窗，或數個視窗（文件、檢查器、獨立面板）？
• 約束條件： 品牌顏色、字型、現有的設計系統或元件庫。
• 主題： 在選擇任何顏色、尺寸 或間距前，先查詢專案的主題（design/THEME.md、*.tokens.json；請參閱 shared/theme/README.md）。如果存在主題，請使用它進行設計：執行 node "${CLAUDE_PLUGIN_ROOT}/shared/theme/css.mjs" <tokens.json> --style --out theme.html， 傳遞 --head theme.html 給建置指令，僅使用其自訂屬性（var(--color-surface)、 var(--space-gap-group)），並重複使用其庫存中的元件。當設計需要主題中沒有的項目時， 使用最接近的 token 並在開放問題下列出新增項目；不要憑空創造數值。若沒有主題， 請遵循 shared/theme/rules.md 中的強制規範，並提供 theme 技能。

2. 閱讀參考資料

在設計前，請閱讀 references/principles.md 與 references/presets.md。請使用 平台本身的模式（選單列、工具列、側邊欄、分割檢視、上下文選單、工作表、 NavigationView），而不是發明新的模式。

3. 組合畫面

通過各自檢查的元件仍可能組合出雜亂的畫面。在開始建置前， 請規劃它們如何形成區段，以及區段如何形成畫面，使用 外掛的組合規則，記錄在 shared/composition/principles.md：

• 撰寫區段地圖。 為每個畫面列出其區段（最多三個群組的工具列、一個側邊欄、一個內容面板和一個檢查器）、每個區段的 單一職責、其成員按使用頻率排序、以及一個強調重點。說明什麼是 主要內容，什麼是 chrome：內容佔主導地位，chrome 則退居次要。
• 用空間分組。 群組內部的間隙明顯小於群組之間的間隙； 只有在空間無法顯示群組時才加入容器。
• 每個角色一種外觀，每個區段一個強調重點。 相同角色，相同樣式；狀態與標籤 永遠不能像按鈕；強烈的強調色每個區段只用於一個元素，選取狀態 使用較低調的處理方式。
• 保持簡潔。 大約三種字型大小，一個事實只出現在一個地方，頻繁使用的成員 保持在視野內，罕用的放在選單後面。當某個變更需要新增項目時，先重新組織， 只加入那些證明自己價值的項目。

4. 建置畫布 artifact

在外掛的共享可調整大小畫布（shared/canvas/；其 README.md 包含完整 合約）上建置。將畫面撰寫為 screen.html，設計本身的設定撰寫為 config.json， 然後建置：

node "${CLAUDE_PLUGIN_ROOT}/shared/canvas/build.mjs" \
  --presets "${CLAUDE_PLUGIN_ROOT}/skills/desktop/references/presets.md" \
  --config config.json --screen screen.html \
  --title "<設計名稱>" --out index.html

將 index.html 發佈為 artifact。

• config.json 設定 title、states（例如 default、loading、empty、error）以及設計的 limits：{ minWidth, minHeight, maxWidth, maxHeight }。畫布讓您 可在這些限制之間拖曳任何尺寸。對於網頁應用程式，也請設定 "initialPreset": "browser"。
• 預設值（來自 presets.md）：筆記型電腦（1366 × 768、1536 × 864、MacBook 1440 × 900）、 顯示器（1920 × 1080、2560 × 1440）、靠攏半版（960 × 1080、720 × 900）以及瀏覽器 視窗（1280 × 720）。檢查項目：您的最小視窗、短版 1366 × 600 視窗以及 400% 縮放 在 320 × 256。
• 畫面合約： 一個 <template id="uh-screen">，包含 [data-screen] 區段，以及 data-nav、data-nav-back 和 data-show-state 用於點擊事件。使用 @container screen (width >= …) 回應尺寸變化，而不是 @media。文字使用 rem；點擊區域、圖示和 邊距使用 px，這樣 200% 文字會放大單詞，而非控制項。顏色使用 light-dark()。行為寫在 window.ultrahandSetup = function (canvas) { … } 中。
• 內建切換： 淺色/深色、200% 文字、狀態選擇器以及點擊目標（桌面至少 24 px 最小尺寸）。開啟選單或彈出視窗後請呼叫 canvas.refresh()，以便目標覆蓋層能看見它。
• 使其運作得像桌面應用程式： 懸停狀態、右鍵點擊（以及 Shift+F10）的上下文選單、可見的焦點、 可運作的 Tab 與方向鍵導覽、選單與工具提示中的快捷鍵提示、可隱藏與顯示的面板、 以及可拖曳的分隔線。永遠不要使用 alert、confirm 或 prompt；在畫面中繪製對話框。

5. 設計每一種尺寸類別

從寬到窄逐步處理，並在問題出現的尺寸下修正：

1. 大 / 特大（laptop-125、desktop-fhd）：選擇面板、導覽、 工具列群組與密度。限制內容寬度；多餘的寬度用於面板，而不是 更長的行。
2. 展開（snap-half、~960）：收起檢查器或次要面板，將 側邊欄轉為 rails，並開始按計劃順序將工具列項目移入 overflow。
3. 中等與您的預設最小尺寸（mac-half、最小視窗檢查）：一個或兩個面板、 用於導覽的選單按鈕或 rails，並且所有指令仍可透過選單觸及。
4. 從最大到最小緩慢拖曳，然後再拖回最大。選取狀態、捲動位置、 鍵入的文字與開啟的面板必須在所有中斷點間保持不變。

然後執行檢查：短視窗（固定列、焦點未被遮擋），以及對於網頁應用程式， 在 320 × 256 下進行 400% 縮放（單欄，僅垂直捲動）。

6. 在呈現前自我檢查

逐項檢查所有項目。修正任何失敗，或指出它並說明為何可以接受。

排版（執行排版稽核， node "${CLAUDE_PLUGIN_ROOT}/shared/input/drive.mjs" do "${CLAUDE_PLUGIN_ROOT}/shared/composition/audit.mjs"， 在最大與最小尺寸下，或目視檢查）：

• 模糊檢視時，畫面顯示預期的區段，且主要內容首先吸引視線。沒有無意的亮點。
• 每個區段有一個職責，其成員按功能與頻率分組，群組之間的間隙 明顯大於群組內部的間隙。
• 每個區段最多有一個強烈強調的元素；選取狀態是低調的。
• 每個角色一種樣式：計算每個區段中的控制項樣式數量，並證明任何額外的樣式合理。 任何標籤或狀態看起來都不像按鈕。
• 行與區段對齊共享邊緣；畫面中大約有三種字型大小。
• 沒有事實顯示兩次，且畫面上沒有不服務於此處任務的任何東西。
• 經過一輪變更後：列出新增的項目；畫面不比所需更複雜。
• 僅使用主題值：沒有原始顏色，沒有偏離 8 點網格的間距，沒有超出比例尺度的字型大小， 並且重複使用庫存元件而非重新建置 （shared/theme/rules.md NN-1、NN-2、NN-6、EV-4）。

元件與平台：

• 設計標明其最小與最大視窗尺寸以及最大內容寬度。在最小尺寸下沒有元素重疊或裁切， 在最大尺寸下沒有任何元素拉伸。
• 版面配置依視窗寬度（Material 600 / 840 / 1200，或 Windows 641 / 1008）切換， 而非依裝置切換。每個功能在每種尺寸下都可觸及。
• 調整大小時會即時重新排列並保持選取、捲動、輸入與開啟的面板。
• 面板遵循標準佈局，分隔線可拖曳，面板可透過按鈕、選單與快捷鍵隱藏， 且任何面板都不會在無說明的情況下保持空白。
• 正文每行保持在 80 個字元或以下。
• 每個指令都在選單中（macOS 上的選單列）或工具列 overflow 中；不可用的選單項目 應為停用，而非隱藏；需要輸入的指令結尾加上「…」。
• 隨著視窗變窄，工具列項目按計劃順序 overflow，最多三個 群組。
• 右鍵點擊開啟一個簡短、相關的上下文選單，且其每個指令也存在於 其他地方。
• 所有功能都可透過鍵盤操作，沒有陷阱；焦點始終可見且永遠不在固定列下方； 標準快捷鍵未被重新賦予用途；快捷鍵顯示在選單與工具提示中。
• 沒有任何功能僅在懸停時可用。懸停與焦點內容可透過 Esc 關閉、可懸停且持久； 工具提示不攜帶重要資訊。
• 目標區域至少為 24 × 24 px（在可能觸控的區域約為 40 × 40）。
• 捲動：僅內容可捲動，沒有同方向的巢狀捲動區域，表格標題保持固定， 且沒有關鍵控制項位於視窗底部邊緣。
• 編輯使用最輕量的模式：欄位使用行內編輯，記錄使用側面板， 短暫的封鎖任務使用工作表或對話框，長時間流程使用視窗或頁面。 確認僅用於破壞性、不可逆的操作；其他所有操作都提供復原。
• 所有拖放操作都有非拖曳的替代方案。
• 版面配置在 200% 文字下仍能運作，且在淺色與深色模式下，文字對比度至少為 4.5:1， UI 對比度至少為 3:1。
• 每個面板都設計了載入、空白與錯誤狀態，而不僅是視窗本身。
• 網頁應用程式：在 320 × 256（400% 縮放）下運作，無需雙向捲動，並有跳過連結。

7. 呈現

分享 artifact 連結。用幾行文字說明區段地圖（每個區段的職責與 強調重點）、視窗限制與最大內容寬度、關鍵決策及其背後的原則（引用來源鍵值）、 版面配置在每個寬度類別下如何變化、任何您接受並附上理由的自檢項目、以及任何 建議的主題新增項目（用於 theme 技能），以及任何開放問題。