axiom-design

设计与 HIG

任何涉及视觉设计、HIG 合规性、Liquid Glass、SF Symbols、排版或应用构成的工作，都必须使用此技能。

无法启动 Axiom Agent？ 如果此路由器将你引导至某个 Agent，请直接按照其流程操作。通过 MCP，axiom_get_agent 会返回该流程；在其他环境中，请阅读下方的对应文件，只需使用文件搜索和读取功能即可。

此处可用：skills/liquid-glass-auditor.md。

对于其他 Agent，通过 MCP 使用 axiom_get_agent 也能获取其流程；请使用 axiom_xclog_*、axiom_xcsym_* 和 axiom_xcprof_* 工具运行其 xclog、xcsym 和 xcprof 步骤。在其他环境中，请在 Axiom 的技能中搜索 skills/<agent>.md；如果没有对应文件，请使用此套件中的技能自行完成相关工作，并使用 PATH 中的任意 Axiom 工具。

快速参考

症状 / 任务	参考
设计决策、HIG 合规性、颜色、背景	参见 skills/hig.md
间距、内边距、外边距、内嵌距离——应该使用什么值	参见 skills/hig.md
为 iPhone Duo 设计——姿势、侧边控件、避免 UI 被折叠区域遮挡	参见 axiom-swiftui（skills/iphone-duo.md）
分区索引 / A–Z 索引条 / 字母快速滚动条——列表是否应该包含这些元素	参见 skills/hig.md
语义颜色、自定义颜色模式、材质样式	参见 skills/hig-ref.md
Liquid Glass 效果、采用方式、从模糊效果迁移	参见 skills/liquid-glass.md
全应用采用 Liquid Glass、平台差异	参见 skills/liquid-glass-ref.md
向后兼容性：UIDesignRequiresCompatibility 退出选项，以及 27 SDK 在 OS 27 上忽略它的原因	参见 skills/liquid-glass.md（向后兼容性）
SF Symbols 渲染模式、效果、动画	参见 skills/sf-symbols.md
SF Symbols API 签名、UIKit 对应项、可用性	参见 skills/sf-symbols-ref.md
验证符号名称是否存在 / 检查某个符号的可用性或支持的模式（sfsymbols CLI）	参见 skills/sf-symbols-ref.md（第 11 部分）
San Francisco 字体、文本样式、动态字体、字距调整	参见 skills/typography-ref.md
应用入口点、身份验证流程、根视图切换、场景生命周期、基于文稿的应用	参见 skills/app-composition.md
Apple Pay 按钮 / Wallet 凭证设计 / Tap to Pay 按钮	参见 axiom-payments 套件，以及用于了解跨领域 HIG 背景的 skills/hig.md

决策树

digraph design {
    start [label="Design task" shape=ellipse];
    what [label="What do you need?" shape=diamond];

    start -> what;
    what -> "skills/hig.md" [label="design decision,\nHIG compliance,\ncolor/background choice"];
    what -> "skills/hig.md" [label="spacing/padding/margin value"];
    what -> "skills/hig-ref.md" [label="semantic color API,\ncustom color code,\nmaterial style details"];
    what -> "skills/liquid-glass.md" [label="Liquid Glass effects,\nmigrate from blur,\nRegular vs Clear,\nopt-out key"];
    what -> "skills/liquid-glass-ref.md" [label="app-wide Liquid Glass plan,\nplatform differences"];
    what -> "skills/sf-symbols.md" [label="rendering mode choice,\nsymbol effects/animations,\ncustom symbols"];
    what -> "skills/sf-symbols-ref.md" [label="SF Symbols API syntax,\nUIKit equivalents,\navailability matrix"];
    what -> "skills/typography-ref.md" [label="font selection,\nDynamic Type,\ntext styles, tracking"];
    what -> "skills/app-composition.md" [label="@main entry point,\nauth flow, root view,\nscene lifecycle"];
}

