SwiftUI 设计不是 Web 设计：一次 Skills 发现之旅

日期: 2026-05-05 场景: 为 iOS App 项目找"美观、好用、设计方向"的 AI Skills，意外发现了一套完整的 iOS 设计技能栈。

背景

做 iOS App（SwiftUI）的时候，一直有个别扭的感觉：我让 AI 帮我"设计得好看一点"，它回来的建议总像是给网页写的——flexbox 布局思路、CSS 变量式的颜色方案、rem 单位的字体系统。不能说错，但就是不对味。

SwiftUI 的思维模型和 Web 完全不一样：

• Web 用 flexbox/grid，SwiftUI 用 HStack/VStack/ZStack + alignment guides
• Web 用 CSS variables 做主题，SwiftUI 用 semantic colors（.label/.systemBackground）自动适配 light/dark
• Web 用 rem/em，iOS 用 Dynamic Type——用户全局统一调的
• iOS 有 swipe-back、haptics、bottom sheet、Large Title 这些平台标准交互，Web 没有对应物

搜了一圈，找到了什么

1. ios-hig-design（1.8K 周安装）

一个 0-10 评分框架。把 UI 截图丢给它，它会按 HIG 标准逐项打分：Layout & Safe Areas、Typography & Dynamic Type、Color & Dark Mode、Navigation Patterns、Accessibility。

2. ios-design-guidelines（869 周安装）

100+ 条设计规则，每条都带正确/错误的 SwiftUI 代码示例。15 个反模式清单很实用。

3. mobile-ios-design（14K 周安装，34.7K GitHub Stars）

偏实战落地——语义颜色怎么写、SF Symbols 的 rendering mode 怎么选、safeAreaInset 怎么用。

三个 skill 的组合

场景	用哪个
“这页面好看吗？哪里不对？”	ios-hig-design → 打分+诊断
“这个设计犯了什么常见错？”	ios-design-guidelines → 查反模式
“好，那代码怎么写？”	mobile-ios-design → 落地实现

安装方式：

npx skills add wondelai/skills@ios-hig-design -g -y
npx skills add ehmo/platform-design-skills@ios-design-guidelines -g -y
npx skills add wshobson/agents@mobile-ios-design -g -y