hig-components-content

hig-components-content 技能總覽

hig-components-content 技能能幫你更有把握地選擇並描述 Apple HIG 的內容展示元件，少一點猜測、多一點依據。它特別適合 UI 設計師、App 工程師，以及需要回答實務問題的 AI 代理，例如：在 Apple App 裡，應該用 chart、collection、image view、image well、color well、web view、activity view，還是 lockup。這個技能真正要解決的，不是「把 HIG 做摘要」，而是把一個粗略的內容目標，轉成符合 Apple 平台、無障礙期待與互動模型的元件選擇。

這個 hig-components-content 技能適合做什麼

當任務重點是呈現內容，而不是規劃結構時，就該用 hig-components-content 技能。它特別適合拿來在相似選項之間做判斷，例如 image view vs image well，或 collection vs table，也很適合確認系統提供的元件是否已經比自製 UI 更能解決問題。

hig-components-content 的差異在哪裡

這個技能以 Apple Human Interface Guidelines 的內容元件為核心，並在需要時連結到相鄰指引。這很重要，因為元件選擇常常取決於無障礙、排版等基礎原則，也會牽涉到模式、版面容器，或平台特定行為的相關技能。

最適合的使用者與工作情境

hig-components-content 指南最有價值的時候，是你需要一個能站得住腳的決策：該用哪個元件、有哪些限制、實作前要先確認什麼。如果你正在打造媒體、圖表、分享、內嵌網頁內容，或可選取的集合式介面，這個技能能更快帶你走到正確、符合 Apple 方向的做法。

如何使用 hig-components-content 技能

安裝並在脈絡中載入

使用 npx skills add raintree-technology/apple-hig-skills --skill hig-components-content 安裝 hig-components-content 技能。接著先讀 skills/hig-components-content/SKILL.md，再依你的元件問題，閱讀對應的參考檔案。這個 repo 不依賴 scripts，所以參考文件就是主要的深度來源。

先用對的提問方式

要把 hig-components-content 用得最好，提問時要同時包含元件決策與限制條件，而不只是丟一個名稱。好的 prompt 會明確寫出內容類型、平台、使用者動作，以及是否涉及編輯、選取、分享或內嵌瀏覽。

範例 prompt：
“Using the hig-components-content skill, recommend the best Apple HIG component for a read-only dashboard card showing weekly sales trends on iPad and macOS. Include why a chart fits, what accessibility needs to be added, and when a collection would be the wrong choice.”

先讀最相關的參考檔案

把參考文件當作決策捷徑來用：

• references/charts.md：資料視覺化與軸線、標記選擇
• references/collections.md：格狀排版、項目選取、動態內容
• references/image-views.md 和 references/image-wells.md：顯示用影像 vs 可編輯影像
• references/color-wells.md：選色與系統色彩選擇器的適用情境
• references/activity-views.md：分享與動作流程
• references/lockups.md：卡片、海報、monogram，以及群組式呈現
• references/web-views.md：內嵌網頁內容

提供這個技能缺少的輸入

如果你有提供以下資訊，這個技能會表現得更好：

• 平台：iOS、iPadOS、macOS，或跨平台
• 內容類型：文字密集、視覺導向、可選取、可編輯，或外部網頁內容
• 互動方式：檢視、選擇、編輯、分享、重新排序，或檢查
• 限制條件：無障礙、多工、離線使用，或系統一致性

這些輸入能幫 hig-components-content 技能避開空泛建議，改為挑出真正符合工作目標的元件。

hig-components-content 技能 FAQ

hig-components-content 只適用於 Apple UI Design 嗎？

是的，它主要用於符合 Apple HIG 的 UI Design 決策。hig-components-content 對 UI Design 的聚焦，表示它最適合在你希望元件選擇符合 Apple 平台期待，而不是中性設計系統答案的情境下使用。

什麼情況下不該用這個技能？

如果問題主要在導覽、頁面結構或一般版面配置，就不要用 hig-components-content。如果你是在選容器、間距，或更大的畫面架構，通常 layout 或 patterns 類技能會更合適。

不用這個技能，只靠 prompt 夠嗎？

有時候可以，但當你需要一致性、又不想漏掉限制條件時，hig-components-content 技能會更可靠。一般 prompt 可能會猜到正確元件，卻漏掉 Apple 特有的重要考量，例如無障礙、標準互動，或系統元件其實才是更好的預設。

這個技能對新手友善嗎？

可以，只要你問得具體。當你能用一句話描述內容與使用者動作時，這個技能最好上手。如果問題太模糊，輸出的決策性就會比較弱，因此 hig-components-content 指南最適合搭配明確的 UI 情境來使用。

如何改進 hig-components-content 技能

要問決策，不要只問主題

hig-components-content 安裝後效果最好的是那種同時要求元件選擇與理由的 prompt。像是「幫我展示媒體」就不如「在 macOS 上，這個可選取的 product card 應該用 image view、image well，還是 lockup？」來得有用。

把你在意的取捨講清楚

如果你的專案有明確限制，先直接說出來：可編輯或唯讀、原生內容或內嵌內容、資料密集或稀疏、互動量高或偏向被動瀏覽。這樣 hig-components-content 技能就能聚焦在真正的邊界情境，而不是重複那些顯而易見的最佳實務。

從第一個建議往下迭代

如果第一個答案接近但還不夠準，就把問題收窄，或改成平台分開比較。例如可問「只看 iPadOS」、「只看 macOS」，或「比較以文字為主的列項時，collection view 和 table 哪個更適合」。這通常比要求更泛化的細節，更能提升下一次回覆的實用性。

注意常見失誤模式

最常見的錯誤，是明明有系統元件卻硬做自製元件、把 collection 用在文字內容上太過頭，或把影像顯示和影像編輯當成同一個問題。hig-components-content 技能最強的用法，是先拿來確認是否合適，再在實作前補上無障礙與平台檢查。