Create UI prototypes using agents in Xcode

Hi, I'm Sam, and I'm a prototyper on the Apple Design Team. Many of the interactions and delightful moments people love across the ecosystem are the results of relentless iteration, trial and error, and careful tuning. Because it's never been easier to produce an app, designing with intention is critical to standing out. That's where prototyping comes in. Prototyping is a process that lets you quickly try out lots of different design ideas, and it's more important than ever.

Today, I'll explain how you can use some awesome new tools in Xcode to deal with design challenges you might run into early in the development of your app...

so that you can go from an unrefined, first-pass generated interface like this, to a design that's purposeful, tailored, and distinct, like this.

I'll show you how to use agents in Xcode to find creative starting points in your development process. Then, how to bring in real content and make your app feel lived in. And lastly, I'll go through some techniques for tuning key moments and interactions in your app. Before I begin, it's important you're familiarized with two powerful features within Xcode. Let's go over them.

The first is coding agents. Coding agents enable you to bring ideas to life just by describing what you'd like to build. First, click the new conversation button, then simply express what kind of code change or what feature you would like to implement, and the agents take care of the rest.

The second is Xcode previews. Xcode previews lets you visualize and interact with your UI without having to rebuild and run it every time you make a change. To access previews, you'll first need to make sure your Swift file has a preview view specified If you don't know what that is, don't worry.

Get to Swift previews by clicking the show canvas button.

You should get your preview instantly. Combined, coding agents and Xcode previews let you supercharge the prototyping of key screens and moments that make your app feel thoughtful and delightful. Even better, because agents produce real native code, you will be in a position to carry that code forward as you go on to develop your app.

Do not delegate critical thinking to these tools. Ultimately, your task is to use your judgment to craft what you believe is the best possible experience for people who use your app. Think of coding agents as collaborators in your prototyping process to help you discover what the best experience is. Remember, you always have final say. Now, let's start with exploring UI possibilities. Suppose I'm interested in building an app to manage a book club. If you're like me, you just want to get started. With agents right in Xcode, you might be tempted to ask, "create a UI for managing a book club that meets regularly." This could generate an interesting result and quickly but the prompt is vague and it brings a few problems.

The agent generated an arbitrary layout. While it might still work, it's one of many ways of organizing an app like this.

And it also took a guess at the app features because it wasn't clearly defined in the prompt. Suppose we aren't interested in polling or a photo gallery, making it easy to get stuck or anchored on a flawed starting point. For example, we're now stuck with this arbitrary navigation element that might have made more sense with a different feature set.

By the time we've gotten the interface to display the features we do want, it could present feature creep, looking clunky and inelegant.

To avoid this, your prompts need to be much more specific. Take some time to think through the features and high-level points you want the app to have from the get-go. When it comes to your app and what problems you want it to solve, you likely have a better idea where to start than the agent does. Give stylistic cues. If you have an intuition about the mood or feeling you want your app to evoke, express those in the prompt. For example, for a book club, do you want to capture the warm atmosphere of a coffee shop and its color palette? Or do you want to highlight the feeling of paper and beautiful typography? Lastly, and most importantly, ask for multiple options. Early on is your best opportunity to evaluate and explore multiple and divergent directions. Here's an example of a better prompt. Feel free to pause here if you'd like to read it in detail.

I first ask for multiple variations I'm specific about the features I want, and I make sure that each variation gets its very own named Swift preview.

And voila! The coding agent in Xcode generated 10 different solutions following the prompt. I can click between them like so. And so on.

The coding agent generated this version with a tab structure named Club Hub. This variation, named Cozy, uses the system New York typeface and has a nice clear section for the current book title and meeting location. It also created an interesting version with a racetrack metaphor to track progress.

This one, named Editorial, has really pleasing typography too and a very clean layout.

Blueprint atelier navigates from a grid down to a detail page.

