hig-components-content

hig-components-content 技能概览

hig-components-content 技能能帮你更少凭感觉、更快地选择并描述 Apple HIG 的内容展示组件。它特别适合 UI 设计师、App 工程师，以及需要回答这类实际问题的 AI agent：在 Apple 应用里，到底该用 chart、collection、image view、image well、color well、web view、activity view，还是 lockup。它真正做的不是“概括 HIG”，而是把一个粗略的内容目标，落成一个兼顾 Apple 平台、可访问性预期和交互模型的组件选择。

这个技能最擅长什么

当任务重点是“展示内容”，而不是“搭页面结构”时，就该用 hig-components-content 技能。它尤其适合在相似选项之间做判断，比如 image view 和 image well 怎么选，collection 和 table 怎么选，以及确认系统自带组件是不是已经比自定义 UI 更能解决问题。

它的不同之处

这个技能以 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 不依赖脚本，所以这些 reference 才是深度信息的主要来源。

先用对的提问方式

想把 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.”

先读最相关的参考文件

把这些 reference 当成快速决策入口：

• references/charts.md：数据可视化、轴与标记的选择
• references/collections.md：网格、条目选择、动态内容
• references/image-views.md 和 references/image-wells.md：展示型图片与可编辑图片
• 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 上，这个可选择的产品卡片应该用 image view、image well 还是 lockup？”

把你在意的取舍写出来

如果项目有约束，一开始就说清楚：可编辑还是只读、本地原生内容还是嵌入内容、数据稠密还是稀疏、交互重还是纯浏览。这样 hig-components-content 技能就能聚焦在真正的边界情况上，而不是重复显而易见的最佳实践。

从第一版建议继续迭代

如果第一版答案已经接近但还不够准，可以通过更窄的比较范围或平台拆分继续追问。比如要求只看 iPadOS、只看 macOS，或者比较 collection view 和 table 在以文本为主的行项中的选择。这样的追问，通常比要求“更泛一点的详细说明”更能提升下一轮回答的实用性。

留意常见失败模式

最常见的错误包括：明明有系统组件却去选自定义组件、对文本内容过度使用 collection，以及把图片展示和图片编辑当成同一个问题。hig-components-content 技能最强的用法，是先拿它确认“是否匹配”，然后在实现前继续做可访问性和平台层面的检查。