swiftui-design-skill

SwiftUI 设计技能

TL;DR：设计精心打磨、而非充满 AI 生成感的 SwiftUI 应用。遵循 6 条反套路规则；当需求模糊时，使用设计方向工作流；交付前务必通过 5 维度评审。

使用场景

• 从头设计新的 SwiftUI 视图或屏幕
• 评审或提升现有 UI 质量
• 创建 iOS 应用原型或模型图
• 选择视觉风格或设计方向
• 将品牌素材集成到 SwiftUI 中
• 有人说“UI 看起来很普通”或“让它更好看”
• 构建需要视觉设计的新功能

不适用场景

• 纯后端 / API 工作，不涉及 UI
• 修复 SwiftUI 编译错误（改用 swiftui-expert-skill）
• 优化现有视图的性能（改用 swiftui-expert-skill）
• 仅处理无障碍合规性（使用 swiftui-expert-skill 的无障碍主题）

前提条件

• Xcode 16+，搭配 iOS 18+ / macOS 15+ SDK
• SwiftUI 框架（除非明确要求，否则不使用 UIKit）
• 熟悉 SwiftUI 视图层级和修饰符

---

核心设计理念

这 6 条原则指导每项设计决策。它们提炼自真实世界的设计实践，以及 AI 生成 UI 中观察到的反模式。

原则 1：从上下文出发，绝不从空白开始

设计任何屏幕之前，先询问：

• 是否已有设计系统、UI 工具包或 Figma 文件？
• 是否已有建立了视觉语言的代码库？
• 是否有品牌指南或样式指南？

如果没有任何现成上下文，先创建 brand-spec.md（参见下方的品牌素材规范）。

原则 2：初级设计师模式——尽早提出假设，快速迭代

不要等待“完美”设计。尽早使用占位内容展示假设：

• 图片使用灰色占位框，胜过质量差的 AI 生成 SVG
• 间距合理的系统字体 > 间距糟糕的自定义字体
• 粗略但诚实的布局 > 精致却平庸的布局

原则 3：提供多个方案，而非定稿

始终提供 2-3 种不同的设计方向，而不是一个“最终答案”。每种方案都应：

• 体现不同的设计理念（例如，编辑风、功能风、表现风）
• 有清晰的设计理由，说明其为何有效
• 在视觉上有明显区别，而非仅仅替换颜色

原则 4：占位内容 > 糟糕的实现

如果找不到真实素材（图标、图片、插图）：

• 使用整洁的灰色占位内容，并清楚标注
• 绝不使用 AI 生成的 SVG 剪贴画
• 生产 UI 中绝不使用表情符号替代图标
• 图标优先使用 SF Symbols（Apple 内置图标库）

原则 5：系统优先，不要塞满内容

每个元素都必须有存在的理由。添加任何 UI 元素之前，先询问：

• 这能帮助用户达成目标吗？
• 能否与其他元素合并？
• 如果移除它，会发生什么？

留白是一种设计特性，而非空无一物。

原则 6：反 AI 垃圾设计

这些模式在生产 UI 中禁止使用。详细规则请参阅 references/anti-ai-slop.md。

禁止的视觉模式：

• ❌ 紫到蓝的渐变背景
• ❌ 用表情符号充当功能图标
• ❌ 带左侧强调色边框的圆角卡片
• ❌ 在渐变背景上居中放置文字的通用“主视觉区”
• ❌ 在 Apple 平台上将 Inter/Roboto 用作展示字体
• ❌ 深色背景搭配霓虹色的“赛博”美学（#0D1117 为底色）
• ❌ 对称的三列功能网格
• ❌ AI 绘制的 SVG 插图或 CSS 人物剪影

应采取的做法：

• ✅ 在中性背景上使用单一的暖色强调色
• ✅ 使用 SF Symbols 或自定义图标集
• ✅ 标题使用衬线展示字体（例如 New York、Georgia）
• ✅ 控制信息密度，让内容有呼吸感
• ✅ 每个屏幕投入 120% 的精力打造一个标志性细节
• ✅ 使用真实摄影图片或整洁的占位内容

---

品牌资产流程

为特定品牌构建 UI 时，请遵循以下 5 步硬性流程：

1. 询问 — 索取品牌指南、Logo 文件、配色方案和字体
2. 搜索 — 如果用户未提供，请在网上搜索“[brand name] brand guidelines”
3. 下载 — 获取实际的资产文件（PNG/SVG Logo、字体文件）
4. 验证 — 确认颜色与官方来源一致（检查十六进制值）
5. 编写 brand-spec.md — 记录：主色/辅色、字体、Logo 使用规则、间距 token

质量门槛：5 种实际品牌颜色、10 个经过验证的设计 token、2 种字体系列、8pt 间距网格。

如果没有现成品牌，请创建一个 brand-spec.md，其中包含：

• 1 种主强调色（暖色调，不使用紫蓝渐变）
• 1 套中性色板（带暖色底调的灰色）
• 1 种展示字体 + 1 种正文字体（默认使用 SF Pro 即可）
• 8pt 间距网格

---

设计方向工作流

当需求含糊不清，或用户询问“我们应该采用什么风格？”时，请遵循此工作流：

阶段 1：了解背景（5 分钟）