And this one... well, it was worth a shot. You're likely to find that you like different elements of the generated proposals. In those cases, follow up with a prompt that states which variations you find promising and which specific elements you would like to remix with others. It'll help you arrive at something that feels right for you. For the book club app, I'm going to start the prompt by listing my favorite features from all the generated variations. And again, I'm asking for each iteration to get its own Swift preview and its own unique name.

The agent creates some new hybrids using only the elements I expressed interest in, including the idea of a standings board and an image of the current book.

Have fun with this process. In a nutshell, go wide, remix, repeat.

So, make lots of variations and see which components or ideas inspire you. One of the greatest powers of coding agents in Xcode is their tireless ability to produce new and interesting concepts. For my book club app, I went down a path of refinement, going from this design inspired by the Cozy Club variation, to this one that integrated the racetrack visual...

to this one that took a neutral appearance... to this one that simplified and reduced redundancy. I think this is a good direction for iteration.

Now that I have a better sense of how I want the app to be structured, I can move into its interactivity and further refinements. To start this, I'll go on to making your app feel lived in by bringing real content. Early on in the development of your app, it's a great idea to let different people try it and give you feedback to guide your process of refinement. For some kinds of apps and interfaces though you still might be a ways off from having it in a state where people can try it with their own content.

Fortunately, the agent can help play the role of somebody using your app so you can get an impression of what your app feels like when it's lived in Combined with images that you can bring in, an agent can get you from this kind of blank template, only loosely filled with content, to something rich, lived in, and closer to real use.

Here are some prompting tips when working through how to make your app feel lived in. First, and this is a recurring theme, ask for not just one preview, but many previews. Second, stop and think through edge cases yourself. For example, in my app, how does the detail area look if no meeting has been scheduled yet? Try to be specific about what parts of the interface state should be iterated, minimizing the risk that the agent overlooks something. Make sure that there's enough context that the sample content is plausible for your app's audience. In this case, that means I need to make sure that the sample app content, such as the discussions, center around books.

Pay attention to interface elements that can grow unbounded: the number of members in the club, the length of the message conversations, the number of previous books, and so on... It might also include things like long input. Is it appropriate for the text to truncate? Or to take multiple lines? If applicable, ask the coding agent to make sure that the example content it is authoring is reusable and readable in its own file so that you can go in and make changes if you need to. Here's an example prompt I might use. I ensure that I specify concretely the edge cases I can imagine.

Make sure that these sample models are easy to go in and modify, as well as can be reused in future prototypes..

and lastly, that each variation gets its own Swift preview and has a descriptive name that I can refer to when I revise.

Here's what Xcode presents. Each variation gets its own tab, so I can quickly switch between them.

In this example, I notice I don't have any real blank slate UI, no way of specifying a new book or even to manage my account. I address that by adding account management and call-to-action controls. In this variation, I noticed that really long next meeting descriptions might overrun the book cover. I address that by allowing truncation. In fact, I realize the title of the book is redundant with its cover, so I simplify it.

Here I notice that the leaderboard, when there are too many participants, gets way too long, and it takes a long time to scroll to see the discussion. Instead, I can simply ensure that somebody can always see what their relative rank is, and with an expand control, see the full list.

After seeing the UI respond to all of these wonderful book covers, I'm inspired to try having the view adapt to their colors in the detail page. These are just some examples of how bringing in real content to your interface can help you better understand how people might experience your app. Remember, nothing beats real-world use in getting feedback from people who actually use and try your app. But this is an excellent way to get a head start on the feedback stage of your prototyping process. Now I'll focus on tuning those key moments of animation and interaction. So far, I've explained how agents in Xcode can help you iterate over the static elements of an interface, like navigation, controls. type, and color. However, Swift UI gives you the power to go beyond the static and into the world of interaction, animation, and transitions. These can be a little harder to get right, so I'll show you a couple of common animation styles and techniques that can help you tune those key moments in your app perfectly. The first animation style is ease. In this animation style, an object either gently accelerates, decelerates or does both. You get to choose how long the animation takes.

