SwiftUI Design Skill

核心能力

能力	交付物	典型耗时
SwiftUI 界面设计	可编译的 SwiftUI 代码、设计系统 token、布局模式	10–15 分钟
设计方向顾问	5 大流派 × N 种设计哲学、推荐 3 个方向、视觉锚点描述	5 分钟
品牌资产集成	brand-spec.md、色板、字体、间距系统	5–10 分钟
反 AI Slop 审查	逐条检查、具体修复代码、替代方案	3–5 分钟
五维评审	雷达图评分、Keep/Fix/Quick Wins、可操作修复清单	3 分钟
布局模式库	9 种常见布局、可复制的 SwiftUI 代码	即时
动画设计	spring/parallax/pull-to-refresh、可编译代码	5–10 分钟

核心机制

反 AI Slop 六条铁律

所有设计必须通过这 6 条硬性检查：

#	铁律	禁止	替代方案
1	起点从上下文开始	空白画布凭空捏造	先问设计系统/UI kit/品牌资产
2	初级设计师模式	等完美方案	灰色占位符 > 烂 SVG
3	给变体不给终稿	一个「最终答案」	2–3 个差异化方向
4	占位符 > 烂实现	AI 生成的剪贴画	干净的灰色占位 + 文字标注
5	系统优先，别填充	塞满每一个像素	每个元素必须证明自己存在的理由
6	禁止 AI slop 模式	紫蓝渐变、emoji 图标、圆角卡片+左边框	单一暖色强调色、SF Symbols、衬线标题

设计方向顾问

需求模糊时，从 5 大设计流派中推荐 3 个差异化方向：

流派	特征	代表风格
信息型	数据优先、图表密集	Bloomberg Terminal
编辑型	杂志排版、衬线字体、大量留白	NYT、Medium
表现型	大胆配色、不对称布局、动效前置	Stripe、Linear
功能型	密集工具感、等宽字体点缀	Things、OmniFocus
温暖极简	柔和中性色、圆角、微妙质感	Notion、Craft

品牌资产协议

涉及具体品牌时强制执行 5 步硬流程：

步骤	动作	目的
1 · 问	用户有 brand guidelines 吗？	尊重已有资源
2 · 搜	搜索品牌官方页面	获取真实素材
3 · 下	下载实际资产文件	PNG/SVG logo、字体
4 · 验	验证颜色匹配官方来源	核对 hex 值
5 · 写	生成 brand-spec.md	记录完整设计系统

质量门槛：5 个真实品牌色、10 个设计 token、2 个字体家族、8pt 间距网格。

五维评审

每个设计交付前必须通过 5 个维度的评审：

维度	评分标准	最低分
哲学一致性	设计是否贯彻了选定的设计哲学	≥ 7/10
视觉层级	信息优先级是否清晰	≥ 7/10
细节执行	间距、字体、颜色是否精确	≥ 7/10
功能性	布局是否服务用户目标	≥ 7/10
原创性	是否有 1 个签名细节	≥ 7/10

文件结构

swiftui-design-skill/
├── SKILL.md ← 核心定义
├── references/
│ ├── anti-ai-slop.md ← 反 AI Slop 详细规则
│ ├── layout-patterns.md ← 9 种布局模式 + 可复制代码
│ ├── typography-color.md ← 字体层级 + 色彩系统
│ ├── design-review.md ← 五维评审流程
│ └── swift-extensions.md ← Color/Font/Animation 扩展
└── templates/
 └── brand-spec.md ← 品牌规范模板

互补技能

与 swiftui-expert-skill 配合使用：

	SwiftUI Design Skill	swiftui-expert-skill
焦点	视觉设计、美学、品牌感	代码质量、性能、正确性
核心问题	「看起来怎么样？」	「代码写得对不对？」
输出	设计方向、色板、布局、评审	代码审查、Instruments 分析、API 现代化

先用 Design 确定「做什么」，再用 Expert 确保「怎么做对」。

安装使用

npx skills add wholiver/swiftui-design-skill -g -y

跨 Agent 通用： Claude Code、Cursor、Codex、OpenCode、Hermes 均可安装使用。