Create UI prototypes using agents in Xcode

Highlight

Xcode 的 coding agents 结合 SwiftUI Previews，让开发者用自然语言描述需求即可快速生成可交互的原型界面，并通过迭代提示词探索多种设计方向、填充真实内容、微调动画参数，最终将产出的原生 Swift 代码直接用于正式开发。

核心内容

从模糊到精准：用提示词控制设计方向

（02:56）

很多开发者第一次用 coding agent 时，会写一句很宽泛的提示词，比如”做一个管理读书会的 App”。Agent 会生成一个看似可用的界面，但问题随之而来：导航结构是随意选的，功能列表是猜的，你甚至可能被不相关的功能（比如投票或相册）困住，后续改起来越来越臃肿。

Apple 设计团队的建议是：提示词要具体到让人无法误解。

具体怎么做？

第一，明确列出你想要的功能。不要指望 agent 比你更懂你的 App。

第二，给出风格线索。比如读书会的 App，你想要咖啡店的暖色调氛围，还是纸张与精美排版的质感？

第三，要求生成多个方案。早期是探索不同方向的最佳时机，不要只拿到一个版本就开始改。

（04:48）

演讲者展示了一个改进后的提示词示例：要求生成 10 个不同风格的读书俱乐部 App 界面，每个版本都要有独立的命名和 Swift Preview。Agent 生成了包括 “Club Hub”（标签页结构）、“Cozy”（New York 字体 + 清晰分区）、“Editorial”（杂志排版风）、“Blueprint Atelier”（网格到详情页导航）等多种方案。

关键是：你可以从多个方案中挑选喜欢的元素，然后让 agent 进行”混音”。

（06:13）

演讲者的迭代路径很典型：从 “Cozy Club” 风格出发，融入 racetrack 进度可视化，再到中性外观，最后简化冗余元素。这个过程的口诀是：go wide, remix, repeat。

让界面”活”起来：填充真实内容

（07:31）

有了结构之后，下一步是让 App 看起来像真的有人在用。空白模板和松散填充的内容无法给人真实的使用感受。

Agent 可以帮你扮演”用户”的角色，生成合理的示例数据。结合你导入的真实图片，能从空洞的模板变成丰富、真实、接近实际使用场景的界面。

几个实用技巧：

要求生成多个 preview，覆盖不同内容状态
自己思考边界情况：如果没有安排会议，详情区域该怎么显示？成员列表很长时怎么处理？
确保示例内容符合目标用户的真实场景（读书俱乐部的讨论内容应该围绕书籍）
注意无界增长的界面元素：成员数量、消息长度、历史书籍列表等
要求 agent 将示例数据放在独立的可修改文件中

（09:52）

演讲者展示了几个通过真实内容发现的界面问题：超长会议描述可能覆盖书籍封面、排行榜成员过多导致滚动过长、缺少空白状态和账户管理入口。这些问题在填充真实内容之前很难预见。

微调关键交互：动画与动效调参

（11:19）

SwiftUI 的强大之处在于它不止能处理静态界面，还能构建交互、动画和转场。但这些动效参数往往分散在代码的不同位置，手动调整时需要来回切换上下文，体验很笨拙。

演讲者提出一个思路：让 agent 帮你做一个”调参面板”（tuning panel）。

SwiftUI 中常用的动画类型：

ease：缓动动画，可控制加速/减速和时长
spring：弹簧动画，可调 stiffness（刚度）、damping（阻尼）、mass（质量）三个参数

除了动画，还有这些动态元素值得调参：

friction 和 inertia：拖拽时的摩擦力和惯性，影响元素的”重量感”
device motion：利用加速度计和陀螺仪的响应，如 Wallet 中 Apple Cash 卡的虹彩视差效果
haptics：触觉反馈，如 Find My 中靠近目标时的震动提示

（13:43）

调参面板的最佳实践：