Spring, as the name suggests, mimics the characteristic motion of an object attracted by a spring force. These have three parameters you can tune: stiffness, damping, and mass.

Outside of animation, there are other dynamic elements you might run into with your UI. How much perceived weight should a given element have if someone is dragging it around and interacting with it? That's friction and inertia. Let's take a look.

In this example for Music, I perceive a weight when I close this sheet.

Device motion. How does your app respond to device motion from sensors like the accelerometer and gyroscope? Such as in Wallet, where my Apple Cash card exhibits this iridescent parallax effect.

Or haptics? How does your app employ haptics to communicate key moments or special modes, such as the use of haptics in Find My to indicate that I'm getting closer to the object I'm trying to locate? In the app, the key moments have to do with animation, so I'm focusing on these. When I tune an animation, each value brings a slightly different feel. How can I quickly decide the values that are right for this interface? One way is to use Xcode previews to modify the relevant constants in code. This can work really well, but sometimes the constants I'm interested in live in different parts of the code, and the context switching can feel clunky. You might find it easier to create a custom UI whose job it is to help you tune those specific parameters that are relevant to your interface. Here's a simple interface to demonstrate this principle.

Here I'm just tossing an interface element at a goal to understand the different spring properties at play for this kind of interaction. A menu button brings up a tuning panel that allows me to try different parameters.

Here, Xcode can help you immensely. Instead of building the UI directly, enlist the agent to build a UI to display tunable parameters. When you ask the agent in Xcode for help with building a tuning panel for your UI, here are some best practices. Be as detailed as possible about what you want to iterate on. Are you exploring different animation styles or the specifics of spring curves? Does your animation feature multiple elements or does it feature a transition in which elements enter and leave your view hierarchy? To keep your tuning panel easy to understand, ask for the animation to be broken into phases. This also gives you and the agent a shared vocabulary about the specific parts of the animation.

For example, this animation comes in two phases. In phase one, the view transitions to the detail page. In phase two, every subsequent row of content animates in with staggered timings.

Recognize that tuning panels can be useful for a number of purposes - not just tuning animation parameters, but for swapping between app states, colors, font styles or visual offsets.

Lastly, try specifying a tuning panel layout that lays out your UI side by side on a wider window size. This will allow you to toggle your UI settings and try its effects without context switching.

For example, this layout, which creates a tuning panel that obstructs the content, looks like this when displayed in a larger window.

Now I sense there's something wrong with this transition. I suspect it has something to do with the delays and staggered entrance timings. Let's tune it perfectly. Here's an example prompt to use. In the overview, I specify I want a tuning panel to manage an animation. I specify the animation's phases.

I specify what parameters and options I'm interested in, and I make sure the preview can be displayed side by side against the UI instead of in a clunky modal.

The agent gives me a view that I can toggle, as in the spring example, but that's clunky, and my view is obstructed. However, by clicking this resize control, I can tune my transition on a larger canvas.

Now I can comfortably dial in the animation without having to jump back and forth between a tuning panel and the UI. I have created individual controls that allow me to inspect a given phase of the animation in isolation.

I can quickly get an understanding of how these different parameters affect my animation.

I think I need to decrease the values related to the delay and staggered entrances.

Let's also try using the bouncy preset animation style.

Okay, this is feeling really great. The sequence of animations that trigger after the book cover transitions feels smooth and delightful. Let's look at it again.

This is one of the most powerful flows in prototyping with coding agents in Xcode. Anytime you're trying to manage multiple configurations of a view or deciding between different animation or interaction parameters, make a tuning panel, shorten the feedback loop, and get to what feels optimal for your app.

I've covered a lot today. The big theme is not to think about agents as designers, but as collaborators to help you arrive at the best possible experience for your app.

I'm sure you'll think of even more creative ways to bring coding agents to your process. To learn more, watch the video "Xcode, agents, and you." Remember, these tools are ultimately here to help you find the best experiences for people who use your app. The key piece of the puzzle is your judgment. Thank you.