mcpField
I
ios-ui-craft

ios-ui-craft

github.com/prisma-labs-dev设计与 UI349175 次安装5 周前更新
代码仓库

关于 ios-ui-craft

根据屏幕或组件需求创建精细 iOS 界面的设计技能。它引导 Agent 确定统一的视觉方向、编写可运行的 SwiftUI 代码，并通过模拟器截图迭代。

主要功能

  1. 01视觉方向规划
  2. 02字体、色彩与动效指南
  3. 03SwiftUI 界面实现
  4. 04基于截图的迭代
  5. 05无障碍与视觉质量检查表

适用场景

  1. 01设计 iOS 应用屏幕
  2. 02构建风格鲜明的 SwiftUI 组件
  3. 03通过模拟器截图检查界面

安装

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

$npx skills add https://github.com/prisma-labs-dev/apple-skills --skill ios-ui-craft

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

详细介绍

iOS UI Craft

打造独具特色、足以斩获 Apple 设计大奖的 iOS 界面。这项技能可生成真正可用的 SwiftUI 代码，并以非凡的细节把控和创意选择，避免千篇一律的 AI 风格。

用户会提供 iOS 需求：需要构建的屏幕、组件、视图或界面，也可能会补充用途、受众或技术限制等背景信息。

设计思考

编写任何代码之前，先理解背景，并确定一个大胆的美学方向：

  1. 用途：这个界面要解决什么问题？谁会使用它？
  2. 调性：选择一个方向：平静／宁谧、俏皮／活力、高端／精致、实用／专注、编辑／杂志、粗野／原始、温暖／自然、冷峻／技术。坚定贯彻。
  3. 灵感：哪些 Apple 应用树立了标杆？（Weather、Health、Fitness、Notes、Apple TV、Journal）
  4. 差异化：如何让它令人难忘？用户会记住哪一点？
  5. 玻璃设计理念：玻璃是用来衬托内容，还是会喧宾夺主？

重要：选择清晰的概念方向，并精准地贯彻。大胆繁复与精致极简都可行——关键在于意图明确，而非强度大小。

然后实现可用的 SwiftUI 代码，要求：

  • 达到生产级水准且功能完整
  • 视觉出众、令人难忘
  • 风格统一，审美立场明确
  • 每个细节都经过细致打磨

应避免的反模式

以下是 AI 生成的 iOS 设计千篇一律的典型特征。务必避免：

反模式问题所在应采用的做法
乏味的纯色背景缺乏层次感和氛围使用渐变、细腻纹理或叠加色彩
到处使用系统字体缺乏字体设计意图建立明确的层级，考虑使用展示字体
千篇一律的标签栏缺乏个性自定义样式，使用有意义的图标
紫色／靛蓝渐变典型的 AI 垃圾风格选择鲜明且契合情境的配色
平淡无趣的交互缺少愉悦感加入触觉反馈、弹簧动画和交互反馈
到处使用玻璃效果适得其反玻璃效果仅用于控件／导航层
忽略内容层玻璃效果出现在不该出现的位置玻璃衬托内容，绝不遮挡内容
泛泛的卡片布局带阴影的白色矩形使用契合情境、目的明确的容器
把表情符号当作设计元素偷懒、不专业使用 SF Symbols 或自定义资源
颜色均匀分布缺乏主见、犹豫不决以主色为主，搭配鲜明点缀色

iOS 美学指南

重点关注：

  • 排版：建立清晰的层级。使用展示字体增强视觉冲击力，合理安排字重。不要处处默认使用系统字体——要有意识地做出选择。标题可考虑使用 SF Pro Display，品牌识别可考虑使用自定义字体。
  • 色彩与主题：贯彻统一的美学风格。相比谨慎且均匀分布的配色，以主色为核心、搭配鲜明点缀色更出色。深色模式通常更容易打造独特效果。先设计深色模式，再适配浅色模式。
  • 动效：弹簧／弹跳动画是新的默认选择。在状态之间平滑变形，而不是直接切换。为每个有意义的交互加入触觉反馈。使用 .bouncy，而非 .easeInOut。
  • 空间构图：有意识地安排间距（8pt 网格）。需要时留出呼吸空间，合适时则增加信息密度。使用与设备硬件相呼应的同心圆角。
  • 背景与层次：营造氛围。使用渐变、细腻的层次和径向光晕。除非刻意追求极简效果，否则不要使用纯白背景。