1. 询问：这是哪种应用？用户是谁？面向哪个平台（iOS/macOS/watchOS）？
2. 询问：他们欣赏哪些参考应用或网站？
3. 检查：是否已有设计系统或品牌资产？

阶段 2：推荐 3 种方向

从不同设计流派中提出 3 种截然不同的设计理念：

流派	方向示例
信息型	简洁、数据优先、图表密集、Bloomberg 风格
编辑型	杂志版式、衬线字体、宽松留白
表现型	鲜明色彩、不对称布局、突出动效
功能型	高密度实用设计、等宽字体点缀、装饰极少
温暖极简	柔和中性色、圆润造型、细腻纹理

阶段 3：呈现视觉锚点

针对每种方向，描述：

• 配色方案（3-5 种颜色及其十六进制值）
• 字体搭配（展示字体 + 正文字体）
• 布局密度（舒适 / 紧凑 / 宽松）
• 标志性细节（每个屏幕有一个醒目元素）

阶段 4：让用户选择

清晰地呈现选项。用户选择后，确定设计系统。

---

SwiftUI 设计工作流

步骤 1：定义设计系统（编码前）

创建或确认以下设计 token：

// Requires: references/swift-extensions.md (Color(hex:) extension)
// DesignTokens.swift
enum DesignTokens {
    // Colors
    static let accent = Color(hex: "E85D3A")      // Warm coral
    static let background = Color(hex: "FAFAF8")   // Warm white
    static let textPrimary = Color(hex: "1A1A1A")   // Near-black
    static let textSecondary = Color(hex: "6B6B6B") // Muted gray
    
    // Typography
    static let displayFont = "New York"  // Serif for headings
    static let bodyFont = "SF Pro"       // System default
    
    // Spacing (8pt grid)
    static let spaceXS: CGFloat = 4
    static let spaceS: CGFloat = 8
    static let spaceM: CGFloat = 16
    static let spaceL: CGFloat = 24
    static let spaceXL: CGFloat = 32
    static let spaceXXL: CGFloat = 48
    
    // Corner radius
    static let radiusS: CGFloat = 8
    static let radiusM: CGFloat = 12
    static let radiusL: CGFloat = 16
}

步骤 2：构建布局层级

遵循 references/layout-patterns.md 中的布局模式：

• 从主要内容容器开始
• 垂直排列使用 VStack，水平排列使用 HStack
• 网格布局使用 LazyVGrid / LazyHGrid
• 分页内容使用 ScrollView 和 .scrollTargetBehavior(.paging)
• 避免使用 GeometryReader — 优先使用 containerRelativeFrame（iOS 17+）

步骤 3：应用字体层级

遵循 references/typography-color.md：

• 展示文字（屏幕标题）：衬线字体，28-34pt，加粗
• 标题（分区标题）：无衬线字体，20-24pt，半粗体
• 正文（内容文本）：无衬线字体，15-17pt，常规字重
• 说明文字（标签、元数据）：无衬线字体，12-13pt，次要颜色

步骤 4：添加标志性细节

每个屏幕都应该有一个做到 120% 的元素 — 自定义动画、独特的布局选择或鲜明的色彩瞬间。这正是让设计令人难忘的关键。

示例：

• 带有品牌色动画的自定义下拉刷新
• 点击卡片时，卡片以弹簧动画展开
• 标题区域以超大字号显示品牌展示字体
• 滚动时出现细腻的视差效果

步骤 5：根据检查清单进行审核

发布前，执行 5 维度审核（参见 references/design-review.md）。

---

应避免的常见错误

错误	修正方式
使用 UIColor 或 NSColor	使用 Color（SwiftUI 原生类型）
使用 UIScreen.main.bounds 设置尺寸	使用 containerRelativeFrame 或基于几何结构的修饰符
到处使用默认蓝色主题色	在设计令牌中定义自定义强调色
没有间距系统（随意设置内边距值）	使用 8pt 网格：4、8、16、24、32、48
用 Emoji 作为图标	使用 SF Symbols 或自定义图标资源
使用紫蓝渐变背景	使用纯色暖中性色
所有内容都塞进一个巨大的 VStack	按语义拆分为多个部分，并明确层级
缺少视觉层级（所有内容大小相同）	使用 3 种以上字号层级（展示、标题、正文、说明文字）
忽略深色模式	定义能根据外观模式自适应的语义颜色
使用通用的“欢迎！”主视觉区域	立即展示实际内容

---

快速参考：主题索引

主题	参考文件
反 AI 垃圾规则（详情）	references/anti-ai-slop.md
布局模式与网格	references/layout-patterns.md
排版与颜色系统	references/typography-color.md
五维设计评审	references/design-review.md
Swift 扩展（必需）	references/swift-extensions.md
品牌规范模板	templates/brand-spec.md

---

验证清单

在确认任何 SwiftUI 设计完成之前，请检查：

• 已定义设计令牌（颜色、字体、间距）
• 不存在被禁止的 AI 垃圾模式
• 排版具有清晰的层级（3 种以上字号）
• 间距遵循 8pt 网格
• 已定义并测试深色模式颜色
• 每个屏幕都有一个标志性细节
• 图标使用 SF Symbols（而非 Emoji）
• 点击目标最小为 44×44pt
• 不使用 GeometryReader 或 UIScreen.main.bounds
• 所有维度的五维评审得分均 ≥ 7/10