详细描述你想迭代的内容：是动画风格、弹簧曲线，还是多元素协同动画？
将动画拆分为多个 phase，建立共享词汇
调参面板不只用于动画，还可切换 App 状态、颜色、字体、视觉偏移
要求面板与主界面并排布局，在大窗口中同时显示，避免上下文切换

（15:46）

演讲者展示了一个书籍详情页转场动画的调参过程。通过并排布局的调参面板，可以独立控制 phase 1（封面到详情页的转场）和 phase 2（内容行的交错入场），实时调整 delay 和 stagger 参数，并尝试 bouncy 预设动画风格，最终找到最自然的动效组合。

核心原则：任何需要管理多种视图配置或对比不同动画参数的场景，都应该做一个调参面板，缩短反馈循环，快速找到最优解。

详细内容

Coding Agents 与 Xcode Previews 的配合

（01:21）

Xcode 中的 coding agents 允许你用自然语言描述想构建的功能，agent 直接生成代码。操作路径：点击 new conversation 按钮，描述你想要的代码变更或功能，agent 自动完成。

Xcode Previews 让你无需每次重新编译运行就能看到 UI 效果。确保 Swift 文件中有 preview view，点击 show canvas 按钮即可实时预览。

两者结合的效果：coding agents 生成代码，Previews 即时展示结果，形成快速迭代闭环。且 agent 产出的是真实原生代码，可以直接在后续开发中复用。

提示词工程：从坏例子到好例子

不好的提示词：

创建一个定期聚会的读书俱乐部管理界面

问题：agent 会随意选择布局、猜测功能，容易产生功能蔓延，界面臃肿。

改进后的提示词结构：

为读书俱乐部 App 生成 10 个不同的 UI 变体，每个变体都要有：
- 独立的命名（如 "Cozy"、"Editorial"）
- 独立的 Swift Preview
- 明确的功能列表：当前书籍展示、会议安排、成员讨论区、阅读进度
- 风格线索：温暖的书店氛围 / 杂志排版风 / 现代简洁风

关键点：

要求多个选项，不要只给一个方案
明确功能范围，避免 agent 猜测
提供风格/情绪线索
每个版本独立命名，方便后续 remix

混音（Remix）策略

（06:01）

当你从多个方案中发现了喜欢的元素，可以用类似这样的提示词让 agent 进行融合：

我喜欢这些元素：
- Cozy 版本的 New York 字体和清晰分区
- Racetrack 版本的进度可视化
- Blueprint Atelier 的网格导航

请生成新的混合方案，每个方案保留独立的 Swift Preview 和命名。

填充真实内容的提示词模板

（09:28）

为读书俱乐部 App 生成真实感的内容数据，要求：
- 覆盖以下边界情况：无会议安排、超长描述文本、大量成员、空讨论区
- 示例数据围绕书籍主题，符合真实用户场景
- 数据放在独立的可修改文件中
- 每个边界情况都有独立的 Swift Preview 和描述性命名

动画调参面板的设计

（14:11）

让 agent 生成调参面板时的提示词要点：

创建一个调参面板，用于管理转场动画：
- Phase 1：封面图片过渡到详情页
- Phase 2：内容行以交错时序入场
- 可调参数：delay、stagger 间隔、弹簧刚度、阻尼
- 使用 bouncy / smooth / snappy 预设选项
- 面板与主界面并排显示，支持在大窗口中同时查看
- 每个 phase 可以独立开关，方便单独调试

SwiftUI 中相关 API 的调用方式：

// 弹簧动画
.withAnimation(.spring(stiffness: 100, damping: 10)) {
    // 状态变更
}

// 交错动画
ForEach(Array(items.enumerated()), id: \.element.id) { index, item in
    ItemRow(item: item)
        .transition(.opacity.combined(with: .move(edge: .bottom)))
        .animation(.easeInOut.delay(Double(index) * staggerInterval), value: isVisible)
}