hig-components-layout

hig-components-layout 技能概览

hig-components-layout 覆盖什么

hig-components-layout 技能是一份面向 Apple HIG 的导航与布局指南，帮助你在应用界面中选择并使用合适的结构化组件。它最适合用来判断 Mac 或 iPad 风格 UI 该选 sidebar、split view、tab bar、tab view、list、table、outline view、column、panel、window、scroll view、box 还是 ornament。

适合谁使用

如果你正在设计信息架构、重整一个杂乱的界面，或者要把应用适配到不同屏幕尺寸，就适合使用 hig-components-layout 技能。它尤其适合 UI 设计师、产品工程师，以及需要输出符合 Apple 布局决策、而不是泛泛“响应式设计”建议的 AI agent。

它为什么有用

这项技能比单纯的提示词摘要更强，因为它内置了模式选择逻辑：什么时候该用层级导航，什么时候内容应该保留在表格里，什么时候应该用 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/ 中引用的布局页面，以确认适用于你场景的模式规则。

先读这些文件

为了最快获得决策价值，在起草提示词之前，先读 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

这些文件回答了这项技能真正要解决的实际问题：什么来承载内容，什么来负责导航，什么应该始终保持可见。

怎样更好地向它提问

给技能一个具体的 UI 问题，不要只给模糊需求。好的输入应包含平台、内容形态和导航深度。例如：“设计一个 macOS 应用，用来浏览项目，左侧是导航层级，中间是列表，右侧是详情视图。应该用 sidebar 加 split view，还是 tabs？”

还要补充会影响布局决策的约束：用户是否需要快速切换，内容是否是层级结构，界面在 iPhone 上是否必须折叠，以及选中项是否需要就地查看。这些信息能让技能在 hig-components-layout usage 模式之间做选择，而不是默认套用某个熟悉的组件。

获得更好输出的最佳工作流

按这个顺序来：先定义内容结构，再选择主要导航模型，最后确认它在不同平台上如何折叠或适配。如果你的草稿提示词只写了一个组件，比如“做一个 sidebar”，技能最多只能在这个假设上优化；如果你描述了信息层级，它就能推荐合适的组件并说明原因。

hig-components-layout 技能常见问题

hig-components-layout 只适用于 Apple UI 设计吗？

是的，它主要是一个基于 Apple Human Interface Guidelines 的 hig-components-layout for UI Design 技能。它最适合用在你想要符合 iOS、iPadOS、macOS 或 Apple 风格多栏界面的布局和导航决策时。

它和通用设计提示词有什么不同？

通用提示词可能也能生成一个看起来合理的布局，但 hig-components-layout 增加了模式纪律：它能帮助你避免把层级数据放进 table，避免把同级平铺导航做成 sidebar，或者在标准窗口控件已经足够时还去上 panel。它更适合做决策支持，而不只是视觉发散。

它适合新手吗？

适合，只要你已经大致知道自己要做的界面是什么样。只要你能用自然语言描述内容和目标，即使不知道 HIG 里的模式术语，这项技能也依然很有帮助。

什么时候不该用它？

如果你需要的是强品牌视觉方向、非 Apple 的交互模式，或者只是纯内容展示而不涉及导航和结构决策，就不适合依赖 hig-components-layout。如果任务重点是排版、配色系统或组件样式，而不是布局选择，那么别的技能大概率更合适。

如何改进 hig-components-layout 技能

给它层级，不要只给功能列表

最强的 hig-components-layout usage 输入会描述内容层级：什么是顶层，什么是嵌套，什么会被选中，以及什么必须保持可见。“一个带文件夹、文件元数据和预览的文件浏览器”远比“做一个 dashboard”更有用。

说清真正关键的约束

最常见的失败模式，是在约束还没说清之前就先选了模式。告诉技能：界面是否必须同时适配 iPhone、iPad 和 Mac；用户是否需要快速切换分区；内容是可浏览还是可编辑；布局是否必须能平滑折叠。这些约束往往会决定到底该用 tabs、sidebars、split views、lists 还是 columns。

要求推荐和取舍理由一起给

为了提升首次输出质量，可以同时要求给出主推荐和被排除方案的核心原因。例如：“推荐最合适的结构，说明次优选项，并解释什么情况下你会改选。” 这样得到的 hig-components-layout guide 会比单行模式标签实用得多。

用具体的屏幕地图继续迭代

如果第一次回答太抽象，就回复一份屏幕清单：左侧导航、列表、详情面板、inspector、搜索或 toolbar。然后让技能把每个区域映射到对应组件，并指出 hig-components-layout install 这类指导会如何影响适配，例如多栏设计在更小屏幕上应该怎样折叠成更少的 pane。