axiom-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design & HIG

设计与HIG

You MUST use this skill for ANY visual design, HIG compliance, Liquid Glass, SF Symbols, typography, or app composition work.

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

Quick Reference

快速参考

Symptom / Task	Reference
Design decisions, HIG compliance, colors, backgrounds	See `skills/hig.md`
Semantic colors, custom color patterns, material styles	See `skills/hig-ref.md`
Liquid Glass effects, adoption, migration from blur effects	See `skills/liquid-glass.md`
App-wide Liquid Glass adoption, backward compatibility	See `skills/liquid-glass-ref.md`
SF Symbols rendering modes, effects, animations	See `skills/sf-symbols.md`
SF Symbols API signatures, UIKit equivalents, availability	See `skills/sf-symbols-ref.md`
San Francisco fonts, text styles, Dynamic Type, tracking	See `skills/typography-ref.md`
App entry points, auth flows, root view switching, scene lifecycle	See `skills/app-composition.md`

场景/任务	参考文档
设计决策、HIG合规、颜色、背景	查看 `skills/hig.md`
语义颜色、自定义颜色模式、材质样式	查看 `skills/hig-ref.md`
Liquid Glass效果、应用、从模糊效果迁移	查看 `skills/liquid-glass.md`
全应用Liquid Glass适配、向后兼容性	查看 `skills/liquid-glass-ref.md`
SF Symbols渲染模式、效果、动画	查看 `skills/sf-symbols.md`
SF Symbols API签名、UIKit等效实现、可用性	查看 `skills/sf-symbols-ref.md`
San Francisco字体、文本样式、Dynamic Type、字距	查看 `skills/typography-ref.md`
应用入口点、认证流程、根视图切换、场景生命周期	查看 `skills/app-composition.md`

Decision Tree

决策树

dot

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-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"];
    what -> "skills/liquid-glass-ref.md" [label="app-wide Liquid Glass plan,\nplatform differences,\nbackward compat"];
    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"];
}

Design decision / HIG compliance / choosing colors or backgrounds? →
```
skills/hig.md
```
1a. Need semantic color API, custom color code, or material style details? →
```
skills/hig-ref.md
```
Liquid Glass effects / migrating from blur / Regular vs Clear variant? →
```
skills/liquid-glass.md
```
2a. Planning app-wide Liquid Glass adoption / platform differences / backward compatibility? →
```
skills/liquid-glass-ref.md
```
SF Symbols rendering mode / symbol effects / custom symbols? →
```
skills/sf-symbols.md
```
3a. Need SF Symbols API syntax / UIKit equivalents / availability check? →
```
skills/sf-symbols-ref.md
```
Font selection / Dynamic Type / text styles / tracking / leading? →
```
skills/typography-ref.md
```
App entry point / auth flow / root view switching / scene lifecycle? →
```
skills/app-composition.md
```
SwiftUI view implementation? →
```
/skill axiom-swiftui
```
TextKit / rich text editing / Writing Tools? →
```
/skill axiom-uikit
```
Accessibility compliance (VoiceOver, contrast, touch targets)? →
```
/skill axiom-accessibility
```
Audit UI for Liquid Glass adoption? → liquid-glass-auditor (Agent)

dot

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-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"];
    what -> "skills/liquid-glass-ref.md" [label="app-wide Liquid Glass plan,\nplatform differences,\nbackward compat"];
    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"];
}

需要做设计决策、确保HIG合规或选择颜色/背景？→
```
skills/hig.md
```
1a. 需要语义颜色API、自定义颜色代码或材质样式细节？→
```
skills/hig-ref.md
```
需要Liquid Glass效果、从模糊效果迁移或选择Regular/Clear变体？→
```
skills/liquid-glass.md
```
2a. 规划全应用Liquid Glass适配、了解平台差异或处理向后兼容性？→
```
skills/liquid-glass-ref.md
```
需要SF Symbols渲染模式、符号效果或自定义符号？→
```
skills/sf-symbols.md
```
3a. 需要SF Symbols API语法、UIKit等效实现或可用性检查？→
```
skills/sf-symbols-ref.md
```
需要字体选择、Dynamic Type、文本样式、字距或行高？→
```
skills/typography-ref.md
```
需要应用入口点、认证流程、根视图切换或场景生命周期处理？→
```
skills/app-composition.md
```
需要SwiftUI视图实现？→
```
/skill axiom-swiftui
```
需要TextKit/富文本编辑/Writing Tools？→
```
/skill axiom-uikit
```
需要无障碍合规（VoiceOver、对比度、触摸目标）？→
```
/skill axiom-accessibility
```
需要审核UI的Liquid Glass适配情况？→ liquid-glass-auditor (Agent)

