Create UI prototypes using agents in Xcode

Highlight

Xcode coding agents combined with SwiftUI Previews let developers describe requirements in natural language, quickly generate interactive UI prototypes, explore multiple design directions through iterative prompts, fill them with realistic content, fine-tune animation parameters, and carry the resulting native Swift code directly into production development.

Core Content

From Vague to Precise: Use Prompts to Control the Design Direction

(02:56)

When many developers first try a coding agent, they write a broad prompt such as “make an app for managing a book club.” The agent will generate something that looks usable, but the problems follow quickly: the navigation structure is arbitrary, the feature list is guessed, and you may even get stuck with irrelevant features like voting or photo albums. Later changes become increasingly bloated.

Apple’s design team gives a simple recommendation: make the prompt specific enough that it cannot be misunderstood.

How do you do that?

First, clearly list the features you want. Do not expect the agent to understand your app better than you do.

Second, provide style cues. For a book club app, do you want a warm coffee-shop atmosphere, or the feel of paper and refined typography?

Third, ask for multiple options. The early stage is the best time to explore different directions. Do not start refining after receiving only one version.

(04:48)

The speaker showed an improved prompt: generate 10 book club app UIs in different styles, each with its own name and Swift Preview. The agent produced options such as “Club Hub” with a tab structure, “Cozy” with the New York typeface and clear sections, “Editorial” with magazine-style layout, and “Blueprint Atelier” with grid-to-detail navigation.

The key idea is that you can choose the elements you like from multiple options, then ask the agent to remix them.

(06:13)

The speaker’s iteration path was typical: start from the “Cozy Club” style, bring in racetrack progress visualization, move toward a neutral appearance, and then simplify redundant elements. The formula is: go wide, remix, repeat.

Make the Interface Feel Alive: Fill It with Realistic Content

(07:31)

Once the structure exists, the next step is to make the app look like real people are using it. Blank templates and loosely filled placeholder content do not create an authentic product feel.

The agent can help you play the role of the user by generating plausible sample data. Combined with real images you import, a hollow template can become a rich, realistic interface that is much closer to actual use.

Useful techniques:

• Ask for multiple previews that cover different content states
• Think through edge cases yourself: if no meeting is scheduled, what should the detail area show? What happens when the member list is very long?
• Make sure sample content matches the real context of the target users; book club discussion content should be about books
• Watch for UI elements that can grow without bounds: member counts, message lengths, history lists, and so on
• Ask the agent to place sample data in a separate editable file

(09:52)

The speaker showed several interface problems discovered only after realistic content was added: a very long meeting description could cover the book cover, too many leaderboard members made scrolling excessive, and the app lacked empty states and an account-management entry point. These problems are hard to foresee before realistic content is present.

Fine-Tune Key Interactions: Animation and Motion Parameters

(11:19)

SwiftUI is powerful because it can handle not only static interfaces, but also interactions, animations, and transitions. But animation parameters are often scattered across different parts of the code. Adjusting them manually requires constant context switching and feels clumsy.

The speaker suggested a pattern: ask the agent to build a tuning panel.

Common animation types in SwiftUI:

• ease: easing animation, with controllable acceleration, deceleration, and duration
• spring: spring animation, with adjustable stiffness, damping, and mass

Beyond animation itself, these dynamic elements are also worth tuning:

• friction and inertia: drag friction and inertia, which affect how “heavy” an element feels
• device motion: responses from the accelerometer and gyroscope, such as the iridescent parallax effect of the Apple Cash card in Wallet
• haptics: tactile feedback, such as the vibration cue in Find My when approaching a target

(13:43)

Best practices for a tuning panel:

1. Describe exactly what you want to iterate: animation style, a spring curve, or coordinated animation across multiple elements.
2. Split the animation into multiple phases to create a shared vocabulary.
3. Use the tuning panel not only for animation, but also for switching app states, colors, fonts, and visual offsets.
4. Ask for the panel and the main interface to be laid out side by side, so both can be visible in a large window without context switching.

(15:46)

The speaker demonstrated tuning a transition animation for a book detail page. With a side-by-side tuning panel, they could control phase 1, the transition from cover to detail page, and phase 2, the staggered entrance of content rows. They adjusted delay and stagger parameters in real time, tried the bouncy preset animation style, and eventually found the most natural combination.

The core principle: whenever you need to manage many view configurations or compare animation parameters, build a tuning panel. It shortens the feedback loop and helps you find the best result quickly.

Details

How Coding Agents Work with Xcode Previews

(01:21)

Coding agents in Xcode let you describe the feature you want to build in natural language, and the agent generates the code directly. The flow is simple: click the new conversation button, describe the code change or feature you want, and let the agent complete it.

Xcode Previews let you see the UI without recompiling and running the app every time. Make sure the Swift file contains a preview view, then click the show canvas button to preview it live.

