hig-components-layout

hig-components-layout 技能概覽

hig-components-layout 涵蓋哪些內容

hig-components-layout 技能是一份 Apple HIG 的導覽與版面配置指南，用來選擇並正確使用 app 介面中的結構性元件。當你需要在 sidebar、split view、tab bar、tab view、list、table、outline view、columns、panel、window、scroll view、box 與 ornament 之間做出判斷，為 Mac 或 iPad 風格的 UI 選擇合適結構時，這項技能特別有用。

誰適合使用它

如果你正在設計資訊架構、重整雜亂的介面，或將 app 調整到不同螢幕尺寸，hig-components-layout 技能就很適合你。它特別適合 UI 設計師、產品工程師，以及撰寫介面規格的 AI agents；當你需要的是符合 Apple 取向的版面決策，而不是泛泛的「響應式設計」建議時，這項技能會更有價值。

它為什麼有用

這項技能比只靠 prompt 的摘要更強，因為它內建了 pattern selection 的判斷邏輯：何時該用階層式導覽，何時應把內容留在 table 中，何時要用 columns 暴露細節，以及何時 panel 或 ornament 比另一種持續存在的容器更合適。它也會指出平台相關的取捨，因此結果較不容易做得過度、重複，或在較小螢幕上難以調整。

如何使用 hig-components-layout 技能

安裝並找到來源

使用以下指令安裝 hig-components-layout 技能：
npx skills add raintree-technology/apple-hig-skills --skill hig-components-layout

安裝完成後，先從 skills/hig-components-layout/SKILL.md 開始，接著閱讀 references/ 中引用的版面頁面，確認你的情境適用哪些 pattern 規則。

先讀這些檔案

若要最快得到有用的判斷，請在撰寫 prompt 前先讀 SKILL.md，以及最相關的參考頁面：

• references/sidebars.md
• references/split-views.md
• references/tab-bars.md
• references/tab-views.md
• references/lists-and-tables.md
• references/outline-views.md
• references/column-views.md
• references/panels.md

這些檔案回答了這項技能真正要解決的實務問題：內容應該由什麼承載、什麼應該負責導覽，以及什麼應保持可見。

如何下出好 prompt

給這項技能具體的 UI 問題，不要只丟一個模糊請求。好的輸入會包含平台、內容型態和導覽深度。例子：“Design a macOS app for browsing projects, with a left navigation hierarchy, a middle list, and a right detail view. Should this use a sidebar plus split view, or tabs?”

同時也要加入會影響版面決策的限制：使用者是否需要快速切換、內容是否具有階層結構、介面是否必須在 iPhone 上收合，以及被選取項目是否需要就地檢視。這些細節能讓技能在 hig-components-layout usage pattern 之間做選擇，而不是直接套用某個熟悉的元件。

取得高品質輸出的最佳流程

建議依照這個順序進行：先定義內容結構，再選擇主要導覽模型，最後確認它在各平台之間如何收合或適應。如果你的草稿 prompt 只提到某個元件，例如「做一個 sidebar」，那技能只能優化這個前提；但如果你描述的是資訊階層，它就能建議正確的元件，並說明原因。

hig-components-layout 技能 FAQ

hig-components-layout 只適用於 Apple UI 設計嗎？

是，hig-components-layout 主要是以 Apple Human Interface Guidelines 為基礎的 hig-components-layout for UI Design 技能。當你希望做出符合 iOS、iPadOS、macOS 或 Apple 風格多欄介面的版面與導覽決策時，它最適合。

這和一般設計 prompt 有什麼不同？

一般 prompt 可能也會產生看似合理的版面，但 hig-components-layout 多了 pattern 紀律：它能幫你避免把階層資料放進 table、把平面的同層導覽做成 sidebar，或在標準視窗控制就足夠時卻硬用 panel。也就是說，它更適合做決策支援，而不只是視覺發想。

它適合初學者嗎？

適合，只要你已經大致知道自己要做的介面長什麼樣。只要你能用白話描述內容與目標，即使不知道該 pattern 的 HIG 名稱，這項技能也很有幫助。

什麼情況下不該用它？

如果你需要的是重品牌視覺方向、非 Apple 的互動模式，或只是單純的內容呈現建議，而不涉及導覽或結構決策，就不要依賴 hig-components-layout。若任務重點是字體、色彩系統，或元件樣式，而不是版面選擇，其他技能通常會更合適。

如何改進 hig-components-layout 技能

提供階層，不只是功能清單

最強的 hig-components-layout usage 輸入，會描述內容層級：哪些是最上層、哪些是巢狀內容、哪些會被選取，以及哪些必須保持可見。“A file browser with folders, file metadata, and preview” 會比 “build a dashboard” 有用得多。

說明真正重要的限制

最常見的失敗模式，是在限制還不清楚時就先選 pattern。請告訴技能：介面是否必須同時支援 iPhone、iPad 和 Mac；使用者是否需要快速切換區段；內容是以瀏覽為主還是以編輯為主；以及版面是否需要乾淨地收合。這些限制往往會直接決定 tabs、sidebars、split views、lists 和 columns 之間的選擇。

要求建議與取捨一起給

為了提升第一次輸出的品質，請同時要求主要建議與替代方案被否決的原因。例如：“Recommend the best structure, mention the second-best option, and explain what would make you switch.” 這樣比只給一個 pattern 名稱更能產出有用的 hig-components-layout guide。

用具體的畫面地圖反覆修正

如果第一次答案太抽象，就回覆一份畫面清單：左側導覽、清單、詳細資訊面板、inspector、搜尋或 toolbar。接著請技能把每個區域對應到元件，並指出 hig-components-layout install 的指引會如何影響適配，例如多欄設計在較小螢幕上應如何收合成較少的面板。