1. 设计决策 / HIG 合规性 / 选择颜色或背景？→ skills/hig.md 1a. 需要了解语义颜色 API、自定义颜色代码或材质样式详情？→ skills/hig-ref.md
2. Liquid Glass 效果 / 从模糊效果迁移 / Regular 与 Clear 变体？→ skills/liquid-glass.md 2a. 计划在整个应用中采用 Liquid Glass / 了解平台差异？→ skills/liquid-glass-ref.md 2b. 退出使用 Liquid Glass / UIDesignRequiresCompatibility / 向后兼容性？→ skills/liquid-glass.md（向后兼容性）
3. SF Symbols 渲染模式 / 符号效果 / 自定义符号？→ skills/sf-symbols.md 3a. 需要了解 SF Symbols API 语法 / UIKit 对应项 / 可用性检查？→ skills/sf-symbols-ref.md
4. 字体选择 / 动态字体 / 文本样式 / 字距调整 / 行距？→ skills/typography-ref.md
5. 应用入口点 / 身份验证流程 / 根视图切换 / 场景生命周期？→ skills/app-composition.md
6. SwiftUI 视图实现？→ /skill axiom-swiftui
7. TextKit / 富文本编辑 / 写作工具？→ /skill axiom-uikit
8. 无障碍合规性（VoiceOver、对比度、触控目标）？→ /skill axiom-accessibility
9. 审核 UI 的 Liquid Glass 采用情况？→ liquid-glass-auditor（Agent——发现迁移机会和采用完整性方面的差距：变体规范、嵌套规范、未设置样式的 26 之前版本回退方案、语义化工具栏布局、UIDesignRequiresCompatibility 退出选项、无障碍复查；评分为 ADOPTED / PARTIAL / NOT ADOPTED）
10. CarPlay 应用设计、类别、驾驶员分心规则？→ /skill axiom-media（carplay-hig.md）

平台专属 HIG

• watchOS 设计（便于快速浏览的 UI、watchOS 10 导航）→ 参见 axiom-watchos (skills/design-for-watchos.md)

冲突解决

design 与 swiftui：构建 UI 时：

1. 先使用 design — 在决定如何实现之前，先确定要构建什么（颜色、材质、排版、布局意图）。
2. 然后使用 swiftui — 在 SwiftUI 代码中实现设计决策。

design 与 accessibility：选择颜色或排版时：

• 颜色对比度或 Dynamic Type 合规性？→ 使用 accessibility
• 选择哪种语义颜色或文本样式？→ 使用 design

design（liquid-glass）与 swiftui：实现 Liquid Glass 时：

• Liquid Glass 的定义、何时使用 Regular 或 Clear、迁移策略 → 使用 design (skills/liquid-glass.md)
• .glassEffect() 修饰符的 SwiftUI 代码 → 使用 design (skills/liquid-glass-ref.md)，再使用 swiftui 编写周围的视图代码

design（app-composition）与 swiftui：构建应用架构时：

• @main 入口、身份验证状态机、根视图切换、场景生命周期 → 使用 design (skills/app-composition.md)
• NavigationStack、NavigationSplitView、标签页结构 → 使用 swiftui

design 与 media（CarPlay）：为 CarPlay 进行设计时：

• 通用 iOS HIG 原则（颜色、排版、Liquid Glass）→ 使用 design
• CarPlay 专属规则（应用类别、权限审核、仅限模板的 UI、驾驶员分心、各类别设计规则）→ 调用 axiom-media (skills/carplay-hig.md)
• CarPlay 规则比 iOS HIG 更严格，并且会在权限审核时执行，而不仅仅是在 App Store 审核时执行。

关键模式

HIG 快速决策 (skills/hig.md)：

• 背景颜色决策树（媒体焦点型与标准型）
• 排版选择（标题、正文或说明文字）
• 颜色使用指南，以及何时使用语义颜色而非自定义颜色
• HIG 合规性设计审核清单

HIG 综合参考 (skills/hig-ref.md)：

• 所有语义颜色及其平台可用性
• 支持深色模式的自定义颜色模式
• 背景层级与材质样式
• 每种颜色和背景模式的代码示例

Liquid Glass (skills/liquid-glass.md)：

• Liquid Glass 的定义及其与模糊效果的区别
• Regular 与 Clear 变体的选择
• 从 iOS 26 之前的材质迁移的策略
• 色调、易读性和自适应行为的故障排除
• Liquid Glass 实现的专家审核标准
• UIDesignRequiresCompatibility 选择退出设置及其经过测量的 SDK × OS 行为

Liquid Glass 采用 (skills/liquid-glass-ref.md)：

