Claude Code 生成的 SwiftUI 界面太丑？这个 Skill 终于有救了

Claude Code 生成的 SwiftUI 界面太丑？这个 Skill 终于有救了

用过 AI 生成 SwiftUI 代码的设计师大概都有一个共同感受：能用，但看起来就是一股「AI 味」——紫色渐变背景、emoji 图标、圆角卡片加左边框……看两张就审美疲劳了。

GitHub 上有个叫 swiftui-design-skill 的 Skill，专门解决这个痛点。它不是帮你写代码，而是帮你把设计审美灌进 AI 的脑子里，让生成的 SwiftUI 界面真正能拿出手。

六条铁律，对抗 AI 粗糙感

这个 Skill 最狠的部分是一套「反 AI 垃圾」六条铁规：

• 禁止从空白画布凭空发明设计，要先问有没有设计系统
• 不确定时用灰色占位块，不要用劣质 SVG 图标
• 给 2-3 个差异化方向，不要一个「最终版」
• AI 生成的表情包图标直接禁，换 SF Symbols
• 元素存在必须有理由，不能每个像素都填满
• 紫色-蓝色渐变、emoji 图标、左边框圆角卡片——全部禁止

听起来像设计课？但这是给 AI 定的规矩。Claude Code 加载这个 Skill 之后，生成界面之前会先问：「你有品牌设计系统吗？」——它会真的去找你的品牌色、字体、素材，而不是闭眼乱配色。

五大设计学派 + 品牌资产协议

当需求模糊时，Skill 会从 5 个主流设计学派给出方向建议：

• 信息优先派（Bloomberg Terminal 风格）——数据密集型工具
• 编辑排版派（NYT / Medium 风格）——内容型 App
• 表现力派（Stripe / Linear 风格）——产品感强
• 功能工具派（Things / OmniFocus 风格）——效率工具
• 温暖极简派（Notion / Craft 风格）——创作型 App

选定方向之后，还有一套「品牌资产协议」——5 步强制流程，确保 AI 真正用你的品牌色、品牌字体、品牌素材，而不是自己「凭感觉」配一套。

五维评审：每次交付前必须过堂

设计方向定了、代码也生成了，还不能直接交付——Skill 内置了一套五维评审机制，每个维度必须 ≥7 分才能过关：

• 理念一致性（设计哲学是否落地）
• 视觉层级（信息优先级是否清晰）
• 细节执行（间距、字体、颜色是否精准）
• 功能性（布局是否服务用户目标）
• 原创性（至少有一个让人记住的细节）

不达标的代码会被打回重做。这个机制让 AI 生成的 SwiftUI 界面第一次有了「设计审查」环节，而不是直接喷出来一堆凑合能跑的代码。

安装只需一行命令

支持所有主流 AI 编程 Agent：Claude Code、Cursor、Codex、OpenCode、Hermes——一行命令搞定：

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

装完之后，你的 AI 编程助手就多了一个「设计顾问」角色——每次生成 SwiftUI 界面之前，它会主动问你的设计方向、品牌资产，然后给出 2-3 个差异化方案让你选，而不是直接塞给你一个紫蓝渐变界面。

对于经常做 iOS 原型或 SwiftUI 开发的设计师来说，这个 Skill 真正把「设计品味」变成了 AI 工作流的一部分——不是后期补救，而是从第一步就介入。

GitHub：https://github.com/wholiver/swiftui-design-skill

GitHub: https://github.com/wholiver/swiftui-design-skill