三项原则

原则描述
层级控件浮于内容之上。玻璃衬托内容，绝不遮挡。内容为王。
和谐软件设计与硬件相协调。圆角相呼应，手势流畅自然。
一致性在 iPhone、iPad 和 Mac 之间灵活适配。保持统一的品牌识别，并根据情境灵活呈现。

必读内容

在开始实现之前，请阅读共享的 Liquid Glass 参考资料，了解 API 模式：

skills/ios-liquid-glass/ - Liquid Glass 核心 API、代码模式、导航模式、动画理念、触觉反馈

这份参考资料包含技术实现细节。本技能提供美学愿景；参考资料提供代码模式。

有表现力的字体

不要所有内容都默认使用系统字体。创建字体层级：

// Display fonts for headers
Text("Dashboard")
    .font(.largeTitle.bold())
    .foregroundStyle(.primary)

// Secondary information
Text("Last updated 5 min ago")
    .font(.subheadline)
    .foregroundStyle(.secondary)

// Consider custom fonts for brand identity
Text("Premium")
    .font(.custom("PlayfairDisplay-Bold", size: 32))
字体建议
用例选项
展示SF Pro Display、New York、自定义衬线字体
正文SF Pro Text（系统字体）、自定义无衬线字体
技术SF Mono、自定义等宽字体
编辑New York、有特色的自定义衬线字体

有意图地运用色彩

主色 + 强调色

不要平均分配色彩。选择：

  • 一种主色，定义品牌／氛围
  • 用于操作和重点内容的醒目强调色
  • 提高内容可读性的中性色基底
深色模式优先

深色模式往往能带来更鲜明的效果。先设计深色模式，再适配浅色模式。

// Semantic colors that adapt
.foregroundStyle(.primary)
.foregroundStyle(.secondary)
.background(.background)

// Accent with purpose
.tint(.accentColor)

开发循环：以屏幕截图驱动迭代

提交 UI 工作前，务必进行视觉验证。 使用截图脚本反复迭代，直到界面兼具实用性与美感。

# Screenshot simulator
xcrun simctl io booted screenshot /tmp/screenshot.png && sips --resampleHeightWidthMax 1800 /tmp/screenshot.png

迭代流程：

  1. 实现更改
  2. 对模拟器截图
  3. 批判性地评估——它值得分享吗？
  4. 如果不值得，就继续迭代——修复问题并再次截图

持续迭代，直到：

  • 你愿意自豪地截图发给朋友看
  • 它可以出现在 App Store 的精选内容中
  • 它看起来像是 Apple 营销材料的一部分

这就是我们的质量标准：值得分享、值得获奖。

质量检查清单

在确认 UI 已完成前，请检查：

  • 采用了明确的美学方向（而非千篇一律）
  • 玻璃效果仅用于导航层（不用于内容）
  • 所有有意义的交互都有触觉反馈
  • 使用弹簧／弹跳动画（而非线性动画）
  • 使用 SF Symbols（而非表情符号或随意挑选的图标）
  • 已测试并打磨深色模式
  • 字体层级清晰且经过精心设计
  • 色彩运用有目的，而非默认使用蓝色
  • 在适用的地方使用形变过渡
  • 加载状态带有动画
  • 空状态经过设计
  • 错误状态实用且样式得当
  • 尊重辅助功能设置
  • 已截图并进行视觉验证
  • 我愿意截图给别人看吗？（如果不愿意，就继续迭代）

要求

请记住：Claude 能够完成非凡的创意工作。不要满足于“能用”，要追求令人难忘。

每个界面都应具备：

  1. 鲜明的观点——明确的美学方向
  2. 用心的细节——没有任何设计是偶然的
  3. 情感共鸣——让用户有所感受
  4. 卓越的技术表现——流畅、高性能、易于访问

目标是打造一款足以角逐 Apple Design Award 的应用——一款真正经过设计，而非生成出来的应用。

相关技能

  • /ios-dev - 任何 iOS 任务都从这里开始——协调指南、正确性检查和 API 参考资料
  • /ios-design-consultant - 编码前咨询设计问题

评论

支持 Markdown