ios-design-system

Name: ios-design-system
Author: pproenca

github.com/pproenca设计与 UI218314 次安装11 周前更新

代码仓库

关于 ios-design-system

面向 SwiftUI iOS 应用开发者的设计系统工程规范技能，涵盖 8 类、50 条按影响排序的规则。重点是令牌、样式协议与治理自动化，并遵循 iOS 26 / Swift 6.2 约束。

主要功能

01涵盖 8 类设计系统规则
02规范颜色、排版与间距令牌
03以样式协议定义组件样式
04包含资产管理与主题指导
05强调一致性治理和自动检查

适用场景

01为新 iOS 应用搭建设计系统
02将零散样式迁移到令牌体系
03创建可复用的 SwiftUI 组件样式
04审查并减少未治理的视觉值

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/pproenca/dot-skills --skill ios-design-system

安装后在 Claude Code 中输入/ios-design-system确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

metadata.json

assets/templates/

_template.md

references/

_sections.md

asset-icon-export-format.md

asset-image-optimization.md

asset-naming-convention.md

asset-separate-catalogs.md

asset-sf-symbols-first.md

color-audit-script.md

color-complete-pairs.md

color-limit-palette.md

color-no-hex-in-views.md

color-organized-xcassets.md

color-system-first.md

color-tint-not-brand-everywhere.md

govern-design-system-directory.md

govern-lint-for-tokens.md

govern-migration-incremental.md

govern-naming-conventions.md

govern-prevent-local-tokens.md

govern-single-source-of-truth.md

govern-spm-package-boundary.md

space-insets-pattern.md

space-no-magic-numbers.md

space-radius-tokens.md

space-size-tokens.md

space-token-enum.md

style-accessibility-first.md

style-catalog-file.md

style-configuration-over-parameters.md

详细介绍

Airbnb iOS 设计系统最佳实践

为 SwiftUI iOS 26 / Swift 6.2 应用打造的严格、观点鲜明的设计系统工程实践。包含 8 个类别中的 50 条规则，并按影响力排序。内容源自 Airbnb 的 Design Language System（DLS）、Airbnb Swift Style Guide、Apple Human Interface Guidelines 和 WWDC 专题。要求在每个视图上使用 @Equatable、使用 @Observable 管理状态，并将样式协议作为组件的主要 API。

强制架构规范

此技能旨在与 swift-ui-architect 配合使用。所有代码示例均遵循以下不可妥协的约束：

功能模块仅依赖 Domain + DesignSystem；不得直接依赖 Data
可变 UI 状态使用 @Observable，绝不使用 ObservableObject / @Published
每个视图都使用 @Equatable 宏
将样式协议作为组件样式设置的主要 API（Airbnb DLS 模式）
以资源目录作为颜色值的事实来源
使用本地 SPM 包划分设计系统模块边界

范围与相关技能

此技能属于基础设施层，讲解如何构建设计系统本身。与相关技能一同加载时：

相关技能	关注重点	此技能的关注重点
`swift-ui-architect`	架构（模块化 MVVM-C、路由外壳、协议边界）	设计系统基础设施（令牌、样式、治理）
`ios-design`	使用设计原语（语义颜色、排版）	构建提供这些原语的令牌系统
`ios-ui-refactor`	审查/修复视觉质量问题	通过治理和自动化预防这些问题
`ios-hig`	符合 HIG 的模式	让合规更轻松的资源与组件基础设施

Clinic 架构约定（iOS 26 / Swift 6.2）

此技能中的所有指导均基于 Clinic 模块化 MVVM-C 架构：

功能模块仅导入 Domain + DesignSystem（绝不导入 Data，也不导入同级功能模块）
App 目标是汇聚点，负责管理 DependencyContainer、具体协调器和 Route Shell 连线
Domain 保持纯 Swift，定义模型，以及 repository、*Coordinating、ErrorRouting 和 AppError 契约
Data 负责 SwiftData/网络/同步/重试/后台 I/O，并实现 Domain 协议
读写流程默认采用 stale-while-revalidate 读取和乐观排队写入
ViewModel 直接调用 repository 协议（不设默认的 use-case/interactor 层）

适用场景

以下情况请参考这些指南：

为新的 iOS 应用搭建设计系统
构建令牌架构（颜色、排版、间距、尺寸）
创建可复用的组件样式（ButtonStyle、LabelStyle、自定义 DLS 协议）
组织资源目录（颜色、图像、图标）
从临时样式迁移到受治理的令牌系统
通过自动化防止样式漂移并确保一致性
为白标或多品牌应用构建主题基础设施
审查 PR，检查是否存在未纳入治理的颜色、硬编码值或阴影令牌

按优先级划分的规则类别

