Create UI prototypes using agents in Xcode
Xcode & Developer Tools 进阶 18m

使用 Xcode 中的智能体创建 UI 原型

Create UI prototypes using agents in Xcode

2026年6月10日

在 Apple 官方观看视频

一句话判断

这场 Session 最值得关注的一件事是：Apple 终于承认 AI 直接生成的 UI 通常是垃圾，并手把手教你如何用“多变体对比”和“实时调试面板”把 Xcode Agent 从盲盒玩具驯化成可控的设计工具。

这场 Session 讲了什么

以前我们在 Xcode 里用 AI 写界面，最头疼的就是它总喜欢自作主张。你让它写个“读书会 App”，它能给你塞进投票、相册甚至奇怪的自定义导航栏，代码臃肿得没法看。

现在 Apple 调整了思路，把 Coding agents (智能体) 和 Xcode Previews (预览) 深度绑定。他们不再鼓励你一句话生成整个 App，而是教你用精准的 Prompt (提示词) 让 Agent 一次生成多个 UI 变体，然后你在 Preview 里像挑菜一样组合最好的部分。同时，针对动画和交互微调，Session 展示了让 Agent 直接生成带 Slider 的实时参数调整面板。

这对独立开发者和全栈工程师是个巨大利好。你不需要再为了调一个弹簧动画的阻尼系数反复等 Canvas 刷新，也不用在 Figma 和 Xcode 之间来回倒腾。把 Agent 当成给你干脏活累活的初级 UI 工程师，你只管做 Art Director (艺术总监) 拍板就行。

值得深挖的点

把 AI 从“代码生成器”逼成“设计探索器”

Apple 在 Session 里花了大篇幅讲“要求多个选项 (ask for multiple options)”，这其实点出了目前 AI 写 UI 的最大痛点：单次生成的结果极易陷入局部最优。如果你只说“做一个列表”，Agent 99% 会给你一个标准的 List 加 NavigationStack。

通过强制要求 Agent 生成 3 到 4 个不同布局或视觉风格的变体 (Variations)，你实际上是在用 AI 的算力来打破自己的思维定势。比如让 Agent 分别生成“咖啡馆温馨风”、“极简纸张风”和“赛博朋克风”的卡片。这种设计选择的 Trade-off 是增加了 Token 消耗和生成等待时间，但换来的是探索空间的指数级扩大。和以前在 Figma 里手动复制画板改颜色相比，现在你只需要在 Prompt 里加一句“给我四个不同情绪色彩的版本”，然后在 #Preview 里并排查看。这比单纯让 AI “写个好看的界面”要高效得多。

用 Tuning Panels 干掉“改参数-等编译”的死循环

调 SwiftUI 动画参数一直是个苦力活。改一下 .spring(response: 0.3, dampingFraction: 0.6)，等 Preview 重新渲染，感觉不对，再改，再等。

这场 Session 给出的解法非常极客：让 Agent 帮你写一个 Tuning panel (调整面板)。你只需要告诉 Agent：“给这个卡片的弹出动画加一个调试面板，包含 response 和 dampingFraction 的滑块”。Agent 会自动生成带有 @State 变量和 Slider 控件的悬浮 UI。这其实是把 SwiftUI 声明式 UI 的优势发挥到了极致。相比于以前用第三方库或者自己手写繁琐的调试界面，现在你可以用自然语言在 10 秒内为任何复杂的交互生成专属的控制台。唯一的坑是，别忘了在 Release 编译时把这些调试面板用 #if DEBUG 宏包起来，否则你的 App 会带着一堆滑块上架。

代码片段

1. 并排对比多个 UI 变体

场景：让 Agent 生成多个设计方案时，用一个总的 Preview 把它们并排展示，方便直观对比。

// 使用 HStack 并排展示 Agent 生成的三个不同风格的卡片变体
#Preview("UI 变体对比") {
    HStack(spacing: 20) {
        // 变体 A：极简风格
        BookCardVariantA()
        
        // 变体 B：强调图片的风格
        BookCardVariantB()
        
        // 变体 C：带数据图表的风格
        BookCardVariantC()
    }
    .padding()
    // 记得给 Preview 加上固定尺寸，防止被压缩
    .previewDevice("iPad Pro (11-inch)") 
}

坑：如果不指定 previewDevice 或者给外层加 ScrollView，并排的复杂视图很容易在默认 iPhone 尺寸下被挤压变形，导致你误判设计效果。

2. 让 Agent 生成实时动画调试面板

场景：微调复杂的弹簧动画时，让 Agent 生成一个带滑块的悬浮面板，实时拖拽看效果。

struct AnimatingCard: View {
    @State private var isExpanded = false
    // 动画参数状态，由 Agent 自动生成并绑定到 Slider
    @State private var springResponse: Double = 0.4
    @State private var dampingFraction: Double = 0.7

    var body: some View {
        ZStack(alignment: .bottom) {
            // 你的核心业务 UI
            CardContent(isExpanded: isExpanded)
                .onTapGesture { 
                    withAnimation(.spring(response: springResponse, dampingFraction: dampingFraction)) {
                        isExpanded.toggle() 
                    }
                }
            
            // Agent 生成的调试面板，记得用 #if DEBUG 包裹
            #if DEBUG
            TuningPanel(response: $springResponse, damping: $dampingFraction)
                .padding()
            #endif
        }
    }
}

坑：Agent 生成的 TuningPanel 往往会直接挡住底部的 UI。你需要提醒 Agent 把面板做成可拖拽的，或者放在屏幕边缘，否则你根本点不到下面的业务视图。

最佳实践

对于新项目，强烈建议在 Day 1 就引入 Agent 辅助原型设计。但记住一个原则：控制 Prompt 的颗粒度。不要一开始就丢一个“做一个完整的电商 App”的宏大 Prompt。先让 Agent 生成核心的“商品卡片”和“结算按钮”的多个变体，确定视觉基调后，再让它生成列表和导航。

对于已有项目，Agent 最大的价值在于“补齐边缘状态 (Edge cases)”。你可以选中现有的 View，让 Agent “生成包含超长文本、空数据、以及网络错误状态的 Preview 变体”。这能帮你提前发现 UI 在极端情况下的崩坏，比你自己手动造假数据快得多。

实战中最容易踩的坑是“功能蔓延 (Feature bloat)”。Agent 很喜欢在 Prompt 模糊时自行脑补功能（比如你让它做阅读列表，它给你加个社交分享和积分系统）。在 Prompt 里明确加上“不要添加任何我未提及的导航栏或额外功能”，能帮你省下大量删代码的时间。

还有什么值得关注

  • 真实数据填充 (Lived-in feel)：Apple 强调让 Agent 用真实的 Lorem Ipsum 或模拟的真实姓名/头像来填充 UI，这比满屏的 “Test 1, Test 2” 更能暴露排版问题。
  • 辩证看待 AI 审美：Session 明确提醒开发者，Agent 只是 Collaborator (协作者)，不要盲目接受它生成的“标准苹果风”，你的 Judgment (判断力) 才是产品脱颖而出的关键。
Xcode Agents SwiftUI Previews Prompt Engineering Prototyping