Conflict Resolution

冲突解决

design vs swiftui: When building UI:

Use design FIRST — Decide what to build (colors, materials, typography, layout intent) before how to build it.
Then use swiftui — Implement the design decision in SwiftUI code.

design vs accessibility: When choosing colors or typography:

Color contrast or Dynamic Type compliance? → use accessibility
Which semantic color or text style to pick? → use design

design (liquid-glass) vs swiftui: When implementing Liquid Glass:

What Liquid Glass is, when to use Regular vs Clear, migration strategy → use design (
```
skills/liquid-glass.md
```
)
SwiftUI code for
```
.glassEffect()
```
modifier → use design (
```
skills/liquid-glass-ref.md
```
), then swiftui for surrounding view code

design (app-composition) vs swiftui: When structuring app architecture:

@main entry, auth state machine, root view switching, scene lifecycle → use design (
```
skills/app-composition.md
```
)
NavigationStack, NavigationSplitView, tab structure → use swiftui

design与swiftui的优先级：构建UI时：

优先使用design — 先确定要构建的内容（颜色、材质、排版、布局意图），再考虑如何实现。
再使用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

Critical Patterns

核心模式

HIG Quick Decisions (

skills/hig.md

Background color decision tree (media-focused vs standard)
Typography selection (headline vs body vs caption)
Color usage guidelines and when to use semantic vs custom colors
Design review checklist for HIG compliance

HIG Comprehensive Reference (

skills/hig-ref.md

All semantic colors with platform availability
Custom color patterns with dark mode support
Background hierarchy and material styles
Code examples for every color and background pattern

Liquid Glass (

skills/liquid-glass.md

What Liquid Glass is and how it differs from blur effects
Regular vs Clear variant selection
Migration strategy from pre-iOS 26 materials
Tinting, legibility, and adaptive behavior troubleshooting
Expert review criteria for Liquid Glass implementations

Liquid Glass Adoption (

skills/liquid-glass-ref.md

App-wide adoption planning (icons, controls, navigation, menus)
Platform-specific behavior (iOS, iPadOS, macOS, tvOS, watchOS)
Backward compatibility strategy for supporting pre-Liquid Glass
Accessibility compliance with Liquid Glass interfaces

SF Symbols (

skills/sf-symbols.md

Rendering mode selection (Monochrome, Hierarchical, Palette, Multicolor)
Symbol effect selection (Bounce, Pulse, Scale, Wiggle, Rotate, Breathe, Draw)
Custom symbol creation workflow
Troubleshooting effects not playing, weight mismatches

SF Symbols API (

skills/sf-symbols-ref.md

Exact API signatures for rendering modes and effects
UIKit/AppKit equivalents for every SwiftUI symbol API
Platform availability matrix
Configuration options (weight, scale, variable values)

Typography (

skills/typography-ref.md

San Francisco font system (Pro, Compact, Mono, New York)
Text styles with Dynamic Type scaling
Tracking and leading values
Internationalization considerations

App Composition (

skills/app-composition.md

@main entry point and root view patterns
Authentication state machine (login, onboarding, main)
Flicker-free root view switching
scenePhase lifecycle handling and state restoration

HIG快速决策（

skills/hig.md

）：

背景颜色决策树（媒体优先型 vs 标准型）
排版选择（标题 vs 正文 vs 说明文字）
颜色使用指南及何时使用语义颜色/自定义颜色
HIG合规性设计审核清单

HIG综合参考（

skills/hig-ref.md

）：

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

Liquid Glass（

skills/liquid-glass.md

）：

Liquid Glass是什么，与模糊效果的区别
Regular/Clear变体选择
从iOS 26之前的材质迁移策略
着色、可读性和自适应行为故障排查
Liquid Glass实现的专家评审标准

Liquid Glass适配（

skills/liquid-glass-ref.md

）：

全应用适配规划（图标、控件、导航、菜单）
平台特定行为（iOS、iPadOS、macOS、tvOS、watchOS）
支持Liquid Glass之前版本的向后兼容策略
Liquid Glass界面的无障碍合规性

SF Symbols（

skills/sf-symbols.md

）：

渲染模式选择（单色、层级、调色板、多色）
符号效果选择（弹跳、脉冲、缩放、摆动、旋转、呼吸、绘制）
自定义符号创建流程
效果不生效、权重不匹配的故障排查

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生命周期处理与状态恢复

Anti-Rationalization

误区纠正

Thought	Reality
"I'll just pick colors that look good"	Semantic colors adapt to dark mode, accessibility settings, and platform automatically. Custom colors need all of that manually. `skills/hig.md` has the decision tree.
"Liquid Glass is just a blur effect"	Liquid Glass is a distinct material system with lensing, tinting, and adaptive behavior. Using `.blur()` instead creates a visually wrong result. `skills/liquid-glass.md` explains the difference.
"I know which SF Symbol rendering mode to use"	The right mode depends on context (monochrome for toolbars, hierarchical for depth, palette for brand colors). `skills/sf-symbols.md` has the decision tree.
"I'll hardcode font sizes"	Hardcoded sizes break Dynamic Type, violate HIG, and fail accessibility review. `skills/typography-ref.md` shows the text style system.
"I'll handle auth state with a boolean"	A boolean can't represent login, onboarding, and main states without race conditions. `skills/app-composition.md` has the state machine pattern.
"Liquid Glass adoption means rewriting my whole UI"	Most standard SwiftUI/UIKit components adopt automatically. Start by building with latest Xcode, then review. `skills/liquid-glass-ref.md` has the incremental strategy.
"I'll add the SF Symbol animation later"	Symbol effects are the primary way users perceive interactive feedback. Shipping without them feels broken. `skills/sf-symbols.md` covers selection.
"I'll skip the design review, the code works"	HIG compliance affects App Store review. Reviewers reject apps that feel wrong even if they function correctly. `skills/hig.md` has the review checklist.

错误想法	实际情况
"我选看起来好看的颜色就行"	语义颜色会自动适配深色模式、无障碍设置和平台，自定义颜色则需要手动处理所有适配。 `skills/hig.md` 中有决策树。
"Liquid Glass只是一种模糊效果"	Liquid Glass是一套独特的材质系统，包含透镜效果、着色和自适应行为。使用 `.blur()` 替代会导致视觉效果错误。 `skills/liquid-glass.md` 解释了两者差异。
"我知道该用哪种SF Symbol渲染模式"	合适的模式取决于使用场景（工具栏用单色、需要层次感用层级、品牌色用调色板）。 `skills/sf-symbols.md` 中有决策树。
"我直接硬编码字体大小"	硬编码大小会破坏Dynamic Type、违反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` 中有审核清单。

Example Invocations

调用示例

User: "Should I use a dark or light background?" -> Read:

skills/hig.md

User: "What semantic color should I use for secondary text?" -> Read:

skills/hig-ref.md

User: "How do I implement Liquid Glass in my app?" -> Read:

skills/liquid-glass.md

User: "I need to plan Liquid Glass adoption across my whole app" -> Read:

skills/liquid-glass-ref.md

User: "My SF Symbol is flat, I want it to have depth" -> Read:

skills/sf-symbols.md

User: "What's the SwiftUI API for symbol effects?" -> Read:

skills/sf-symbols-ref.md

User: "Which font should I use for body text?" -> Read:

skills/typography-ref.md

User: "How do I switch between login and main screens?" -> Read:

skills/app-composition.md

User: "Check my app's UI for HIG compliance" -> Read:

skills/hig.md

, then

/skill axiom-accessibility

for contrast/Dynamic Type

User: "I want my download button icon to animate" -> Read:

skills/sf-symbols.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

检查对比度/Dynamic Type

用户："我想让下载按钮图标动起来" -> 参考：

skills/sf-symbols.md