Together, they form a fast iteration loop: coding agents generate code, Previews show the result immediately, and the generated output is real native code that can be reused in later development.

Prompt Engineering: From a Bad Example to a Better One

Bad prompt:

Create a management interface for a book club that meets regularly.

Problem: the agent will choose a layout arbitrarily, guess the feature set, and easily create feature creep and a bloated interface.

Improved prompt structure:

Generate 10 different UI variants for a book club app. Each variant should include:
- A distinct name, such as "Cozy" or "Editorial"
- Its own Swift Preview
- A clear feature list: current book display, meeting schedule, member discussion area, reading progress
- Style cues: warm bookstore atmosphere / magazine-style layout / modern minimal style

Key points:

• Ask for multiple options, not just one
• Define the feature scope clearly so the agent does not guess
• Provide style and mood cues
• Give every version an independent name to make later remixing easier

Remix Strategy

(06:01)

When you discover elements you like across several options, you can use a prompt like this to ask the agent to combine them:

I like these elements:
- The New York typeface and clear sections from the Cozy version
- The progress visualization from the Racetrack version
- The grid navigation from Blueprint Atelier

Please generate new hybrid options. Each option should keep its own Swift Preview and name.

Prompt Template for Realistic Content

(09:28)

Generate realistic content data for the book club app, with these requirements:
- Cover these edge cases: no scheduled meetings, very long description text, many members, empty discussion area
- Keep the sample data focused on books and aligned with realistic user scenarios
- Put the data in a separate editable file
- Give each edge case its own Swift Preview and descriptive name

Designing an Animation Tuning Panel

(14:11)

Prompting points when asking the agent to generate a tuning panel:

Create a tuning panel for managing a transition animation:
- Phase 1: cover image transition to the detail page
- Phase 2: content rows enter with staggered timing
- Adjustable parameters: delay, stagger interval, spring stiffness, damping
- Use bouncy / smooth / snappy preset options
- Display the panel side by side with the main interface so both can be viewed in a large window
- Each phase can be toggled independently for isolated debugging

How the related SwiftUI APIs are called:

// Spring animation
.withAnimation(.spring(stiffness: 100, damping: 10)) {
    // State change
}

// Staggered animation
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)
}

Key points:

• .spring(stiffness:damping:) controls the physical properties of the spring
• .delay() controls the staggered entrance effect
• .combined(with:) combines multiple transition effects
• The value parameter ensures the animation only fires when the target state changes

Design Philosophy: The Agent Is a Collaborator, Not the Designer

(17:33)

The speaker repeatedly emphasized one principle: do not outsource the critical thinking to the tool. The agent is a collaborator in the prototyping process. It helps you discover the best experience, but the final judgment remains yours.

The strength of coding agents is that they can tirelessly produce new ideas. Your job is to use your own judgment to craft the best experience for your users.

Key Takeaways

1. What to do: Build a “design exploration” workflow for your next app project. First ask the agent to generate 5-10 interface options in different styles, compare them quickly, then iterate deeper. Why it is worth doing: The session shows the large gap between vague and precise prompts. Exploring multiple directions early helps you avoid getting stuck with poor design decisions later. How to start: In Xcode, open a coding agent and use “generate X different styles of [feature description] UI, each with its own Preview” as your first prompt.

2. What to do: Build an internal tuning panel for key transition animations in your app, so designers and product managers can adjust parameters directly. Why it is worth doing: The session demonstrates how a tuning panel can shrink the “edit code, compile, inspect” loop from minutes to seconds, and the resulting parameter values can be written directly back into code. How to start: Ask the agent to generate a side-by-side tuning panel, manage animation parameters with @State, and adjust .spring() and .delay() values in real time through Slider and Picker.

3. What to do: Introduce realistic content data during prototyping, covering empty states, very long content, large data sets, and other edge cases. Why it is worth doing: Several UI problems in the session, such as covers being obscured and leaderboards becoming too long, were only exposed after realistic content was added. Blank templates hide defects in real use. How to start: Ask the agent to generate a separate sample data file with extreme values and edge cases, with one Preview for each case.

4. What to do: Use agent-generated prototype code as the starting point for production development, rather than as a disposable draft. Why it is worth doing: The session explicitly notes that agents produce real native Swift code that can be carried forward, avoiding duplicate work from prototype to production. How to start: Use the real SwiftUI project structure during prototyping, keep the code clean, and periodically remove Preview variants that are no longer used.

Related Sessions

• Xcode, agents, and you — A deeper look at the full capabilities of coding agents in Xcode
• SwiftUI — The latest SwiftUI features that support interactions and animations in prototypes
• Design principles — Apple design principles that help you judge which generated ideas are worth keeping
• SwiftUI + AppKit/UIKit — A useful reference when a prototype needs to integrate with existing native code
• SwiftUI graphics — More advanced visual effects and custom drawing that can expand a prototype’s visual expression