• 全应用采用规划（图标、控件、导航、菜单）
• 平台专属行为（iOS、iPadOS、macOS、tvOS、watchOS）
• Liquid Glass 界面的无障碍合规性

SF Symbols (skills/sf-symbols.md)：

• 渲染模式选择（Monochrome、Hierarchical、Palette、Multicolor）
• 符号效果选择（Bounce、Pulse、Scale、Wiggle、Rotate、Breathe、Draw）
• 自定义符号创建工作流
• 效果不播放、字重不匹配问题的故障排除

SF Symbols API (skills/sf-symbols-ref.md)：

• 渲染模式和效果的精确 API 签名
• 每个 SwiftUI 符号 API 对应的 UIKit/AppKit 等效项
• 平台可用性矩阵
• 配置选项（字重、缩放、可变值）

排版 (skills/typography-ref.md)：

• San Francisco 字体系统（Pro、Compact、Mono、New York）
• 支持 Dynamic Type 缩放的文本样式
• 字符间距和行距数值
• 国际化注意事项

应用组合 (skills/app-composition.md)：

• @main 入口点和根视图模式
• 身份验证状态机（登录、引导流程、主界面）
• 无闪烁的根视图切换
• scenePhase 生命周期处理和状态恢复
• 基于文稿的应用：OS27 @Observable 文稿模型（ReadableDocument/WritableDocument）+ DocumentGroup

反驳自我合理化

想法	现实
“我随便选些好看的颜色就行”	语义颜色会自动适配深色模式、辅助功能设置和平台。自定义颜色则需要手动处理所有这些情况。skills/hig.md 中有决策树。
“Liquid Glass 只是模糊效果”	Liquid Glass 是一种独特的材质系统，具有透镜效果、着色和自适应行为。改用 .blur() 会造成视觉效果错误。skills/liquid-glass.md 解释了两者的区别。
“我知道该使用哪种 SF Symbol 渲染模式”	正确的模式取决于上下文（工具栏使用单色，营造纵深感使用分层，品牌颜色使用调色板）。skills/sf-symbols.md 中有决策树。
“我会把字体大小写死”	写死的大小会破坏动态字体，违反 HIG，并且无法通过辅助功能审核。skills/typography-ref.md 展示了文本样式系统。
“我会用布尔值处理身份验证状态”	布尔值无法表示登录、引导和主界面状态，还会引发竞态条件。skills/app-composition.md 中有状态机模式。
“采用 Liquid Glass 意味着要重写整个 UI”	大多数标准 SwiftUI/UIKit 组件会自动适配。从使用最新版 Xcode 构建开始，然后进行检查。skills/liquid-glass-ref.md 中有渐进式策略。
“我稍后再添加 SF Symbol 动画”	符号效果是用户感知交互反馈的主要方式。不加这些效果就发布，会让人觉得应用出了问题。skills/sf-symbols.md 介绍了如何选择。
“代码能运行，我就跳过设计审核”	是否符合 HIG 会影响 App Store 审核。即使应用功能正常，只要体验不对，审核人员也会拒绝。skills/hig.md 中有审核清单。

示例调用

用户：“我应该使用深色还是浅色背景？” -> 阅读：skills/hig.md

用户：“辅助文本应该使用哪种语义颜色？” -> 阅读：skills/hig-ref.md

用户：“如何在我的应用中实现 Liquid Glass？” -> 阅读：skills/liquid-glass.md

用户：“我需要规划如何在整个应用中采用 Liquid Glass” -> 阅读：skills/liquid-glass-ref.md

用户：“我的 SF Symbol 看起来很扁平，我想让它更有纵深感” -> 阅读：skills/sf-symbols.md

用户：“用于符号效果的 SwiftUI API 是什么？” -> 阅读：skills/sf-symbols-ref.md

用户：“正文应该使用哪种字体？” -> 阅读：skills/typography-ref.md

用户：“如何在登录界面和主界面之间切换？” -> 阅读：skills/app-composition.md

用户：“检查我的应用 UI 是否符合 HIG” -> 阅读：skills/hig.md，然后阅读 /skill axiom-accessibility，检查对比度/动态字体

用户：“我想让下载按钮图标动起来” -> 阅读：skills/sf-symbols.md