优先级	类别	影响	前缀	规则数
1	令牌架构	严重	`token-`	6
2	颜色系统工程	严重	`color-`	7
3	组件样式库	严重	`style-`	10
4	排版比例	高	`type-`	5
5	间距与尺寸系统	高	`space-`	5
6	一致性与治理	高	`govern-`	7
7	资源管理	中高	`asset-`	5
8	主题与品牌基础设施	中	`theme-`	5

快速参考

1. 令牌架构（关键）

token-three-layer-hierarchy - 使用 Raw → Semantic → Component 三层令牌
token-enum-over-struct - 使用无关联值枚举作为令牌命名空间
token-single-file-per-domain - 每个设计领域使用一个令牌文件
token-shapestyle-extensions - 扩展 ShapeStyle，以支持点语法颜色
token-asset-catalog-source - 从资源目录获取颜色令牌
token-avoid-over-abstraction - 避免抽象超过三层

2. 颜色系统工程（关键）

color-organized-xcassets - 按角色使用文件夹组整理颜色资源
color-complete-pairs - 为每种自定义颜色定义明暗两种外观
color-limit-palette - 将自定义颜色限制在 20 个语义令牌以内
color-no-hex-in-views - 绝不在视图代码中使用 Color 字面量或十六进制值
color-system-first - 优先使用系统颜色，再考虑自定义令牌
color-tint-not-brand-everywhere - 将品牌色设为应用色调，不要在各处散布
color-audit-script - 使用构建脚本审查未受管理的颜色

3. 组件样式库（关键）

style-dls-protocol-pattern - 为复杂的 DLS 组件定义自定义样式协议
style-equatable-views - 为每个设计系统视图应用 @Equatable
style-accessibility-first - 将无障碍功能融入样式协议，而非单个视图
style-protocol-over-wrapper - 使用 Style 协议，而非包装视图
style-static-member-syntax - 为自定义样式提供静态成员语法
style-environment-awareness - 让样式能够响应环境值
style-view-for-containers-modifier-for-styling - 容器使用视图，样式设置使用修饰符
style-catalog-file - 每种组件类型使用一个样式目录文件
style-configuration-over-parameters - 优先使用配置结构体，而非大量参数
style-preview-catalog - 为所有样式创建预览目录

4. 字体排印比例（高）

type-scale-enum - 定义包装系统样式的字体比例枚举
type-system-styles-first - 优先使用系统文本样式，再考虑自定义样式
type-custom-font-registration - 通过集中式扩展注册自定义字体
type-max-styles-per-screen - 将每个屏幕上的字体排印样式限制为 3–4 种
type-avoid-font-design-mixing - 每个应用使用一种字体设计

5. 间距与尺寸系统（HIGH）

space-token-enum - 将间距标记定义为无大小写枚举
space-radius-tokens - 按组件类型定义圆角标记
space-no-magic-numbers - 视图布局代码中不使用硬编码数字
space-insets-pattern - 使用 EdgeInsets 常量设置复合内边距
space-size-tokens - 为常见尺寸定义尺寸标记

6. 一致性与治理（HIGH）

govern-naming-conventions - 确保所有标记遵循一致的命名约定
govern-spm-package-boundary - 将设计系统隔离为本地 SPM 包
govern-single-source-of-truth - 每个视觉值仅有一个定义位置
govern-lint-for-tokens - 使用 SwiftLint 规则强制使用标记
govern-design-system-directory - 将标记隔离在专用目录中
govern-migration-incremental - 逐步迁移到标记
govern-prevent-local-tokens - 防止功能模块定义本地标记

7. 资源管理（MEDIUM-HIGH）

asset-separate-catalogs - 为颜色、图像和图标使用独立的资源目录
asset-sf-symbols-first - 优先使用 SF Symbols，而非自定义图标
asset-icon-export-format - 使用 PDF/SVG 矢量图，绝不使用多个 PNG
asset-image-optimization - 使用压缩和按需资源
asset-naming-convention - 为所有资源采用一致的命名约定

8. 主题与品牌基础设施（MEDIUM）

theme-environment-key - 使用 EnvironmentKey 传递主题
theme-dont-over-theme - 除非有需要，否则避免构建主题系统
theme-tint-for-brand - 使用 .tint() 作为主要品牌表达方式
theme-light-dark-only - 使用 ColorScheme 处理浅色/深色模式，而非自定义主题
theme-brand-layer-separation - 将品牌标识与系统机制分离

使用方法

阅读各个参考文件，了解详细说明和代码示例：

章节定义 - 类别结构和影响级别
规则模板 - 添加新规则的模板

参考文件

文件	说明
references/_sections.md	类别定义和排序
assets/templates/_template.md	新规则模板
metadata.json	版本和参考信息

支持 Markdown

登录后评论